/* ============================================================
   File:        signup-styles.css
   Purpose:     Styles for the Easter Egg Hunt community sign-up
                form page (signup-page-easter.html). This page is
                self-contained and does NOT load index-styles.css,
                so all shared styles (nav, variables, etc.) are
                redefined here for the sign-up page's unique design
                theme (warm cream tones with blush and sage accents).
   ============================================================ */


/* ── COLOR VARIABLES ──────────────────────────────────────────
   Custom color palette for the sign-up form. Uses warmer, softer
   tones compared to the main site to give the form a friendly,
   inviting feel. */
:root {
  --cream: #fdf6ec;
  /* Very warm off-white — the page background. */
  --blush: #f4c8c0;
  /* Soft rose/blush — borders, accent elements. */
  --sage: #b5c9b2;
  /* Muted sage green — supplementary accent. */
  --goldenrod: rgb(232, 167, 56);
  /* Warm golden orange — primary accent color. */
  --deep: #3b3229;
  /* Dark warm brown — primary text color. */
  --soft-text: #7a6a5a;
  /* Medium warm brown — labels and secondary text. */
  --white: #ffffff;
  /* Pure white — card backgrounds, input fields. */
}


/* ── GLOBAL RESET ─────────────────────────────────────────────
   Normalize box sizing, margin, and padding for all elements. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ── BODY ─────────────────────────────────────────────────────
   Sets the form page's overall font, background, and text color.
   Uses position: relative so the decorative background blobs
   (created via ::before and ::after) are positioned correctly.
   Horizontal overflow is hidden to prevent the blobs from
   causing a scrollbar. */
body {
  font-family: 'DM Sans', sans-serif;
  /* Loaded from Google Fonts in the HTML file. */
  background-color: var(--cream);
  color: var(--deep);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ── DECORATIVE BACKGROUND BLOB — TOP RIGHT ───────────────────
   A large soft blush-colored circular radial gradient positioned
   in the top-right corner of the page. Creates a gentle color
   wash without requiring an image file. */
body::before {
  content: '';
  position: fixed;
  /* Stays in place as the user scrolls. */
  top: -120px;
  right: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, #f7dbd7 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  /* Decorative — clicks pass through. */
  z-index: 0;
}

/* ── DECORATIVE BACKGROUND BLOB — BOTTOM LEFT ────────────────
   A soft sage-green blob in the bottom-left corner to balance
   the blush blob at top-right. */
body::after {
  content: '';
  position: fixed;
  bottom: -100px;
  left: -100px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, #ccdec9 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}


/* ── PAGE WRAPPER ─────────────────────────────────────────────
   The main content container. Positioned above the background
   blobs (z-index: 1), constrained to a max width, and centered. */
.page-wrapper {
  position: relative;
  z-index: 1;
  /* Sit above the decorative background blobs. */
  max-width: 680px;
  /* Comfortable form width — not too wide to read. */
  margin: 0 auto;
  /* Center on the page. */
  padding: 108px 24px 80px;
  /* Top padding accounts for the fixed nav bar. */
}


/* ── PAGE HEADER ──────────────────────────────────────────────
   The section at the top of the page containing the animated emoji
   row, the main headline, and the subtitle. Centered text. */
.header {
  text-align: center;
  margin-bottom: 8px;
}

/* ── ANIMATED EMOJI ROW ───────────────────────────────────────
   A row of decorative emojis (e.g., "🐰 🥚 🌸 🥚 🐰") that
   gently floats up and down using a CSS animation. */
.egg-row {
  font-size: 2.4rem;
  letter-spacing: 6px;
  margin-bottom: 16px;
  animation: float 3s ease-in-out infinite alternate;
  /* Endless gentle float. */
}

/* Keyframe: moves the emoji row 8px upward and back down continuously. */
@keyframes float {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-8px);
  }
}

/* ── PAGE HEADLINE ────────────────────────────────────────────
   The main heading text, e.g., "Help Make Our Easter Egg Hunt Magical".
   Uses the Playfair Display serif font for elegance. */
.header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3rem);
  /* Scales smoothly from mobile to desktop. */
  font-weight: 700;
  color: var(--deep);
  line-height: 1.15;
  margin-bottom: 8px;
}

/* The italic, golden portion of the headline (e.g., "Easter Egg Hunt"). */
.header h1 em {
  font-style: italic;
  color: var(--goldenrod);
}

/* ── SUBTITLE ─────────────────────────────────────────────────
   The short paragraph below the headline describing the event. */
.subtitle {
  font-size: 1rem;
  color: var(--soft-text);
  font-weight: 300;
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ── EVENT META TAGS ──────────────────────────────────────────
   A row of pill-shaped tags below the subtitle showing the event
   date, time, and location (e.g., "📅 March 21, 2025"). */
.event-meta {
  display: flex;
  gap: 12px;
  justify-content: center;
  /* Center the tag row horizontally. */
  flex-wrap: wrap;
  /* Allow tags to wrap on very narrow screens. */
  margin: 28px 0 28px;
}

/* Individual meta tag pill. */
.meta-tag {
  background: var(--white);
  border: 1.5px solid var(--blush);
  border-radius: 100px;
  /* Fully rounded pill shape. */
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--soft-text);
}

/* The emoji icon at the start of each meta tag. */
.meta-tag span {
  margin-right: 5px;
}


/* ── EVENT DESCRIPTION ────────────────────────────────────────
   Schedule and event details shown below the meta tag row,
   above the form card. */
.description {
  font-size: 0.93rem;
  color: var(--soft-text);
  line-height: 1.85;
  margin-bottom: 22px;
  background: var(--white);
  border: 1.5px solid var(--blush);
  border-radius: 16px;
  padding: 24px 28px;
}

.description strong {
  color: var(--deep);
  font-weight: 600;
}

.description-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep);
  margin: 16px 0 12px;
}


/* ── FORM CARD ────────────────────────────────────────────────
   The white rounded card that contains the entire sign-up form.
   A soft shadow gives it a subtle elevation effect. */
.card {
  background: var(--white);
  border-radius: 24px;
  padding: 40px 44px;
  box-shadow: 0 4px 40px rgba(59, 50, 41, 0.07);
  border: 1px solid rgba(244, 200, 192, 0.4);
  /* Very faint blush border. */
}

/* On small screens, reduce card padding to prevent cramped text. */
@media (max-width: 520px) {
  .card {
    padding: 28px 20px;
  }
}


/* ── CUSTOM COLLAPSIBLE (LEGACY) ──────────────────────────────
   An older collapsible component style. The accordion logic for
   the donation section is handled separately via .accordion-*
   classes below. These styles are kept for compatibility. */

/* The collapsible content area is hidden by default using max-height: 0. */
.custom-collapsible .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  padding: 0 10px;
}

/* The clickable header of the collapsible section. */
.custom-collapsible .header {
  cursor: pointer;
  font-weight: bold;
  padding: 10px;
  background-color: #f1f1f1;
}

/* When the "active" class is present, expand the content area. */
.custom-collapsible.active .content {
  max-height: 200px;
  /* Set high enough to show all content inside. */
  padding: 10px;
}

/* The expand/collapse icon floated to the right of the header. */
.custom-collapsible .icon {
  float: right;
}


/* ── FORM SECTION LABEL ───────────────────────────────────────
   The heading at the top of each form section (e.g., "🌷 About You").
   Uses a blush-colored bottom border to visually separate it from
   the fields below. */
.section-label {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--deep);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--blush);
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ── FIELD ROW ────────────────────────────────────────────────
   A two-column row for placing two form fields side by side
   (e.g., First Name and Last Name). */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two equal columns. */
  gap: 16px;
  margin-bottom: 16px;
}

/* Stack field rows vertically on narrow screens. */
@media (max-width: 480px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}


/* ── DONATION ACCORDIONS ──────────────────────────────────────
   The donation section groups items into collapsible categories.
   Each category has a clickable header and a hidden content area.
   Clicking the header toggles the "active" / "open" classes via JS. */

/* The clickable header for each donation category. */
.accordion-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  /* Category name on the left, icon on the right. */
  align-items: center;
  background: #fdf6ec;
  border: 1.5px solid #ecddd0;
  padding: 30px;
  border-radius: 6px;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--forest, #2c3d2e);
  /* Deep forest green text. */
  transition: background 0.2s;

}

/* On hover: slightly darken the header background. */
.accordion-header:hover {
  background: rgba(var(--forest), 0.75);
}

/* The expand/collapse arrow icon on the right side of the header. */
.accordion-icon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
  color: var(--gold, #c9a84c);
}

/* When the header has the "active" class (accordion open), rotate the arrow 180°
   so it points upward, indicating that clicking will collapse the section. */
.accordion-header.active .accordion-icon {
  transform: rotate(180deg);
}

/* The content area containing the donation items. Hidden by default. */
.accordion-content {
  display: none;

}

/* When JS adds the "open" class, reveal the content as a two-column grid. */
.accordion-content.open {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}


/* ── FORM FIELD ───────────────────────────────────────────────
   A single labeled form field wrapper containing a <label>
   and an input/select/textarea. */
.field {
  display: flex;
  flex-direction: column;
  /* Stack the label above the input. */
  gap: 6px;
  margin-bottom: 16px;
}

/* Fields inside a .field-row have no bottom margin — the row handles spacing. */
.field-row .field {
  margin-bottom: 0;
}

/* Form field labels: small, uppercase, warm gray. */
label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--soft-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The required field asterisk — colored goldenrod to stand out. */
label .req {
  color: var(--goldenrod);
  margin-left: 2px;
}

/* ── FORM INPUT FIELDS ────────────────────────────────────────
   Styles applied to all text, email, tel, number, select, and
   textarea form controls. Creates a consistent, clean look with
   rounded corners and a warm neutral background. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e6ddd4;
  /* Warm gray/tan border. */
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--deep);
  background: #fdfaf7;
  /* Very light warm background for the field. */
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  /* Remove browser default focus outline — replaced below. */
}

/* When a field is focused: highlight with a gold border and a soft glow. */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--goldenrod);
  box-shadow: 0 0 0 3px rgba(232, 168, 56, 0.15);
  /* Subtle golden halo effect. */
  background: #fff;
}

/* Textarea: allow vertical resizing but not horizontal, and set a minimum height. */
textarea {
  resize: vertical;
  min-height: 90px;
}

/* Show a pointer cursor on select dropdowns. */
select {
  cursor: pointer;
}


/* ── AGE BRACKET FIELDS ───────────────────────────────────────
   A 4-column grid of number inputs for collecting how many
   attendees fall into each age group (Adults, 0-3, 4-8, 9+). */
.age-bracket-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Four equal columns by default. */
  gap: 10px;
}

/* On narrow screens: collapse to 2 columns so the inputs don't get too tiny. */
@media (max-width: 480px) {
  .age-bracket-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* A single age bracket column containing a label and a number input. */
.age-bracket {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* The small label above each age bracket input (e.g., "Ages 4–8"). */
.age-bracket-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--soft-text);
  text-align: center;
  letter-spacing: 0.04em;
}

/* Center the numeric value inside age bracket inputs. */
.age-bracket input {
  text-align: center;
}


/* ── VOLUNTEER CHECKBOX GRID ──────────────────────────────────
   A responsive grid of checkbox items for selecting volunteer
   roles. Each item has a checkbox and a label. */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}


/* ── DONATION QUANTITY LIST ───────────────────────────────────
   A two-column grid of donation item inputs shown inside each
   open accordion section. Each item has a name and a quantity
   number input. */
.donate-qty-list {
  grid-column: 1 / -1;
  /* Span all columns inside the grid parent. */
  margin-bottom: 12px;
}

/* Stack donation items to a single column on narrow screens. */
@media (max-width: 520px) {
  .accordion-content.open {
    grid-template-columns: 1fr;
  }
}

/* ── DONATION ITEM CARD ────────────────────────────────────────
   A single donation item card with the item name and a quantity
   number input side by side. Shows live stats (needed/pledged/
   remaining) below when applicable. */
.donate-item {
  background: #fdf6ec;
  border: 1.5px solid #ecddd0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s;
}

/* Highlight the donation item card when one of its inputs is focused. */
.donate-item:focus-within {
  border-color: var(--goldenrod);
}

/* The top row of each donation item: item name on left, qty input on right. */
.donate-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The donation item name text, e.g., "Plastic Eggs — any color". */
.donate-item-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--deep);
  flex: 1;
  line-height: 1.4;
}

/* The quantity control area on the right side of each donation item. */
.donate-item-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  /* Prevent the qty input from collapsing. */
}

/* Small "QTY" label to the left of the quantity input. */
.qty-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--soft-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The quantity number input — narrow and centered. */
.qty-input {
  width: 64px !important;
  /* Fixed narrow width so it doesn't crowd the item name. */
  padding: 6px 8px !important;
  text-align: center;
}

/* The live stats row (Needed / Pledged / Remaining) shown below the item name. */
.donate-item .item-stats {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(236, 221, 208, 0.8);
  /* Divider line above stats. */
}


/* ── DONATION CATEGORY HEADER ─────────────────────────────────
   A small all-caps label that appears above each group of items
   within a checkbox-grid (used when not in accordion mode).
   Spans all grid columns. */
.donate-category {
  grid-column: 1 / -1;
  /* Span all grid columns. */
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--goldenrod);
  padding: 14px;
  border-bottom: 1px solid rgba(232, 168, 56, 0.25);
  margin-top: 9px;
}



/* ── VOLUNTEER CHECKBOX ITEM ──────────────────────────────────
   A styled checkbox option for selecting a volunteer role.
   Contains a native checkbox input and a label with the role
   name and a short description of the responsibilities. */
.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fdf6ec;
  border: 1.5px solid #ecddd0;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  padding-bottom: 25px;
  /* Extra bottom padding so the live count badge fits. */
}

/* On hover: highlight the checkbox card with gold border and warm yellow tint. */
.checkbox-item:hover {
  border-color: var(--goldenrod);
  background: rgba(255, 206, 120, 0.5);
}

/* The native checkbox input inside each volunteer item. */
.checkbox-item input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-width: 17px;
  accent-color: var(--goldenrod);
  /* Colors the checkmark goldenrod when checked. */
  margin: 12px 0px;
  cursor: pointer;
}

/* The label text beside each checkbox, containing the role name and description. */
.checkbox-item .item-label {
  font-size: 0.88rem;
  color: var(--deep);
  font-weight: 400;
  line-height: 1.4;
  margin-top: 10px;
}

/* The role name in bold at the top of each checkbox label. */
.checkbox-item .item-label strong {
  display: block;
  font-weight: 500;
  padding-bottom: 15px;
}


/* ── LIVE COUNT BADGE ─────────────────────────────────────────
   A small pill-shaped badge showing how many people have already
   signed up for a given volunteer role (e.g., "3 signed up").
   Fetched from the Google Sheet via fetchCounts(). */
.item-count {
  display: inline-block;
  margin: 5px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(232, 168, 56, 0.12);
  /* Soft gold background for an active count. */
  color: #b07d1a;
}

/* Badge for zero sign-ups — gray to indicate no one has volunteered yet. */
.item-count.count-zero {
  background: rgba(0, 0, 0, 0.05);
  color: #b0a090;
}


/* ── ITEM STATS ROW ───────────────────────────────────────────
   The row of stat boxes (Needed / Pledged / Remaining) shown
   below each donation item. Each stat is a small boxed figure. */
.item-stats {
  display: flex;
  gap: 14px;
  padding: 5px;
}

/* An individual stat box. */
.item-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: var(--white);
  border: var(--goldenrod) 1.5px solid;
  /* Gold border around each stat box. */
  border-radius: 20%;
  width: 60px;
  font-size: .75rem;
}

/* The numeric value inside the stat box (e.g., "450"). */
.item-stat-val {
  text-align: center;
  padding: 10px 5px 0px 5px;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--goldenrod);
  line-height: 1;
}

/* Zero value: gray to indicate nothing has been pledged yet. */
.item-stat-val.zero {
  color: #c0b0a0;
}

/* When the goal is fully met, switch the remaining stat to green. */
.item-stat.met .item-stat-val {
  color: #5a8f52;
}

/* The small label below each stat value (e.g., "NEEDED", "PLEDGED"). */
.item-stat-label {
  text-align: center;
  font-size: 0.65em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft-text);
  opacity: 0.7;
  padding-bottom: 10px;
}


/* ── SECTION DIVIDER ──────────────────────────────────────────
   A thin horizontal gradient line used to visually separate
   form sections. Fades from transparent on both ends to blush. */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--blush), transparent);
  margin: 32px 0;
}


/* ── SUBMIT AREA ──────────────────────────────────────────────
   The bottom of the form containing the submit button, error
   message, and fine-print privacy note. */
.submit-area {
  text-align: center;
  margin-top: 36px;
}

/* ── SUBMIT BUTTON ────────────────────────────────────────────
   The primary form submission button. Fully rounded, goldenrod
   background with a warm shadow. Disabled while the form is
   being submitted. */
.submit-btn {
  background: var(--goldenrod);
  color: var(--white);
  border: none;
  border-radius: 100px;
  /* Pill shape. */
  padding: 16px 52px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  box-shadow: 0 4px 20px rgba(232, 168, 56, 0.35);
  margin-bottom: 18px;
}

/* On hover: lift the button and deepen the shadow. */
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(232, 168, 56, 0.45);
  background: #d4952a;
  /* Slightly darker goldenrod on hover. */
}

/* On click/press: return to normal position. */
.submit-btn:active {
  transform: translateY(0);
}

/* While submitting: dim and disable pointer events. */
.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}


/* ── FINE PRINT ───────────────────────────────────────────────
   Small text below the submit button explaining how the submitted
   info will be used, with a contact email link. */
.fine-print {
  margin-top: 14px;
  font-size: 0.78rem;
  color: #b0a090;
}

/* The contact email link inside the fine print — colored goldenrod. */
.fine-print a {
  color: var(--goldenrod);
  text-decoration: none;
}


/* ── ERROR MESSAGE ────────────────────────────────────────────
   A red-tinted error box shown if the form submission fails.
   Hidden by default and shown by JavaScript. */
.error-msg {
  display: none;
  /* Hidden until JS sets display: block. */
  background: #fff0f0;
  border: 1.5px solid #f4c0c0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: #a04040;
  margin-top: 16px;
  text-align: center;
}


/* ── SUCCESS MESSAGE ──────────────────────────────────────────
   The confirmation screen shown after a successful form submission.
   Replaces the form content area. Hidden by default. */
.success-msg {
  display: none;
  /* Hidden until JS sets display: block after submission. */
  text-align: center;
  padding: 40px 20px;
}

/* The large celebration emoji at the top of the success screen. */
.success-msg .big-emoji {
  font-size: 3rem;
  margin-bottom: 16px;
}

/* The "You're in — thank you!" headline. */
.success-msg h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: var(--deep);
  margin-bottom: 8px;
}

/* The thank-you body text. */
.success-msg p {
  color: var(--soft-text);
  font-size: 0.95rem;
}


/* ── PAGE FOOTER ──────────────────────────────────────────────
   A small centered footer at the very bottom of the sign-up page,
   below the form card. Shows who organized the event. */
.footer {
  text-align: center;
  margin-top: 48px;
  font-size: 0.78rem;
  color: #c0b0a0;
}

/* Bold text inside the footer (e.g., "your HOA community") — slightly darker. */
.footer strong {
  color: var(--soft-text);
}


/* ── NAVIGATION BAR ───────────────────────────────────────────
   The sign-up page has its own nav bar style since it doesn't
   load index-styles.css. Matches the main site nav visually
   but uses DM Sans as the font to match the form page's theme. */
nav {
  position: fixed;
  /* Stays at the top of the screen as the user scrolls. */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  background: rgba(245, 240, 232, 0.88);
  /* Semi-transparent cream background. */
  backdrop-filter: blur(12px);
  /* Frosted-glass blur of content behind nav. */
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
  transition: padding 0.3s;
  font-family: 'DM Sans', sans-serif;
  /* Match the form page's font. */
}

/* The site name / logo link in the top-left corner of the nav. */
.nav-brand {
  font-family: 'Playfair Display', serif;
  /* Elegant serif for the brand name. */
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2c3d2e;
  text-decoration: none;
}

/* The decorative gold star before the brand name. */
.nav-brand span {
  color: #c9a84c;
}

/* The horizontal list of navigation links. */
.nav-links {
  display: flex;
  gap: 14px;
  list-style: none;
}

/* Individual navigation link. */
.nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a7060;
  /* Muted warm gray by default. */
  text-decoration: none;
  transition: color 0.2s;
}

/* Darken the link on hover. */
.nav-links a:hover {
  color: #2c3d2e;
}

/* Active nav link — highlights the current page. */
.nav-active { color: #2c3d2e !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;
  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: #7a7060;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.nav-dropdown li a:hover { color: #2c3d2e; background: rgba(44,61,46,0.05); }

/* The filled "Sign Up" call-to-action link in the nav. */
.nav-cta {
  background: #2c3d2e;
  color: #f5f0e8 !important;
  padding: 8px 20px;
  border-radius: 2px;
  transition: background 0.2s !important;
}

/* On hover: lighten to moss green. */
.nav-cta:hover {
  background: #4a6741 !important;
  color: #f5f0e8 !important;
}


/* ── MOBILE NAV ───────────────────────────────────────────────
   On screens 1100px wide and below, switch to a hamburger menu
   that reveals a full-screen overlay. */
@media (max-width: 1100px) {
  nav {
    padding: 16px 24px;
  }

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

  /* The nav links become a full-viewport overlay. */
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--cream);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    z-index: 50;
    display: none;
    /* Hidden until JS adds the "open" class. */
  }

  /* Show the overlay when the hamburger is clicked. */
  .nav-links.open {
    display: flex;
  }

  /* Larger link text inside the mobile overlay. */
  .nav-links a {
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    color: #2c3d2e;
  }

  .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; }

  /* Animate the hamburger bars into an X when the menu is open. */
  .nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}