/*
 * Shared header + footer (every public page). Loaded after style.css / custom.css and built only on
 * tokens.css. Dimensions are unchanged on purpose: other pages offset their content by the existing
 * header height (84px desktop, 60px mobile bar), so only type, colour and component styling change.
 */

/* style.css puts Inter on every element with `*`; :where() keeps these at zero specificity so they win
   by order but never beat icon fonts (.fa-*) or page-specific rules. */
:where(.header, .header *, .mobileHead, .mobileHead *, .footer, .footer *) { font-family: var(--font-body); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.header { background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 6px 18px -14px rgba(15, 46, 43, .35); }
nav a { color: var(--ink); font-weight: 600; font-size: 1rem; }
nav a:hover, nav a:focus-visible { color: var(--brand-700); }
/* Hover underline: desktop only. Positioning the links on mobile would paint them over the fixed
   slide-in submenu, so it stays scoped, and the mega menu gets an explicit layer either way. */
ul.mainMenu .mega-menu { z-index: 20; }
@media (min-width: 1024px) {
  ul.mainMenu > li > a { position: relative; }
  ul.mainMenu > li > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
    background: var(--brand-500); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out);
  }
  ul.mainMenu > li > a:hover::after, ul.mainMenu .submenu:hover > a::after { transform: scaleX(1); }
}

.header-link { color: var(--ink); font-size: 1rem; font-weight: 600; }
.header-link:hover { color: var(--brand-700); }
.header-btn {
  background: var(--brand-700); color: #fff; border-radius: var(--r-chip); padding: 10px 20px;
  font-size: 1rem; font-weight: 700; box-shadow: none; transition: background var(--dur-1), transform var(--dur-1);
}
.header-btn:hover { background: var(--brand-800); color: #fff; box-shadow: none; transform: translateY(-1px); }
.header-btn-outline {
  background: var(--surface); color: var(--brand-800); border: 1.5px solid var(--brand-700);
  border-radius: var(--r-chip); padding: 8.5px 18px; font-size: 1rem; font-weight: 700;
}
.header-btn-outline:hover { background: var(--brand-50); color: var(--brand-800); }
form.logout button { color: #B42318; background: #FDECEA; font-weight: 600; }
.header-btn--auth { white-space: nowrap; }

/* "Partner With Us": a plain nav-style link with a FREE pill. The pill is absolutely positioned so it
   never moves the baseline; the right margin keeps it clear of the Login / Sign up button. */
.header-partner {
  position: relative; display: inline-flex; align-items: center; gap: 7px; margin-right: 10px;
  color: var(--ink); font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.header-partner:hover { color: var(--brand-700); }
.header-partner .fa-handshake { color: var(--brand-600); font-size: .95em; }
.header-badge {
  position: absolute; top: -17px; right: -12px; padding: 2px 6px; border-radius: var(--r-chip);
  background: var(--sun); color: var(--ink); font-size: 10px; font-weight: 800; line-height: 1.2;
  letter-spacing: .05em; text-transform: uppercase; pointer-events: none;
}
/* style.css zeroes .usr link margins at 1024-1279px; the pill still needs its clearance there. */
@media (min-width: 1024px) and (max-width: 1279px) { .header .usr a.header-partner { margin-right: 12px; } }
@media (max-width: 1023px) {
  /* Open mobile menu: the partner link is a normal menu row with the pill inline after the label. */
  .header-partner { width: 100%; margin: 0; padding: 4px 0; }
  .header-badge { position: static; }
}

/* Mega menu */
ul.mainMenu .dropdown-content { border: 1px solid var(--line); border-radius: var(--r-widget); box-shadow: var(--sh-2); }
ul.mainMenu .dropdown-title { font-family: var(--font-display); font-weight: 650; color: var(--ink); font-size: 1.125rem; }
ul.mainMenu .dropdown-items { color: var(--ink); font-size: var(--fs-label); font-weight: 500; }
ul.mainMenu .dropdown-items:hover { color: var(--brand-700); }
ul.mainMenu .dot-blue { background: var(--brand-500); }
ul.mainMenu .dot-gray { background: var(--line-strong); }
ul.mainMenu .divider-line { border-top-color: var(--line); }
ul.mainMenu .btn-view-all { background: var(--brand-50); color: var(--brand-800); border-radius: var(--r-tile); font-size: var(--fs-label); font-weight: 700; box-shadow: none; }
ul.mainMenu .btn-view-all:hover { background: var(--brand-700); color: #fff; box-shadow: none; }

/* Mobile bar + slide-in menu */
.mobileHead { box-shadow: 0 1px 0 var(--line); }
.mobile-nav-trigger { color: var(--ink); cursor: pointer; }
@media (max-width: 1023px) {
  header.header.open { border-top: 1px solid var(--line); }
  /* The desktop 60px container padding squeezed the open menu into the middle of the screen. */
  header.header.open .container { padding: 0 4px; }
  ul.mainMenu li { border-bottom: 1px solid var(--surface-2); }
  .mega-menu .back { color: var(--brand-800); font-weight: 700; }
}

/* Keyboard focus, visible everywhere in the chrome */
:is(.header, .mobileHead, .footer) :is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-light); outline-offset: 3px; border-radius: 6px;
}
.footer :is(a, button):focus-visible { outline-color: var(--focus-dark); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  background:
    radial-gradient(900px 320px at 12% -10%, rgba(5, 191, 165, .14), transparent 70%),
    var(--ink-900);
  color: var(--on-dark-muted);
}
.footer p { color: var(--on-dark-muted); font-size: 1rem; line-height: var(--lh-body); }
.footer h3 { font-family: var(--font-display); font-weight: 650; color: var(--on-dark); font-size: 1.125rem; line-height: 1.3; letter-spacing: 0; margin: 0 0 18px; }
.footer ul li { margin-bottom: 12px; }
.footer ul li a { color: var(--on-dark-muted); font-size: var(--fs-label); line-height: 1.45; transition: color var(--dur-1); }
.footer ul li a:hover { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--brand-500); text-underline-offset: 4px; }
.social a { border-color: rgba(255, 255, 255, .2); color: var(--on-dark); }
.social a:hover { background: var(--brand-700); border-color: var(--brand-700); }
.contact-icon { background: rgba(5, 191, 165, .14); color: var(--brand-300); font-size: 15px; }
.contact-item span { color: var(--on-dark-muted); font-size: var(--fs-meta); }
.contact-item strong { color: var(--on-dark); font-weight: 600; font-size: 1rem; }
.footer-divider { max-width: none; background: rgba(255, 255, 255, .12); }
/* style.css centres these at 1200px, which left them inset from the columns above. */
.footer-bottom { max-width: none; color: var(--on-dark-muted); font-size: var(--fs-meta); }
.footer-links a { color: var(--on-dark-muted); font-size: var(--fs-meta); }
.footer-links a:hover { color: var(--on-dark); }

/* Below desktop: minmax(0, 1fr) stops a long email address from starving the other column;
   on phones the brand, articles and contact blocks take the full width. */
@media (max-width: 991px) {
  .footer-top.sq-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sq-footer-top > :is(.sq-footer-brand, .sq-footer-posts, .sq-footer-contact) { grid-column: 1 / -1; }
  .footer-links { gap: 10px 20px; }
}