/* =========================================================================
   site-chrome.css  —  shared header + footer chrome
   =========================================================================
   Makes the nav bar and footer IDENTICAL to the homepage on every page.

   The homepage + About use SiteLayout, which loads mhg.css (that file already
   styles the .mhg-nav / .mhg-footer chrome). Every other page uses Base.astro,
   which loads globals.css and does NOT load mhg.css. This file gives those
   Base pages the exact same chrome styling.

   Loaded ONLY by Base.astro (SiteLayout already has these rules via mhg.css),
   so the two never fight. Everything is namespaced under .mhg-nav / .mhg-footer
   / .mhg-btn and never touches the inner pages' globals.css body content.

   ⚠ MIRROR: these rules are copied verbatim from mhg.css (the nav block ~L304,
   footer block ~L363, button block ~L97). If the chrome design changes in
   mhg.css, update it here too, or the homepage and inner pages will drift.
   ========================================================================= */

/* --- Montserrat (self-hosted, latin subset) so the chrome renders in the brand
       typeface even though Base pages set their body font to Inter --- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("/tpl/fonts/montserrat-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/tpl/fonts/montserrat-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/tpl/fonts/montserrat-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("/tpl/fonts/montserrat-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Montserrat Fallback";src:local("Arial");ascent-override:96.88%;descent-override:25.12%;line-gap-override:0%;size-adjust:112.16%;}

:root{
  --mhg-blue:#005484;
  --mhg-blue-deep:#002D47;
  --mhg-ink:#24303C;
  --mhg-ink-2:#111820;
  --mhg-tint:#E0EAF0;
  --mhg-paper:#F4F7FA;
  --mhg-line:rgba(0,45,71,0.12);
  --mhg-font:'Montserrat','Montserrat Fallback',system-ui,sans-serif;
}

/* Chrome roots force the brand typeface so descendants (phone number, links)
   render in Montserrat even on Inter-bodied Base pages. */
.mhg-nav, .mhg-footer { font-family: var(--mhg-font); }

/* --- Button (only the base + small size are used by the chrome) --- */
.mhg-btn {
  --btn-bg: var(--mhg-blue);
  --btn-fg: #fff;
  --btn-sweep: var(--mhg-blue-deep);
  position: relative; z-index: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.5rem; border-radius: 4px; text-align: center;
  font-family: var(--mhg-font); font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; border: 2px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .25s ease, color .25s ease, border-color .25s ease;
}
.mhg-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-sweep); transform: translateX(-101%);
  transition: transform .38s cubic-bezier(.6,.02,.2,1);
}
.mhg-btn:hover { transform: translateY(-2px); }
.mhg-btn:hover::before { transform: translateX(0); }
.mhg-btn__chev { transition: transform .3s ease; }
.mhg-btn:hover .mhg-btn__chev { transform: translateX(4px); }
.mhg-btn--sm { padding: .62rem 1.05rem; font-size: .92rem; }
/* On Base pages globals.css sets a dark a:hover color; pin the button text so it
   stays legible (white) on the blue fill through hover/focus. */
.mhg-btn:hover, .mhg-btn:focus { color: var(--btn-fg); }

/* =========================================================================
   HEADER / NAV  (mirrors mhg.css .mhg-nav block)
   .mhg-nav__inner carries the homepage container box (max-width 1180 + clamp
   padding) directly, at .mhg-nav specificity, so it matches the homepage
   regardless of globals.css .container (which is 90% / 1200px on Base pages).
   ========================================================================= */
.mhg-nav { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.mhg-nav .mhg-nav__inner { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 1.5rem); display: flex; align-items: center; gap: 1.5rem; padding-top: .65rem; padding-bottom: .65rem; }
.mhg-nav__logo img { height: 72px; width: auto; display: block; }
.mhg-nav__menu { margin-left: auto; }
.mhg-nav__menu ul { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.mhg-nav__menu a { color: var(--mhg-ink); font-weight: 600; font-size: .95rem; text-decoration: none; transition: color .15s ease; }
.mhg-nav__menu a:hover { color: var(--mhg-blue); }
.mhg-nav__right { display: flex; align-items: center; gap: 1rem; }
.mhg-nav__phone { display: inline-flex; align-items: center; gap: .45rem; color: var(--mhg-blue-deep); font-weight: 700; text-decoration: none; white-space: nowrap; }
.mhg-nav__phone:hover { color: var(--mhg-blue); }
.mhg-nav__phone-ico { width: 18px; height: 18px; color: var(--mhg-blue); display: inline-flex; }
.mhg-nav__phone-ico svg { width: 100%; height: 100%; }
.mhg-nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.mhg-nav__toggle span { display: block; height: 3px; width: 24px; margin: 0 auto; background: var(--mhg-blue-deep); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.mhg-nav.is-open .mhg-nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mhg-nav.is-open .mhg-nav__toggle span:nth-child(2) { opacity: 0; }
.mhg-nav.is-open .mhg-nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 991px) {
  .mhg-nav .mhg-nav__inner { flex-wrap: wrap; }
  .mhg-nav__menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,0.1); display: none; margin: 0; }
  .mhg-nav.is-open .mhg-nav__menu { display: block; }
  .mhg-nav__menu ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 5%; }
  .mhg-nav__menu li a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--mhg-line); }
  .mhg-nav__right { margin-left: auto; }
  .mhg-nav__toggle { display: flex; }
  .mhg-nav__phone span:last-child { display: none; }
}
@media (max-width: 520px) { .mhg-nav .mhg-btn--sm { display: none; } }

/* =========================================================================
   FOOTER  (mirrors mhg.css .mhg-footer block)
   The footer inner is a plain .container; bake the homepage container box into
   .mhg-footer .container so its width matches the homepage on Base pages too.
   ========================================================================= */
.mhg-footer { background: #fff; border-top: 1px solid var(--mhg-line); }
.mhg-footer .container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 1.5rem); padding-top: clamp(2.5rem,5vw,4rem); padding-bottom: 1.4rem; }
.mhg-footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1.5fr 1fr 1.2fr; }
@media (max-width: 860px) { .mhg-footer__top { grid-template-columns: 1fr; gap: 2rem; } }
.mhg-footer__brand img { height: 84px; width: auto; }
.mhg-footer__brand p { color: #55636e; margin: 1rem 0; max-width: 44ch; line-height: 1.6; }
.mhg-footer__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mhg-blue); color: #fff; transition: background .15s ease; }
.mhg-footer__social a:hover, .mhg-footer__social a:focus { background: var(--mhg-blue-deep); color: #fff; }
.mhg-footer__social svg { width: 20px; height: 20px; display: block; }
.mhg-footer__links h3, .mhg-footer__contact h3 { font-family: var(--mhg-font); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mhg-ink); margin: 0 0 1rem; }
.mhg-footer__links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.mhg-footer__links a { color: #55636e; text-decoration: none; font-weight: 600; }
.mhg-footer__links a:hover { color: var(--mhg-blue); }
.mhg-footer__row { display: flex; align-items: center; gap: .6rem; color: var(--mhg-ink); text-decoration: none; margin: 0 0 .7rem; font-weight: 600; }
.mhg-footer__row:hover { color: var(--mhg-blue); }
.mhg-footer__ico { width: 20px; height: 20px; color: var(--mhg-blue); flex: 0 0 auto; display: inline-flex; }
.mhg-footer__ico svg { width: 100%; height: 100%; }
.mhg-footer__lic { color: #5b6976; font-size: .85rem; margin: .2rem 0 0; }
.mhg-footer__bar { border-top: 1px solid var(--mhg-line); margin-top: 2.2rem; padding-top: 1.3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: #5b6976; font-size: .85rem; }
.mhg-footer__bar p { margin: 0; }
.mhg-footer__bar a { color: #55636e; text-decoration: none; }
.mhg-footer__bar a:hover { color: var(--mhg-blue); text-decoration: underline; }
.mhg-footer__meta span { margin: 0 .5rem; color: var(--mhg-line); }