/* ==========================================================================
   CHROME STICKY NAV — single source of truth
   --------------------------------------------------------------------------
   This file is the ONLY place that defines the desktop nav-bar sticky
   behavior. It exists because chrome.css, tis-motion-kit, and the WP core
   `core/navigation` block all set competing rules on the same elements,
   making it impossible to get a consistent sticky behavior via the cascade
   alone.

   Load order (see functions.php):
     chrome.css                   →  default sticky (loses to others)
     chrome-mobile-reset.css       →  attempts to fix (loses by specificity)
     chrome-sticky-nav.css        →  THIS FILE (always wins)

   Specificity strategy:
     • Rule 1 (parent-static): beats tis-motion-kit's 0,2,1 with 0,3,1
     • Rule 2 (sticky nav):     beats chrome.css 0,2,0 with 0,3,1
     • Both rules have !important to override any loose rule

   Effect:
     • Nav bar (3rd row of chrome) stays at top: 0 when user scrolls
     • Top bar + middle bar scroll away naturally
     • No layout jump (sticky preserves the original space)
     • No "double background" (single solid teal from chrome-mobile-reset)
   ========================================================================== */

/* ---- 1. PARENT STATIC ------------------------------------------------------
   Override tis-motion-kit's `position: absolute` on the desktop chrome wrapper
   when there's a fullscreen hero. Sticky positioning requires a scrolling
   ancestor (NOT absolute, NOT fixed).

   Specificity: 0,3,1 (1 type + 1 pseudo-class + 3 classes)
   Beats tis-motion-kit's 0,2,1 (body:has + .site-header-chrome)
   ------------------------------------------------------------------------------ */
body:has(.tmk-hero.tmk-layout-fullscreen) .site-header-chrome,
body:has(.tmk-hero.tmk-layout-fullscreen) .site-header-chrome--desktop {
    position: static !important;
    top: auto !important;
}

/* ---- 2. STICKY NAV BAR -----------------------------------------------------
   Make the actual `wp-block-navigation` sticky at the top of the viewport.
   This is the nav bar (3rd row, teal background). When the user scrolls past
   the top bar and middle bar, only the nav bar remains visible at top: 0.

   Specificity: 0,3,1 (1 type + 3 classes)
   Beats chrome.css's 0,2,0 (.site-header-chrome .wp-block-navigation)
   Beats the WP core nav's 0,2,0
   ------------------------------------------------------------------------------ */
body:has(.tmk-hero.tmk-layout-fullscreen) .site-header-chrome--desktop .wp-block-navigation,
.site-header-chrome--desktop .wp-block-navigation {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}

/* ---- 3. ADMIN BAR OFFSET ---------------------------------------------------
   Account for the WP admin bar on logged-in users (32px desktop, 46px mobile).
   The sticky nav bar must NOT be covered by the admin bar.
   ------------------------------------------------------------------------------ */
body.logged-in.admin-bar .site-header-chrome--desktop .wp-block-navigation {
    top: 32px !important;
}
@media (max-width: 782px) {
    body.logged-in.admin-bar .site-header-chrome--desktop .wp-block-navigation {
        top: 46px !important;
    }
}

/* ---- 4. MOBILE CHROME STICKY ----------------------------------------------
   Mobile chrome (≤900px) must also be sticky. The mobile chrome contains
   just the logo + hamburger, no nav block visible.
   ------------------------------------------------------------------------------ */
body:has(.tmk-hero.tmk-layout-fullscreen) .site-header-chrome--mobile,
.site-header-chrome--mobile {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}
body:has(.tmk-hero.tmk-layout-fullscreen) .site-header-chrome--mobile {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
body.logged-in.admin-bar .site-header-chrome--mobile {
    top: 46px !important;
}

/* ---- 5. HEADER COMPACT LAYOUT & CUSTOM CLASS MAPPING -----------------------
   Maps custom block classes (dg-topbar-paragraph, dg-topbar-socials,
   dg-logo-column, dg-city-column, dg-email-column) for pixel-perfect padding,
   icon padding, and tight vertical text stacking in Chrome Header (17678).
   ------------------------------------------------------------------------------ */

/* TopBar Row */
.tis-chrome-header-topbar .wp-block-columns {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.dg-topbar-paragraph p,
.tis-chrome-header-topbar p {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.dg-topbar-paragraph span,
.tis-chrome-header-topbar span {
    background-color: rgba(175, 255, 249, 0.18) !important;
    color: #AFFFF9 !important;
    padding: 2px 10px !important;
    border-radius: 10px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    display: inline-block !important;
}

.dg-topbar-socials {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.dg-topbar-socials .wp-block-social-links {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.dg-topbar-socials .wp-block-social-link a {
    padding: 2px !important;
}

/* Middle Bar Row (Logo & Contact Info) */
.tis-chrome-header-middle .wp-block-columns {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.dg-logo-column img,
.tis-chrome-header-middle img {
    height: 32px !important;
    width: auto !important;
    display: block !important;
}

/* Contact columns flex layout: tight vertical stacking, no space-between push */
.dg-city-column,
.dg-email-column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 0px !important;
}

.dg-city-column h4,
.dg-email-column h4 {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #004843 !important;
    margin: 0 0 1px 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}

.dg-city-column p,
.dg-email-column p {
    font-size: 0.74rem !important;
    color: #64748b !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}

.dg-email-column h4 a {
    color: #0284c7 !important;
    text-decoration: none !important;
}

/* Sticky Navigation bar padding */
.tis-chrome-header-sticky .wp-block-columns {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* Gutenberg Editor Canvas Support */
.editor-styles-wrapper .dg-city-column,
.editor-styles-wrapper .dg-email-column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 0px !important;
}

.editor-styles-wrapper .dg-city-column h4,
.editor-styles-wrapper .dg-email-column h4 {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #004843 !important;
    margin: 0 0 1px 0 !important;
    line-height: 1.15 !important;
}

.editor-styles-wrapper .dg-city-column p,
.editor-styles-wrapper .dg-email-column p {
    font-size: 0.74rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

.editor-styles-wrapper .dg-topbar-socials {
    padding: 3px 0 !important;
}