/* ProTech brand overrides — remaps ProTec design-system tokens to the
   approved ProTech identity (navy #06294F, cyan #079DDA, orange #FF5A00)
   and Plus Jakarta Sans. Loaded after the DS styles so :root wins. */
:root {
  /* Fonts */
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;

  /* Ink → ProTech Navy */
  --ink-50:  #EAF1F8;
  --ink-100: #D2E1EF;
  --ink-200: #A9C2DA;
  --ink-300: #6E8FB0;
  --ink-400: #3E648C;
  --ink-500: #1C4A78;
  --ink-600: #0C3A66;
  --ink-700: #08315A;
  --ink-800: #06294F;
  --ink-900: #04203F;

  /* Flame → Heat Orange (action accent) */
  --flame-50:  #FFEEE4;
  --flame-100: #FFD9C4;
  --flame-200: #FFB690;
  --flame-300: #FF8F52;
  --flame-400: #FF7A33;
  --flame-500: #FF5A00;
  --flame-600: #E05000;
  --flame-700: #B84200;
  --flame-800: #8A3200;
  --flame-900: #522000;

  /* Cool → Comfort Cyan */
  --cool-50:  #E3F5FD;
  --cool-100: #BFE8FA;
  --cool-200: #8DD5F3;
  --cool-300: #4FBCEA;
  --cool-400: #2EB0E4;
  --cool-500: #079DDA;
  --cool-600: #0679AB;

  /* Surfaces & text */
  --surface-page: #F7FAFC;
  --text-strong:  #06294F;
  --text-body:    #20364C;
  --text-muted:   #5A7189;
  --text-link:       #0679AB;
  --text-link-hover: #06294F;
}

/* =====================================================================
   Mobile responsiveness
   The page is built with inline-styled React (no class hooks on most
   elements), so the rules below reach those elements via attribute
   selectors on their inline `style` string plus a few explicit class
   hooks added in the JSX (pt-topbar, pt-nav-desktop, pt-burger,
   pt-mobile-menu, pt-book-desktop, pt-hero, pt-hero-scrim).
   ===================================================================== */

/* Mobile nav affordances are hidden on desktop by default. */
.pt-burger { display: none; }
.pt-mobile-menu { display: none; }

@media (max-width: 860px) {
  /* Never let the page scroll sideways. */
  html, body { overflow-x: hidden; }

  /* Collapse every inline multi-column grid to a single stacked column. */
  #root [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Hide the horizontal "next step" connector arrows in the process band —
     they point into empty space once the steps stack vertically. */
  #root [style*="right: -16px"] { display: none !important; }

  /* Rein in the oversized display type used across hero/section headings. */
  #root h1 { font-size: 36px !important; line-height: 1.08 !important; }
  #root h2 { font-size: 27px !important; line-height: 1.14 !important; }

  /* Tighten the 1200px content wrapper's side padding (siteWrap). */
  #root [style*="max-width: 1200px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Trim the very tall vertical section padding a little on phones. */
  #root [style*="padding: 90px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  #root [style*="padding: 84px"] { padding-top: 54px !important; padding-bottom: 54px !important; }
  #root [style*="padding: 76px"] { padding-top: 52px !important; padding-bottom: 52px !important; }

  /* ---- Header ---- */
  .pt-topbar { display: none !important; }          /* email/phone/socials strip */
  .pt-nav-desktop { display: none !important; }      /* inline desktop nav links */
  .pt-book-desktop { display: none !important; }     /* header "Book service" button */
  .pt-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-subtle, #dbe4ee);
    border-radius: 10px;
    background: #fff;
    color: var(--ink-900);
    cursor: pointer;
    flex-shrink: 0;
  }
  .pt-mobile-menu { display: block; }

  /* ---- Hero ---- */
  /* Give hero copy a solid backing so it stays legible over the photo. */
  .pt-hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(247, 250, 252, 0.97) 0%,
      rgba(247, 250, 252, 0.92) 55%,
      rgba(247, 250, 252, 0.78) 100%
    ) !important;
  }
  .pt-hero.pt-hero-dark .pt-hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(4, 32, 63, 0.94) 0%,
      rgba(4, 32, 63, 0.86) 55%,
      rgba(4, 32, 63, 0.66) 100%
    ) !important;
  }
  /* Hide floating badges (SpecChip / GoogleCard) and decorative SVGs that
     overlap the copy on narrow screens. The full-bleed gradient (inset:0)
     and the content wrapper (position:relative) are intentionally spared. */
  .pt-hero > div[style*="position: absolute"]:not([style*="inset"]) { display: none !important; }
  .pt-hero > svg { display: none !important; }
  /* Shrink hero vertical padding on phones. */
  .pt-hero > div[style*="position: relative"] { padding-top: 56px !important; padding-bottom: 56px !important; }
}

@media (max-width: 480px) {
  #root h1 { font-size: 31px !important; }
  #root h2 { font-size: 24px !important; }
}