/* ==========================================================================
   theme.css — Mullins & McGinn Publishing brand override layer
   Loads AFTER the compiled Tailwind styles.css, so everything here wins.
   Central place for brand colors. Fonts intentionally left as the template's
   (big bold display style is kept as-is per brand direction).
   ========================================================================== */

:root {
  --mnm-blue:   #153D6C;   /* navy from the logo (core #103868) */
  --mnm-blue-2: #103868;   /* darkest navy */
  --mnm-gold:   #D8A838;   /* gold from the logo */
  --mnm-grey:   #1a202c;   /* charcoal (matches template gray-900) */
}

/* Brand utility classes (used across the rebuilt sections) */
.text-brand-gold { color: var(--mnm-gold) !important; }
.text-brand-blue { color: var(--mnm-blue) !important; }
.bg-brand-gold   { background-color: var(--mnm-gold) !important; }
.bg-brand-blue   { background-color: var(--mnm-blue) !important; }
.bg-brand-grey   { background-color: var(--mnm-grey) !important; }
.border-brand-gold { border-color: var(--mnm-gold) !important; }

/* Keep each slider's logo (top of the image) from being cropped by object-cover */
.swiper-slide img { object-position: top center !important; }

/* Safety net: the bundled AOS scroll-reveal is unreliable offline and can
   leave content stuck invisible. Force all reveal elements to their final
   visible state. (Revisit with a dedicated GSAP animation pass later.) */
[data-aos] { opacity: 1 !important; transform: none !important; }

/* Site logo sizing (compiled Tailwind purged h-* utilities, so size here) */
.site-logo { height: 44px; width: auto; }
@media (min-width: 1024px) { .site-logo { height: 52px; } }

/* Compact top nav (homepage) so the full top of each slider is visible on
   load. The template's header had an 80px empty band + tall nav padding that
   overlapped and hid the top of the hero. Header height and the main offset
   that clears it are kept in sync here. */
header { padding-top: 8px !important; }
header nav { padding-top: 8px !important; padding-bottom: 8px !important; }
main { padding-top: 76px !important; }   /* ≈ compacted header height (all pages) */

/* Reliable spacing utilities. Compiled Tailwind purged many padding classes,
   so define our own, sized to match the homepage blue section: 4rem then 7.5rem. */
.mnm-y { padding-top: 4rem; padding-bottom: 4rem; }
.mnm-t { padding-top: 4rem; }
.mnm-b { padding-bottom: 4rem; }
@media (min-width: 1024px) {
  .mnm-y { padding-top: 7.5rem; padding-bottom: 7.5rem; }
  .mnm-t { padding-top: 7.5rem; }
  .mnm-b { padding-bottom: 7.5rem; }
}

/* MVP hide flag — elements parked for later (remove the class to bring them back). */
.mnm-hidden { display: none !important; }

/* Light grey section band (matches the tone used on the 2x4 locations area) */
.bg-brand-light { background-color: #f1f1f2 !important; }

/* Leadership card hover: whole card (photo, name, title, info) washes brand-blue,
   name + info text turn white, the gold title stays gold. */
.leader-card { transition: transform .2s ease, background-color .2s ease; border-radius: 12px; padding: 1.25rem; height: 100%; }
.leader-card:hover { background-color: var(--mnm-blue); transform: translateY(-6px); }
.leader-card:hover .lc-name, .leader-card:hover .lc-info { color: #fff !important; }
.leader-photo { background:#e3e3e5; border-radius:8px; aspect-ratio:399/777; width:100%; display:flex; align-items:center; justify-content:center; color:#9a9aa2; font-size:.9rem; overflow:hidden; }
.leader-photo img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.leader-card:hover .leader-photo { background:#0e2c53; color:#cbd6e6; }

/* Wide 3-column list variant (long items fit on one line; centre wide enough
   that the stacked gold heading never overlaps the lists) */
@media (min-width: 1024px) {
  .cw-list { width: 38% !important; }
  .cw-head { width: 24% !important; }
  /* roomy variant: keep text-xl but give the side lists more room (tighter centre) */
  .rm-list { width: 42% !important; }
  .rm-head { width: 16% !important; }
}

/* Nav-link hover accent (gold) */
.hover\:text-brand-gold:hover { color: var(--mnm-gold) !important; }

/* Gold button that keeps the template's hover-invert behavior */
.button.bg-brand-gold:hover {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}