/*!
Theme Name: Kadence Child - RVA Armenian Food Festival
Theme URI: https://stjamesrva.org/
Template: kadence
Author: St. James RVA Armenian Food Festival
Description: Kadence child theme built from the RVA Armenian Food Festival homepage mockup. Ports the tricolor hero, arabesque SVG borders, highlights grid, photo carousel, schedule band and crimson sign-up band into WordPress/Kadence templates.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aff-kadence-child
*/

/* =========================================================
   1. DESIGN TOKENS
   Ported 1:1 from the mockup's hard-coded hex values.
   Exposed as CSS custom properties so every template part,
   and the block editor (see theme.json), can reference them.
   ========================================================= */
:root {
  --aff-navy: #1a1a2e;
  --aff-navy-deep: #111120;
  --aff-cream: #FAF6EF;
  --aff-crimson: #C0392B;
  --aff-gold: #F0C040;
  --aff-blue: #2980B9;
  --aff-text-muted: #7a6e5f;
  --aff-text-soft: #c8bfaf;
  --aff-text-faint: #9a8f80;
  --aff-border: #e0d8c8;
  --aff-font-display: 'Playfair Display', serif;
  --aff-font-body: 'Inter', sans-serif;
  /* Hero-only font (headline + eyebrow + meta + buttons). Kept separate from
     --aff-font-display so section titles elsewhere on the page are untouched. */
  --aff-font-hero: 'DM Serif Display', serif;
}

/* =========================================================
   2. BASE / RESET (scoped to festival sections only, so the
   rest of Kadence's site chrome is untouched)
   ========================================================= */
.aff, .aff * { box-sizing: border-box; }
.aff { font-family: var(--aff-font-body); background: var(--aff-cream); color: #1a1a2e; overflow-x: hidden; }
.aff a { font-family: var(--aff-font-body); }

/* =========================================================
   3. NAV (header-festival.php)
   ========================================================= */
.aff-nav { background: var(--aff-navy); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 58px; }
.aff-nav-logo { font-family: var(--aff-font-display); color: var(--aff-gold); font-size: 14px; font-weight: 700; text-decoration: none; }
.aff-nav-links { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.aff-nav-links li { list-style: none; }
.aff-nav-links a { color: var(--aff-text-soft); text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.aff-nav-links a:hover, .aff-nav-links .current-menu-item a { color: var(--aff-gold); }
.aff-pill { background: var(--aff-crimson); color: #fff; font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 100px; text-decoration: none; white-space: nowrap; }
.aff-pill:hover { color: #fff; opacity: 0.9; }
.aff-nav-toggle { display: none; background: transparent; border: none; color: var(--aff-cream); font-size: 22px; cursor: pointer; }

@media (max-width: 760px) {
  .aff-nav-links { display: none; }
  .aff-nav-toggle { display: block; }
  .aff-nav.is-open .aff-nav-links { display: flex; position: absolute; top: 58px; left: 0; right: 0; background: var(--aff-navy); flex-direction: column; padding: 1rem 1.5rem; gap: 0.75rem; z-index: 20; }
}

/* =========================================================
   4. HERO (header-festival.php)
   ========================================================= */
.aff-hero { background-color: var(--aff-navy); background-size: 92% auto; background-position: center center; background-repeat: no-repeat; position: relative; overflow: hidden; }
.aff-hero::before { content: ""; position: absolute; inset: 0; background: var(--aff-navy); opacity: 0.86; z-index: 1; pointer-events: none; }
.aff-hero-stack { position: relative; z-index: 2; }
.aff-tribar { height: 8px; background: linear-gradient(90deg, var(--aff-crimson) 0%, var(--aff-crimson) 33%, var(--aff-gold) 33%, var(--aff-gold) 66%, var(--aff-blue) 66%, var(--aff-blue) 100%); }
.aff-hero-inner { display: flex; align-items: stretch; min-height: 480px; }
.aff-border-col { width: 110px; flex-shrink: 0; position: relative; }
.aff-border-col svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.aff-hero-content { flex: 1; text-align: center; position: relative; z-index: 2; padding: 2.5rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.aff-eyebrow { font-family: var(--aff-font-hero); font-size: 25px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aff-gold); margin-bottom: 0.75rem; }
.aff-rva { font-family: var(--aff-font-hero); font-size: 88px; font-weight: 400; line-height: 1; }
.aff-rva .r { color: var(--aff-crimson); }
.aff-rva .v { color: var(--aff-blue); }
.aff-rva .a { color: var(--aff-gold); }
.aff-festival-name { font-family: var(--aff-font-hero); font-size: 27px; color: var(--aff-cream); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.25rem; }
.aff-meta { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.aff-meta-item { display: flex; align-items: center; gap: 6px; color: var(--aff-text-soft); font-family: var(--aff-font-hero); font-size: 20px; }
.aff-meta-item i, .aff-meta-item .aff-icon { color: var(--aff-gold); font-size: 17px; }
.aff-btns { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.btn-red { background: var(--aff-crimson); color: #fff; padding: 11px 26px; border-radius: 100px; font-size: 13px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-family: var(--aff-font-body); display: inline-block; }
.btn-red:hover { color: #fff; opacity: 0.92; }
.btn-ghost { background: transparent; color: var(--aff-cream); padding: 10px 24px; border-radius: 100px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1.5px solid rgba(240,192,64,0.45); cursor: pointer; font-family: var(--aff-font-body); display: inline-block; }
.btn-ghost:hover { color: var(--aff-gold); border-color: var(--aff-gold); }

/* Hero buttons only (the schedule band's "Full schedule" link reuses .btn-red
   sitewide and should keep the body font, so scope this to the hero). */
.aff-hero-content .btn-red,
.aff-hero-content .btn-ghost {
  font-family: var(--aff-font-hero);
  font-weight: 400;
  font-size: 16px;
  padding: 13px 30px;
}

@media (max-width: 900px) {
  .aff-border-col { width: 48px; }
  .aff-rva { font-size: 64px; }
  .aff-festival-name { font-size: 22px; }
}
@media (max-width: 600px) {
  .aff-border-col { display: none; }
}

/* =========================================================
   5. SECTION HEADINGS (shared by highlights / carousel / schedule)
   ========================================================= */
.sec-label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aff-crimson); margin-bottom: 6px; }
.sec-rule { width: 40px; height: 3px; background: var(--aff-gold); border-radius: 2px; margin-bottom: 1rem; }
.sec-title { font-family: var(--aff-font-display); font-size: 28px; font-weight: 700; color: #1a1a2e; margin-bottom: 1.75rem; line-height: 1.2; }

/* =========================================================
   6. HIGHLIGHTS GRID (template-parts/highlights.php)
   Matches the layout produced by the Kadence Blocks
   row-layout/column pattern registered in inc/block-patterns.php
   ========================================================= */
.aff-highlights { background: var(--aff-cream); padding: 3rem 1.5rem; }
.aff-highlights-inner { max-width: 960px; margin: 0 auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; }
.card { background: #fff; border-radius: 12px; padding: 1.25rem 1rem; border: 0.5px solid var(--aff-border); text-align: center; }
.card-icon { font-size: 26px; margin-bottom: 0.6rem; }
.card-title { font-weight: 600; font-size: 14px; color: #1a1a2e; margin-bottom: 3px; }
.card-sub { font-size: 12px; color: var(--aff-text-muted); line-height: 1.5; }

/* =========================================================
   7. CAROUSEL (template-parts/carousel.php + assets/js/carousel.js)
   ========================================================= */
.carousel-sec { background: var(--aff-navy); padding: 3rem 0; }
.carousel-header { text-align: center; margin-bottom: 1.5rem; padding: 0 1.5rem; }
.carousel-header .sec-label { color: var(--aff-gold); }
.carousel-header .sec-title { color: var(--aff-cream); margin-bottom: 0; }
.carousel-track-wrap { overflow: hidden; padding: 0 1.5rem; }
.carousel-track { display: flex; transition: transform 0.45s cubic-bezier(.4,0,.2,1); }
.carousel-slide { min-width: calc(33.333% - 12px); margin-right: 18px; border-radius: 12px; overflow: hidden; position: relative; flex-shrink: 0; }
.carousel-slide img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 12px; }
.carousel-img { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 48px; border-radius: 12px; position: relative; }
.carousel-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(26,26,46,0.9)); padding: 1.5rem 1rem 0.75rem; }
.carousel-caption p { color: var(--aff-cream); font-size: 13px; font-weight: 500; margin: 0; }
.carousel-caption span { color: var(--aff-text-soft); font-size: 12px; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.carousel-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--aff-cream); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.carousel-btn:hover { background: var(--aff-crimson); border-color: var(--aff-crimson); }
.carousel-dots { display: flex; gap: 6px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; border: none; padding: 0; }
.carousel-dot.active { background: var(--aff-gold); }
.carousel-note { text-align: center; color: #6b6580; font-size: 12px; margin-top: 0.75rem; padding-bottom: 0.5rem; }

@media (max-width: 760px) {
  .carousel-slide { min-width: calc(50% - 12px); }
}
@media (max-width: 480px) {
  .carousel-slide { min-width: 100%; margin-right: 12px; }
}

/* =========================================================
   8. SCHEDULE BAND (template-parts/schedule.php)
   ========================================================= */
.band { background: var(--aff-navy); padding: 3rem 1.5rem; }
.band-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.band-title { font-family: var(--aff-font-display); font-size: 26px; color: var(--aff-cream); font-weight: 700; margin-bottom: 0.75rem; }
.band-body { font-size: 14px; color: var(--aff-text-faint); line-height: 1.7; margin-bottom: 1.25rem; }
.sched { list-style: none; margin: 0; padding: 0; }
.sched li { display: flex; gap: 1rem; margin-bottom: 0.875rem; }
.sched-time { font-size: 11px; font-weight: 600; color: var(--aff-gold); min-width: 64px; letter-spacing: 0.04em; padding-top: 2px; }
.sched-ev strong { display: block; color: var(--aff-cream); font-size: 14px; font-weight: 500; }
.sched-ev span { color: var(--aff-text-muted); font-size: 12px; }

@media (max-width: 760px) {
  .band-inner { grid-template-columns: 1fr; }
}

/* =========================================================
   9. SIGN-UP FORM BAND (template-parts/signup-form.php)
   Crimson full-width Kadence section wrapping the WPForms Lite embed.
   ========================================================= */
.form-band { background: var(--aff-crimson); padding: 3rem 1.5rem; }
.form-inner { max-width: 480px; margin: 0 auto; text-align: center; }
.form-title { font-family: var(--aff-font-display); font-size: 26px; color: #fff; margin-bottom: 0.4rem; }
.form-sub { color: rgba(255,255,255,0.75); font-size: 13px; margin-bottom: 1.75rem; }

/* Reskin WPForms Lite to match the mockup's pill inputs. Selectors are kept
   flat (single class + element) but every property is !important so they
   win regardless of whether WPForms' own CSS happens to print after ours. */
.form-band .wpforms-container,
.form-band .wpforms-container-full { margin: 0 !important; text-align: left !important; }
.form-band .wpforms-form { text-align: left !important; }

.form-band .wpforms-form .wpforms-field {
  padding: 0 0 0.85rem !important;
  margin: 0 !important;
}

/* Labels + sublabels ("Name" vs "First"/"Last") share the same look */
.form-band .wpforms-form .wpforms-field-label,
.form-band .wpforms-form .wpforms-field-sublabel,
.form-band .wpforms-form label {
  color: rgba(255,255,255,0.85) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.form-band .wpforms-form .wpforms-required-label { color: var(--aff-gold) !important; }

/* Every text-like input, textarea and select gets the same pill treatment */
.form-band .wpforms-form input[type=text],
.form-band .wpforms-form input[type=email],
.form-band .wpforms-form input[type=tel],
.form-band .wpforms-form input[type=url],
.form-band .wpforms-form input[type=number],
.form-band .wpforms-form input[type=password],
.form-band .wpforms-form select,
.form-band .wpforms-form textarea {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 8px !important;
  padding: 10px 13px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #fff !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: var(--aff-font-body) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.form-band .wpforms-form textarea { min-height: 90px !important; resize: vertical !important; }
.form-band .wpforms-form input::placeholder,
.form-band .wpforms-form textarea::placeholder { color: rgba(255,255,255,0.55) !important; }
.form-band .wpforms-form input:focus,
.form-band .wpforms-form select:focus,
.form-band .wpforms-form textarea:focus { border-color: var(--aff-gold) !important; box-shadow: none !important; }

/* Force multi-column fields (like the Name field's First/Last row) into an
   even grid instead of WPForms' default float-based half/third columns */
.form-band .wpforms-form .wpforms-field-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
/* WPForms adds a float clearfix via :before/:after with content:"" - under
   display:grid those become real (invisible) grid items and knock First/Last
   into a checkerboard instead of two clean columns. Strip them out. */
.form-band .wpforms-form .wpforms-field-row::before,
.form-band .wpforms-form .wpforms-field-row::after {
  content: none !important;
  display: none !important;
}
.form-band .wpforms-form .wpforms-field-row-block {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.form-band .wpforms-form button[type=submit],
.form-band .wpforms-submit {
  background: var(--aff-navy) !important;
  color: var(--aff-gold) !important;
  border: none !important;
  padding: 12px 0 !important;
  border-radius: 100px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
  font-family: var(--aff-font-body) !important;
}

/* Hide WPForms' default error/description spacing quirks so the band stays even */
.form-band .wpforms-form .wpforms-field-description { color: rgba(255,255,255,0.6) !important; font-size: 11px !important; margin-top: 4px !important; }

/* Fallback static form (renders only if WPForms Lite / form ID isn't configured yet) */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.6rem; }
.aff-input { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.28); border-radius: 8px; padding: 10px 13px; font-size: 13px; color: #fff; width: 100%; font-family: var(--aff-font-body); outline: none; }
.aff-input::placeholder { color: rgba(255,255,255,0.55); }
.aff-input:focus { border-color: var(--aff-gold); }
.aff-submit { background: var(--aff-navy); color: var(--aff-gold); border: none; padding: 12px 0; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; margin-top: 0.5rem; font-family: var(--aff-font-body); }
.aff-form-notice { color: rgba(255,255,255,0.85); font-size: 12px; margin-top: 1rem; border-top: 1px solid rgba(255,255,255,0.25); padding-top: 0.75rem; }

/* =========================================================
   10. FOOTER (footer-festival.php)
   ========================================================= */
.aff-footer { background: var(--aff-navy-deep); padding: 2rem 1.5rem; text-align: center; }
.footer-logo { font-family: var(--aff-font-display); color: var(--aff-gold); font-size: 17px; font-weight: 700; margin-bottom: 0.5rem; }
.footer-info { color: #4a4560; font-size: 12px; line-height: 1.9; }
.footer-links { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; list-style: none; padding: 0; }
.footer-links a { color: var(--aff-text-muted); font-size: 12px; text-decoration: none; }
.footer-links a:hover { color: var(--aff-gold); }