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

@layer components {
  .oil-page {
    @apply text-[#1E3531] leading-relaxed tracking-tight;
    position: relative;
  }

  .oil-page-bg {
    position: relative;
    z-index: 0;
  }

  .oil-page-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #071916;
    background-image: linear-gradient(135deg, rgba(7, 25, 22, 0.45) 0%, rgba(7, 25, 22, 0.75) 100%),
      var(--oil-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Mobile browsers change viewport height while scrolling (URL bar collapse/expand).
     Use a fixed pixel height to avoid visible resize/zoom artifacts. */
  @media (max-width: 768px) {
    .oil-page-bg::before {
      inset: auto;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }
  }

  .oil-container {
    @apply mx-auto max-w-[1400px];
  }

  .oil-glass-card {
    @apply rounded-2xl border border-[rgba(0,163,131,0.15)] bg-white/[0.88] p-6 shadow-[0_10px_30px_rgba(0,43,35,0.15)] backdrop-blur-md md:p-[45px];
  }

  .oil-glass-card-hero {
    @apply rounded-2xl border border-white/15 bg-white/[0.18] px-4 py-8 text-center shadow-[0_10px_30px_rgba(0,20,15,0.2)] backdrop-blur sm:px-6 md:px-[60px] md:py-[50px] md:text-left;
  }

  .oil-tagline {
    @apply mb-6 inline-block rounded-[20px] bg-[rgba(0,224,180,0.15)] px-4 py-[5px] text-[0.8rem] font-black uppercase tracking-[3px] text-[#00e0b4] [text-shadow:0_1px_4px_rgba(7,25,22,0.4)] md:whitespace-nowrap md:px-[18px] md:text-[0.9rem] md:tracking-[4px];
  }

  .oil-hero-title {
    @apply mb-5 text-[2.1rem] font-black leading-[1.25] tracking-tight text-white [text-shadow:0_2px_12px_rgba(7,25,22,0.95)] md:mb-6 md:text-[3.2rem] md:leading-[1.45];
  }

  .oil-hero-highlight {
    @apply text-[1.8rem] text-[#00e0b4] md:text-[2.5rem];
  }

  .oil-hero-subtext {
    @apply mb-0 mt-5 text-center text-[1.05rem] font-semibold leading-[1.6] text-[#E2ECE9] [text-shadow:0_2px_10px_rgba(7,25,22,0.95)] md:mt-7 md:text-left md:text-[1.3rem] md:leading-[1.65];
  }

  .oil-section-title {
    @apply mb-6 text-center text-[1.8rem] font-black tracking-tight text-[#071916] md:mb-[30px] md:text-left md:text-[2.4rem];
  }

  .oil-subsection-title {
    @apply mb-3 mt-7 text-center text-[1.45rem] font-extrabold leading-snug tracking-tight text-[#00A383] first:mt-0 md:mb-[15px] md:mt-[35px] md:text-left md:text-[1.8rem];
  }

  .oil-body-text {
    @apply mb-5 text-center text-[1rem] text-[#1E3531] md:text-justify md:text-[1.05rem];
  }

  .oil-body-text-lg {
    @apply mb-6 text-center text-[1.05rem] text-[#1E3531] md:text-justify md:text-[1.15rem];
  }

  .oil-scannable-list {
    @apply mb-5 list-none;
  }

  .oil-scannable-list li {
    @apply relative mb-3 pl-6 text-left text-[1rem] text-[#1E3531] md:text-justify md:text-[1.05rem];
  }

  .oil-scannable-list li::before {
    content: "•";
    @apply absolute left-1.5 top-0 text-xl font-bold text-[#00A383];
  }

  .oil-emphasis {
    @apply font-semibold italic text-[#00A383];
  }

  .oil-page em {
    @apply font-semibold italic text-[#00A383];
  }

  .oil-table {
    @apply w-full border-collapse overflow-hidden rounded-lg text-[0.95rem] shadow-[0_4px_15px_rgba(0,40,30,0.05)];
  }

  .oil-table th {
    @apply bg-[#00A383] px-[15px] py-3 text-left font-bold text-white;
  }

  .oil-table td {
    @apply border-b border-[rgba(0,163,131,0.1)] bg-white/50 px-[15px] py-3 text-[#1E3531];
  }

  .oil-table tr:last-child td {
    @apply border-b-2 border-[#00A383];
  }

  .oil-media-cluster {
    @apply my-[25px] flex flex-col gap-[15px] rounded-xl border border-[rgba(0,163,131,0.15)] bg-white/60 p-[15px];
  }

  .oil-showcase-img {
    @apply block h-auto w-full rounded-lg shadow-[0_4px_15px_rgba(0,40,30,0.05)];
  }

  .oil-title-showcase-img {
    @apply mx-auto mt-2.5 block h-auto w-full max-w-[340px] object-contain drop-shadow-[0_10px_15px_rgba(0,40,30,0.25)] sm:max-w-[420px] md:max-w-[620px];
  }

  .oil-benefit-box {
    @apply rounded-xl border border-[rgba(0,163,131,0.15)] border-l-4 border-l-[#00A383] bg-white/50 p-[30px];
  }

  .oil-cross-sell-link {
    @apply border-b-[1.5px] border-[#00A383] font-bold text-[#00A383] no-underline transition-all duration-200 hover:border-[#071916] hover:text-[#071916];
  }

  .oil-citations-title {
    @apply mb-[25px] text-[1.1rem] font-black uppercase tracking-[1.5px] text-[#071916];
  }

  .oil-citations-list {
    @apply grid list-none grid-cols-1 gap-x-10 gap-y-[15px] text-[0.85rem] text-[#1E3531] md:grid-cols-2;
  }

  .oil-citations-list li {
    @apply pl-5 leading-relaxed;
    text-indent: -20px;
  }

  .oil-caption-text {
    @apply text-center text-[0.85rem] font-extrabold uppercase tracking-wide text-[#5A7570];
  }

  .oil-glass-card-cta {
    @apply rounded-2xl border border-white/25 bg-white/[0.18] p-6 text-center shadow-[0_15px_35px_rgba(0,20,15,0.3)] backdrop-blur-md md:p-[45px] md:text-left;
  }

  .oil-glass-card-cta h2 {
    @apply mb-6 text-[1.8rem] font-black tracking-tight text-white [text-shadow:0_2px_8px_rgba(7,25,22,0.4)] md:mb-[30px] md:text-[2.4rem];
  }

  .oil-glass-card-cta p {
    @apply mb-5 text-center text-[1rem] text-[#E2ECE9] [text-shadow:0_1px_4px_rgba(7,25,22,0.3)] md:text-justify md:text-[1.05rem];
  }

  .oil-cta-media-grid {
    @apply mt-6 grid items-center gap-6 lg:mt-[25px] lg:grid-cols-2 lg:gap-[30px];
  }

  .oil-email-field {
    @apply min-w-0 w-full flex-1 rounded-[30px] border-2 border-[rgba(0,163,131,0.15)] bg-white px-5 py-4 text-base font-semibold text-[#071916] shadow-[inset_0_2px_4px_rgba(0,40,30,0.03)] outline-none focus:border-[#00A383] focus:shadow-[0_0_0_3px_rgba(0,163,131,0.1)] md:w-auto md:px-[22px];
  }

  .oil-submit-btn {
    @apply w-full cursor-pointer rounded-[30px] border-0 bg-[#00A383] px-8 py-4 text-base font-black uppercase tracking-wide text-white transition-all duration-[250ms] hover:scale-[1.03] hover:bg-[#071916] md:w-auto md:px-[35px];
  }

  .oil-compliance-text {
    @apply max-w-[800px] text-[0.8rem] leading-relaxed text-[#D1DFDC];
  }

  .oil-compliance-text a {
    @apply font-bold text-[#00e0b4] underline hover:text-white;
  }
}

@media (max-width: 768px) {
  .oil-hero-subtext {
    text-align: center;
  }
}
/*
 * 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.
 *


 */