/* ==========================================================================
   CHROME MOBILE RESET (chrome-mobile-reset.css) v4 - 2026-10-06
   --------------------------------------------------------------------------
   Neutralizes custom CSS rules from chrome.css that were added for the
   mobile chrome header (`.dg-mb-*` classes, custom nav overrides, etc).

   Goal: mobile chrome uses ONLY default WordPress + theme.json styles for
   the parts that should be default, while preserving WP's core
   "is-not-stacked-on-mobile" behavior for the wp-block-columns block.

   IMPORTANT: do NOT use `all: revert` on .wp-block-columns or
   .wp-block-column, because that wipes WP core's flex display, causing
   the columns to stack vertically on mobile.
   ========================================================================== */

/* ==========================================================================
   DESKTOP NAV BAR — Override chrome.css to make it COMPACT + solid color
   --------------------------------------------------------------------------
   The chrome.css adds:
     1. `linear-gradient(90deg, primary-dark 0%, primary 100%)` background
     2. `min-height: 52px`
     3. `padding: max(2rem, ...) 16px` (large)
     4. `box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15)` (heavy shadow)
     5. `display: flex; align-items: center` (adds vertical centering space)

   These combine into a TALL row with a visible gradient effect ("double
   background" feel) and a heavy shadow that adds visual height.

   Override all of them to:
     - Solid teal background (no gradient)
     - ULTRA COMPACT: padding 0, no min-height, no shadow, line-height: 1
   ========================================================================== */
@media (min-width: 901px) {
    .site-header-chrome--desktop .wp-block-navigation {
        background: #009188 !important;
        background-color: #009188 !important;
        background-image: none !important;
        min-height: 0 !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: max(2rem, calc((100% - 1320px) / 2)) !important;
        padding-right: max(2rem, calc((100% - 1320px) / 2)) !important;
        box-shadow: none !important;
        border: none !important;
        line-height: 1 !important;
    }
    .site-header-chrome--desktop .wp-block-navigation__container {
        padding: 0 !important;
        margin: 0 !important;
        gap: 20px !important;
    }
    .site-header-chrome--desktop .wp-block-navigation__container > .wp-block-navigation-item {
        line-height: 1 !important;
    }
    .site-header-chrome--desktop .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        line-height: 1 !important;
    }
    /* Kill outer wp-block-group padding so the row stays tight */
    .site-header-chrome--desktop > .wp-block-group {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ==========================================================================
   VIEWPORT SWITCHING (breakpoint = 900px)
   --------------------------------------------------------------------------
   - 1px .. 900px  : show .site-header-chrome--mobile, hide --desktop
   - 901px .. ∞    : show .site-header-chrome--desktop, hide --mobile
   ========================================================================== */

@media (min-width: 901px) {
    .site-header-chrome--mobile {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
    .site-header-chrome--desktop {
        display: block !important;
    }
    /* The desktop chrome should remain sticky (or absolute, per the
       fullscreen-hero overlay logic). We do not force anything here -
       chrome.css sets it to sticky, and tis-motion-kit overrides to
       absolute when there's a fullscreen hero. */
}

@media (max-width: 900px) {
    .site-header-chrome--desktop {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
    .site-header-chrome--mobile {
        display: block !important;
    }
    /* Sticky rules moved to assets/chrome-sticky-nav.css — see that file
       for the single source of truth. The mobile sticky behavior is also
       defined there (same specificity strategy beats all competitors). */

    /* The chrome-sticky-nav.css rules will:
       1. Set parent .site-header-chrome to position:static at <=900px
          (overriding tis-motion-kit's position:absolute) so sticky works.
       3. Set .site-header-chrome--mobile to position:sticky, top:0.
       4. Account for WP admin bar offset (46px on mobile). */
}

/* ==========================================================================
   PRESERVE the inline (not stacked) behavior of wp-block-columns on mobile.
   WP core's CSS sets `.wp-block-columns.is-not-stacked-on-mobile { flex-wrap:
   nowrap !important }` and `.wp-block-column { flex-basis: 0; flex-grow: 1 }`.
   The user's chrome in the DB has the `is-not-stacked-on-mobile` class on the
   columns block, so we MUST NOT revert it (would break the inline layout).
   ========================================================================== */

/* Force columns to be inline (row) on ONE single line at all viewports up to 900px. */
@media (max-width: 900px) {
    .site-header-chrome--mobile .wp-block-columns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 0 !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .site-header-chrome--mobile .wp-block-column {
        flex: 0 1 auto !important;
        width: auto !important;
        margin: 0 !important;
    }
    /* Logo: cap height & width so it stays on the same single line as the hamburger icon. */
    .site-header-chrome--mobile .wp-block-column:first-child .wp-block-image,
    .site-header-chrome--mobile .wp-block-column:first-child .wp-block-image img {
        max-height: 38px !important;
        max-width: 140px !important;
        height: auto !important;
        width: auto !important;
        display: block !important;
    }
    /* Nav column: shrink to hamburger only. */
    .site-header-chrome--mobile .wp-block-column:last-child {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
    /* WP core hides the burger at min-width: 600px (forces inline menu).
       We want the burger visible in the mobile chrome at all viewports up
       to 1100px, so we force it back on with !important. */
    .site-header-chrome--mobile .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
    /* When the menu is OPEN, show the close (X) button. */
    .site-header-chrome--mobile .wp-block-navigation__responsive-container-close {
        display: flex !important;
    }
}

/* ==========================================================================
   MOBILE MENU OVERLAY UX (when user clicks the hamburger)
   --------------------------------------------------------------------------
   The default core/navigation overlay is a centered modal with poor
   positioning on small viewports. We replace it with a left-side drawer
   + dark backdrop so the user can clearly see the menu items and dismiss
   with a single tap on the backdrop or X button.
   ========================================================================== */

/* Container: fullscreen overlay with dark backdrop, scrollable */
.site-header-chrome--mobile .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;             /* top/right/bottom/left: 0 */
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 10000 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* Inner dialog: drawer on the LEFT, full height, scrollable */
.site-header-chrome--mobile .wp-block-navigation__responsive-dialog {
    position: relative !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 100% !important;
    background: #ffffff !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
    padding: 64px 0 32px 0 !important;     /* top padding leaves room for X */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;                  /* left-aligned drawer */
    inset: 0 auto 0 0 !important;
}

/* Inner content wrapper */
.site-header-chrome--mobile .wp-block-navigation__responsive-container-content {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Menu list: vertical stack, generous touch targets */
.site-header-chrome--mobile .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    list-style: none !important;
}

/* Each top-level menu item: full-width, large touch target.
   IMPORTANT: keep `display: flex` (not block) so CSS `order` works on the
   `.feature` item — flex/grid items can be reordered, block items cannot. */
.site-header-chrome--mobile .wp-block-navigation__container > .wp-block-navigation-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.site-header-chrome--mobile .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: block !important;
    width: 100% !important;
    padding: 16px 24px !important;       /* 44px+ touch target */
    color: #004843 !important;            /* primary-dark teal */
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    background: transparent !important;
    text-align: left !important;
}

.site-header-chrome--mobile .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.site-header-chrome--mobile .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    background: #f0faf9 !important;
    color: #009188 !important;            /* primary teal on hover */
}

/* Submenu: indented, lighter weight, smaller */
.site-header-chrome--mobile .wp-block-navigation__submenu-container {
    position: static !important;          /* not a floating dropdown in mobile */
    background: #f7fafa !important;
    box-shadow: none !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 1px solid #e0e0e0 !important;
}

.site-header-chrome--mobile .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 12px 24px 12px 40px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #333333 !important;
}

.site-header-chrome--mobile .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: #009188 !important;
    background: #ffffff !important;
}

/* X (close) button: visible, big, easy to tap */
.site-header-chrome--mobile .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #004843 !important;
    background: transparent !important;
}

.site-header-chrome--mobile .wp-block-navigation__responsive-container-close svg {
    width: 28px !important;
    height: 28px !important;
    fill: currentColor !important;
}

/* Hamburger (when closed): large touch target */
.site-header-chrome--mobile .wp-block-navigation__responsive-container-open {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #004843 !important;
    background: transparent !important;
}

.site-header-chrome--mobile .wp-block-navigation__responsive-container-open svg {
    width: 28px !important;
    height: 28px !important;
    fill: currentColor !important;
}

/* ==========================================================================
   FEATURE MENU ITEM (parametrizable VIP-style button)
   --------------------------------------------------------------------------
   Any menu item with the `feature` CSS class renders as the brand's
   primary CTA (orange/terracotta gradient, white text, rounded, uppercase).
   This is class-based so the marketing team can apply it to any item via
   the navigation block's "Additional CSS class" field — no code change.

   In the MOBILE drawer, the feature item is also reordered to appear
   FIRST (via `order: -1`) so the most important CTA is the first thing
   the user sees when they open the menu.
   ========================================================================== */

/* Visual style: same orange/terracotta gradient as the legacy VIP button. */
.wp-block-navigation-item.feature > .wp-block-navigation-item__content {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: none !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s !important;
    text-align: center !important;
    display: inline-block !important;
}

.wp-block-navigation-item.feature > .wp-block-navigation-item__content:hover {
    background: #ea580c !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(123, 58, 25, 0.35) !important;
    border-bottom: none !important;
}

/* Neutralize the legacy chrome.css rule that puts the LAST menu item in
   `position: absolute; top: 50%` (it was meant for the desktop VIP button,
   not the parametrizable feature class). Without this override, the
   feature item is taken out of the flex flow and `order` does nothing.
   Specificity must match the chrome.css rule (0,4,0) to win. */
.site-header-chrome .wp-block-navigation__container > .wp-block-navigation-item.feature {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
}

/* On DESKTOP (>=901px), restore the right-anchored position of the
   feature item (matches the chrome.css `:last-child` rule behavior).
   On mobile (<=900px), the feature is reordered to FIRST via `order: -1`
   (handled below) and stays static. */
@media (min-width: 901px) {
    /* Force the nav to full width inside the chrome, overriding any
       padding/box constraints that would shrink it to a centered bar. */
    .site-header-chrome--desktop .wp-block-navigation {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }
    .site-header-chrome .wp-block-navigation__container > .wp-block-navigation-item.feature {
        position: absolute !important;
        right: max(2rem, calc((100% - 1320px) / 2)) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }
    /* ==========================================================================
       STICKY NAV BAR (only the nav row, NOT the whole chrome)
       --------------------------------------------------------------------------
       We want ONLY the nav bar (teal row with SERVICIOS, etc.) to stick to
       the top when scrolling. The top bar and middle bar must scroll away
       normally.

       Steps:
       1. Disable sticky on the parent `.site-header-chrome` (chrome.css
          sets it to sticky, but that makes the whole 3-row chrome stick).
          Set parent to position: static (a normal scrolling ancestor).
       2. Override tis-motion-kit's `position: absolute` on the parent
          (tis-motion-kit has specificity 0,2,1 via body:has(...) selector).
       3. Make the actual `wp-block-navigation` (the nav row) sticky
          with top: 0. This way the nav bar sticks to the top of the
          viewport by itself, and the top/middle bars scroll away.
       ========================================================================== */

    /* 1+2: Parent .site-header-chrome should be a normal scrolling ancestor.
       Override the sticky from chrome.css AND the absolute from tis-motion-kit. */
    body:has(.tmk-hero.tmk-layout-fullscreen) .site-header-chrome,
    .site-header-chrome {
        position: static !important;
    }
    body.logged-in.admin-bar .site-header-chrome,
    body:has(.tmk-hero.tmk-layout-fullscreen) body.logged-in.admin-bar .site-header-chrome {
        position: static !important;
    }

    /* 3: The nav bar itself becomes sticky at the top of the viewport.
       Use a more specific selector (0,3,0) to beat the chrome.css rule
       `.site-header-chrome .wp-block-navigation { position: relative !important }`
       which has specificity 0,2,0. */
    .site-header-chrome--desktop .wp-block-navigation,
    .site-header-chrome.site-header-chrome--desktop .wp-block-navigation {
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
    }
    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;
        }
    }
}

/* On the mobile drawer, the feature item should:
   1. Appear FIRST in the list (CSS order: -1, no DOM reordering needed).
   2. Span the full width with extra padding (44px+ touch target).
   3. Keep its orange CTA styling (so users see the primary action first). */
@media (max-width: 900px) {
    .wp-block-navigation-item.feature {
        order: -1 !important;
    }
    .site-header-chrome--mobile .wp-block-navigation-item.feature {
        border-bottom: 2px solid #004843 !important;
        margin: 0 16px 8px 16px !important;
        width: calc(100% - 32px) !important;
        padding: 4px 0 !important;
    }
    .site-header-chrome--mobile .wp-block-navigation-item.feature > .wp-block-navigation-item__content {
        display: block !important;
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 1rem !important;
        text-align: center !important;
        border-radius: 8px !important;
    }
}

/* ---- wipe all custom .dg-mb-* classes (still safe: only used in old markup) ---- */
.dg-mb-header,
.dg-mb-vip,
.dg-mobile-logo,
.dg-mb-col,
.dg-mb-nav {
    all: revert !important;
}

/* ---- wipe custom responsive container overrides for the navigation block ---- */
/* (use specific properties, NOT `all: revert`, to preserve WP core flex) */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__container,
.wp-block-navigation__container.is-responsive {
    background: revert !important;
    padding: revert !important;
    margin: revert !important;
    width: revert !important;
    position: revert !important;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:hover svg,
.wp-block-navigation__responsive-container-open:hover svg path,
.wp-block-navigation__responsive-container-open:hover svg line,
.wp-block-navigation__responsive-container-open:hover svg rect,
.wp-block-navigation__responsive-container-open:hover svg circle {
    fill: revert !important;
    color: revert !important;
    background: revert !important;
}