/* ============================================================
   File:        index-styles.css
   Purpose:     Global styles shared across all pages of the
                Pendleton Plantation community website. Defines
                CSS custom properties (color variables), resets,
                the fixed navigation bar, hero section, event cards,
                memories section, announcements, awards, contact,
                and the footer. All page-specific CSS files load
                this file first so they can inherit these variables
                and base styles.
   ============================================================ */


/* ── GLOBAL COLOR VARIABLES ───────────────────────────────────
   All colors used across the site are defined here as CSS custom
   properties so they can be referenced consistently everywhere.
   Changing a value here updates it site-wide. */
:root {
  --forest: #2c3d2e;
  /* Deep forest green — primary text and dark backgrounds. */
  --moss: #4a6741;
  /* Medium moss green — hover states, badges, active elements. */
  --gold: #c9a84c;
  /* Warm antique gold — decorative accents, rules, labels. */
  --cream: #f5f0e8;
  /* Warm off-white cream — card backgrounds. */
  --parchment: #ede5d0;
  /* Slightly darker cream — section backgrounds. */
  --warm-white: #faf8f3;
  /* Very light warm white — the main page background. */
  --ink: #1e2620;
  /* Near-black dark green — footer background. */
  --muted: #7a7060;
  /* Warm gray — secondary text, timestamps, descriptions. */
  --blush: #d4b896;
  /* Soft tan/blush — decorative text and scroll indicator. */
}


/* ── BOX MODEL RESET ──────────────────────────────────────────
   Apply border-box sizing to every element so that padding and
   borders are included in the declared width and height values.
   Also zero out default browser margin and padding. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ── HTML ROOT ────────────────────────────────────────────────
   Enable smooth animated scrolling when anchor links (like #events)
   are clicked. Hide horizontal overflow to prevent accidental
   side-scrolling caused by animated elements. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}


/* ── BODY ─────────────────────────────────────────────────────
   Set the global font family, background, and text color. Also
   hide horizontal overflow at the body level as a secondary
   safeguard against layout issues. */
body {
  font-family: 'Jost', sans-serif;
  /* Loaded from Google Fonts in each HTML file. */
  background: var(--warm-white);
  color: var(--ink);
  overflow-x: hidden;
}


/* ── NOISE TEXTURE OVERLAY ────────────────────────────────────
   A very subtle grain texture is applied over the entire page
   using a fixed pseudo-element. This softens the flat color
   backgrounds and gives the site a slightly tactile, printed feel.
   The texture is an SVG fractal noise filter encoded as a data URI
   so no external image file is needed. */
body::before {
  content: '';
  position: fixed;
  /* Stays in place as the user scrolls. */
  inset: 0;
  /* Covers the entire viewport. */
  /* SVG fractal noise rendered as a semi-transparent overlay. */
  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)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  /* Clicks pass through to page content below. */
  z-index: 9999;
  /* Sit above all other content. */
  opacity: 0.4;
  /* Very subtle — just enough to add texture without distraction. */
}


/* ── NAVIGATION BAR ───────────────────────────────────────────
   A fixed top navigation bar that stays visible as the user
   scrolls. Uses a semi-transparent frosted glass effect
   (backdrop-filter: blur) so page content slides beneath it. */
nav {
  position: fixed;
  /* Stays at the top of the viewport always. */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Above all page content but below the noise overlay. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Logo left, links right. */
  padding: 20px 48px;
  background: rgba(245, 240, 232, 0.88);
  /* Semi-transparent cream background. */
  backdrop-filter: blur(12px);
  /* Frosted glass blur of content beneath. */
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  /* Faint gold bottom border. */
  transition: padding 0.3s;
  /* Padding can be animated if JS shrinks the nav on scroll. */
}

/* ── NAV BRAND / LOGO ─────────────────────────────────────────
   The site name displayed as a link in the top-left corner.
   Uses the elegant Cormorant Garamond serif font. */
.nav-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  /* Remove default underline from the anchor. */
}

/* The decorative star/sparkle (✦) before the site name — colored gold. */
.nav-brand span {
  color: var(--gold);
}

/* ── NAV LINKS LIST ───────────────────────────────────────────
   The horizontal list of navigation links on the right side of
   the nav bar. List bullets are hidden. */
.nav-links {
  display: flex;
  gap: 14px;
  /* Space between each navigation link. */
  list-style: none;
}

/* Individual navigation link styling. */
.nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  /* Subdued color by default — not competing with the content. */
  text-decoration: none;
  transition: color 0.2s;
}

/* On hover: darken the link text to forest green. */
.nav-links a:hover {
  color: var(--forest);
}

/* Active nav link — highlights the current page in the nav bar. */
.nav-active { color: var(--forest) !important; font-weight: 600; }

/* Dropdown menus */
.nav-has-dropdown { position: relative; }
.nav-has-dropdown > a { display: flex; align-items: center; gap: 3px; }
.nav-caret { font-size: 0.6rem; transition: transform 0.2s; display: inline-block; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: rgba(253, 248, 239, 0.98);
  border: 1px solid #e8ddd0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 14px 0 6px; /* top padding bridges the visual gap so hover isn't lost */
  list-style: none;
  z-index: 200;
}
.nav-has-dropdown:hover .nav-dropdown { display: block; }
.nav-has-dropdown:hover .nav-caret { transform: rotate(180deg); }
.nav-dropdown li a {
  display: block;
  padding: 7px 16px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.nav-dropdown li a:hover { color: var(--forest); background: rgba(44,61,46,0.05); }

/* ── NAV CALL-TO-ACTION LINK ──────────────────────────────────
   The "Sign Up" link in the nav bar is styled as a filled button
   to draw extra attention to the primary action. */
.nav-cta {
  background: var(--forest);
  color: var(--cream) !important;
  /* Override the default muted link color. */
  padding: 8px 20px;
  border-radius: 2px;
  transition: background 0.2s !important;
}

/* On hover: lighten the button background to moss green. */
.nav-cta:hover {
  background: var(--moss) !important;
  color: var(--cream) !important;
}


/* ── HAMBURGER BUTTON ─────────────────────────────────────────
   A three-line menu button shown only on mobile screens (≤768px).
   The three <span> elements inside it form the three horizontal
   bars. JavaScript adds/removes the "open" class to animate
   the bars into an X shape when the menu is open. */
.nav-hamburger {
  display: none;
  /* Hidden on desktop; shown on mobile via media query. */
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
  position: relative;
  z-index: 101;
  /* Above the mobile nav overlay so it's always tappable. */
}

/* Each of the three horizontal bars of the hamburger icon. */
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--forest);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
  /* Animates the bars into an X. */
}


/* ── MOBILE NAV ───────────────────────────────────────────────
   On screens 1100px wide and below, the horizontal nav links list
   becomes a full-screen vertical overlay. The hamburger button
   becomes visible, and clicking it toggles the "open" class. */
@media (max-width: 1100px) {
  nav {
    padding: 16px 24px;
    /* Reduce nav padding on mobile. */
  }

  /* Show the hamburger button on mobile. */
  .nav-hamburger {
    display: flex;
  }

  /* The nav links list becomes a full-viewport overlay. */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--cream);
    /* Solid cream background covers page content. */
    flex-direction: column;
    /* Stack links vertically. */
    align-items: center;
    justify-content: center;
    /* Center the links in the middle of the screen. */
    gap: 36px;
    z-index: 50;
    display: none;
    /* Hidden by default; shown when "open" class is added. */
  }

  /* Show the mobile nav overlay when JS adds the "open" class. */
  .nav-links.open {
    display: flex;
  }

  /* Larger, more readable link text inside the mobile menu. */
  .nav-links a {
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    color: var(--forest);
    /* Full forest green instead of the subdued muted color. */
  }

  .nav-has-dropdown > a { justify-content: center; }
  .nav-dropdown {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 4px 0 8px;
    text-align: center;
  }
  .nav-has-dropdown.open .nav-dropdown { display: block; }
  .nav-has-dropdown.open .nav-caret { transform: rotate(180deg); }
  .nav-dropdown li a { font-size: 0.95rem; padding: 6px 16px; }

  /* ── HAMBURGER X ANIMATION ──────────────────────────────────
     When the "open" class is added to the hamburger button,
     the three bars animate into an X shape. */

  /* Top bar: rotate 45° downward and shift down to meet the center. */
  .nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  /* Middle bar: fade out and collapse horizontally. */
  .nav-hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  /* Bottom bar: rotate -45° upward and shift up to meet the center. */
  .nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}


/* ── HERO SECTION ─────────────────────────────────────────────
   The full-viewport landing section at the top of the homepage.
   Centered text with an animated heading, subtitle, and CTA buttons.
   Multiple layered radial gradients create a soft, glowing background. */
.hero {
  min-height: 100vh;
  /* At least as tall as the full viewport height. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Center all content vertically and horizontally. */
  text-align: center;
  padding: 120px 24px 140px;
  position: relative;
  /* Needed for the decorative corner pseudo-elements. */
  background:
    /* Soft green glow at the top of the hero. */
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(74, 103, 65, 0.12) 0%, transparent 70%),
    /* Soft gold glow in the lower-right corner. */
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),
    var(--warm-white);
}

/* ── DECORATIVE CORNER LINES ──────────────────────────────────
   Thin gold L-shaped corner ornaments in the top-left and
   bottom-right of the hero section. Created with ::before and
   ::after pseudo-elements. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  /* Faint gold border. */
  pointer-events: none;
  /* Decorative only — don't interfere with clicks. */
}

/* Top-left corner: only the top and left borders are visible. */
.hero::before {
  top: 80px;
  left: 40px;
  border-right: none;
  border-bottom: none;
}

/* Bottom-right corner: only the bottom and right borders are visible. */
.hero::after {
  bottom: 60px;
  right: 40px;
  border-left: none;
  border-top: none;
}

/* ── HERO EYEBROW ─────────────────────────────────────────────
   Small all-caps text above the main headline, e.g.,
   "✦   EASLEY, SOUTH CAROLINA   ✦". Fades in first. */
.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  opacity: 0;
  /* Starts invisible for the fade-in animation. */
  animation: fadeUp 0.8s 0.2s forwards;
  /* Fade up with a 0.2s delay. */
}

/* ── HERO HEADLINE ────────────────────────────────────────────
   The large main heading "Pendleton Plantation". Clamp() ensures
   it scales smoothly between mobile and desktop sizes. */
.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  /* Min 3.2rem on mobile, max 6.5rem on desktop. */
  font-weight: 300;
  line-height: 1.05;
  color: var(--forest);
  margin-bottom: 12px;
  opacity: 0;
  animation: fadeUp 0.9s 0.35s forwards;
}

/* The italic "Plantation" word in the heading — colored moss green. */
.hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--moss);
}

/* ── HERO DECORATIVE RULE ─────────────────────────────────────
   A short gold horizontal line between the headline and subtitle. */
.hero-rule {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 28px auto;
  opacity: 0;
  animation: fadeUp 0.7s 0.5s forwards;
}

/* ── HERO SUBTITLE ────────────────────────────────────────────
   The short descriptive paragraph below the headline. */
.hero-sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: fadeUp 0.8s 0.6s forwards;
  margin: 0 auto;
  text-align: center;
}

/* ── HERO CALL-TO-ACTION BUTTONS ──────────────────────────────
   The row of buttons below the subtitle ("View Events" / "Announcements"). */
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 44px;
  flex-wrap: wrap;
  /* Wrap to a column on narrow screens. */
  justify-content: center;
  opacity: 0;
  animation: fadeUp 0.8s 0.75s forwards;
}

/* ── PRIMARY BUTTON ───────────────────────────────────────────
   A filled dark-green button. Used for the main CTA. */
.btn-primary {
  background: var(--forest);
  color: var(--cream);
  padding: 14px 36px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  border: 1px solid var(--forest);
}

/* On hover: lighten the background and lift the button slightly. */
.btn-primary:hover {
  background: var(--moss);
  transform: translateY(-1px);
}

/* ── OUTLINE BUTTON ───────────────────────────────────────────
   A transparent border-only button. Used for secondary CTAs. */
.btn-outline {
  background: transparent;
  color: var(--forest);
  padding: 14px 36px;
  border-radius: 2px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  border: 1px solid rgba(44, 61, 46, 0.35);
  /* Semi-transparent forest-green border. */
}

/* On hover: add a very light green tint and lift slightly. */
.btn-outline:hover {
  background: rgba(44, 61, 46, 0.06);
  transform: translateY(-1px);
}

.btn-tertiary {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.05);
  /* Very subtle white tint on the dark background. */
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 4px;
  padding: 14px 36px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
}

.btn-tertiary:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(201, 168, 76, 0.75);
  color: gold;
  transform: translateY(-3px);
}


/* ── SCROLL HINT ──────────────────────────────────────────────
   A small animated indicator at the bottom of the hero that
   encourages the user to scroll down. Contains a "Scroll" label
   and an animated dot that travels down a thin line. */
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  /* Center horizontally. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeUp 0.8s 1.2s forwards;
  /* Appears last, after other hero elements. */
}

/* The "SCROLL" label text above the animated line. */
.scroll-hint span {
  font-size: .65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blush);
}

/* The thin vertical track that the animated dot moves down. */
.scroll-line {
  width: 8px;
  height: 40px;
  background: rgba(212, 184, 150, 0.25);
  /* Faint blush background for the track. */
  position: relative;
  overflow: hidden;
  /* Clip the animated dot when it exits the track. */
  border-radius: 10%;
  border-bottom-style: solid;
}

/* The animated dot that slides from top to bottom of the track. */
.scroll-line::after {
  content: '';
  position: absolute;
  top: -8px;
  /* Start above the track so it enters from the top. */
  left: 0px;
  width: 8px;
  height: 8px;
  background: var(--blush);
  border-radius: 50%;
  animation: scrollDot 1.6s ease-in-out infinite;
  /* Loop continuously. */
}

/* Keyframe: dot moves from -8px (above track) to 40px (below track) and fades out. */
@keyframes scrollDot {
  0% {
    top: -8px;
    opacity: 1;
  }

  80% {
    opacity: 0.6;
  }

  100% {
    top: 40px;
    opacity: 0;
  }
}

/* Keyframe used by multiple hero elements to fade in while sliding upward. */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ── SHARED SECTION STYLES ────────────────────────────────────
   Styles that apply to every <section> on the page.
   Each section has generous top/bottom padding. */
section {
  padding: 100px 48px;
}

/* Reduce section padding on mobile so content doesn't feel too spaced out. */
@media (max-width: 768px) {
  section {
    padding: 72px 24px;
  }
}

/* ── SECTION HEADER ───────────────────────────────────────────
   The centered block at the top of each section containing an
   eyebrow label, the section title, and a decorative gold rule. */
.section-header {
  text-align: center;
  margin-bottom: 34px;
}

/* The small all-caps gold text above the section title, e.g., "✦  WHAT'S COMING UP  ✦". */
.section-eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

/* The main section title, e.g., "Neighborhood Events". */
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  /* Fluid size between mobile and desktop. */
  font-weight: 300;
  color: var(--forest);
  line-height: 1.2;
}

/* Italic words within section titles (e.g., "Neighborhood <em>Events</em>"). */
.section-title em {
  font-style: italic;
}

/* The short gold horizontal rule beneath the section title. */
.section-rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 20px auto 0;
  /* Centered horizontally with top margin separating it from the title. */
}


/* ── EVENTS SECTION ───────────────────────────────────────────
   The section on the homepage that lists upcoming neighborhood
   events as clickable cards. */
.events-section {
  background: var(--warm-white);
}

/* A responsive grid of event cards. Each card is at least 300px wide. */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── EVENT CARD ───────────────────────────────────────────────
   A single event card with a colored top banner, status badge,
   and body text. Card body links to event detail; CTA button
   at the bottom links to sign-up. */
.event-card {
  background: var(--cream);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 4px;
  overflow: hidden;
  /* Clip the colored top banner to the card corners. */
  display: flex;
  flex-direction: column;
  /* Stack the top banner above the body text. */
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
}

/* Inner anchor that wraps the top banner + card body text. */
.event-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* On hover: lift the card and add a deeper shadow. */
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(44, 61, 46, 0.12);
}

/* ── EVENT CARD TOP BANNER ────────────────────────────────────
   The colored area at the top of each event card that shows
   a large emoji and a status badge. Each event has a unique
   color assigned via a card-color-N class. */
.event-card-top {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  /* Large emoji centered in the banner. */
  position: relative;
  overflow: hidden;
}

/* A subtle color overlay on top of the banner gradient, very faint. */
.event-card-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.15;
}

/* ── CARD COLOR VARIANTS ──────────────────────────────────────
   Each event card's top banner has one of six gradient color
   themes. Assign the matching class in the events data array. */
.card-color-1 {
  background: linear-gradient(135deg, #e8d5c0, #f4e8d8);
}

/* Warm peach */
.card-color-2 {
  background: linear-gradient(135deg, #c9dfc6, #ddeeda);
}

/* Sage green */
.card-color-3 {
  background: linear-gradient(135deg, #d4c5e0, #e8dcf0);
}

/* Soft lavender */
.card-color-4 {
  background: linear-gradient(135deg, #c8d8e8, #dce9f4);
}

/* Sky blue */
.card-color-5 {
  background: linear-gradient(135deg, #e8c9c9, #f4dcdc);
}

/* Blush pink */
.card-color-6 {
  background: linear-gradient(135deg, #e0dbc0, #f0edcc);
}

/* Warm straw */

/* ── EVENT STATUS BADGE ───────────────────────────────────────
   A small label badge in the top-right corner of the event card
   banner. Options: "Sign-Ups Open", "Coming Soon", "Closed",
   or "Memories". */
.event-status {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  z-index: 1;
  /* Sit above the ::after overlay. */
}

/* "Sign-Ups Open" badge: dark forest green background. */
.status-open {
  background: var(--forest);
  color: var(--cream);
}

/* "Coming Soon" badge: gold background with dark text. */
.status-soon {
  background: var(--gold);
  color: var(--ink);
}

/* "Closed" badge: neutral gray. */
.status-closed {
  background: #999;
  color: #fff;
}

/* "Memories" badge: moss green for past events with photo galleries. */
.status-memories {
  background: var(--moss);
  color: var(--cream);
}

/* ── EVENT CARD BODY ──────────────────────────────────────────
   The lower portion of the event card containing the date, time,
   event name, description, and a "See More →" link. */
.event-card-body {
  padding: 24px 26px 28px;
  flex: 1;
  /* Grow so all cards in a row share the same height. */
  display: flex;
  flex-direction: column;
}

/* The event date, e.g., "March 21, 2025". */
.event-date {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

/* The time appended after the date, e.g., "· 10:00 AM – 1:00 PM". */
.event-time {
  font-weight: 400;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

/* The event name, e.g., "Easter Egg Hunt". */
.event-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--forest);
  line-height: 1.2;
  margin-bottom: 10px;
}

/* A short description of the event. Takes up remaining flex space. */
.event-desc {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  flex: 1;
  /* Push the event-link to the bottom of the card. */
  margin-bottom: 20px;
}

/* The "Sign Up Now →" or "Details Coming Soon →" text link at the bottom. */
.event-link {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moss);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Append a right-pointing arrow after the link text using a pseudo-element. */
.event-link::after {
  content: '→';
  transition: transform 0.2s;
}

/* On card body hover: slide the arrow 4px to the right. */
.event-card:hover .event-link::after,
.event-card-link:hover .event-link::after {
  transform: translateX(4px);
}

/* ── EVENT CARD CTA BUTTON ────────────────────────────────────
   The sign-up / see-memories call-to-action at the bottom of
   restructured event cards. Sits outside the body link so
   clicking the button goes to signup.html while clicking the
   card body goes to the event detail page. */
.event-card-footer {
  padding: 0 26px 22px;
}

.event-cta-btn {
  display: inline-block;
  padding: 9px 20px;
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--forest);
  color: var(--cream);
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.event-cta-btn:hover {
  background: var(--moss);
  color: #fff;
}

.event-cta-soon {
  font-size: 0.73rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-style: italic;
}


/* ── MEMORIES SECTION (HOMEPAGE TEASER) ───────────────────────
   The homepage section showing a preview photo grid and an
   invitation to submit photos. Uses a deep forest green background
   to contrast with the surrounding sections. */
.memories-section {
  background: var(--forest);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  /* Clip the background radial gradient glow. */
}

/* Decorative background glow in the top-right corner. */
.memories-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.08), transparent 70%);
  pointer-events: none;
}

/* Override the section title color to cream on the dark background. */
.memories-section .section-title {
  color: var(--cream);
}

/* Override the section eyebrow color — keep gold for consistency. */
.memories-section .section-eyebrow {
  color: var(--gold);
}

/* ── HOMEPAGE PHOTO GRID ──────────────────────────────────────
   A fixed 12-column masonry-style grid of photo slots that forms
   an interesting layout on desktop. Each slot's column span is
   specified individually below. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 220px 220px;
  /* Two rows, each 220px tall. */
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto 48px;
}

/* A single photo slot — either shows an image or a placeholder. */
.photo-slot {
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(201, 168, 76, 0.25);
  /* Dashed gold border for empty slots. */
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  overflow: hidden;
  position: relative;
  /* Allows the img inside to be positioned absolutely. */
}

/* On hover: brighten the slot slightly. */
.photo-slot:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(201, 168, 76, 0.5);
}

/* When a slot has a real image, stretch it to fill the slot. */
.photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* Camera icon shown in empty placeholder slots. */
.photo-slot .slot-icon {
  font-size: 1.8rem;
  opacity: 0.4;
}

/* "Add Photo" label shown below the camera icon in placeholder slots. */
.photo-slot .slot-label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.4);
}

/* ── PHOTO GRID LAYOUT ────────────────────────────────────────
   Individual column and row assignments for each of the 6 photo
   slots in the homepage grid. Creates a varied mosaic layout. */
.photo-slot:nth-child(1) {
  grid-column: 1 / 5;
  grid-row: 1;
}

/* Wide left, top row. */
.photo-slot:nth-child(2) {
  grid-column: 5 / 9;
  grid-row: 1;
}

/* Wide center, top row. */
.photo-slot:nth-child(3) {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
}

/* Tall right, spans both rows. */
.photo-slot:nth-child(4) {
  grid-column: 1 / 4;
  grid-row: 2;
}

/* Narrower left, bottom row. */
.photo-slot:nth-child(5) {
  grid-column: 4 / 7;
  grid-row: 2;
}

/* Narrow center-left, bottom row. */
.photo-slot:nth-child(6) {
  grid-column: 7 / 9;
  grid-row: 2;
}

/* Narrow center-right, bottom row. */

/* On medium screens: collapse to a simpler 2-column grid. */
@media (max-width: 900px) {
  .photo-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 200px);
  }

  /* Reset all explicit column/row placements — let auto-placement handle it. */
  .photo-slot {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Also reset the tall 3rd slot so it takes standard height. */
  .photo-slot:nth-child(3) {
    grid-row: auto;
  }
}

/* On very small screens: single column layout. */
@media (max-width: 560px) {
  .photo-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 180px);
  }
}


/* ── ANNOUNCEMENTS SECTION ────────────────────────────────────
   A list of dated HOA announcements on a parchment background.
   Each announcement is a horizontal row with a date column and
   a content column. */
.announcements-section {
  background: var(--parchment);
  /* Slightly warmer than warm-white for visual variety. */
}

/* The vertical stack of announcement rows. */
.announce-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Rows are separated by borders, not gaps. */
}

/* A single announcement row: date column on the left, content on the right. */
.announce-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  /* Fixed 90px date column; content fills the rest. */
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  /* Thin gold separator line. */
  align-items: start;
}

/* Add a top border to the very first announcement item to close the list visually. */
.announce-item:first-child {
  border-top: 1px solid rgba(201, 168, 76, 0.2);
}

/* The date block on the left: a large day number above a month abbreviation. */
.announce-date {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  text-align: center;
}

/* The month abbreviation below the day number (e.g., "Apr 2025"). */
.announce-date span {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blush);
  margin-top: 4px;
}

/* The announcement title. */
.announce-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--forest);
  margin-bottom: 6px;
}

/* The announcement body text. */
.announce-body {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.75;
}

/* Optional "Sign Up" / "Learn More" link on an announcement row. */
.announce-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--forest);
  transition: opacity 0.2s;
}

.announce-link:hover {
  opacity: 0.7;
}


/* ── RECOGNITION AWARDS SECTION ───────────────────────────────
   A dark forest-green section showcasing special recognition
   awards for residents (e.g., Yard of the Month, Neighborhood Hero). */
.awards-section {
  background: var(--forest);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

/* Decorative soft gold radial glow in the bottom-left corner. */
.awards-section::before {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -160px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.07), transparent 70%);
  pointer-events: none;
}

/* Keep the eyebrow label gold on the dark background. */
.awards-section .section-eyebrow {
  color: var(--gold);
}

/* Override section title to cream on the dark background. */
.awards-section .section-title {
  color: var(--cream);
}

/* A responsive grid of award cards. */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-content: center;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Centers the "Nominate a Neighbor" button below the awards grid. */
.nomination-button-section {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* An individual award card. Rendered as <a> — suppress default link styles. */
.award-card {
  background: rgba(255, 255, 255, 0.05);
  /* Very subtle white tint on the dark background. */
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 4px;
  padding: 32px 24px 28px;
  text-align: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}

/* On hover: brighten the card and lift it slightly. */
.award-card:hover {
  background: rgba(255, 255, 255, 0.30);
  border-color: rgba(201, 168, 76, 0.95);
  transform: translateY(-3px);
  color: gold;
}

/* The large emoji icon at the top of each award card. */
.award-icon {
  font-size: 2.2rem;
  margin-bottom: 16px;
}

/* The award category label, e.g., "YARD OF THE MONTH". */
.award-category {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

/* The winner's name. */
.award-winner {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--cream);
  line-height: 1.25;
  margin-bottom: 8px;
}

/* The period label, e.g., "April 2025". */
.award-period {
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(245, 240, 232, 0.4);
  letter-spacing: 0.06em;
}

/* When no winner has been named yet — dim and italicize the "Coming Soon" text. */
.award-empty .award-winner {
  color: rgba(245, 240, 232, 0.3);
  font-style: italic;
}


/* ── CONTACT SECTION ──────────────────────────────────────────
   A centered section with contact cards linking to email,
   event sign-up, Nextdoor, and Facebook. */
.contact-section {
  background: var(--warm-white);
  text-align: center;
}

/* Constrains the inner content to a comfortable reading width. */
.contact-inner {
  max-width: 540px;
  margin: 0 auto;
}

/* The intro paragraph above the contact cards. */
.contact-inner p {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 36px;
}

/* A 2-column grid of contact cards. */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}

/* Stack the contact cards vertically on very narrow screens. */
@media (max-width: 480px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* An individual contact card — a clickable anchor. */
.contact-card {
  background: var(--cream);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 4px;
  padding: 24px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* On hover: lift the card and add a soft shadow. */
.contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(44, 61, 46, 0.1);
}

/* The large emoji icon at the top of each contact card. */
.contact-card .cc-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

/* The card title, e.g., "Email the Organizer". */
.contact-card .cc-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--forest);
  margin-bottom: 4px;
}

/* The subtitle below the card title, e.g., an email address. */
.contact-card .cc-sub {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--muted);
}


/* ── FOOTER ───────────────────────────────────────────────────
   The site-wide footer shown at the bottom of every page.
   Dark ink background with muted cream text. */
footer {
  background: var(--ink);
  color: rgba(245, 240, 232, 0.5);
  /* Semi-transparent cream text. */
  text-align: center;
  padding: 40px 24px;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.06em;
}

/* Bold text inside the footer — slightly brighter gold for emphasis. */
footer strong {
  color: rgba(201, 168, 76, 0.7);
  font-weight: 400;
}

/* The large site name displayed at the top of the footer. */
footer .footer-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--cream);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}


/* ── ORNAMENT DIVIDER ─────────────────────────────────────────
   A decorative text divider (e.g., "✦ · ✦") between sections. */
.ornament {
  text-align: center;
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.5em;
  opacity: 0.5;
  margin: 0 0 48px;
}


/* ── MOBILE FIXES ─────────────────────────────────────────────
   Miscellaneous adjustments for small screens. */
@media (max-width: 768px) {

  /* Shrink the corner flourishes on the hero so they don't feel oversized. */
  .hero::before,
  .hero::after {
    width: 80px;
    height: 80px;
  }

  /* Reposition the smaller corner flourishes on mobile. */
  .hero::before {
    top: 70px;
    left: 16px;
  }

  .hero::after {
    bottom: 50px;
    right: 16px;
  }

  /* Reduce hero bottom padding since the scroll indicator is hidden on mobile. */
  .hero {
    padding-bottom: 80px;
  }

  /* Hide the scroll hint on mobile — not enough room and less relevant on touch. */
  .scroll-hint {
    display: none;
  }

  /* Stack the CTA buttons vertically so they don't collide on narrow screens. */
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  /* Full-width buttons on mobile, capped at 340px so they don't span the whole screen. */
  .btn-primary,
  .btn-outline {
    text-align: center;
    width: 100%;
    max-width: 340px;
  }
}

/* On very narrow screens, shrink the eyebrow font to prevent wrapping. */
@media (max-width: 600px) {
  .section-eyebrow {
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
    /* Keep the eyebrow on one line. */
  }
}

/* Events grid collapses to a single column on mobile. */
@media (max-width: 640px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
}

/* On very small screens, reduce button font and padding so long labels like
   "Sign Up for the Easter Egg Hunt" still fit comfortably. */
@media (max-width: 480px) {

  .btn-primary,
  .btn-outline {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding: 12px 20px;
    max-width: 100%;
  }
}