/* assets/css/chrome.css
 * Global chrome: header, footer, and shared components (button, wrap).
 * Loaded on EVERY route so the redesigned header/footer are styled even on
 * legacy TSEG-copied inner pages (which do NOT load globals.css). Everything is
 * lh-scoped and self-resets within its own subtrees, so it never alters legacy
 * TSEG markup. Colors come from tokens.css; incidental on-dark text greys and
 * shadow rgba() values are carried over verbatim from the mockup.
 */

/* Theme-relative asset URL (resolves from this file's location in assets/css/). */
:root { --lh-logo: url(../img/logo.webp); }

/* ---- scoped reset (chrome subtrees only; globals.css handles migrated pages) ---- */
.lh-nav, .lh-nav *,
.lh-footer, .lh-footer *,
.lh-mcall, .lh-mcall * { box-sizing: border-box; margin: 0; }
.lh-nav, .lh-footer, .lh-mcall { font-family: var(--body); line-height: 1.6; }
.lh-footer ul { list-style: none; padding: 0; }
.lh-nav a, .lh-footer a, .lh-mcall { text-decoration: none; color: inherit; }

/* ---- layout utility ---- */
.lh-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---- button component ---- */
.lh-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-weight: 600; font-size: .92rem;
  padding: 13px 24px; border-radius: 2px; cursor: pointer; border: none;
  text-decoration: none; transition: transform .18s, box-shadow .18s, background .2s;
}
.lh-btn--gold { background: var(--gold); color: var(--navy); }
.lh-btn--gold:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(199,168,122,.36); }
.lh-btn--outline { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.55); }
.lh-btn--outline:hover { border-color: var(--gold); color: var(--gold); }
.lh-btn--navy { background: var(--navy); color: var(--white); }
.lh-btn--navy:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20,27,33,.28); }
.lh-btn--mt { margin-top: 22px; }

/* ---- mobile call bar (hidden on desktop) ---- */
.lh-mcall { display: none; }

/* body scroll lock while the mobile menu is open */
body.lh-nav-locked { overflow: hidden; }

/* ---- primary nav ---- */
.lh-nav { position: sticky; top: 0; z-index: 80; background: var(--white); border-bottom: 1px solid var(--line); }
.lh-nav-inner { display: flex; align-items: stretch; justify-content: space-between; height: 96px; padding-left: 40px; }
.lh-logo-lockup { display: block; flex-shrink: 0; align-self: center; width: 300px; height: 60px; background: var(--lh-logo) left center / contain no-repeat; }
.lh-navlinks { display: flex; gap: 30px; align-items: center; font-weight: 500; font-size: .96rem; flex: 1; justify-content: center; padding: 0 28px; }
.lh-navlinks > div { position: relative; }
.lh-nav-top { position: relative; padding: 38px 0; color: var(--navy); transition: color .2s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lh-nav-top:hover { color: var(--gold); }
/* button variant (dropdown-toggle parents with no URL, e.g. Locations) */
button.lh-nav-top { background: none; border: 0; font: inherit; cursor: pointer; }
.lh-has-drop > .lh-nav-top::after { content: "\25BE"; font-size: .7rem; color: var(--gold); }
.lh-nav-esp { gap: 8px; }
.lh-flag-es { display: inline-block; width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(to bottom,#c60b1e 0 30%,#ffc400 30% 70%,#c60b1e 70% 100%); flex-shrink: 0; }

.lh-drop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--navy); min-width: 248px; border-radius: 4px; padding: 10px 0; opacity: 0; visibility: hidden; transition: .22s; box-shadow: 0 20px 50px rgba(6,21,43,.4); border-top: 3px solid var(--gold); z-index: 90; }
/* Desktop only: hover/keyboard/click open of the absolute dropdown. Kept out of
   the base so its translateX(-50%) can't leak onto the mobile accordion panel —
   on touch, a tap leaves a sticky :hover and the un-gated transform shifted the
   static panel off-center, rendering it as an empty navy box (mobile-nav bug). */
@media (min-width: 901px) {
	.lh-has-drop:hover .lh-drop,
	.lh-has-drop.is-open .lh-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
}
.lh-drop a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 22px; color: #cfd8e6; font-size: .88rem; transition: .18s; }
.lh-drop a:hover { background: rgba(199,168,122,.12); color: var(--gold); padding-left: 27px; }
.lh-drop__div { height: 1px; background: rgba(255,255,255,.1); margin: 8px 0; }
.lh-drop__all { color: var(--gold); font-weight: 600; }

/* gold call block, bleeds to the right edge */
.lh-callblock { display: flex; align-items: center; gap: 16px; background: var(--gold); color: var(--navy); padding: 0 44px 0 36px; flex-shrink: 0; }
.lh-callblock__icon { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--navy); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.lh-callblock__text { display: flex; flex-direction: column; line-height: 1.15; }
.lh-callblock__sm { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.lh-callblock__num { font-family: var(--display); font-weight: 700; font-size: 1.7rem; letter-spacing: .01em; }

/* hamburger (hidden on desktop) */
.lh-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; background: none; border: none; cursor: pointer; align-self: center; }
.lh-nav-toggle span { display: block; height: 2px; width: 24px; background: var(--navy); transition: .2s; }

/* ---- footer ---- */
.lh-footer { background: var(--navy-deep); color: #9fadc2; padding: 68px 0 28px; }
.lh-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 46px; }
.lh-foot-logo { display: block; width: 236px; height: 48px; background: var(--white) var(--lh-logo) center / 200px no-repeat; border-radius: 6px; padding: 8px; margin-bottom: 16px; }
.lh-footer p { font-size: .9rem; line-height: 1.7; }
.lh-footer h4 { color: var(--white); font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 16px; }
.lh-footer li { margin-bottom: 9px; font-size: .9rem; }
.lh-footer a:hover { color: var(--gold); }
.lh-foot-cta { margin-top: 10px; }
.lh-foot-cta a { color: var(--gold); font-weight: 600; }
.lh-foot-disclaimer { margin-bottom: 22px; font-size: .76rem; line-height: 1.6; color: rgba(159,173,194,.78); }
.lh-foot-disclaimer summary { cursor: pointer; list-style: none; letter-spacing: .03em; }
.lh-foot-disclaimer summary::-webkit-details-marker { display: none; }
.lh-foot-disclaimer__more { color: var(--gold); font-weight: 600; white-space: nowrap; }
.lh-foot-disclaimer[open] .lh-foot-disclaimer__more { display: none; }
.lh-foot-disclaimer p { margin-top: 10px; }
.lh-foot-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; display: flex; justify-content: space-between; font-size: .8rem; flex-wrap: wrap; gap: 12px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .lh-nav-inner { height: 72px; padding-left: 16px; }
  .lh-logo-lockup { width: 210px; height: 44px; }
  .lh-nav-toggle { display: flex; }

  /* nav links collapse into a toggle panel */
  .lh-navlinks {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 8px 0; background: var(--white);
    border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(20,27,33,.12);
    max-height: 80vh; overflow: auto;
  }
  .lh-nav-open .lh-navlinks { display: flex; }
  .lh-navlinks > div { width: 100%; }
  .lh-nav-top { padding: 14px 20px; width: 100%; }
  .lh-has-drop > .lh-nav-top::after { margin-left: auto; transition: transform .25s ease; }
  .lh-has-drop.is-open > .lh-nav-top::after { transform: rotate(180deg); } /* chevron flips open */

  /* mobile dropdown = inline, indented accordion (dark navy sub-panel + light
     links, matching the desktop dropdown). Dark panel keeps contrast readable
     on every route, including legacy pages whose TSEG CSS tints bare links. */
  .lh-drop {
    position: static; transform: none; opacity: 1; visibility: visible; display: block;
    box-shadow: none; border-top: none; border-radius: 0; min-width: 0;
    background: var(--navy-2); padding: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .lh-has-drop.is-open .lh-drop { max-height: 640px; }
  .lh-nav .lh-drop a { color: #d3dceb; justify-content: flex-start; padding: 12px 20px 12px 38px; font-size: .9rem; }
  .lh-nav .lh-drop a:hover { background: rgba(199,168,122,.16); color: var(--gold-bright); padding-left: 38px; }
  .lh-drop__div { background: var(--line); }
  .lh-drop__all { color: var(--gold-deep); }

  /* hamburger animates to an X when the menu is open (clear close affordance) */
  .lh-nav-toggle span { transition: transform .25s ease, opacity .2s ease; }
  .lh-nav-open .lh-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .lh-nav-open .lh-nav-toggle span:nth-child(2) { opacity: 0; }
  .lh-nav-open .lh-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The verbose gold call block is redundant on mobile (the sticky gold .lh-mcall
     bar carries the call CTA) and was clipping in the narrow nav row. Hide it. */
  .lh-callblock { display: none; }

  .lh-mcall { display: flex; position: sticky; top: 0; z-index: 60; background: var(--gold); color: var(--navy); align-items: center; justify-content: center; gap: 8px; padding: 13px; font-weight: 700; letter-spacing: .05em; text-align: center; }

  .lh-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .lh-foot-grid { grid-template-columns: 1fr; }
}