/*
Theme Name: The Barn at Windy Lane
Theme URI: https://thebarnatwindylane.com
Description: A premium luxury wedding venue theme for The Barn at Windy Lane. Rustic elegance meets editorial design.
Author: Jim Stadey
Version: 1.0.0
License: All Rights Reserved
Text Domain: barn-at-windy-lane
*/

/* ── Base ── */
body {
  font-family: 'Raleway', sans-serif;
  background-color: #FAF7F2;
  color: #2C2420;
  overflow-x: hidden;
}

/* ── Noise texture overlay ── */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slowZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ── Reveal system ── */
.reveal { opacity: 0; }
.reveal.revealed {
  animation-duration: 0.9s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.revealed.fade-up    { animation-name: fadeUp; }
.reveal.revealed.fade-in    { animation-name: fadeIn; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal.revealed.scale-in   { animation-name: scaleIn; }
.reveal.revealed.slide-left { animation-name: slideLeft; }
.reveal.revealed.slide-right{ animation-name: slideRight; }

/* ── Hero load animations (no scroll trigger) ── */
.hero-anim {
  opacity: 0;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-anim.fade-up { animation-name: fadeUp; }
.hero-anim.fade-in { animation-name: fadeIn; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* ── Nav ── */
.nav-bar {
  transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-bar.scrolled {
  background-color: rgba(44, 36, 32, 0.96);
  box-shadow: 0 2px 12px rgba(44, 36, 32, 0.15);
}
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background-color: #C4918A;
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}

/* ── Mobile menu ── */
/* visibility (not just transform) is load-bearing twice over: it takes the seven nav
   links OUT of the keyboard tab order while the menu is closed, and it keeps the panel
   hidden under prefers-reduced-motion, where `transform: none` would otherwise cancel
   the off-screen translate and leave the overlay covering the page. The 0.4s delay lets
   the slide-out finish before the panel is removed from the a11y tree. */
.mobile-menu {
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.4s;
}
.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0s;
}

/* ── Shadows ── */
.shadow-elevated {
  box-shadow: 0 4px 20px rgba(163, 147, 130, 0.12),
              0 1px 4px rgba(163, 147, 130, 0.08);
}
.shadow-floating {
  box-shadow: 0 12px 40px rgba(163, 147, 130, 0.2),
              0 4px 12px rgba(163, 147, 130, 0.1);
}

/* ── Card hover ── */
.card-hover {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(163, 147, 130, 0.2),
              0 4px 12px rgba(163, 147, 130, 0.1);
}

/* ── Gallery ── */
.gallery-grid {
  column-count: 2;
  column-gap: 1rem;
}
@media (min-width: 768px) {
  .gallery-grid { column-count: 3; }
}
@media (min-width: 1024px) {
  .gallery-grid { column-count: 4; }
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
}
.gallery-item img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-item:hover img {
  transform: scale(1.04);
}

/* ── Lightbox ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lightbox.active {
  display: flex;
  opacity: 1;
}
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}

/* ── Timeline ── */
.timeline-line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #D4C8BA;
}
@media (min-width: 1024px) {
  .timeline-line {
    /* Centre WITHOUT a transform. main.js drives the scroll progress by writing
       `transform: scaleY(...)` to this element's inline style, which replaces the
       whole transform property - so a translateX(-50%) declared here never survives
       first paint (computed transform reads back as matrix(1,0,0,s,0,0), no
       translation). The line is 2px wide, so half of it is the 1px offset. */
    left: calc(50% - 1px);
  }
}

/* ── Tabs ── */
.tab-btn {
  position: relative;
  padding-bottom: 8px;
  transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #C4918A;
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tab-btn.active {
  color: #C4918A;
}
.tab-btn.active::after {
  width: 100%;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: flex;
  animation: fadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── Decorative image frame ── */
.img-frame {
  position: relative;
}
.img-frame::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  right: -14px;
  bottom: -14px;
  border: 2px solid #B8976A;
  border-radius: 4px;
  pointer-events: none;
}

/* ── Button styles ── */
.btn-primary {
  background-color: #C4918A;
  color: #fff;
  transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary:hover {
  background-color: #b37d75;
}
.btn-primary:active {
  transform: scale(0.97);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #FAF7F2, 0 0 0 5px #B8976A;
}

.btn-outline {
  border: 2px solid #C4918A;
  color: #C4918A;
  background: transparent;
  transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-outline:hover {
  background-color: #C4918A;
  color: #fff;
}
.btn-outline:active {
  transform: scale(0.97);
}
.btn-outline:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #FAF7F2, 0 0 0 5px #B8976A;
}

/* ── Ken Burns ── */
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.ken-burns {
  animation: kenBurns 20s ease-in-out infinite alternate;
}

/* ── Bokeh / fairy-light particles ── */
@keyframes bokehFloat {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(4px, -18px); }
  66%  { transform: translate(-6px, -8px); }
  100% { transform: translate(2px, -20px); }
}
.bokeh-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bokeh-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,151,106,0.45), transparent 70%);
  animation: bokehFloat ease-in-out infinite alternate;
}

/* ── Scroll progress bar ── */
.scroll-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #C4918A, #B8976A);
  transform-origin: left;
  transform: scaleX(0);
  width: 100%;
  z-index: 10;
}

/* ── SVG stroke-draw ── */
.stroke-draw path,
.stroke-draw line,
.stroke-draw circle,
.stroke-draw polyline {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Text highlight sweep ── */
.text-highlight {
  background-image: linear-gradient(rgba(196,145,138,0.25), rgba(196,145,138,0.25));
  background-size: 0% 35%;
  background-position: 0 95%;
  background-repeat: no-repeat;
  transition: background-size 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
  padding: 0 2px;
}
.revealed .text-highlight,
.text-highlight.revealed {
  background-size: 100% 35%;
}

/* ── Animated image frame border ── */
.img-frame-animated {
  position: relative;
}
.img-frame-animated::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  border: 2px solid rgba(184, 151, 106, 0.5);
  border-radius: 4px;
  pointer-events: none;
  z-index: -1;
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.img-frame-animated.revealed::before {
  clip-path: inset(0 0 0 0);
}
.img-frame-animated::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: 6px;
  bottom: 6px;
  border: 1px solid rgba(184, 151, 106, 0.2);
  border-radius: 4px;
  pointer-events: none;
  z-index: 20;
  clip-path: inset(100% 0 0 100%);
  transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
}
.img-frame-animated.revealed::after {
  clip-path: inset(0 0 0 0);
}

/* ── Decorative corner swirls for intro image ── */
.corner-swirls {
  position: relative;
}
.corner-swirl-tl,
.corner-swirl-br {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 25;
  opacity: 0;
  transition: opacity 0.8s ease 0.8s;
}
.revealed .corner-swirl-tl,
.revealed .corner-swirl-br {
  opacity: 1;
}
.corner-swirl-tl {
  top: -12px;
  right: -12px;
}
.corner-swirl-br {
  bottom: -12px;
  left: -12px;
  transform: rotate(180deg);
}

/* ── Spring entrance ── */
@keyframes springUp {
  from { opacity: 0; transform: translateY(40px) scale(0.92); }
  60%  { transform: translateY(-6px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.reveal.revealed.spring-up { animation-name: springUp; animation-duration: 0.7s; }

/* ── 3D tilt cards ── */
.tilt-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-style: preserve-3d;
}
.tilt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(196,145,138,0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}
.tilt-card:hover::after { opacity: 1; }

/* ── Shimmer effect ── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer-badge {
  position: relative;
  overflow: hidden;
}
.shimmer-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

/* ── Wedding card shimmer border ── */
.shimmer-border {
  position: relative;
  border-left: none !important;
}
.shimmer-border::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #C4918A, #B8976A, #C4918A);
  background-size: 100% 200%;
  border-radius: 3px 0 0 3px;
  transition: background-position 0.6s ease;
}
.shimmer-border:hover::before {
  animation: shimmerBorder 1.5s ease-in-out infinite;
}
@keyframes shimmerBorder {
  0%   { background-position: 0 0; }
  100% { background-position: 0 200%; }
}

/* ── Gentle float ── */
@keyframes gentleFloat {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -8px); }
}

/* ── CTA pulse ── */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,145,138,0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(196,145,138,0); }
}

/* ── Timeline dot pulse ── */
.timeline-dot {
  /* DO NOT add `position: relative` here. The dot carries Tailwind's `absolute`
     in the markup, and this file is enqueued AFTER tailwind.css specifically so it
     wins - so a `position` declared here silently beats it at equal specificity.
     When that happened the dot stopped being out-of-flow and became a THIRD grid
     item in a 2-column card: every timeline card grew a phantom 14px second row
     (measured: grid-template-rows "284px 14px"), which is what opened the large
     empty gaps, and the dot resolved `left: 50%` against its 448px grid area
     instead of the 960px card - landing at x=418 with the line at x=675.
     The ::after pulse ring does not need `relative`: the element is already
     absolutely positioned, which is just as valid a containing block. */
  isolation: isolate;
}
.timeline-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(196,145,138,0.4);
  opacity: 0;
  transform: scale(1);
}
@keyframes dotPulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.8); }
}
.revealed .timeline-dot::after,
.timeline-dot.pulsed::after {
  animation: dotPulse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── Gallery bento grid ── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 180px;
  gap: 0.75rem;
  /* Backfill: a 2-wide tile that cannot fit the columns left in a row gets pushed to the
     next row, leaving a hole. `dense` lets a later 1x1 fill it. The desktop tile order is
     already gapless without this; it earns its keep at the 3-column tablet breakpoint. */
  grid-auto-flow: dense;
}
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
  }
}
@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 1rem;
  }
}
.bento-item {
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bento-item:hover img {
  transform: scale(1.04) rotate(0.5deg);
}
.bento-item:hover {
  box-shadow: 0 16px 48px rgba(44,36,32,0.4);
  z-index: 2;
}
.bento-span-2c { grid-column: span 2; }
.bento-span-2r { grid-row: span 2; }

/* ── Lightbox upgrade ── */
.lightbox {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lightbox img {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Hero word animation ── */
.hero-word {
  display: inline-block;
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FAF7F2; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C4918A, #B8976A);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #b37d75; }
html { scrollbar-color: #C4918A #FAF7F2; scrollbar-width: thin; }

/* ── Ornamental flourish divider ── */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
}
.ornament svg {
  width: 120px;
  height: auto;
  opacity: 0.4;
}
.ornament-lg svg { width: 180px; }
.ornament-sm svg { width: 80px; }

/* ── Section ornamental dividers ── */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}
.section-divider svg { width: 200px; height: auto; }

/* ── Glassmorphism cards ── */
.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(163, 147, 130, 0.1),
              0 1px 4px rgba(163, 147, 130, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.3s ease;
}
.glass-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 40px rgba(163, 147, 130, 0.18),
              0 4px 12px rgba(163, 147, 130, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ── Decorative icon ring ── */
.icon-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 145, 138, 0.35);
  background: rgba(196, 145, 138, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.glass-card:hover .icon-ring,
.tilt-card:hover .icon-ring {
  border-color: rgba(196, 145, 138, 0.7);
  transform: scale(1.08);
}

/* ── Decorative quotation marks ── */
.fancy-quote {
  position: relative;
  padding: 1rem 2.5rem;
  border-left: none;
}
.fancy-quote::before {
  content: '\201C';
  position: absolute;
  top: -28px;
  left: -4px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 7rem;
  line-height: 1;
  color: rgba(184, 151, 106, 0.18);
  pointer-events: none;
}
.fancy-quote::after {
  content: '\201D';
  position: absolute;
  bottom: -40px;
  right: 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 7rem;
  line-height: 1;
  color: rgba(184, 151, 106, 0.12);
  pointer-events: none;
}

/* ── Elegant tag (replacing green pills) ── */
.elegant-tag {
  padding: 6px 14px;
  border: 1px solid rgba(163, 147, 130, 0.35);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6B5E54;
  background: transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.elegant-tag:hover {
  border-color: #C4918A;
  background: rgba(196, 145, 138, 0.08);
  color: #C4918A;
}

/* ── Timeline decorative frame corners ── */
.frame-corners {
  position: relative;
}
.frame-corners::before,
.frame-corners::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(184, 151, 106, 0.5);
  border-style: solid;
  pointer-events: none;
}
.frame-corners::before {
  top: -4px;
  left: -4px;
  border-width: 2px 0 0 2px;
}
.frame-corners::after {
  bottom: -4px;
  right: -4px;
  border-width: 0 2px 2px 0;
}

/* ── Background image section with overlay ── */
.bg-venue-overlay {
  position: relative;
}
.bg-venue-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(240, 235, 227, 0.92);
  pointer-events: none;
}

/* ── Word blur reveal (inspired by 21st.dev/aceternity) ── */
.blur-reveal-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
  transition: opacity 0.4s ease, filter 0.5s ease, transform 0.4s ease;
}
.blur-reveal-word.revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ── Testimonial carousel ── */
.testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testimonial-slide.active {
  opacity: 1;
  transform: translateY(0);
}
/* The TARGET is 24x24 (WCAG 2.2 target-size, AA); the visible dot stays 8px and is drawn
   by ::before. Lighthouse flagged these at 8x8 - a real problem on a site people browse on
   a phone, where the dots are exactly what a thumb reaches for. Growing the button itself
   would have changed the design; growing the hit area does not. */
.testimonial-dots button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.testimonial-dots button::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #C4918A;
  background: transparent;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.testimonial-dots button.active::before {
  background: #C4918A;
  transform: scale(1.2);
}

/* Marquee contrast. text-taupe (#A39382, 2.79:1) and text-dusty-rose (#C4918A, 2.53:1) on
   cream both fail WCAG AA for this size - 18px italic is NOT "large text", which needs
   24px or 18.66px bold. Darkened just enough to pass while staying on-brand:
   #7A6B5D = 4.81:1, #8C5F58 = 5.05:1. Two class selectors beat Tailwind's single class,
   and this file loads after tailwind.css, so these win without !important. */
.marquee-item.text-taupe { color: #7A6B5D; }
.marquee-item.text-dusty-rose { color: #8C5F58; }

/* Same problem, second location: the testimonial attributions and the carousel pause
   control sit on cream at body sizes and fail AA for the same reason.
   Scoped rather than global ON PURPOSE. There are 76 uses of these two classes on the
   page and only 3 fail, because most sit on the dark sections - where taupe passes at
   4.9:1 against #2C2420 and a darkened value would FAIL instead. Darkening the palette
   tokens themselves would fix these three and break the footer. */
#testimonialCarousel .text-dusty-rose { color: #8C5F58; }
#testimonialCarousel .text-taupe { color: #7A6B5D; }
/* Pause control. Hand-written rather than Tailwind utilities because tailwind.css is
   compiled ahead of time - a class not present at build time simply would not exist. */
.testimonial-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: none;
  background: transparent;
  /* #A39382 on cream is 2.78:1 at this size - fails AA. #7A6B5D is 4.81:1. */
  color: #7A6B5D;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.3s ease, background 0.3s ease;
}
.testimonial-toggle:hover,
.testimonial-toggle:focus-visible {
  color: #C4918A;
  background: rgba(196, 145, 138, 0.08);
}
.testimonial-toggle .icon-play { display: none; }
.testimonial-toggle.is-paused .icon-play { display: block; }
.testimonial-toggle.is-paused .icon-pause { display: none; }

/* ── Horizontal scrolling marquee ── */
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-item {
  flex-shrink: 0;
  padding: 0 2rem;
  white-space: nowrap;
}
.marquee-separator {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(184, 151, 106, 0.4);
  align-self: center;
}

/* ── Spotlight card effect (inspired by Aceternity UI) ── */
.spotlight-card {
  position: relative;
  overflow: hidden;
}
.spotlight-card::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,145,138,0.15) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.spotlight-card:hover::before {
  opacity: 1;
}

/* ── Shiny text sweep (inspired by Magic UI) ── */
@keyframes shinyText {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.shiny-text {
  background: linear-gradient(
    120deg,
    rgba(212,196,160,1) 0%,
    rgba(212,196,160,1) 35%,
    rgba(255,255,255,0.9) 50%,
    rgba(212,196,160,1) 65%,
    rgba(212,196,160,1) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shinyText 4s ease-in-out infinite;
}

/* ── Lamp / cone light effect (inspired by Aceternity UI) ── */
.lamp-effect {
  position: relative;
}
.lamp-effect::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 80%;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(184,151,106,0.45) 0%,
    rgba(196,145,138,0.2) 25%,
    rgba(184,151,106,0.08) 50%,
    transparent 75%
  );
  pointer-events: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal.revealed,
  .hero-anim,
  .hero-word,
  .gallery-item img,
  .bento-item img,
  .card-hover,
  .tilt-card,
  .nav-bar,
  .ken-burns,
  .bokeh-particle,
  .shimmer-badge::after,
  .shimmer-border::before,
  .timeline-dot::after,
  .stroke-draw path,
  .stroke-draw line {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal { opacity: 1; }
  .hero-word { opacity: 1; }
  .text-highlight { background-size: 100% 40% !important; }
  .img-frame-animated::before { clip-path: inset(0) !important; }
  .scroll-progress { display: none; }
  .bokeh-container { display: none; }
  .blur-reveal-word { opacity: 1 !important; filter: none !important; }
  /* Kill only the slide TRANSITION here. This element must keep its transform, or the
     off-screen translate is cancelled and the menu covers the page permanently. */
  .mobile-menu { transition: none !important; }
  .marquee-track { animation: none !important; }
  .shiny-text { animation: none !important; -webkit-text-fill-color: #D4C4A0 !important; }
  .spotlight-card::before { display: none; }
}

/* ── Inquiry form ──
   Sits over a high-contrast barn photograph. The fields used to be 8% white with no
   container, so the wooden slats and string lights read straight through them and the
   inputs were effectively invisible. The form now gets its own near-opaque panel: one
   calm surface to sit on, so every field has predictable contrast regardless of what
   is behind the section. color-scheme keeps the native date picker and select dropdown
   dark instead of flipping to a white system widget. */
.barn-inquiry {
  margin: 0 auto;
  max-width: 40rem;
  padding: 1.5rem 1.25rem;
  background: rgba(26, 21, 18, 0.88);
  border: 1px solid rgba(212, 196, 160, 0.28);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color-scheme: dark;
}

@media (min-width: 640px) {
  .barn-inquiry { padding: 2rem 1.9rem; }
}

.barn-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem 1rem;
}

@media (min-width: 640px) {
  .barn-form-grid { grid-template-columns: 1fr 1fr; }
  .barn-field-wide { grid-column: 1 / -1; }
}

.barn-inquiry .barn-field { margin: 0; }

/* CF7 emits a <br> after every label. Left in, each label floats ~40px above its own
   field - as far as the gap BETWEEN groups - so the eye stops pairing them. The label
   margin sets the spacing instead. */
.barn-inquiry .barn-field br { display: none; }

.barn-inquiry label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
/* the required marker should not read as decoration */
.barn-inquiry label span[aria-hidden] { color: #C4918A; }

.barn-inquiry input[type="text"],
.barn-inquiry input[type="email"],
.barn-inquiry input[type="tel"],
.barn-inquiry input[type="date"],
.barn-inquiry input[type="number"],
.barn-inquiry select,
.barn-inquiry textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(212, 196, 160, 0.5);
  border-radius: 0.4rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* 16px on mobile: anything smaller makes iOS Safari zoom the page on focus */
@media (max-width: 639px) {
  .barn-inquiry input, .barn-inquiry select, .barn-inquiry textarea { font-size: 1rem; }
}

/* native arrow removed so the control matches the text fields on every platform */
.barn-inquiry select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23D4C4A0' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px 8px;
}
.barn-inquiry select option { color: #2C2420; background: #FAF7F2; }

.barn-inquiry ::placeholder { color: rgba(255, 255, 255, 0.55); }

.barn-inquiry input:focus-visible,
.barn-inquiry select:focus-visible,
.barn-inquiry textarea:focus-visible {
  outline: 2px solid #D4C4A0;
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.13);
  border-color: rgba(212, 196, 160, 0.7);
}

.barn-form-actions {
  margin: 1.4rem 0 0;
  text-align: center;
}

.barn-inquiry input[type="submit"] {
  padding: 0.95rem 2.6rem;
  font-family: 'Raleway', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background-color: #C4918A;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.barn-inquiry input[type="submit"]:hover { background-color: #b37d75; }
.barn-inquiry input[type="submit"]:active { transform: scale(0.97); }

.barn-inquiry input[type="submit"]:focus-visible {
  outline: 2px solid #D4C4A0;
  outline-offset: 3px;
}

/* CF7 validation + response messaging.
   These were unstyled, so CF7's default red-bordered block landed on a dark photo -
   the one message a visitor MUST be able to read is the one confirming their enquiry
   was sent (or telling them it failed). */
.barn-inquiry .wpcf7-not-valid-tip {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #F0BDB6;
}

.barn-inquiry .wpcf7-not-valid {
  border-color: #E08C82;
  background-color: rgba(224, 140, 130, 0.14);
}

.barn-inquiry .wpcf7-response-output {
  margin: 1.3rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(212, 196, 160, 0.5);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
}
.barn-inquiry form.sent .wpcf7-response-output {
  border-color: rgba(150, 190, 145, 0.75);
  background: rgba(120, 170, 115, 0.22);
}
.barn-inquiry form.invalid .wpcf7-response-output,
.barn-inquiry form.unaccepted .wpcf7-response-output,
.barn-inquiry form.failed .wpcf7-response-output,
.barn-inquiry form.aborted .wpcf7-response-output {
  border-color: rgba(224, 140, 130, 0.8);
  background: rgba(190, 90, 80, 0.24);
}

.barn-inquiry .wpcf7-spinner { background-color: #D4C4A0; }

.barn-inquiry .wpcf7-response-output {
  margin: 1.2rem 0 0;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
  color: #fff;
  border: 1px solid rgba(212, 196, 160, 0.5);
  border-radius: 0.4rem;
}

.barn-inquiry .wpcf7-spinner { background-color: rgba(255, 255, 255, 0.5); }

.barn-form-fallback a {
  color: #D4C4A0;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .barn-inquiry input[type="submit"] { transition: none; }
  .barn-inquiry input[type="submit"]:active { transform: none; }
}

/* ── Skip link ── */
/* Keyboard users otherwise tab the seven-link nav on every visit before reaching
   content. Positioned with `top` rather than a transform on purpose: the
   reduced-motion block sets `transform: none`, which is exactly what un-hid the
   mobile menu once already. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 200;
  padding: 10px 20px;
  background: #2C2420;
  color: #FFFFFF;
  border: 1px solid #B8976A;
  border-radius: 4px;
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

/* ── Lightbox: hidden state ── */
/* The dialog carries the `hidden` attribute while closed so it is out of the a11y
   tree, not merely invisible. */
.lightbox[hidden] {
  display: none;
}

/* ── Gallery tiles are buttons ── */
/* main.js promotes each tile to role="button" + tabindex="0"; without a focus ring
   a keyboard user cannot see where they are in the grid. */
.bento-item:focus-visible {
  outline: 3px solid #B8976A;
  outline-offset: 3px;
  z-index: 3;
}

/* ── Tabs: visible keyboard focus ── */
.tab-btn:focus-visible {
  outline: 2px solid #B8976A;
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Nav on templates without a dark hero ── */
/* The nav is fixed and transparent until main.js adds .scrolled past 80px, which only
   works over the homepage's dark full-bleed hero. Everywhere else the white links sit
   on cream. Same declarations as .scrolled so the two compose rather than fight.
   Hand-written CSS on purpose: a Tailwind utility would be lost to a forgotten
   `npm run build`, and this is a legibility fix, not decoration. */
.nav-solid .nav-bar {
  background-color: rgba(44, 36, 32, 0.96);
  box-shadow: 0 2px 12px rgba(44, 36, 32, 0.15);
}

/* ── Long-form page content (page.php / index.php) ── */
/* The homepage styles every element inline; a WP editor's output has none of that,
   so give the_content() sane typography rather than browser defaults. */
.page-content { line-height: 1.75; }
.page-content > * + * { margin-top: 1.25rem; }
.page-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  color: #2C2420;
  margin-top: 2.5rem;
}
.page-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  color: #2C2420;
  margin-top: 2rem;
}
.page-content a {
  color: #C4918A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-content a:hover { color: #b37d75; }
.page-content ul,
.page-content ol { padding-left: 1.25rem; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li + li { margin-top: 0.4rem; }

/* ══════════════════════════════════════════════════════════════════════
   Thunder Bay Wedding Resources (page-thunder-bay-wedding-resources.php)
   Hand-written rather than Tailwind utilities: this page has a lot of
   repeated structure, and a forgotten `npm run build` would strip it.
   ══════════════════════════════════════════════════════════════════════ */

.resources-hero {
  background-color: #2C2420;
  color: #FFFFFF;
  padding: 7.5rem 1.25rem 3.5rem;
}
@media (min-width: 768px) { .resources-hero { padding: 9.5rem 2rem 4.5rem; } }
.resources-hero__inner { max-width: 52rem; margin: 0 auto; }
.resources-hero h1 {
  font-size: 2.25rem; font-weight: 500; letter-spacing: -0.02em; margin: 0.75rem 0 1rem;
}
@media (min-width: 768px) { .resources-hero h1 { font-size: 3.25rem; } }
.resources-hero__lede { color: #D4C8BA; font-weight: 300; line-height: 1.75; max-width: 42rem; }
.resources-hero__lede strong { color: #FFFFFF; font-weight: 500; }
.resources-crumbs { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #A39382; }
.resources-crumbs a { color: #A39382; }
.resources-crumbs a:hover { color: #FFFFFF; }
.resources-crumbs span { margin: 0 0.5rem; }
.resources-crumbs span[aria-current] { margin-left: 0; color: #D4C8BA; }

.resources-body { max-width: 52rem; margin: 0 auto; padding: 0 1.25rem 5rem; }
@media (min-width: 768px) { .resources-body { padding: 0 2rem 6rem; } }

.resources-keyfacts { border-bottom: 1px solid #D4C8BA; padding: 2.5rem 0 1.75rem; }
.resources-keyfacts dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 640px) { .resources-keyfacts dl { grid-template-columns: repeat(4, 1fr); } }
.resources-keyfacts dt {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: #A39382; margin-bottom: 0.35rem;
}
.resources-keyfacts dd { margin: 0; font-size: 1.75rem; color: #2C2420; }
.resources-keyfacts__updated { margin-top: 1.5rem; font-size: 0.75rem; color: #A39382; }

.resources-jump { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 1.75rem 0; border-bottom: 1px solid #D4C8BA; }
.resources-jump a {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6B5E54;
  border-bottom: 1px solid transparent;
}
.resources-jump a:hover { color: #C4918A; border-bottom-color: #C4918A; }

.resources-note, .resources-cat, .resources-about { padding: 3rem 0 0; }
.resources-note h2, .resources-about h2, .resources-cat__q {
  font-size: 1.6rem; font-weight: 500; color: #2C2420; letter-spacing: -0.01em; margin-bottom: 1rem;
}
@media (min-width: 768px) { .resources-note h2, .resources-about h2, .resources-cat__q { font-size: 2rem; } }
.resources-note p, .resources-about p, .resources-cat__answer { color: #6B5E54; font-weight: 300; line-height: 1.75; }
.resources-note ul { margin-top: 1.25rem; display: grid; gap: 0.9rem; }
.resources-note li { color: #6B5E54; font-weight: 300; line-height: 1.7; padding-left: 1.1rem; position: relative; }
/* A real middot, not a CSS escape: writing '\00B7' through a shell heredoc let
   Python read \00 as an octal escape and put a NUL byte in this file. */
.resources-note li::before { content: '·'; position: absolute; left: 0; color: #B8976A; font-weight: 700; }
.resources-note strong, .resources-cat__answer strong { color: #2C2420; font-weight: 500; }
.resources-note a, .resources-about a, .resources-cat__answer a, .resources-links a {
  color: #C4918A; text-decoration: underline; text-underline-offset: 2px;
}
.resources-note a:hover, .resources-about a:hover, .resources-links a:hover { color: #b37d75; }
.resources-note__caveat { margin-top: 1.5rem; font-size: 0.9rem; }

/* "From the barn" - the first-hand note. Visually distinct because it is the part
   of this page a national directory cannot reproduce. */
.resources-cat__barn {
  margin: 1.5rem 0; padding: 1.1rem 1.25rem; background-color: #F0EBE3;
  border-left: 3px solid #B8976A; border-radius: 2px;
}
.resources-cat__barn-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: #B8976A; margin-bottom: 0.4rem;
}
.resources-cat__barn p:last-child { color: #6B5E54; font-weight: 300; line-height: 1.7; margin: 0; }

.vendor-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .vendor-grid { grid-template-columns: repeat(2, 1fr); } }
.vendor-card {
  border: 1px solid #D4C8BA; border-radius: 4px; padding: 1.1rem 1.25rem; background-color: #FFFFFF;
}
.vendor-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.vendor-card__name { font-size: 1.2rem; font-weight: 500; color: #2C2420; margin: 0; }
.vendor-card__name a { color: #2C2420; }
.vendor-card__name a:hover { color: #C4918A; }
.vendor-badge {
  flex-shrink: 0; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #6B5E54; background-color: #F0EBE3; border: 1px solid #D4C8BA;
  border-radius: 999px; padding: 0.2rem 0.55rem; cursor: help;
}
.vendor-card__blurb { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 300; color: #6B5E54; line-height: 1.6; }
.vendor-card__meta { margin-top: 0.7rem; font-size: 0.8rem; }
.vendor-card__meta a { color: #C4918A; }
.vendor-card__meta a:hover { color: #b37d75; }
.vendor-card__sep { color: #D4C8BA; margin: 0 0.4rem; }
.vendor-card__verified { margin-top: 0.6rem; font-size: 0.7rem; color: #A39382; }
.vendor-card__verified.is-stale { color: #B8976A; }

.resources-cat__ask { margin-top: 1.75rem; }
.resources-cat__ask-label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #A39382; margin-bottom: 0.6rem;
}
.resources-cat__ask ul { display: grid; gap: 0.45rem; }
.resources-cat__ask li {
  color: #6B5E54; font-weight: 300; font-size: 0.9rem; line-height: 1.6; padding-left: 1.1rem; position: relative;
}
.resources-cat__ask li::before { content: '?'; position: absolute; left: 0; color: #C4918A; }

.resources-links { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.resources-links li { color: #6B5E54; font-weight: 300; font-size: 0.9rem; line-height: 1.6; }

.resources-about {
  margin-top: 3.5rem; padding: 2rem 1.5rem; background-color: #F0EBE3; border-radius: 4px;
}
.resources-about p + p { margin-top: 1rem; }
.resources-about__meta { margin-top: 1.25rem; font-size: 0.75rem; color: #A39382; }
.resources-about__meta a { color: #A39382; }

.resources-cta { margin-top: 3rem; text-align: center; }
.resources-cta p { font-size: 1.35rem; color: #2C2420; margin-bottom: 1.25rem; font-style: italic; }

/* Anchor targets must clear the fixed nav (h-16 / md:h-20), or a jumped-to heading
   lands underneath the bar. Caught in a screenshot, not in markup review. */
.resources-cat, .resources-note, .resources-about { scroll-margin-top: 5.5rem; }
@media (min-width: 768px) { .resources-cat, .resources-note, .resources-about { scroll-margin-top: 6.5rem; } }

/* ── Resources: FAQ ── */
.resources-faq { padding: 3rem 0 0; scroll-margin-top: 5.5rem; }
@media (min-width: 768px) { .resources-faq { scroll-margin-top: 6.5rem; } }
.resources-faq h2 {
  font-size: 1.6rem; font-weight: 500; color: #2C2420; letter-spacing: -0.01em; margin-bottom: 1.25rem;
}
@media (min-width: 768px) { .resources-faq h2 { font-size: 2rem; } }
.resources-faq__item { border-bottom: 1px solid #D4C8BA; }
.resources-faq__item summary {
  cursor: pointer; padding: 0.95rem 2rem 0.95rem 0; font-size: 1.05rem; color: #2C2420;
  list-style: none; position: relative;
}
.resources-faq__item summary::-webkit-details-marker { display: none; }
.resources-faq__item summary::after {
  content: '+'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  color: #B8976A; font-size: 1.3rem; line-height: 1;
}
.resources-faq__item[open] summary::after { content: '\2013'; }
.resources-faq__item summary:hover { color: #C4918A; }
.resources-faq__item summary:focus-visible { outline: 2px solid #B8976A; outline-offset: 3px; border-radius: 2px; }
.resources-faq__a { padding: 0 0 1.1rem; }
.resources-faq__a p { color: #6B5E54; font-weight: 300; line-height: 1.75; font-size: 0.95rem; }
.resources-faq__src { margin-top: 0.6rem; font-size: 0.72rem; color: #A39382; }
.resources-faq__src a { color: #A39382; text-decoration: underline; text-underline-offset: 2px; }
.resources-cat__src { margin-top: 1rem; font-size: 0.72rem; color: #A39382; }

/* Resources: locked state ....................................................
   Rendered by page-thunder-bay-wedding-resources.php when a page password is set.
   Deliberately plain: this is a door, not a page. */
.resources-locked { background: #FAF7F2; padding: 9rem 1.25rem 6rem; min-height: 60vh; }
@media (min-width: 768px) { .resources-locked { padding: 11rem 2rem 7rem; } }
.resources-locked__inner { max-width: 34rem; margin: 0 auto; text-align: center; }
.resources-locked__inner h1 { font-size: 2rem; font-weight: 500; color: #3D3229; letter-spacing: -0.02em; margin-bottom: 1rem; }
.resources-locked__inner > p { color: #6B5E54; font-weight: 300; line-height: 1.75; margin-bottom: 2rem; }
.resources-locked form { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; align-items: center; }
.resources-locked form p { margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; align-items: center; color: #6B5E54; font-size: 0.85rem; font-weight: 300; }
.resources-locked label { display: flex; gap: 0.6rem; align-items: center; }
.resources-locked input[type="password"] { border: 1px solid #DCD3C7; background: #fff; padding: 0.7rem 0.9rem; border-radius: 2px; font-size: 0.95rem; color: #3D3229; min-width: 13rem; }
.resources-locked input[type="password"]:focus { outline: 2px solid #B8976A; outline-offset: 1px; }
.resources-locked input[type="submit"] { background: #3D3229; color: #FAF7F2; border: 0; padding: 0.75rem 1.6rem; border-radius: 2px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.3s; }
.resources-locked input[type="submit"]:hover { background: #B8976A; }