/* ===========================
   Wedding Site Main Styles
   Uses constants from wedding-constants.js
   =========================== */

/* Global resets and base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  min-height: 100vh;
}

body {
  background: var(--color-page-bg);
  color: var(--color-primary-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

/* ===========================
   Card Container (Main Layout)
   =========================== */

.container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

.page-card {
  position: relative;
  background: var(--color-card-bg);
  border-radius: 0 0 var(--radius-card-bottom) var(--radius-card-bottom);
  box-shadow: var(--shadow-card);
  margin-top: 0;
  overflow: hidden;
}

/* Bottom spacer to ensure card never touches bottom of screen */
.bottom-spacer {
  width: 100%;
  background: var(--color-page-bg);
  height: clamp(24px, 3vw, 48px);
}

/* Enhanced paper texture effect using constants */
.page-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Organic paper speckles */
    radial-gradient(1200px 800px at -140px 140px, rgba(139, 110, 70, var(--texture-dot-alpha)) 0%, transparent 42%),
    radial-gradient(900px 700px at 120% 70%, rgba(139, 110, 70, calc(var(--texture-dot-alpha) * 0.8)) 0%, transparent 48%),
    radial-gradient(600px 600px at 30% 80%, rgba(139, 110, 70, calc(var(--texture-dot-alpha) * 0.6)) 0%, transparent 35%),
    /* Paper fibers */
    repeating-linear-gradient(16deg, rgba(110, 90, 70, var(--texture-fiber-alpha)) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-12deg, rgba(110, 90, 70, calc(var(--texture-fiber-alpha) * 0.85)) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(74deg, rgba(110, 90, 70, calc(var(--texture-fiber-alpha) * 0.4)) 0 1px, transparent 1px 8px),
    /* Subtle vignette */
    radial-gradient(160% 120% at 50% 40%, rgba(0, 0, 0, .02), transparent 60%);
  mix-blend-mode: multiply;
  opacity: .35;
}

.card-inner {
  padding: 0 var(--spacing-card-padding);
}

/* ===========================
   Header Section
   =========================== */

.site-header {
  text-align: center;
  padding: var(--spacing-header-top) 0 var(--spacing-header-bottom);
}

/* Logo styling */
.logo-container {
  margin-bottom: var(--logo-margin-bottom);
}

.logo-link {
  display: block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.logo-link:hover {
  opacity: 0.8;
}

.logo {
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Fallback logo placeholder if no image */
.logo-placeholder {
  margin: 0 auto var(--logo-margin-bottom);
  background: var(--color-light-blue);
  color: var(--color-royal-blue);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 24 / 25;
  /* keeps the 240×250 shape */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  /* avoid var(--logo-diameter) here */
  box-shadow: 0 4px 16px rgba(65, 105, 225, 0.15);
}

/* Clickable couple names */
.couple-names-link {
  text-decoration: none;
  display: block;
  transition: opacity 0.2s ease;
  margin-top: var(--spacing-logo-to-names-gap);
}

.couple-names-link:hover {
  opacity: 0.8;
}

/* Couple names (Jordan & Dale) */
.couple-names {
  font-family: var(--font-charm);
  font-weight: 400;
  font-size: var(--font-couple-names);
  letter-spacing: -0.02em;
  color: var(--color-royal-blue);
  margin: 0 0 var(--spacing-header-gap) 0;
  white-space: nowrap;
}

/* Smaller ampersand in header couple names */
.couple-ampersand {
  font-size: 0.75em;
}

/* Wedding date and location */
.wedding-date {
  font-family: var(--font-decorative);
  font-size: var(--font-date);
  color: var(--color-secondary-text);
  margin-bottom: var(--spacing-date-to-nav-gap);
  font-weight: 400;
  white-space: nowrap;
}

/* ===========================
   Navigation
   =========================== */

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-nav-gap);
  padding: var(--spacing-nav-top) 0 var(--spacing-nav-bottom);
  border-top: none;
  font-size: var(--font-nav-size);
  text-transform: uppercase;
  letter-spacing: var(--font-nav-spacing);
  font-weight: 500;
}

.primary-nav a {
  color: var(--color-royal-blue);
  text-decoration: none;
  position: relative;
  padding: 6px 4px;
  transition: color .2s ease;
}

.primary-nav a:visited {
  color: var(--color-royal-blue);
}

.primary-nav a:hover {
  color: var(--color-light-blue);
}

.primary-nav a.active {
  color: var(--color-royal-blue);
  font-weight: 700;
}

.primary-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  background: var(--color-royal-blue);
}

.primary-nav a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--color-light-blue);
}

/* ===========================
   Hero Section with Art-Directed Images
   =========================== */

.hero {
  position: relative;
  width: 100%;
  margin: var(--spacing-hero-top) 0 var(--spacing-hero-bottom);
  overflow: hidden;
}

/* Double-line border effect using constants */
.hero--double-lines {
  position: relative;
  border: none;
  padding: var(--rule-gap) 0;
  background: var(--color-card-bg);
  box-shadow:
    inset 0 var(--rule-thin) 0 var(--color-rule),
    inset 0 calc(-1 * var(--rule-thin)) 0 var(--color-rule);
}

/* Inner frame (thick lines) */
.hero--double-lines .hero-image {
  border-top: var(--rule-thick) solid var(--color-rule);
  border-bottom: var(--rule-thick) solid var(--color-rule);
  display: block;
  position: relative;
}

/* ===========================
   Content Typography (Crimson Pro)
   For informational pages like wedding-info, travel, etc.
   =========================== */

.content-page {
  font-family: 'Crimson Pro', serif;
  color: var(--color-primary-text);
  line-height: 1.7;
}

/* Main page title */
.content-page h1,
.content-title {
  font-family: 'Crimson Pro', serif;
  font-weight: 700;
  color: var(--color-royal-blue);
  text-align: center;
  margin: var(--spacing-nav-to-content-gap) 0 2rem 0;
  font-size: var(--font-content-title);
  line-height: 1.3;
}

/* Major section headings */
.content-page h2,
.content-section-title {
  font-family: 'Crimson Pro', serif;
  font-weight: 700;
  color: var(--color-royal-blue);
  text-align: center;
  margin: 0 0 1.5rem 0;
  font-size: var(--font-content-section);
  line-height: 1.4;
}

/* Subsection headings */
.content-page h3,
.content-subsection-title {
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin: 0 0 1rem 0;
  font-size: var(--font-content-subsection);
  line-height: 1.4;
}

/* Minor headings */
.content-page h4 {
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin: 1.5rem 0 0.75rem 0;
  font-size: 1.1rem;
}

/* Body text */
.content-page p,
.content-text {
  font-family: 'Crimson Pro', serif;
  font-weight: 400;
  color: var(--color-primary-text);
  margin-bottom: 1rem;
  line-height: 1.7;
  font-size: var(--font-content-body);
}

/* Emphasized text */
.content-page strong,
.content-emphasis {
  font-weight: 600;
}

/* Content page links - maintain royal blue color */
.content-page a {
  color: var(--color-royal-blue);
  text-decoration: underline;
}

.content-page a:visited {
  color: var(--color-royal-blue);
}

.content-page a:hover {
  opacity: 0.8;
}

/* Venue/location name styling */
.venue-name {
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  color: var(--color-royal-blue);
  font-size: var(--font-content-venue);
  margin: var(--content-venue-name-margin-top) 0 var(--content-venue-name-margin-bottom) 0;
  display: block;
}

.venue-location {
  font-family: 'Crimson Pro', serif;
  font-weight: 400;
  color: var(--color-primary-text);
  font-size: var(--font-content-body);
  margin-bottom: var(--content-venue-location-margin-bottom);
}

/* Call-to-action styling */
.cta-text {
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  color: var(--color-royal-blue);
  font-size: var(--font-content-body);
  margin: var(--content-cta-margin-top) 0 var(--content-cta-margin-bottom) 0;
}

/* Venue image styling */
.venue-image {
  width: 100%;
  height: auto;
  margin: var(--content-image-margin-top) 0 var(--content-image-margin-bottom) 0;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(65, 105, 225, 0.1);
  object-fit: cover;
  object-position: center;
}

/* Responsive venue image sizing */
@media (min-width: 768px) and (max-width: 1199px) {
  .venue-image {
    max-width: 80%;
    height: 300px;
    margin: 1.5rem auto;
    display: block;
  }
}

@media (min-width: 1200px) {
  .venue-image {
    max-width: 70%;
    height: 350px;
    margin: 1.5rem auto;
    display: block;
  }
}

/* Content cards */
.content-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  padding: var(--content-card-padding);
  margin: 0 0 var(--content-card-margin-bottom) 0;
  text-align: center;
  box-shadow: 0 2px 10px rgba(65, 105, 225, 0.05);
  font-family: 'Crimson Pro', serif;
}

.content-card h2 {
  font-family: 'Crimson Pro', serif;
  font-weight: 700;
  color: var(--color-royal-blue);
  margin: var(--content-section-title-margin-top) 0 var(--content-section-title-margin-bottom) 0;
  font-size: var(--font-content-section);
}

.content-card h3 {
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin: var(--content-subsection-title-margin-top) 0 var(--content-subsection-title-margin-bottom) 0;
  font-size: var(--font-content-subsection);
}

.content-card p {
  font-family: 'Crimson Pro', serif;
  font-weight: 400;
  color: var(--color-primary-text);
  margin-bottom: var(--content-paragraph-margin-bottom);
  font-size: var(--font-content-body);
}

/* Related content spacing */
.content-card h2+p,
.content-card h3+p {
  margin-bottom: var(--content-related-paragraph-margin-bottom);
}

/* Highlighted information blocks */
.info-highlight {
  background: rgba(138, 167, 232, 0.1);
  border: 1px solid var(--color-border);
  padding: var(--content-card-padding);
  margin: var(--content-card-margin-bottom) 0;
  text-align: center;
  font-family: 'Crimson Pro', serif;
}

.info-highlight h2 {
  font-family: 'Crimson Pro', serif;
  font-weight: 700;
  color: var(--color-royal-blue);
  margin: var(--content-section-title-margin-top) 0 var(--content-section-title-margin-bottom) 0;
  font-size: var(--font-content-section);
}

.info-highlight h3 {
  font-family: 'Crimson Pro', serif;
  font-weight: 700;
  color: var(--color-royal-blue);
  margin: var(--content-subsection-title-margin-top) 0 var(--content-subsection-title-margin-bottom) 0;
  font-size: var(--font-content-subsection);
}

.info-highlight p {
  font-family: 'Crimson Pro', serif;
  font-weight: 400;
  color: var(--color-primary-text);
  font-size: var(--font-content-body);
  margin-bottom: var(--content-paragraph-margin-bottom);
}

.info-highlight h2+p,
.info-highlight h3+p {
  margin-bottom: var(--content-related-paragraph-margin-bottom);
}

.info-highlight strong {
  font-weight: 600;
}

/* Content buttons */
.content-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--color-royal-blue);
  color: white !important;
  text-decoration: none;
  border-radius: 4px;
  font-family: 'Crimson Pro', serif;
  font-weight: 500;
  transition: opacity 0.2s ease;
  margin: var(--content-button-margin-top) 0.5rem 0 0.5rem;
}

.content-btn:visited {
  color: white !important;
}

.content-btn:hover {
  opacity: 0.9;
  color: white !important;
}

.content-btn-secondary {
  background: var(--color-light-blue);
  color: var(--color-royal-blue) !important;
}

.content-btn-secondary:visited {
  color: var(--color-royal-blue) !important;
}

/* Page-specific button overrides to ensure proper colors */
.map-link,
.file-upload-btn,
.upload-btn,
.copy-btn {
  color: white !important;
}

.map-link:visited,
.file-upload-btn:visited,
.upload-btn:visited,
.copy-btn:visited {
  color: white !important;
}

.file-upload-btn.secondary {
  color: var(--color-royal-blue) !important;
}

.file-upload-btn.secondary:visited {
  color: var(--color-royal-blue) !important;
}

/* Closing notes/footer text */
.content-note {
  text-align: center;
  color: var(--color-secondary-text);
  font-style: italic;
  margin: var(--content-note-margin-top) 0 var(--content-note-margin-bottom) 0;
  line-height: 1.6;
  font-family: 'Crimson Pro', serif;
  font-weight: 400;
}

/* Lists in content */
.content-page ul,
.content-page ol {
  font-family: 'Crimson Pro', serif;
  font-weight: 400;
  color: var(--color-primary-text);
  margin: 1rem 0;
  padding-left: 2rem;
}

.content-page li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* ===========================
   Names Section (Below Hero)
   =========================== */

.names {
  text-align: center;
  padding: var(--spacing-names-top) 20px var(--spacing-names-bottom);
  background: linear-gradient(to bottom, var(--color-card-bg), rgba(138, 167, 232, 0.05));
}

.names h2 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--font-full-names);
  margin: var(--spacing-name-lines) 0;
  color: var(--color-royal-blue);
  letter-spacing: 0.02em;
}

.name-ampersand {
  font-family: var(--font-script);
  font-size: calc(var(--font-full-names) * 0.65);
  color: var(--color-royal-blue);
  margin: var(--spacing-name-lines) 0;
  opacity: 0.7;
}

/* ===========================
   Responsive Design
   =========================== */

/* Mobile devices */
@media (max-width: 767px) {
  .card-inner {
    padding: 0 16px;
  }

  .primary-nav {
    gap: 14px;
    font-size: 0.9rem;
  }

  .hero-image img {
    object-position: center 35%;
  }

  /* Bigger bottom spacer on mobile */
  .bottom-spacer {
    height: clamp(32px, 6vw, 60px);
  }

  /* Make couple names bigger on mobile */
  .couple-names {
    font-size: clamp(40px, 8vw, 50px);
  }

  /* Make date smaller on mobile */
  .wedding-date {
    font-size: 1rem;
  }

  /* Allow text wrapping on very small screens if needed */
  .couple-names,
  .wedding-date {
    white-space: normal;
  }

  /* Smaller logo on mobile (preserve 24:25 aspect) */
  .site-header .logo {
    width: var(--logo-mobile-diameter);
    height: calc(var(--logo-mobile-diameter) * 25 / 24);
    display: block;
    margin: 0 auto;
  }

  .logo-placeholder {
    width: var(--logo-mobile-diameter);
    height: calc(var(--logo-mobile-diameter) * 25 / 24);
  }
}

/* Tablet devices */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero-image img {
    object-position: center 30%;
  }

  /* Bigger bottom spacer on tablet */
  .bottom-spacer {
    height: clamp(40px, 5vw, 70px);
  }

  /* Make couple names bigger on tablet */
  .couple-names {
    font-size: clamp(42px, 6vw, 60px);
  }

  /* Make date smaller on tablet */
  .wedding-date {
    font-size: 1.1rem;
  }

  /* Tablet logo size: 124px (24:25 aspect) */
  .site-header .logo {
    width: 124px;
    height: calc(124px * 25 / 24);
    display: block;
    margin: 0 auto;
  }

  .logo-placeholder {
    width: 124px;
    height: calc(124px * 25 / 24);
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .hero-image img {
    max-height: 600px;
    object-position: center 25%;
  }

  /* Bigger logo on desktop (preserve 24:25 aspect) */
  .site-header .logo {
    width: var(--logo-desktop-diameter);
    height: calc(var(--logo-desktop-diameter) * 25 / 24);
    display: block;
    margin: 0 auto;
  }

  .logo-placeholder {
    width: var(--logo-desktop-diameter);
    height: calc(var(--logo-desktop-diameter) * 25 / 24);
  }
}

/* --- Reserve hero height per breakpoint to prevent CLS --- */
.hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero-image {
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 767px) {
  .hero-image {
    aspect-ratio: 10 / 11;
    /* ~1:1.1 */
  }
}

.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}