/* ============================================================================
   Verity Gulf - page-specific overrides only.
   If a rule here would be useful on a second page it belongs in
   components.css or sections.css instead.
   ========================================================================= */

/* ============================================================ 404 */

.error-page { display: grid; justify-items: center; gap: var(--s-5); padding-block: var(--s-14); text-align: center; }

.error-page__code {
  position: relative;
  color: var(--fg-heading);
  font-family: var(--font-display);
  font-size: clamp(72px, 14vw, 120px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.error-page__code::after {
  content: "";
  display: block;
  inline-size: 72px;
  block-size: 4px;
  margin: var(--s-4) auto 0;
  background: var(--accent);
  border-radius: var(--r-pill);
}

.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* ============================================================ MAINTENANCE */

.maintenance {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  padding: var(--s-6);
  text-align: center;
}

/* ============================================================ ABOUT */

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
  padding-block: var(--s-10);
  background: var(--c-brand-800);
  color: rgba(255, 255, 255, .78);
  border-radius: var(--r-xl);
  text-align: center;
}

.about-stats__value {
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1;
}

.about-stats__label { margin-block-start: var(--s-2); font-size: var(--fs-xs); }

.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }

.team-member { display: grid; gap: var(--s-3); text-decoration: none; }

.team-member .media { --media-ratio: 1 / 1; border-radius: var(--r-lg); }

.team-member__name { color: var(--fg-heading); font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; }
.team-member__desk { color: var(--fg-meta); font-size: var(--fs-xs); }

/* The process list on the About page - a numbered set of steps. */
.process { display: grid; gap: var(--s-5); counter-reset: step; }

.process__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  counter-increment: step;
}

.process__item::before {
  content: counter(step);
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

.process__title { color: var(--fg-heading); font-family: var(--font-display); font-weight: 700; }

/* ============================================================ CONTACT */

.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); align-items: start; }

.contact-card {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--s-7));
  padding: var(--s-6);
  background: var(--bg-surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
}

.contact-row { display: flex; gap: var(--s-3); padding-block: var(--s-3); }
.contact-row + .contact-row { border-block-start: var(--hairline) solid var(--line-soft); }
.contact-row .ui { color: var(--brand); font-size: 18px; margin-block-start: 2px; }
.contact-row__label { display: block; color: var(--fg-meta); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-2xs); text-transform: uppercase; }
.contact-row__value { color: var(--fg-heading); font-size: var(--fs-sm); }

/* The news-tip panel is deliberately louder than the rest of the page. */
.tip-panel {
  padding: var(--s-6);
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-2);
  border-radius: var(--r-lg);
}

/* A map is only loaded on request, so nothing reaches Google until asked. */
.map-embed {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 320px;
  background: var(--bg-surface-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.map-embed iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.map-embed__note { margin-block-start: var(--s-3); color: var(--fg-meta); font-size: var(--fs-xs); }

/* ============================================================ ADVERTISE */

.rate-card { overflow-x: auto; }
.rate-card table { min-inline-size: 640px; }

.package-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }

.package {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-7);
  background: var(--bg-surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
}

.package--featured { background: var(--brand); border-color: transparent; color: rgba(255, 255, 255, .86); }
.package--featured .package__name,
.package--featured .package__price { color: #FFFFFF; }

.package__flag {
  position: absolute;
  inset-block-start: calc(var(--s-4) * -1);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tr-2xs);
  text-transform: uppercase;
  white-space: nowrap;
}

.package__name { color: var(--fg-heading); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; }
.package__price { color: var(--fg-heading); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; }

/* ============================================================ NEWSLETTER */

.newsletter-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-9); align-items: center; }

.preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }

/* ============================================================ LEGAL */

.legal-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-9); align-items: start; }

.legal-body h2 { margin-block: var(--s-8) var(--s-4); font-size: var(--fs-h3); }
.legal-body h3 { margin-block: var(--s-6) var(--s-3); font-size: var(--fs-h4); }
.legal-body > * + * { margin-block-start: var(--s-5); }
.legal-body ul, .legal-body ol { padding-inline-start: var(--s-6); }
.legal-body li + li { margin-block-start: var(--s-2); }

.legal-updated { color: var(--fg-meta); font-size: var(--fs-xs); }

/* ============================================================ SITEMAP */

.sitemap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); align-items: start; }
.sitemap-col h2 { margin-block-end: var(--s-4); font-size: var(--fs-h4); }
.sitemap-col ul { display: grid; gap: var(--s-2); }
.sitemap-col a { color: var(--fg-body); font-size: var(--fs-sm); text-decoration: none; }

@media (hover: hover) {
  .sitemap-col a:hover { color: var(--brand); }
}

/* ============================================================ VIDEOS */

.video-hub { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--grid-gap); align-items: start; }

.video-playlist {
  max-block-size: 560px;
  overflow-y: auto;
  padding: var(--s-4);
  background: var(--bg-surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-xl);
}

.video-playlist .card--row.is-playing { background: var(--brand-soft); border-radius: var(--r-md); padding-inline: var(--s-3); }

/* ============================================================ COOKIE BAR */

.cookie-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.cookie-bar__text { max-inline-size: 60ch; color: var(--fg-muted); font-size: var(--fs-xs); }

/* ============================================================ DRAWER */

.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-5); }

.drawer__nav { display: grid; }

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-block-size: 50px;
  inline-size: 100%;
  color: var(--fg-heading);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 600;
  text-align: start;
  text-decoration: none;
  border-block-end: var(--hairline) solid var(--line-soft);
}

.drawer__sub { display: none; padding-block: var(--s-2); padding-inline-start: var(--s-4); }
.drawer__sub.is-open { display: grid; gap: var(--s-2); }
.drawer__sub a { color: var(--fg-muted); font-size: var(--fs-sm); text-decoration: none; }

.drawer__foot { display: grid; gap: var(--s-4); margin-block-start: var(--s-6); }

.drawer__theme { display: flex; align-items: center; gap: var(--s-2); }
.drawer__theme .theme-toggle { margin-inline-start: -10px; }
.drawer__theme-label { font-size: var(--fs-xs); color: var(--fg-meta); }
.no-js .drawer__theme { display: none; }

.drawer__contact { display: flex; align-items: center; gap: var(--s-3); color: var(--fg-body); font-size: var(--fs-sm); text-decoration: none; }

.socials { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.socials a {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  background: var(--bg-surface-2);
  color: var(--fg-muted);
  border-radius: 50%;
  text-decoration: none;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

@media (hover: hover) {
  .socials a:hover { background: var(--brand); color: var(--on-brand); }
}

/* On the dark footer the social buttons invert. */
.site-footer .socials a { background: rgba(255, 255, 255, .10); color: #FFFFFF; }

@media (hover: hover) {
  .site-footer .socials a:hover { background: var(--c-brand-700); }
}

/* ============================================================ FOOTER */

.site-footer__col h3 {
  margin-block-end: var(--s-4);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tr-2xs);
  text-transform: uppercase;
}

.site-footer__col ul { display: grid; gap: var(--s-3); }
.site-footer a { color: inherit; text-decoration: none; }

@media (hover: hover) {
  .site-footer a:hover { color: #FFFFFF; }
}

.site-footer__desc { max-inline-size: 34ch; font-size: 14px; line-height: 1.8; }
.site-footer__contact { display: grid; gap: var(--s-3); margin-block: var(--s-5); font-size: 14px; }
.site-footer__contact li { display: flex; align-items: center; gap: var(--s-3); }
.site-footer__contact .ui { color: var(--c-gold-500); }

.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }

/*
 * Footer columns are <details>. Above 576px the disclosure is switched off
 * entirely - the marker is hidden, the summary is not a pointer, and the list
 * is forced visible - so the same markup is four columns on desktop and four
 * accordions on a phone with no JS involved either way.
 */
.site-footer__col > summary { cursor: default; }
.site-footer__col > summary::-webkit-details-marker { display: none; }
.site-footer__col > summary h3 { margin-block-end: 0; }

@media (min-width: 576px) {
  .site-footer__col > summary { pointer-events: none; }
  .site-footer__col > summary h3 { margin-block-end: var(--s-4); }
  /* Open regardless of the attribute, so a closed <details> cannot hide a
     column on desktop. */
  .site-footer__col > ul { display: grid !important; }
}

@media (max-width: 575.98px) {
  .site-footer__col > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 50px;
    cursor: pointer;
    border-block-end: 1px solid rgba(255, 255, 255, .12);
  }

  .site-footer__col > summary::after {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--t-base) var(--ease);
  }

  .site-footer__col[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .site-footer__col > ul { padding-block: var(--s-4); }
}