/* ==========================================================================
   Founders of Pakistan — shared theme layer
   --------------------------------------------------------------------------
   style.css holds the tokens and the original component structure. This file
   restyles that structure into the homepage's visual language so every page
   reads as one site: a compact serif-wordmark header, Montserrat 600 heads
   with Georgia italic accents, thin warm borders instead of heavy shadows,
   small radii, and champagne-gold hairlines.

   Load order matters — this file must come AFTER style.css and
   responsive.css, since it overrides both by cascade rather than by weight.
   Colour never appears here as a literal; everything reads the :root tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */
.container { max-width: 1240px; }

:focus-visible { outline: 3px solid var(--secondary-dark); outline-offset: 5px; }

/* --------------------------------------------------------------------------
   2. Header & navigation
   -------------------------------------------------------------------------- */
.navbar { border-bottom: 1px solid var(--border-color); }
.navbar__inner { min-height: 88px; gap: 28px; }

.brand { gap: 10px; }
.brand img { width: 60px; height: 60px; object-fit: contain; }
.brand__wordmark { color: var(--maroon); font: 700 21px/1.2 var(--font-display); white-space: nowrap; }
.brand__tagline { display: block; margin-top: 7px; color: var(--text-muted); font: 500 8px/1.4 var(--font-nav); letter-spacing: 2.6px; }

.nav__list { gap: 10px; }
.nav__link { font-size: 13px; padding: 14px 9px; letter-spacing: 0; color: var(--text-color); text-transform: none; }
.nav__link:hover { color: var(--maroon); }
.nav__link::after { left: 9px; right: 9px; bottom: 5px; background: var(--maroon); }
.nav__link[aria-current] { color: var(--maroon); }
.nav__caret { width: 11px; height: 11px; opacity: .65; }

.nav__submenu {
  top: 100%;
  min-width: 245px;
  padding: 8px;
  border: 1px solid var(--primary-line);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}
.nav__submenu a { padding: 11px 13px; font-size: 13px; border-radius: 4px; text-transform: none; }
.nav__submenu a:hover,
.nav__submenu a:focus-visible { background: var(--primary-tint); color: var(--maroon); }

.nav-cta .btn { min-height: 44px; padding: 12px 20px; font-size: 13px; gap: 14px; border-radius: 5px; }

/* --------------------------------------------------------------------------
   3. Buttons — flat, squared off, sentence case
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 4px;
  box-shadow: none;
  text-transform: none;
  letter-spacing: .1px;
  gap: 20px;
}
.btn:hover { box-shadow: none; }
.btn-gold { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--text-color); }
.btn-gold:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); color: var(--text-color); }
.btn-hero-primary { border-radius: 4px; box-shadow: none; text-transform: none; }
.btn-outline,
.btn-outline-dark { border-radius: 4px; text-transform: none; }

/* a quiet inline link that reads as a next step rather than a button */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 8px 0;
  font: 600 13px/1 var(--font-nav);
  color: var(--maroon);
}
.text-link:hover { color: var(--maroon-dark); text-decoration: underline; text-underline-offset: 5px; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1 { font-size: clamp(34px, 3.6vw, 50px); font-weight: 600; line-height: 1.18; letter-spacing: -1.8px; }
h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; letter-spacing: -1.4px; }
h3 { font-size: 21px; font-weight: 600; letter-spacing: -.5px; }
em { font-family: var(--font-display); font-weight: 400; font-style: italic; }

.eyebrow {
  display: inline-block;
  font: 700 11px/1.5 var(--font-nav);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--maroon);
  margin-bottom: 18px;
}
.home-eyebrow {
  display: block;
  font: 700 11px/1.5 var(--font-nav);
  letter-spacing: 2.4px;
  color: var(--maroon);
  margin-bottom: 22px;
}
.gold { color: var(--secondary-ink); }

/* the underline flourish under section titles belongs to the old theme */
.section-title::after { display: none; }
.section-title {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 600;
  letter-spacing: -1.4px;
  color: var(--text-color);
}
.section-title em { color: var(--maroon); }
.section-head { margin-bottom: 40px; }
.section-head p { margin-bottom: 5px; font-size: 16px; color: var(--text-body); }

/* --------------------------------------------------------------------------
   5. Section rhythm & bands
   -------------------------------------------------------------------------- */
.section { padding: 78px 0; }
.section--alt,
.section--wash,
.section--texture { background: var(--bg-alt); }
.section--blush { background: var(--primary-tint); }
.section--sep { border-top: 1px solid var(--border-color); }

/* --------------------------------------------------------------------------
   6. Inner page hero — the warm sand band the homepage opens with
   -------------------------------------------------------------------------- */
.page-hero,
.page-hero--light,
.page-hero--solid,
.page-hero--plain {
  background: var(--bg-alt);
  background-image: none;
  color: var(--text-body);
  padding: 74px 0 78px;
}
/* the old theme laid a white-to-gold wash over every inner hero */
.page-hero::before,
.page-hero--light::before,
.page-hero--solid::before,
.page-hero--plain::before { display: none; }
.page-hero h1,
.page-hero--light h1,
.page-hero--solid h1,
.page-hero--plain h1 { color: var(--maroon); margin-bottom: 18px; }

/* a handful of heroes still run over a photograph (the background-image is
   set inline per page). Those keep a scrim and light type, since maroon on
   maroon on a photo is unreadable. */
.page-hero[style*="background-image"] {
  background-color: var(--primary-deep);
  color: var(--text-on-dark);
}
.page-hero[style*="background-image"]::before {
  display: block;
  background: var(--scrim-soft);
  opacity: 1;
}
.page-hero[style*="background-image"] h1 { color: #fff; }
.page-hero[style*="background-image"] p { color: var(--primary-pale); }
.page-hero[style*="background-image"] .eyebrow { color: var(--secondary-light); }
.page-hero h1 em { color: var(--maroon); }
.page-hero p { font-size: 16px; line-height: 1.85; color: var(--text-body); }
.page-hero .eyebrow { color: var(--maroon); }

.hero-split,
.hero-split--plain,
.hero-split--maroon { background: var(--bg-alt); }
/* same white-to-gold wash the inner heroes used to carry */
.hero-split::before { display: none; }
.hero-split h1,
.hero-split--maroon h1 {
  font-family: var(--font-head);
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -1.6px;
  color: var(--maroon);
}
.hero-split h1 em { color: var(--maroon); }
.hero-split p,
.hero-split--maroon p { font-family: var(--font-nav); font-size: 16px; line-height: 1.85; color: var(--text-body); }
.hero-split .hero-panel__lead { color: var(--maroon); }
.hero-split__media img { max-width: 500px; border: 0; border-radius: 6px; box-shadow: none; }

/* hero button: flat, squared, no gold glow */
.btn-hero-primary {
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  box-shadow: none;
}
.btn-hero-primary:hover,
.btn-hero-primary:focus { background: var(--maroon-dark); color: #fff; box-shadow: none; }
.btn-hero-ghost { border-radius: 4px; box-shadow: none; }

/* --------------------------------------------------------------------------
   7. Surfaces — one card language across the site
   -------------------------------------------------------------------------- */
.card,
.callout,
.info-panel,
.form-card,
.venue,
.price,
.accordion__item,
.quote--bordered,
.pack-card,
.price-box {
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  box-shadow: none;
}
.card:hover,
.venue:hover,
.price:hover,
.pack-card:hover,
.price-box:hover {
  border-color: var(--maroon);
  box-shadow: none;
  transform: translateY(-5px);
}
.card--outline,
.card--outline2,
.card--gold { border-color: var(--border-color); }
/* the old theme filled these solid maroon; the homepage keeps its grids
   light and spends the maroon on one accent edge instead */
.card--maroon {
  background: var(--bg-color);
  border-color: var(--border-color);
  border-top: 3px solid var(--primary-color);
  color: var(--text-body);
}
.card--maroon:hover { border-color: var(--maroon); }
.card--maroon h3 { color: var(--maroon); }
.card--maroon p { color: var(--text-body); }
.card--dark { background: var(--bg-dark); border-color: var(--dark-line); }

.card__icon { border-radius: 6px; }
.card h3 { font-size: 19px; letter-spacing: -.4px; }
.card p { font-size: 14px; line-height: 1.75; }

.price--featured { border-color: var(--secondary-color); }
.price__amount { font-family: var(--font-display); font-weight: 700; letter-spacing: -1px; }

.tile,
.award-poster,
.split__media img,
.blog-mini img { border-radius: 6px; }
.tile span { color: var(--secondary-light); }

.person {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  box-shadow: none;
}
.person:hover { box-shadow: none; border-color: var(--maroon); }
.person__photo { border-color: var(--border-soft); }
.person__name { font-size: 17px; }
.person__role { color: var(--secondary-ink); }

/* inner-page testimonials borrow the homepage card's voice: serif italic
   copy, a gold-ringed portrait and a gold small-caps role */
.quote--bordered { padding: 42px 34px 34px; text-align: center; }
.quote--bordered p,
.quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-color);
}
.quote--bordered .quote__person { justify-content: center; gap: 14px; margin-top: 26px; }
.quote--bordered .quote__person img {
  width: 54px;
  height: 54px;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 0 0 1px var(--secondary-color);
}
.quote--bordered .quote__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-color);
}
.quote--bordered .quote__role {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--secondary-ink);
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.field input,
.field select,
.field textarea,
.form-stacked input { border-radius: 5px; border-color: var(--border-color); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--maroon); box-shadow: none; }
.field label { font-family: var(--font-nav); font-size: 12px; letter-spacing: .4px; color: var(--text-color); }

.form-status { border-radius: 5px; }
.form-status.is-error {
  background: var(--primary-tint);
  border-color: var(--primary-line);
  color: var(--status-error);
}

/* Honeypot. Off-screen rather than display:none, because a bot that reads
   the stylesheet skips fields it can see are hidden. Nothing focusable is
   left in the tab order: the input carries tabindex="-1". */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* --------------------------------------------------------------------------
   9. Accents reused from the homepage
   -------------------------------------------------------------------------- */
.star-rule__line { background: var(--secondary-color); opacity: .65; }
.star-rule svg { fill: var(--secondary-color); }
.pill { border-radius: var(--radius-pill); border-color: var(--secondary-color); }
.carousel__dot.is-active { background: var(--maroon); }
.carousel__btn { border-radius: 50%; }

/* --------------------------------------------------------------------------
   10. Closing call-to-action band
   -------------------------------------------------------------------------- */
.cta-band { background: var(--primary-color) center/cover no-repeat; padding: 82px 0; }
.cta-band::before { display: none; }
.cta-band h2 { color: var(--text-on-dark); font-size: clamp(28px, 3vw, 40px); }
.cta-band p { color: var(--primary-pale); }
.cta-band--light { background: var(--primary-tint); }
.cta-band--light h2 { color: var(--maroon); }
.cta-band--light p { color: var(--text-body); }
/* the one band that still runs over a photograph keeps a scrim */
.cta-band--photo::before { display: block; background: var(--scrim-soft); opacity: 1; }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding-top: 72px;
  background:
    radial-gradient(circle at 8% 0%, rgba(199, 165, 120, .09), transparent 28%),
    var(--primary-deep);
  border-top: 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--secondary-color) 20%, var(--secondary-color) 80%, transparent);
}
.footer-grid {
  grid-template-columns: minmax(255px, 1.55fr) repeat(3, minmax(135px, .85fr)) minmax(205px, 1.15fr);
  gap: 34px;
  align-items: start;
}
.footer-brand { padding-right: 30px; }
.footer-brand img { height: 76px; margin-bottom: 20px; }
.footer-brand h4 { font-size: 21px; }
.footer-brand .tagline { margin: 8px 0 18px; color: var(--secondary-light); font-size: 9px; letter-spacing: 2.8px; }
.footer-brand p { max-width: 330px; margin: 0; font-size: 13px; line-height: 1.8; }
.footer-social { justify-content: flex-start; margin-top: 25px; }
.footer-social a { width: 39px; height: 39px; border-color: rgba(255,255,255,.14); }
.footer-col {
  min-width: 0;
  padding: 0;
  border-left: 0;
  text-align: left;
}
.footer-col h5 {
  position: relative;
  min-height: 39px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  color: var(--secondary-light);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 1.6px;
}
.footer-col h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 1px;
  background: var(--secondary-color);
}
.footer-col li { margin-bottom: 9px; line-height: 1.45; }
.footer-col a { display: inline; color: var(--text-on-dark-3); font-size: 12.5px; line-height: 1.5; }
.footer-col a:hover { padding-left: 0; color: var(--secondary-light); text-decoration: underline; text-underline-offset: 4px; }
.footer-contact li { justify-content: flex-start; gap: 10px; margin-bottom: 13px; font-size: 12.5px; }
.footer-contact svg { width: 15px; height: 15px; margin-top: 2px; }
.footer-contact a { overflow-wrap: anywhere; }
.footer-bottom { margin-top: 58px; padding: 19px 0; background: var(--primary-deepest); font-size: 12px; letter-spacing: .2px; }

/* --------------------------------------------------------------------------
   12. Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .navbar__inner { gap: 18px; }
  .nav__list { gap: 2px; }
  .brand__wordmark { font-size: 19px; }
  .footer-grid { grid-template-columns: 1.25fr 1fr 1fr; gap: 38px 32px; }
  .footer-brand { grid-row: span 2; padding-right: 20px; }
  .footer-col:last-child { grid-column: 2 / -1; }
}

@media (max-width: 767px) {
  .navbar__inner { min-height: 76px; }
  .brand { gap: 5px; }
  .brand img { width: 48px; height: 48px; }
  .brand__wordmark { font-size: 18px; }
  .brand__tagline { font-size: 7px; letter-spacing: 2px; margin-top: 5px; }
  .hamburger { width: 44px; height: 44px; border: 1px solid var(--primary-line); border-radius: 6px; }
  .section { padding: 54px 0; }
  .page-hero { padding: 48px 0 52px; }
  .cta-band { padding: 56px 0; }
  .site-footer { padding-top: 50px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .footer-brand { grid-column: 1 / -1; grid-row: auto; padding: 0 0 30px; border-bottom: 1px solid var(--dark-line); text-align: center; }
  .footer-brand img { height: 72px; margin-inline: auto; }
  .footer-brand p { margin-inline: auto; }
  .footer-social { justify-content: center; }
  .footer-col:last-child { grid-column: auto; padding-top: 5px; }
  .footer-col h5 { min-height: 0; margin-bottom: 15px; }
  .footer-bottom { margin-top: 42px; }
}

@media (max-width: 480px) {
  .navbar__inner { gap: 8px; }
  .brand__wordmark { font-size: 16px; }
  .eyebrow,
  .home-eyebrow { font-size: 9px; letter-spacing: 1.8px; }
  .footer-grid { gap: 34px 18px; }
  .footer-col h5 { font-size: 10.5px; letter-spacing: 1.25px; }
  .footer-col a { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Site-wide upcoming event bar */
.home-event-alert { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 10px 24px; background: var(--secondary-color); color: var(--text-color); font: 600 12px/1.45 var(--font-nav); }
.home-event-alert:hover { color: var(--maroon); }
.home-event-alert span { padding: 4px 8px; border-radius: 3px; background: var(--primary-color); color: #fff; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; }
.home-event-alert em { color: var(--text-body); font-family: var(--font-nav); font-style: normal; font-weight: 400; }
.home-event-alert b { color: var(--maroon); }
@media (max-width: 600px) {
  .home-event-alert { flex-wrap: wrap; gap: 4px 10px; justify-content: flex-start; padding: 10px 18px; }
  .home-event-alert strong { width: calc(100% - 90px); }
  .home-event-alert em { margin-left: 64px; }
  .home-event-alert b { display: none; }
}

/* reCAPTCHA v2 checkbox on every form */
.form-captcha { margin-top: 28px; min-height: 78px; }
@media (max-width: 360px) {
  .form-captcha .g-recaptcha { transform: scale(.88); transform-origin: 0 0; }
}