/* seo-additions.css: load AFTER styles.css on every page.
   Styles for the new subpages, footer link columns, nav phone link and the H1 kicker. */

/* nav: more links now, tighten spacing on mid-size screens */
.nav-call { font-weight: 600; color: var(--gold); }
@media (max-width: 1180px) and (min-width: 901px) {
  .nav-links { gap: 14px; font-size: 13px; }
}

/* homepage H1 keyword kicker (keeps "Photo Booths, Y'all." as the visual headline) */
.h1-kicker {
  display: block;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.35;
  margin-bottom: 14px;
  max-width: none;
}

/* subpage hero */
.page-hero { min-height: 70vh; }
.page-hero h1 {
  font-size: clamp(40px, 6.4vw, 74px);
  line-height: 1;
  max-width: 15ch;
}
.page-hero h1 em { font-size: 1.05em; }
.crumbs { font-size: 13px; letter-spacing: 0.04em; color: #d8cfc3; margin-bottom: 14px; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.crumbs span[aria-hidden] { margin: 0 6px; opacity: 0.6; }

/* long-form copy */
.prose > * { max-width: 780px; }
.prose h2 { font-size: clamp(26px, 3.6vw, 38px); margin: 52px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: #d9cfc4; margin-bottom: 14px; font-size: 17px; }
.prose .checklist { margin: 14px 0 8px; }
.prose a, .lede a, .faq a, .card a:not(.btn) {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.book .lede a { color: var(--pink-deep); }

/* pricing comparison table */
.compare-wrap { overflow-x: auto; margin: 20px 0 8px; border: 1px solid var(--line); border-radius: 18px; }
.compare { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15px; }
.compare caption { text-align: left; padding: 14px 16px; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; }
.compare th, .compare td { padding: 12px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-family: "Fraunces", Georgia, serif; font-size: 17px; color: var(--cream); }
.compare tbody th { color: #d8cfc3; font-weight: 500; }
.compare td { color: #efe6db; }

/* related links */
.related { padding-top: 0; }
.related h2 { font-size: clamp(24px, 3vw, 32px); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.related-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px; border-radius: 20px;
  background: #191316; border: 1px solid var(--line);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.related-card:hover { border-color: rgba(255, 75, 141, 0.55); transform: translateY(-1px); }
.related-card strong { font-family: "Fraunces", Georgia, serif; font-size: 20px; }
.related-card span { color: #cbbfb3; font-size: 14px; }

/* footer columns */
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; align-items: start; }
.foot-grid nav a { display: block; padding: 3px 0; }
.foot-grid nav a:hover, .foot-contact a:hover { color: var(--gold); }
.foot-head { color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; font-size: 12px; margin-bottom: 8px; }
.foot-contact { margin-top: 10px; }
.foot-contact a { text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { margin-top: 24px; }

@media (max-width: 900px) {
  .related-grid, .foot-grid { grid-template-columns: 1fr; }
  .page-hero { min-height: 64vh; }
}