/* ═══════════════════════════════════════════════════════════
   CTD shared chrome — header + footer
   One source of truth for the branding bar and the footer, so
   every non-homepage page renders them identically to the
   homepage (index.html builds the same thing from Tailwind
   utilities; the class names and markup match, only the styling
   route differs). 2026-09-06: re-synced to the homepage —
   flat navy, Inter, rounded search, 1760px cap, flex header,
   orange 2px footer rule.
   ═══════════════════════════════════════════════════════════ */

.site-header,
.site-footer {
  --ctdc-navy: #071536;
  --ctdc-orange: #F36F21;
  --ctdc-font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── HEADER ───────────────────────────────────────────────── */
.site-header {
  flex: none;
  background: var(--ctdc-navy);
  color: #fff;
  font-family: var(--ctdc-font);
}
.site-header__inner {
  max-width: 1760px;
  margin: 0 auto;
  height: clamp(62px, 9.4vh, 98px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.6vw, 28px);
  padding: 0 clamp(14px, 2.4vw, 46px);
}
.site-header .brand { display: flex; align-items: center; height: 100%; flex: none; }
.site-header .brand img {
  display: block;
  height: 72%;
  max-width: clamp(140px, 15vw, 290px);
  width: auto;
  object-fit: contain;
}

.global-search {
  position: relative;
  flex: none;
  min-width: 0;
  width: clamp(300px, 42.5vw, 816px);
}
.global-search input {
  width: 100%;
  height: clamp(38px, 5.4vh, 52px);
  padding: 0 48px 0 clamp(12px, 1.2vw, 22px);
  color: #334155;
  font-family: var(--ctdc-font);
  font-size: clamp(11px, 1vw, 15px);
  -webkit-appearance: none; appearance: none;
  border: 0; outline: 0; border-radius: 8px; box-shadow: none;
  background: #fff;
}
.global-search input::placeholder { color: #94a3b8; }
/* kill the native search decorations Safari/Chrome inject */
.global-search input::-webkit-search-decoration,
.global-search input::-webkit-search-cancel-button,
.global-search input::-webkit-search-results-button,
.global-search input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
/* full reset — the icon is the SVG below and nothing else */
.global-search button {
  position: absolute; right: 0; top: 0;
  height: 100%; width: 48px;
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0;
  border: 0; border-radius: 0 8px 8px 0; outline: 0; box-shadow: none;
  background: transparent; color: var(--ctdc-navy);
  display: grid; place-items: center; cursor: pointer;
  font: inherit; line-height: 0;
}
.global-search button::before,
.global-search button::after { content: none; display: none; }
.global-search button svg { display: block; flex: none; width: clamp(14px, 1.35vw, 20px); height: clamp(14px, 1.35vw, 20px); }

.header-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.6vw, 46px);
}
.header-nav a {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; color: #fff; text-decoration: none;
  font-size: clamp(8px, .78vw, 13px); font-weight: 500;
  white-space: nowrap; transition: color .15s;
}
.header-nav a svg { width: clamp(16px, 1.7vw, 25px); height: clamp(16px, 1.7vw, 25px); }
.header-nav a:hover { color: var(--ctdc-orange); }

/* Short landscape (a 1080p laptop at 150% scaling ≈ 1280×590) — matches the
   homepage's DF-01b header trim so every page's bar is the same height there. */
@media (min-width: 1024px) and (max-height: 720px) {
  .site-header__inner { height: clamp(58px, 9vh, 76px); }
}

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  flex: none;
  background: var(--ctdc-navy);
  color: #fff;
  border-top: 2px solid var(--ctdc-orange);
  font-family: var(--ctdc-font);
}
.site-footer__inner {
  max-width: 1760px;
  margin: 0 auto;
  display: grid;
  /* brand + the client's 5 sections (Company, Directory, Resources,
     Explore, Site Info) + Follow Us — FC-02. */
  grid-template-columns: 1.3fr 1fr 1.05fr 1.1fr 1fr .9fr .95fr;
  align-content: center;
  gap: 0 clamp(12px, 1.7vw, 38px);
  padding: clamp(22px, 3.6vh, 44px) clamp(16px, 3vw, 60px);
}
.footer-column { padding-left: clamp(10px, 1.2vw, 24px); min-width: 0; }
.footer-column:first-child { padding-left: 0; border-left: 0; }
.footer-column:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, .1); }
.footer-brand img { width: clamp(150px, 11vw, 196px); height: auto; margin-bottom: 12px; }
.footer-column p {
  margin: 0; color: rgba(255, 255, 255, .55);
  font-size: clamp(10px, .78vw, 12px); line-height: 1.6;
}
.footer-column h2 {
  margin: 0 0 12px; font-size: clamp(10px, .9vw, 14px); line-height: 1;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding-bottom: 8px; position: relative; color: #fff;
}
.footer-column h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px; background: var(--ctdc-orange);
}
.footer-column a {
  display: block; margin: 0 0 6px; color: rgba(255, 255, 255, .7);
  font-size: clamp(10px, .78vw, 12.5px); line-height: 1.15; transition: color .12s;
}
.footer-column a:hover { color: #fff; }

/* 4 across, 2 down. Eight icons stacked 2-across made this column twice the
   height of its neighbours and stretched the whole footer. */
.soc-grid {
  display: grid; grid-template-columns: repeat(4, clamp(30px, 2.4vw, 40px));
  grid-auto-rows: clamp(30px, 2.4vw, 40px);
  gap: 8px; margin-top: 0;
}
a.soc-btn {
  width: 100%; height: 100%; margin: 0;
  border-radius: 8px; display: grid; place-items: center;
  line-height: 0; transition: transform .12s, opacity .12s;
}
.soc-btn svg { width: clamp(14px, 1.1vw, 19px); height: clamp(14px, 1.1vw, 19px); display: block; flex: none; }
a.soc-btn:hover { transform: scale(1.05); opacity: .95; }
.soc-li { background: #0077B5; }
.soc-fb { background: #1877F2; }
.soc-yt { background: #FF0000; }
.soc-ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.soc-tt { background: #010101; }
.soc-hz { background: #4DBC15; }
.soc-pt { background: #BD081C; }
.soc-x  { background: #010101; }

/* ── BELOW THE lg BREAKPOINT (≤ 1023px) ──────────────────────
   Matches the homepage's max-lg: rules — the header wraps and
   the footer drops to 3 then 2 columns. Landscape desktop /
   laptop (the supported range) never hits this. */
@media (max-width: 1023px) {
  .site-header__inner {
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px clamp(10px, 3vw, 30px);
  }
  .site-header .brand img { height: 44px; max-width: none; }
  .global-search { order: 3; width: 100%; }
  .global-search input { height: 40px; }
  .header-nav { margin-left: auto; gap: 20px; }

  .site-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px clamp(12px, 1.7vw, 38px);
    padding: 32px clamp(16px, 3vw, 60px);
  }
  .footer-column { border-left: 0 !important; padding-left: 0; }
  .footer-column:first-child { grid-column: span 3; }
  .footer-brand img { width: clamp(150px, 40vw, 196px); }
}

@media (max-width: 640px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-column:first-child { grid-column: span 2; }
  .header-nav { gap: 12px; }
  .header-nav a { font-size: 10px; }
}