/* ============================================================
   Omnia HST brand overrides — maroon (#660000) + gold (#8f8864)
   Loaded AFTER themes.css so it re-skins the default light theme
   to the Omnia palette. Full design pass happens in Phase 2.
   ============================================================ */
:root,
[data-theme="light-professional"] {
    --c-brand:        #660000;
    --c-brand-2:      #8a1f1f;
    --c-accent:       #8f8864;
    --c-accent-hover: #660000;

    --nav-link-hover-bg:   rgba(102, 0, 0, 0.08);
    --nav-link-hover-text: #660000;
    --brand-glow:          drop-shadow(0 4px 14px rgba(102, 0, 0, 0.18));

    --hero-glow:
        radial-gradient(48% 60% at 14% 35%, rgba(255,255,255,0.45), transparent 65%),
        radial-gradient(40% 55% at 88% 70%, rgba(102,0,0,0.10), transparent 70%);
    --hero-eyebrow-text:   #660000;
    --hero-card-ring:      rgba(102, 0, 0, 0.10);
    --hero-card-phone:     #660000;
}

/* Brand headline font — Playfair Display for that premium, non-cookie-cutter feel */
h1, h2, .nav-brand, .hero-headline, .section-head h2 {
    font-family: "Playfair Display", Georgia, serif;
}

/* Dispatch / Customer Portal link in the nav — distinct outline pill */
.nav-portal {
    border: 1.5px solid var(--c-accent);
    color: var(--c-brand) !important;
    border-radius: 999px;
    padding: .35rem .85rem !important;
    font-weight: 700;
}
/* Hover/focus: .nav-links a:hover in site.css is more specific than
   .nav-portal:hover (0,2,1 > 0,2,0) and uses the `background:` shorthand,
   which paints a faint maroon over our gold fill and combined with the white
   text (forced via !important here) leaves the label unreadable. Match the
   specificity by qualifying with .nav-links a.nav-portal so our gold fill
   actually wins. */
.nav-links a.nav-portal:hover,
.nav-links a.nav-portal:focus,
.nav-portal:hover,
.nav-portal:focus {
    background: var(--c-accent) !important;
    color: #fff !important;
    border-color: var(--c-accent);
}

.topbar-phones { display: inline-flex; gap: 1.1rem; flex-wrap: wrap; }

/* ============================================================
   Body prose: first-line indent on paragraphs + a drop cap on the
   opening paragraph of long-form blocks (.prose, blog post bodies,
   the owner bio). UI text, cards, and centered intros are untouched.
   ============================================================ */
.prose p, .post-body p, .owner-body p { text-indent: 1.5em; }
/* The opening paragraph carries the drop cap, so it starts flush. CTA
   paragraphs (buttons) and the first paragraph never indent. */
.prose > p:first-of-type,
.post-body > p:first-of-type,
.owner-body > p:first-of-type,
.prose p:has(.btn),
.post-body p:has(.btn),
.owner-body p:has(.btn) { text-indent: 0; }
.prose > p:first-of-type::first-letter,
.post-body > p:first-of-type::first-letter,
.owner-body > p:first-of-type::first-letter {
  float: left;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 3.1em;
  line-height: .82;
  margin: .04em .12em -.02em 0;
  color: inherit;   /* match the paragraph's own text color */
}

/* ============================================================
   About - "Meet the Owner": portrait floats right, the story text
   wraps cleanly around it. Stacks (portrait on top, centered) on phones.
   ============================================================ */
.owner-body { font-size: 1.05rem; line-height: 1.75; }
.owner-body p { color: var(--text-muted); margin: 0 0 1.05rem; }
.owner-portrait {
  float: right;
  width: 300px;
  max-width: 40%;
  margin: .2rem 0 1rem 1.8rem;
  border-radius: 16px;
  border: 3px solid var(--c-accent);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
  shape-outside: margin-box;
}
.owner-body::after { content: ""; display: block; clear: both; }
@media (max-width: 600px) {
  .owner-portrait {
    float: none;
    display: block;
    width: 200px;
    max-width: 64%;
    margin: 0 auto 1.4rem;
  }
}

/* ============================================================
   Mobile header: keep it simple. The utility topbar (hours + the two
   phone numbers) is hidden once the nav collapses to a hamburger (960px) -
   on mobile the header is just logo (left) + hamburger (right). The hours
   move into the hero, on their own line right above the phone buttons,
   and the phone buttons go full-width for easy tapping.
   ============================================================ */
.hero-hours { display: none; }
@media (max-width: 960px) {
    .topbar { display: none !important; }
    .hero-omnia .hero-hours {
        display: block;
        width: 100%;
        margin: .3rem 0 .1rem;
        color: #fff;
        font-weight: 600;
        font-size: .95rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    }
    .hero-omnia .cta-row .btn-ghost { width: 100%; justify-content: center; }

    /* Hamburger contrast: the nav panel can be light (default pages) or maroon
       (home, set via the editor), so a fixed color can't read on all of them.
       A white glyph on a translucent dark rounded chip darkens whatever is
       behind it, so the icon stays high-contrast on ANY header background. */
    .nav .nav-toggle {
        color: #fff !important;
        background: rgba(18, 6, 6, 0.48) !important;
        border: 1px solid rgba(255, 255, 255, 0.42) !important;
        border-radius: 10px !important;
        padding: .26em .44em !important;
        line-height: 1 !important;
    }
    .nav .nav-toggle:hover,
    .nav .nav-toggle:focus-visible {
        background: rgba(18, 6, 6, 0.66) !important;
    }

    /* Pretty, on-brand mobile dropdown - matches the maroon header + gold accents
       instead of the plain light panel. White links, gold hover/active, indented
       sub-items on a darker inset, a standout gold call button. */
    .nav.is-open .nav-links {
        background: linear-gradient(180deg, #660000 0%, #4a0000 100%) !important;
        border-top: 1px solid rgba(255, 255, 255, .16) !important;
        box-shadow: 0 22px 44px rgba(0, 0, 0, .40) !important;
        padding: .6rem .7rem 1rem !important;
        gap: .12rem !important;
        animation: omniaMenuIn .26s ease both;
    }
    .nav.is-open .nav-links a {
        color: #fff !important;
        padding: .85em 1em !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
    }
    .nav.is-open .nav-links a:hover,
    .nav.is-open .nav-links a:focus,
    .nav.is-open .nav-links a.is-active {
        background: rgba(255, 255, 255, .12) !important;
        color: var(--c-accent) !important;
    }
    .nav.is-open .nav-links .has-sub > a::after { color: var(--c-accent); }
    .nav.is-open .nav-links .sub {
        background: rgba(0, 0, 0, .22) !important;
        border-radius: 10px !important;
        margin: .1rem .15rem .4rem !important;
        padding: .2rem .35rem !important;
        border: none !important;
    }
    .nav.is-open .nav-links .sub a {
        color: rgba(255, 255, 255, .9) !important;
        font-weight: 500 !important;
        font-size: .94rem !important;
        padding: .6em 1em !important;
    }
    .nav.is-open .nav-links .nav-portal {
        border: 1px solid rgba(255, 255, 255, .45) !important;
        text-align: center;
        margin-top: .45rem;
    }
    .nav.is-open .nav-links .nav-cta {
        background: var(--c-accent) !important;
        color: #1a1208 !important;
        text-align: center;
        justify-content: center;
        margin-top: .5rem;
    }
}
@keyframes omniaMenuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Contrast + spacing refinements
   ============================================================ */

/* Interior page heroes set their own maroon gradient inline. The default
   .page-hero::before paints a light overlay on top, washing out the white
   text. Remove it so the maroon shows and text stays high-contrast. */
.page-hero::before { display: none !important; }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: rgba(255,255,255,.82); }

/* Tighter vertical rhythm — panels sit closer together. */
main > section { padding-top: 1.9rem !important; padding-bottom: 1.9rem !important; }
main > section.trust-strip { padding-top: .7rem !important; padding-bottom: .7rem !important; }
.hero-omnia, .page-hero { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.jp-panel { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }

/* ============================================================
   Mobile: tighter, more symmetrical
   ============================================================ */
@media (max-width: 780px) {
  /* Two-column inline layouts (hero, service/city body, contact) stack cleanly */
  main .container[style*="grid"], .contact-grid { grid-template-columns: 1fr !important; }
  .hero-omnia > .container { text-align: center; }
  .hero-omnia .cta-row, .hero-omnia .lead { margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  /* App-style mobile rhythm — tighter sections, smaller heads, no airy gaps */
  main > section { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
  .hero-omnia, .page-hero { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }

  /* Hero panel: kill the GIANT headline + slim the card padding */
  .hero-omnia .container { gap: 1rem !important; }
  .hero-card  { padding: 1rem 1rem !important; border-radius: 14px !important; }
  .hero-logo  img { max-width: 170px !important; }
  /* Inline font-size on h1.hero-headline beats class-only rules, so target the
     inline-style version with attribute selector + !important. */
  .hero-headline, h1.hero-headline,
  h1.hero-headline[style] { font-size: clamp(1.55rem, 7vw, 2.2rem) !important; line-height: 1.08 !important; }
  .hero-omnia .lead { font-size: 1rem !important; }
  .hero-omnia .cta-row .btn { padding: .55em .9em; font-size: .9rem; }

  /* Section heads everywhere shrink down — no more billboard headlines */
  main > section h2,
  main > section h2[style] { font-size: clamp(1.25rem, 5vw, 1.7rem) !important; line-height: 1.18 !important; margin-bottom: .55rem !important; }
  main > section h3 { font-size: 1.05rem !important; }
  main > section .lead,
  main > section .lead[style] { font-size: .98rem !important; }

  /* Trust strip — tight horizontal scroll instead of a tall stack */
  .trust-strip { padding: .55rem 0 !important; }
  .trust-strip .ts-pill { font-size: .8rem; padding: .25em .6em; }

  /* Symmetrical 2-up footer, centered, space-saving */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.2rem 1rem !important;
    margin-bottom: 1.4rem !important;
    text-align: center;
  }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .site-footer .nav-brand { display: inline-block; }
  .footer-grid a { padding: .2em 0; }
  .footer-bottom { text-align: center; gap: .4rem; }
}

/* ============================================================
   Inverted "INTRO band" — burgundy background, white copy.
   Used as a visual break between the hero and the service grid so
   the page reads as alternating bands instead of one long scroll.
   ============================================================ */
.intro-band {
  background: linear-gradient(135deg, var(--c-brand) 0%, #4a0000 100%);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.intro-band h2,
.intro-band p,
.intro-band .lead { color: #fff !important; }
.intro-band .eyebrow { color: var(--c-accent) !important; }

/* ============================================================
   Sticky mobile call bar — both buttons in burgundy, equal width,
   side-by-side, tighter padding so it doesn't dominate the screen.
   The "Most jobs in 24-48 hrs" meta line is hidden under 600px
   because there isn't room for it once the buttons sit at usable
   tap-target widths.
   ============================================================ */
@media (max-width: 600px) {
  .mobile-call-bar {
    padding: .45rem .55rem !important;
    gap: .5rem !important;
  }
  .mobile-call-bar .cb-meta { display: none !important; }
  .mobile-call-bar a.cb-call,
  .mobile-call-bar a.cb-quote {
    flex: 1 1 0 !important;
    background: var(--c-brand) !important;
    color: #fff !important;
    border: 1px solid var(--c-brand) !important;
    padding: .58rem .7rem !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    text-align: center;
  }
  /* Footer/body bottom-pad shrinks now that the bar is shorter. */
  body { padding-bottom: 3.4rem !important; }
}
/* Below ~410px (small phones) the phone number doesn't comfortably fit in the
   button alongside the label — drop the digits, the tel: link still dials. */
@media (max-width: 410px) {
  .mobile-call-bar a.cb-call .cb-call-num { display: none; }
}

/* ============================================================
   Page transitions - the new page fades in. Runs for EVERYONE, including
   reduced-motion (browsers skip cross-document View Transitions under
   reduce-motion, and the site's policy is motion-on with the a11y widget
   as the opt-out). There is NO fade-OUT, so the old page is never blanked
   to white; <html> is given the page background so the fade-in backdrop is
   the page color, not a white flash.
   ============================================================ */
html { background: var(--c-bg); }
body { animation: omnia-fade-in .4s ease both; }
@keyframes omnia-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   Hero slideshow + cinematic intro (Parkway-style)
   --------------------------------------------------------------
   Intro storyboard:
     0.0s  hero photo arrives crisp + full color (no overlay)
     0.8s  maroon veil + vignette fade in, photo settles into a
           slightly softened backdrop (Ken Burns starts)
     1.0s  glass card slides in from the left
     1.2s  logo block slides in from the right
     2.2s  one slow sheen sweeps across (atmospheric)
   --------------------------------------------------------------
   Admin-controlled variables (overridden via inline style on the
   .hero-omnia section, see index.php):
     --hero-veil-color    — burgundy/whatever the brand says
     --hero-veil-opacity  — 0..1 — how dark the overlay sits
   ============================================================ */
.hero-omnia {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Defaults — index.php overrides these per-page from hero.json */
  --hero-veil-color: rgba(102, 0, 0, 1);
  --hero-veil-opacity: .80;
}
.hero-x__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  transform-origin: center center;
  will-change: opacity, transform;
  /* Settled backdrop look, applied to EVERY slide so they all match (no filter
     pop between images). */
  filter: saturate(1.12) contrast(1.18) brightness(.96) blur(1.5px);
  /* Slow continuous zoom, but PAUSED while a slide is hidden so it never snaps
     back to scale 1 mid-crossfade (that snap was the visible "jump"). */
  animation: omnia-kenburns 30s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero-x__bg.is-active {
  opacity: 1;
  animation-play-state: running;   /* just crossfade + keep zooming - no intro replay */
}
/* FIRST slide only: the cinematic crisp -> settle intro, then it keeps zooming.
   The slideshow JS adds .is-intro to slide #1 once and removes it after, so
   later slides simply crossfade + zoom smoothly. */
.hero-x__bg.is-intro {
  animation:
    omnia-hero-intro-photo 2200ms ease-out both,
    omnia-kenburns 30s ease-in-out 2200ms infinite alternate;
  animation-play-state: running;
}
@keyframes omnia-hero-intro-photo {
  0%   { transform: scale(1.02); filter: saturate(1)    contrast(1)   brightness(1) blur(0px); }
  30%  {                          filter: saturate(1)    contrast(1)   brightness(1) blur(0px); }
  100% { transform: scale(1.06); filter: saturate(1.12) contrast(1.18) brightness(.96) blur(1.5px); }
}
@keyframes omnia-kenburns { from { transform: scale(1.06); } to { transform: scale(1.14); } }

/* Burgundy veil — admin-tunable color + opacity. Solid fill (not a gradient)
   so the picker + slider control its appearance directly. Animation fades it
   in after the photo has been seen clear for ~0.8s. */
.hero-omnia .hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: var(--hero-veil-color, rgba(102, 0, 0, 1));
  opacity: 0;
  animation: omnia-hero-veil-in 1600ms ease-out 800ms both;
}
@keyframes omnia-hero-veil-in { from { opacity: 0; } to { opacity: var(--hero-veil-opacity, .80); } }

/* Cinematic vignette — center stays clear, edges fade to near-black so the
   scene reads with strong contrast. Sits on top of the veil but below content.
   Matches the Parkway hero feel. */
.hero-omnia .hero-vignette {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%,
      transparent 0%,
      transparent 48%,
      rgba(0, 0, 0, 0.42) 70%,
      rgba(0, 0, 0, 0.82) 88%,
      rgba(0, 0, 0, 0.98) 100%);
  opacity: 0;
  animation: omnia-hero-vignette-in 1600ms ease-out 800ms both;
}
@keyframes omnia-hero-vignette-in { from { opacity: 0; } to { opacity: 1; } }

.hero-omnia > .container { position: relative; z-index: 3; }

/* Diagonal light sheen — fires once shortly after the intro completes, then
   repeats on slide change (see omnia-fx.js). */
.hero-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hero-sheen::before {
  content: ""; position: absolute; top: -30%; left: -60%; width: 40%; height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.hero-sheen.go::before { animation: omnia-sheen 1.15s ease; }
@keyframes omnia-sheen { 0% { left: -60%; opacity: 0; } 12% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

/* Hero content: card slides in from the left, logo from the right.
   Delays line up with the veil so all three arrive together as the photo
   settles into its backdrop. */
.hero-card { animation: omnia-in-left  900ms ease 1000ms both; }
.hero-logo { animation: omnia-in-right 900ms ease 1200ms both; }
@keyframes omnia-in-left  { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes omnia-in-right { from { opacity: 0; transform: translateX(32px);  } to { opacity: 1; transform: none; } }

/* NOTE: animations intentionally run for EVERY visitor (no prefers-reduced-motion
   minimizing) - this is the owner's call, matching the sister sites. Anyone who
   needs calmer motion uses the accessibility widget's "pause animations" toggle
   (bottom corner). The matchMedia neutralizer in header.php backs this up so a
   device setting can't silently strip the load + scroll animations. */

/* ============================================================
   Scroll reveal - items fade/slide in cleanly as they enter view
   (gated by .omnia-anim so content is never hidden if JS is off)
   ============================================================ */
html.omnia-anim [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
html.omnia-anim [data-reveal="left"]  { transform: translateX(-36px); }
html.omnia-anim [data-reveal="right"] { transform: translateX(36px); }
html.omnia-anim [data-reveal="zoom"]  { transform: scale(.93); }
html.omnia-anim [data-reveal="fade"]  { transform: none; }
html.omnia-anim [data-reveal].rv-in   { opacity: 1; transform: none; }

/* Scroll-reveal also runs for everyone (see note above). */

/* ============================================================
   Accessibility widget button (AccessibleWeb) - keep it clear of the
   mobile sticky call bar (sits just above it on phones) and in the
   normal bottom corner on desktop.
   ============================================================ */
.acc-toggle-btn { z-index: 1200 !important; }
@media (max-width: 700px) {
  .acc-toggle-btn { bottom: 4.6rem !important; }
}

/* ============================================================
   Brand image cards (editable background image + readable name)
   ============================================================ */
.brand-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 158px;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 18px rgba(20,28,22,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.brand-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(102,0,0,.24); }
.brand-card__name {
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  padding: 1rem 1.1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.95);
}

/* ============================================================
   Drop shadow on light-colored text (readability over photos/colors)
   ============================================================ */
/* Inline white / near-white text (covers most hero/section copy) */
[style*="color:#fff"], [style*="color: #fff"], [style*="color:#FFF"], [style*="color: #FFF"],
[style*="color:#ffffff"], [style*="color:rgba(255"], [style*="color: rgba(255"] {
  text-shadow: 0 1px 2px rgba(0,0,0,.35);   /* subtle - aids contrast, not heavy */
}
/* Dark/maroon section wrappers - the shadow inherits to their white text */
.hero-omnia, .intro-band, .jp-panel, .brand-hero,
section[style*="#660000"], section[style*="#4a0000"], .page-hero[style*="#660000"] {
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}