/**
 * GOB.MX Federal Bar & Footer — CSS Isolation Firewall
 *
 * ┌─────────────────────────────────────────────────────────────────────┐
 * │  THE PROBLEM                                                        │
 * ├─────────────────────────────────────────────────────────────────────┤
 * │  The GOB.MX main.css ships Bootstrap 3.3.5 CSS globally. Our theme │
 * │  uses Bootstrap 5.3 locally. Both define .navbar, .nav, .container, │
 * │  .collapse, and .dropdown — but with incompatible box models,       │
 * │  flexbox rules, and padding/margin values.                          │
 * │                                                                     │
 * │  Result: Bootstrap 5 classes contaminate the federal bar            │
 * │  (.navbar-inverse.navbar-fixed-top) — flexbox expands it to        │
 * │  massive height, floated nav items break, and the institutional     │
 * │  header overlaps beneath a crushed/expanded federal bar.            │
 * │                                                                     │
 * │  THE SOLUTION                                                       │
 * ├─────────────────────────────────────────────────────────────────────┤
 * │  This stylesheet loads LAST in the cascade (after BS5 + style.css). │
 * │  It uses high-specificity selectors to reset BS5 contamination      │
 * │  ONLY inside the federal bar and footer regions. The rest of the    │
 * │  page remains under full Bootstrap 5 control.                       │
 * │                                                                     │
 * │  HOW GOBMX.JS INJECTS THE FEDERAL BAR                              │
 * ├─────────────────────────────────────────────────────────────────────┤
 * │  gobmx.js → Modernizr.load() → main.js → MX.secBuilder():         │
 * │    $('body').prepend(navBar)   // Federal header as FIRST child     │
 * │    $('body').append(footer)    // Federal footer as LAST child      │
 * │                                                                     │
 * │  The injected header structure:                                     │
 * │    <header>                                                         │
 * │      <nav class="navbar navbar-inverse navbar-fixed-top">          │
 * │        <div class="container">                                     │
 * │          <div class="navbar-header">…logo…</div>                   │
 * │          <div class="collapse navbar-collapse">…links…</div>       │
 * │        </div>                                                       │
 * │      </nav>                                                         │
 * │    </header>                                                        │
 * │                                                                     │
 * │  SELECTOR STRATEGY                                                  │
 * ├─────────────────────────────────────────────────────────────────────┤
 * │  Federal header: .navbar-inverse.navbar-fixed-top                   │
 * │    (Unique combination — no other element uses both classes.)       │
 * │  Federal footer: footer.main-footer                                 │
 * │    (Injected by main.js with class="main-footer".)                 │
 * │  We prefix with body > header for extra specificity on the wrapper. │
 * │                                                                     │
 * │  LAYOUT MATH (desktop, logged out)                                  │
 * ├─────────────────────────────────────────────────────────────────────┤
 * │  0px   ── Federal bar top (position: fixed)                         │
 * │  48px  ── Federal bar bottom                                        │
 * │  48px  ── .header_second top (position: absolute)                   │
 * │  118px ── .header_second bottom (48 + 70)                           │
 * │  118px ── Flow content starts (body padding-top)                    │
 * │  48px  ── .header_fourth sticky top (snaps below federal bar)       │
 * └─────────────────────────────────────────────────────────────────────┘
 *
 * @package TecNM
 * @since   2.3.0
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES — Single source of truth for all spacing
   ========================================================================== */

:root {
  /* Federal bar rendered height — matches the live GOB.MX bar (~80px). */
  --tecnm-gobmx-bar-height: 80px;

  /* Institutional logo bar height (set in style.css .header_second) */
  --tecnm-header-second-height: 70px;

  /* Total offset: federal bar + logo bar. Body padding-top uses this
	   to push flow content below both fixed/absolute positioned headers. */
  --tecnm-header-total-offset: calc(
    var(--tecnm-gobmx-bar-height) + var(--tecnm-header-second-height)
  );
}

/* GOB.MX bar is taller on mobile (~91px) due to logo wrapping */
@media screen and (max-width: 991px) {
  :root {
    --tecnm-gobmx-bar-height: 91px;
  }
}

/* ==========================================================================
   2. FEDERAL BAR — Position & Dimensions
   ==========================================================================
   GOB.MX main.css applies position:fixed to .navbar-fixed-top.
   We reinforce it here with !important to guarantee it stays fixed at
   viewport top regardless of any BS5 overrides.
   ========================================================================== */

/* Position and color only — let the V3 CDN CSS handle layout/dimensions.
   z-index: 1040 sits above our theme headers (1029-1035) but below
   modals (1055+) so the a11y dropdown renders correctly. */
.navbar-inverse.navbar-fixed-top,
.navbar-inverse {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1040 !important;
  overflow: visible !important;
  /* Guinda institutional color */
  background-color: #611232 !important;
  border-color: transparent !important;
}

.navbar-inverse.navbar-fixed-top .container,
.navbar-inverse .container {
  width: 82% !important;
  max-width: 90% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media screen and (max-width: 991px) {
  .navbar-inverse.navbar-fixed-top .container,
  .navbar-inverse .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ==========================================================================
   3. FEDERAL BAR — V3 Layout Protection
   ==========================================================================
   The V3 framework uses BS5 flex layout natively. We only reset margins
   and borders to prevent interference. DO NOT override display or flex
   properties — the V3 CDN CSS manages the layout correctly.
   ========================================================================== */

.navbar-inverse.navbar-fixed-top .navbar,
nav.navbar-inverse.navbar-fixed-top,
nav.navbar-inverse {
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   4. FEDERAL BAR — V3 Container & Link Isolation
   ==========================================================================
   The V3 framework uses BS5 flex layout natively. We only need to:
   - Reset our theme's .container width override inside the bar
   - Force white link colors for contrast on Guinda background
   - Protect the mobile collapse toggle behavior
   ========================================================================== */

/* Link colors: white on Guinda */
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .nav-link {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: end !important;
  color: #fff !important;
  text-decoration: none !important;
  padding-top: 0px !important;
  height: 30px !important;
}

@media screen and (max-width: 768px) {
  .navbar-inverse .navbar-nav > li > a,
  .navbar-inverse .nav-link {
    display: block !important;
  }
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .nav-link:hover {
  color: #d4c19c !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

header .navbar-inverse .container .navbar-collapse {
  justify-content: flex-end !important;
}

/* Mobile collapse: visibility controlled by our vanilla JS state machine.
   The JS sets inline style.display directly. These CSS rules act as failsafes
   that respect the .show/.in class state without fighting inline styles. */
@media screen and (max-width: 767px) {
  .navbar-inverse .navbar-collapse.show,
  .navbar-inverse .navbar-collapse.in {
    background-color: #611232 !important;
  }
}

/* Toggle button — hidden on desktop, visible on mobile */
.navbar-inverse.navbar-fixed-top .navbar-toggle {
  display: none !important;
  float: right !important;
  padding: 9px 10px !important;
  margin-top: 8px !important;
  margin-right: 15px !important;
  margin-bottom: 8px !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

.navbar-inverse.navbar-fixed-top .navbar-toggle .icon-bar {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background-color: #fff !important;
  border-radius: 1px !important;
  margin-top: 4px !important;
}

/* ==========================================================================
   4b. FEDERAL BAR — MOBILE LAYOUT GOVERNANCE (<768px)
   ==========================================================================
   PROBLEM:
     The GOB.MX V3 CDN CSS applies `position: absolute` to .navbar-toggler,
     removing it from the flex flow. When the mobile menu opens, the collapse
     becomes `display: block`, which (combined with `ms-auto` on the brand
     and BS5's space-between) causes the logo to JUMP ~94px to the right —
     a visible layout shift on every tap.
     Additionally, without flex discipline on the container, the logo
     appears drifting center-left on mobile instead of flush left.
   FIX:
     1. Force .container to be a rigid flex row (space-between, no-wrap
        for the header line) that matches the official gob.mx guideline.
     2. Force .navbar-brand into flex flow with order:1 (left anchor).
     3. Un-absolute the .navbar-toggler (position: static, order:3, right
        anchor).
     4. Make .navbar-collapse wrap to a NEW line with flex-basis:100% and
        order:4 — so the header row never reflows when the menu opens.
     5. Reset margins introduced by `ms-auto` on brand/toggler since
        flexbox already anchors them via `justify-content: space-between`.
   SCOPE: Only below 768px. Desktop behavior (>=md) stays untouched.
   ========================================================================== */

@media (max-width: 767.98px) {
  /* Container — rigid flex row, wrap collapse below */
  .navbar-inverse.navbar-fixed-top .container,
  .navbar-inverse .container {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 15px !important;
    gap: 8px !important;
  }

  /* Logo — LEFT anchor. `margin-right: auto` absorbs ALL free space so
	   the brand is guaranteed flush-left, regardless of CDN justify-content.
	   This is the bulletproof flex-anchor pattern (Holy Grail layout). */
  .navbar-inverse.navbar-fixed-top .navbar-brand,
  .navbar-inverse .navbar-brand {
    position: static !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    margin: 0 auto 0 0 !important;
    padding: 6px 0 !important;
  }

  .navbar-inverse.navbar-fixed-top .navbar-brand img.logos,
  .navbar-inverse .navbar-brand img.logos {
    margin: 0 !important;
    max-height: 54px !important;
    height: auto !important;
    width: auto !important;
    display: block !important;
  }

  /* Hamburger — RIGHT anchor, RESTORED to flex flow (override CDN absolute) */
  .navbar-inverse.navbar-fixed-top .navbar-toggler,
  .navbar-inverse .navbar-toggler {
    position: static !important;
    order: 3 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    /* ms-auto override: we use space-between, not auto-margins */
    margin-left: 0 !important;
  }

  /* Collapse — wraps to NEW ROW so header line doesn't reflow when open */
  .navbar-inverse.navbar-fixed-top .navbar-collapse,
  .navbar-inverse .navbar-collapse {
    order: 4 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* When hidden, collapse takes zero vertical space */
  .navbar-inverse.navbar-fixed-top .navbar-collapse:not(.show):not(.in) {
    display: none !important;
  }

  /* When shown, it opens under the header row without shifting siblings */
  .navbar-inverse.navbar-fixed-top .navbar-collapse.show,
  .navbar-inverse.navbar-fixed-top .navbar-collapse.in,
  .navbar-inverse .navbar-collapse.show,
  .navbar-inverse .navbar-collapse.in {
    display: block !important;
    padding: 8px 0 12px !important;
  }

  /* Stack nav items vertically on mobile */
  .navbar-inverse.navbar-fixed-top .navbar-collapse .navbar-nav,
  .navbar-inverse .navbar-collapse .navbar-nav {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Accessibility widget — keep between logo and hamburger (order: 2) */
  .navbar-inverse.navbar-fixed-top .accesibility,
  .navbar-inverse .accesibility,
  .navbar-inverse.navbar-fixed-top .menu-btn,
  .navbar-inverse .menu-btn {
    position: static !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 auto 0 0 !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
}

/* ==========================================================================
   9. FEDERAL FOOTER — Moved to dedicated file
   ==========================================================================
   All footer isolation rules are now in css/gobmx-footer-fix.css.
   That file handles bidirectional isolation for both the institutional
   footer (.tecnm-institutional-footer) and the GOB.MX federal footer
   (footer.main-footer). See gobmx-footer-fix.css for details.
   ========================================================================== */

/* ==========================================================================
   10. BODY & HEADER — Block-flow architecture (NO absolute offset hacks)
   ==========================================================================
   Layout stacking uses NATURAL DOCUMENT FLOW:

     .site-header { margin-top: GOB.MX bar height }
       → .header_second   (position: relative — block flow)
       → .header_third    (position: relative — block flow)
       → .header_fourth   (position: sticky — the ONLY exception)
     <main> — flows naturally below header

   NO body padding-top. NO absolute positioning on header layers.
   The .site-header margin-top pushes everything below the GOB.MX fixed bar.
   ========================================================================== */

body {
  padding-top: 0 !important;
  font-family:
    "Noto Sans", "Open Sans", Helvetica, Arial, sans-serif !important;
}

/* .header_second: block-level in normal flow. NO top offset needed. */
.header_second {
  top: auto !important;
  position: relative !important;
}

/* .header_fourth: in-flow by default. JS toggles .is-fixed on scroll. */
.header_fourth.is-fixed {
  top: var(--tecnm-gobmx-bar-height, 80px) !important;
}

/* ==========================================================================
   11. WP ADMIN BAR — Offsets when logged in
   ==========================================================================
   WordPress admin bar is 32px (desktop) or 46px (mobile <=782px).
   The GOB.MX fixed bar sits below it. The .site-header margin-top handles
   the GOB.MX bar; the admin bar adds its own offset natively.
   We only need to adjust the GOB.MX bar position and the sticky nav.
   ========================================================================== */

body.admin-bar {
  padding-top: 0 !important;
}

/* GOB.MX fixed bar: push below the WP admin bar */
body.admin-bar .navbar-inverse.navbar-fixed-top {
  top: 32px !important;
}

/* Fixed blue nav: account for admin bar + GOB.MX bar */
body.admin-bar .header_fourth.is-fixed {
  top: calc(var(--tecnm-gobmx-bar-height, 80px) + 25px) !important;
}

/* .site-header: push below admin bar + GOB.MX bar */
body.admin-bar .site-header {
  margin-top: calc(var(--tecnm-gobmx-bar-height, 80px) + 0px) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .navbar-inverse.navbar-fixed-top {
    top: 46px !important;
  }

  body.admin-bar .header_fourth.is-fixed {
    top: calc(var(--tecnm-gobmx-bar-height, 80px) + 46px) !important;
  }

  body.admin-bar .site-header {
    margin-top: calc(var(--tecnm-gobmx-bar-height, 80px) + 0px) !important;
  }
}

/* ==========================================================================
   12. RESPONSIVE — Federal bar mobile breakpoint
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* Show hamburger toggle on mobile */
  .navbar-inverse.navbar-fixed-top .navbar-toggle {
    display: block !important;
  }

  /* Stack nav items vertically when expanded */
  .navbar-inverse.navbar-fixed-top .navbar-nav {
    float: none !important;
  }

  .navbar-inverse.navbar-fixed-top .navbar-nav > li {
    display: block !important;
    float: none !important;
  }

  .navbar-inverse.navbar-fixed-top .navbar-nav > li > a {
    padding: 10px 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  #accessibility .menu-container .menu-btn {
    top: 2% !important;
  }
}

/* ==========================================================================
   13. MAX MEGA MENU — Mobile toggle & flyout fixes
   ==========================================================================
   The plugin uses a full-screen fixed flyout on mobile (position:fixed,
   z-index:2147483647). We do NOT override the flyout positioning — the
   plugin handles it natively. We only fix the toggle's offset and z-index.
   ========================================================================== */

@media screen and (max-width: 991px) {
  /* Reset the 81px top offset the plugin's JS adds to the toggle
	   (it miscalculates because of our GOB.MX margin-top architecture). */
  [id^="mega-menu-wrap-"] .mega-menu-toggle {
    top: auto !important;
    z-index: 1050 !important;
  }
}