@tailwind base;
@tailwind components;
@tailwind utilities;

/*
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}
*/

body {
  @apply flex flex-col bg-slate-100 text-slate-950;
  min-height: 100dvh;
  font-family: 'San Francisco Pro', 'Inter', sans-serif;  
}

.fade-in {
  opacity: 0;
  -webkit-animation: fadeIn 3s forwards;
  animation: fadeIn 1s forwards;
  transform: scale(0.98);
  animation: fadeInZoom 2s forwards;
}

@keyframes fadeInZoom {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.dev_env {
  @apply fixed bottom-0 left-0 z-50 py-2 px-3 text-xs text-white bg-red-500 rounded-tr-sm;

  &::after {
    content: '';
    @apply border-b-4 border-red-500;
    @apply fixed bottom-0 left-0 right-0 w-full;
  }
}

.title-heading {
  @apply text-orange-700 font-bold text-sm tracking-widest uppercase;

  &:after {
    content: "—";
    @apply mr-2;
  }

  &:after {
    content: "—";
  @apply ml-2;
  }
}

.footer {
  @apply bg-gradient-to-r from-slate-950 to-slate-800;
}

.hero {
  background-color: black;
  @apply bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-slate-900 via-blue-700 to-slate-950 pt-24 lg:pt-0;
  background-size: 400% 400%;
  animation: gradient 20s ease infinite;
   -webkit-animation: gradient 20s ease infinite;
  z-index: -1;
  overflow: hidden;
  @apply flex flex-col;

  &::after {
    content: "";
    background-image: url(https://divetemp.com/assets/heroBackground_v3-c90336ec4312c4715862319d386dc71102deacc1ebe9c0b1fe2ddb540cc6e57a.jpg);
    background-size: cover;
    background-position: center bottom;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
  
  .background {
    overflow: hidden;
  }

  .water {
    background-image: url(https://divetemp.com/assets/heroBackground_v3-c90336ec4312c4715862319d386dc71102deacc1ebe9c0b1fe2ddb540cc6e57a.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
  }
  
  .background .water {
    filter: url("#turbulence");
  }  
}

.temp {
  @apply relative;
}

.temp span {
  @apply text-white/80 tracking-wider absolute top-[5vw] sm:top-[3vw] lg:top-[2vw] ml-4;
  @apply text-[3rem] lg:text-[3vw];
} 

.font-serif {
  font-family: "EB Garamond", serif;
}

.title {
  @apply tracking-tight text-[10rem] lg:text-[10vw];
}

.sub-title {
  @apply tracking-tight;
  @apply text-[3rem] lg:text-[3vw];
}

.icon {
  filter: brightness(0) saturate(100%) invert(21%) sepia(77%) saturate(1121%) hue-rotate(201deg) brightness(102%) contrast(88%);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
textarea,
select {
  @apply block w-full px-3 py-2 border border-gray-300 bg-white rounded shadow focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm disabled:bg-slate-100 disabled:text-slate-400 placeholder:text-gray-400;

  &.input-error {
    @apply border-red-300 bg-white focus:ring-red-500 focus:border-red-500 text-red-600;

    &:focus {
      @apply ring-red-500 border-red-300;
    }
  }
}

input[type=checkbox][disabled]{
  @apply bg-slate-200 border-slate-300 !important;
}

.button--base {
  @apply transition-all	ease-in-out duration-100;
  @apply inline-flex items-center justify-center px-3 py-1.5 border text-sm font-medium rounded shadow focus:outline-none focus:ring-2 focus:ring-offset-2;
  @apply disabled:bg-slate-100 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed hover:disabled:bg-slate-100;
}

.button-sm--base {
  @apply inline-flex items-center justify-center px-2 py-0.5 border text-sm font-medium rounded shadow focus:outline-none focus:ring-2 focus:ring-offset-2;
  @apply disabled:bg-slate-100 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed hover:disabled:bg-slate-100;
}

.button-primary {
  @apply button--base;
  @apply text-white border-blue-700 bg-blue-600 hover:bg-blue-700 hover:text-blue-100 focus:ring-blue-500;
}

.button-secondary {
  @apply button--base;
  @apply text-blue-600 bg-blue-50 hover:bg-blue-100 focus:ring-blue-500 border-blue-300;
}

.button-primary--danger {
  @apply button--base;
  @apply text-white bg-red-600 hover:bg-red-700 hover:text-red-100 focus:ring-red-500;
}

.button-secondary--danger {
  @apply button--base;
  @apply text-red-600 bg-red-50 hover:bg-red-100 focus:ring-red-500 border-red-300;
}

.button-tertiary {
  @apply button--base;
  @apply text-blue-600 bg-none hover:bg-blue-50 focus:ring-blue-500 border-transparent shadow-none outline-none;
}

.button-tertiary--danger {
  @apply button--base;
  @apply text-red-600 bg-none hover:bg-none focus:ring-red-500 border-transparent shadow-none outline-none;
}

.button-primary-sm {
  @apply button-sm--base;
  @apply text-white bg-blue-600 hover:bg-blue-700 hover:text-blue-100 focus:ring-blue-500;
}

.button-secondary-sm {
  @apply button-sm--base;
  @apply text-blue-600 bg-blue-50 hover:bg-blue-100 focus:ring-blue-500 border-blue-300;
}

.button-primary-sm--danger {
  @apply button-sm--base;
  @apply text-white bg-red-600 hover:bg-red-700 hover:text-red-100 focus:ring-red-500;
}

.button-secondary-sm--danger {
  @apply button-sm--base;
  @apply text-red-600 bg-red-50 hover:bg-red-100 focus:ring-red-500 border-red-300;
}

.button-tertiary-sm--danger {
  @apply button-sm--base;
  @apply text-red-600 bg-none hover:bg-none focus:ring-red-500 border-transparent shadow-none outline-none;
}

.button--base:disabled,
.button-sm--base:disabled {
  @apply cursor-not-allowed text-slate-500 hover:text-slate-500 bg-slate-100 border-slate-200;
}

.button-group {
  @apply flex;

  button {
    @apply rounded-none border-slate-300 bg-white hover:bg-slate-100 text-slate-700 [text-shadow:_0_1px_0_rgb(255_255_255_/_40%)];
  }

  button:first-child {
    @apply rounded-l-md;
  }

  button:last-child {
    @apply rounded-r-md;
  }

  button:not(:first-child) {
    @apply -ml-px;
  }
}

a {
  @apply text-blue-700 hover:text-blue-500 focus:outline-none transition-colors duration-75 ease-linear;
}

#nav a {
  @apply text-sm text-white/80 hover:text-blue-500 focus:outline-none transition-colors duration-75 ease-linear;

  &:hover {
    @apply text-white;
  }
}

.mobile-menu {
  @apply absolute top-[60px] right-[10px] z-50 rounded bg-gradient-to-r from-slate-950/90 to-slate-900/90 text-white shadow-xl border border-slate-700/50 p-2;
  @apply transition-all duration-100 ease-in-out;


  li {
    @apply w-full text-center border-b border-slate-700/50;

    &:last-child {
      @apply border-none;
    }
  }

  a {
    @apply flex flex-col text-[16px] text-center opacity-60 hover:opacity-100 text-white hover:text-white transition-all ease-in-out duration-100 px-2 py-4 hover:bg-white/5;

    svg {
      @apply w-6 h-6 mx-auto;
    }

    &.active {
      @apply opacity-100 bg-white/5;
    }

    &:hover {
      @apply opacity-100;
    }
  }
}

.sub-nav {
  @apply bg-gray-100 flex items-center gap-3 p-4;
}

.notice {
  @apply px-6 p-3 rounded-full;
  @apply transition-all duration-100 mb-6 text-center min-w-[300px] cursor-pointer;
  
}

.notice--success {
  @apply notice;
  @apply bg-emerald-500 text-white;
  animation: slideUp 0.5s ease-out forwards;
  @apply fixed left-[50%] top-10;
}

.notice--alert {
  @apply notice;
  @apply bg-red-500 text-white;
  animation: slideUp 0.5s ease-out forwards;
  @apply fixed left-[50%] top-10;
}

@keyframes slideUp {
  from {
    transform: translateY(100%) translateX(-50%);
    opacity: 0;
  }
  50% {
    transform: translateY(-12%) translateX(-50%);
    opacity: 1;
  }
  80% {
    transform: translateY(2%) translateX(-50%);
    opacity: 1;
  }
  to {
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
}
label {
  @apply text-gray-800 mb-1 inline-block text-sm font-bold;
}

.card {
  @apply w-full items-center border border-gray-300 bg-white hover:border-gray-400 ease-in duration-100 shadow p-3 rounded;
  @apply transition-colors;
}

table thead th {
  @apply text-left text-blue-600 pr-2 font-bold;
}

.field {
  @apply flex flex-col mb-3;
}

.devise-links a + a {
  @apply ml-3;
}
  
@keyframes gradient {
  0% {
    background-position: 50% 10%;
  }
  50% {
    background-position: 25% 100%;
  }
  100% {
    background-position: 50% 10%;
  }
}

.pagy-nav.pagination {
  @apply flex items-center -space-x-px rounded-md shadow;
}

.page {
  @apply border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 hover:border-blue-300 hover:bg-blue-200 hover:z-20 focus:z-20;
}

.page:first-child a, .page:first-child {
  @apply rounded-l-md;
}
.page:last-child a, .page:last-child {
  @apply rounded-r-md;
}

.page.active, .page.active a {
  @apply z-10 border-blue-700 bg-blue-600 text-white;
}

.page.next.disabled a, .page.prev.disabled a, .page.next.disabled, .page.prev.disabled {
  @apply text-slate-300 bg-slate-100 hover:border-slate-300 hover:bg-slate-200 hover:z-0;
}

.page a, .page.gap {
  @apply relative inline-flex items-center px-3 py-2;
}

.title-degree:after {
  content: "°";
  position: absolute;
} 

.forecast {
  @apply relative;
}

.fade-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 15px;
  @apply bg-gradient-to-r from-transparent to-slate-50 z-10;

}
.fade-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 15px;
  @apply bg-gradient-to-r from-slate-50 to-transparent z-10;

}


.deg-transition {
  opacity: 0;
  transform: translateX(-10px);
  animation: fadeInRight 2s forwards 0s;
}

@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(10px);
  }
}

.body-copy {
  p + p {
    @apply mt-4;
  }  
}

br {
  content: '';
  display: block;
  @apply my-2;
}

#hamburger .line {
  @apply fill-white;
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth animations */
  transform-origin: center; /* Ensures rotation from the center */
}

#hamburger.active .line:nth-child(1) {
  transform: rotate(45deg) translate(2px, 1rem);
}

#hamburger.active .line:nth-child(2) {
  opacity: 0; /* Fade out the middle line */
}

#hamburger.active .line:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -1.2rem);
}

.cf-turnstile {
  @apply w-full;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */