/* ==========================================================================
   Neptune Plumbing and Drainage Repairs
   Layout and spacing are done with Tailwind classes in the markup.
   This file only holds the bits Tailwind cannot do on its own:
   the button pair, the FAQ accordion, the hero overlay and the reveal setup.
   ========================================================================== */

:root {
  --ink: #0b2a3a;
  --ink-700: #123b50;
  --teal: #12b2ae;
  --teal-600: #0c8f8c;
  --teal-700: #0a7a78;
  --wa: #25d366;
  --wa-dark: #1ebe5b;
  --danger: #c62828;
  --header-h: 68px;
  --shadow-cta: 0 10px 22px -14px rgba(11, 42, 58, 0.7);
  --shadow-lift: 0 18px 40px -22px rgba(11, 42, 58, 0.6);
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

/* ---------------------------------------------------------------- base */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { text-wrap: balance; }

/* ---------------------------------------------------------------- type */
/* Outfit across the whole site. The system fonts after it are the fallback
   while Google Fonts is still loading, or if it never arrives. */
body,
h1, h2, h3,
.btn, .btn-header, button,
input, select, textarea,
.faq-item summary,
blockquote,
.font-display {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* Every heading on the site sits at the same weight and spacing.
   !important because the font-extrabold / tracking-tight utility classes in the
   markup would otherwise win on specificity. */
h1, h2, h3 {
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

/* Card headings: "Leak under a toilet", "Taps", "Toilets"... */
h3 { font-size: 22px !important; }

/* Body copy inside cards, the About section and the FAQ answers. */
.body-text {
  font-size: 17px;
  word-spacing: 1px;
  line-height: 1.55;
}

/* The small label above a section heading: Reviews, About, Recent work, FAQ... */
.eyebrow {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.3;
}

/* The intro line that sits under a section heading. Same everywhere. */
.section-lead {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.5;
}

blockquote, .font-display { letter-spacing: -0.02em; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: rgba(18, 178, 174, 0.25); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 999;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- buttons */
/* Same pair, same wording, every time: Tap to Call on top, WhatsApp under. */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 12px 20px;
  border: 0;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0) scale(0.99); }

.btn--call { background: var(--teal-600); color: #fff; }
.btn--call:hover { background: var(--teal-700); }
.btn--call-light { background: #fff; color: var(--ink); }
.btn--call-light:hover { background: #eef7f7; }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-dark); }
.btn--submit { background: var(--ink); color: #fff; }
.btn--submit:hover { background: var(--ink-700); }

.btn-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--teal-600);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-cta);
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.btn-header:hover { transform: translateY(-2px); background: var(--teal-700); }

@media (min-width: 900px) {
  .btn-header { min-height: 50px; padding: 0 22px; font-size: 18px; }
}

/* ---------------------------------------------------------------- header */
.site-header {
  backdrop-filter: saturate(1.6) blur(10px);
  transition: box-shadow 0.25s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 20px -14px rgba(11, 42, 58, 0.7); }

/* ---------------------------------------------------------------- hero */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(11, 42, 58, 0.82) 0%,
    rgba(11, 42, 58, 0.78) 42%,
    rgba(11, 42, 58, 0.93) 100%
  );
}

@media (min-width: 900px) {
  .hero::after {
    background: linear-gradient(
      96deg,
      rgba(11, 42, 58, 0.97) 0%,
      rgba(11, 42, 58, 0.93) 42%,
      rgba(11, 42, 58, 0.55) 70%,
      rgba(11, 42, 58, 0.34) 100%
    );
  }
}

/* ------------------------------------------------------- hero entrance */
/* Done in CSS, not GSAP, on purpose: a CSS animation always finishes, so the
   headline can never be left invisible by a script that failed to run. */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-anim { animation: heroIn 0.7s cubic-bezier(0.22, 0.7, 0.3, 1) both; }
}

/* ------------------------------------------------- faq / form columns */
/* Two columns while the callback form sits next to the FAQ. When the script
   moves the form up into the hero (desktop), the FAQ takes the full width. */
@media (min-width: 768px) {
  .faq-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
    gap: 3.5rem;
  }
  html.form-in-hero .faq-split { display: block; }
  html.form-in-hero .faq-split #callback-slot { display: none; }
}

/* ---------------------------------------------------------------- faq */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--teal-600);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.faq-icon::before { inset: 10px 2px auto 2px; height: 2.5px; }
.faq-icon::after { inset: 2px 10px 2px auto; width: 2.5px; }
.faq-item[open] .faq-icon { transform: rotate(135deg); }

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item[open] .faq-panel { grid-template-rows: 1fr; }
.faq-panel > div { overflow: hidden; }

/* ---------------------------------------------------------------- form */
.field {
  width: 100%;
  padding: 7px 16px;
  border: 2px solid rgba(11, 42, 58, 0.12);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  appearance: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field::placeholder { color: #6b8595; }
.field:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(18, 178, 174, 0.18);
}
.field.is-error { border-color: var(--danger); }

select.field {
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230b2a3a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* honeypot - a real visitor never sees this */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- media hover */
.zoom-img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
.zoom-parent:hover .zoom-img { transform: scale(1.06); }

.lift { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(18, 178, 174, 0.5); }

/* ---------------------------------------------------------------- reveal */
/* Content is visible by default. This class is only added by JS once GSAP is
   confirmed loaded, so a failed script can never leave the page blank. */
html.anim-ready [data-anim] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim-ready [data-anim] { opacity: 1 !important; transform: none !important; }
  .faq-panel { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header, .btn, .btn-header { display: none !important; }
}

/* ==========================================================================
   HERO TUNING
   Goal: the whole hero (headline, ticks, photo, buttons, callback card) sits
   inside one screen with no scrolling on a laptop. Type, photo and button
   sizes are trimmed to buy that space back.
   ========================================================================== */

/* ------------------------------------------------ type, a notch smaller */
h3 { font-size: 20px !important; }

.body-text { font-size: 16px; line-height: 1.5; }

.eyebrow { font-size: 16px; }

.section-lead { font-size: 20px; line-height: 1.45; }

.btn { min-height: 52px; font-size: 17px; }

.field { padding: 9px 15px; font-size: 16px; }

/* ------------------------------------------------ hero fills one screen */
/* From 768px up, because that is where the callback form moves into the hero
   and the two-column layout starts - tablets need the same fit as laptops. */
@media (min-width: 768px) {
  /* The header is sticky, not fixed, so it already takes its own space above
     the hero - the hero only has to fill what is left of the screen. Reserving
     the header height again here is what left the big blank strip up top. */
  .hero {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }

  /* keep whatever grid / stack the markup already has, just full width */
  .hero > * { width: 100%; }

  .hero h1 { font-size: 44px !important; line-height: 1.12 !important; }
  .hero .section-lead { font-size: 18px !important; }
  .hero .body-text { font-size: 15px; }

  /* callback card */
  .hero h2 { font-size: 26px !important; }
  .hero .field { padding: 8px 14px; font-size: 15px; }
  .hero .btn { min-height: 48px; font-size: 16px; }
}

/* ------------------------------------------------ hero photo */
/* The photo of Mark. Its height is tied to the viewport rather than fixed, so
   it gives space back on a short screen instead of pushing the call buttons
   below the fold. vh first, svh second for browsers that know it. */
/* The photo sits in a box the same width as the call / WhatsApp buttons, so it
   lines up centred over them rather than hard against the left edge.
   No border or shadow: the PNG has transparent corners, so a box round it
   shows up as a square outline. */
.hero-photo-wrap { max-width: 420px; }

.hero-photo {
  height: clamp(140px, 24vh, 280px);
  height: clamp(140px, 24svh, 280px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: cover;
  border: 0;
  box-shadow: none;
}

/* short laptop / small tablet window: the photo gives up the last bit of room
   so the WhatsApp button still lands above the fold */
@media (min-width: 768px) and (max-height: 830px) {
  .hero-photo {
    height: clamp(110px, 18vh, 190px);
    height: clamp(110px, 18svh, 190px);
  }
}

/* ------------------------------------------------ hero buttons centred */
.hero .btn {
  max-width: 420px;
  margin-inline: auto;
}

/* ==========================================================================
   HERO ON PHONES
   Client's rule: Tap to Call and Chat on WhatsApp must both be on screen
   without scrolling. Every gap in the hero is therefore sized off the
   viewport height, so the stack shrinks to fit a short phone screen.
   ========================================================================== */
@media (max-width: 767px) {
  /* .hero-inner only - the full-bleed background image lives in its own
     absolutely positioned div and must never pick up padding, or it stops
     reaching the top and bottom of the hero. */
  .hero-inner {
    padding-top: clamp(10px, 2vh, 22px);
    padding-top: clamp(10px, 2svh, 22px);
    padding-bottom: clamp(16px, 3vh, 30px);
    padding-bottom: clamp(16px, 3svh, 30px);
  }

  /* beats the mt-* utilities in the markup */
  .hero-copy > * + * {
    margin-top: clamp(8px, 1.9vh, 22px) !important;
    margin-top: clamp(8px, 1.9svh, 22px) !important;
  }

  .hero h1 { font-size: clamp(25px, 7.4vw, 34px) !important; }
  .hero .hero-lead { font-size: clamp(15px, 4.3vw, 18px); }

  .hero-points {
    gap: clamp(4px, 0.9vh, 10px) !important;
    gap: clamp(4px, 0.9svh, 10px) !important;
  }
  .hero-points li { font-size: clamp(15px, 4.2vw, 18px); }

  .hero-photo {
    height: clamp(80px, 19vh, 190px);
    height: clamp(80px, 19svh, 190px);
  }

  .hero .btn {
    min-height: clamp(44px, 7vh, 52px);
    min-height: clamp(44px, 7svh, 52px);
    font-size: 16px;
  }
}