/* ============================================================
   WAJ Brand — What a Jazz: orange #E87224 · grey #2A2D32 ·
   cream/off-white. Headings: TeX Gyre Adventor (self-hosted),
   body: Jost (Google Fonts, loaded in enqueue.php).
   ============================================================ */

@font-face {
  font-family: 'TeX Gyre Adventor';
  src: url('../fonts/texgyreadventor-regular.woff2') format('woff2'),
       url('../fonts/texgyreadventor-regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Adventor';
  src: url('../fonts/texgyreadventor-bold.woff2') format('woff2'),
       url('../fonts/texgyreadventor-bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Adventor';
  src: url('../fonts/texgyreadventor-italic.woff2') format('woff2'),
       url('../fonts/texgyreadventor-italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Adventor';
  src: url('../fonts/texgyreadventor-bolditalic.woff2') format('woff2'),
       url('../fonts/texgyreadventor-bolditalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* Brand palette — What a Jazz */
  --waj-orange:    #E87224;
  --waj-grey:      #2A2D32;
  --waj-cream:     #F4EFE6;

  --waj-bg:        #2A2D32;
  --waj-surface:   #33373D;
  --waj-surface-2: #383D44;
  --waj-border:    #44494F;
  --waj-text:      #F4EFE6;
  --waj-muted:     #A9ABB0;
  --waj-accent:    #E87224;
  --waj-accent-2:  #F28A4B;
  --waj-on-accent: #FFFFFF;

  /* Level colors (schedule) */
  --waj-lvl-b:    #5B9CF6;
  --waj-lvl-bi:   #52C091;
  --waj-lvl-int:  #E87224;
  --waj-lvl-adv:  #E05252;
  --waj-lvl-open: #9B72CF;

  /* Map onto the theme's existing variable system */
  --bg:       var(--waj-bg);
  --surface:  var(--waj-surface);
  --text:     var(--waj-text);
  --muted:    var(--waj-muted);
  --line:     rgba(244, 239, 230, 0.16);
  --accent:   var(--waj-accent);
  --accent-2: var(--waj-on-accent);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.3);

  /* Typography */
  --font-heading: 'TeX Gyre Adventor', 'Avant Garde', 'Century Gothic', sans-serif;
  --font-body: 'Jost', 'Futura', 'Century Gothic', sans-serif;

  /* Hero / primary buttons (also set in Customizer → inline CSS) */
  --hero-button-bg:         var(--waj-accent);
  --hero-button-text:       var(--waj-on-accent);
  --hero-button-hover-bg:   var(--waj-accent-2);
  --hero-button-hover-text: var(--waj-on-accent);
}

/* ── Brand typography ─────────────────────────────────────── */
h1, h2, h3, h4,
.waj-wordmark {
  font-family: var(--font-heading);
  letter-spacing: 0.025em;
}
h1 { letter-spacing: 0.03em; }
body { font-family: var(--font-body); }

/* Bundled logo fallback (Site Identity logo overrides this) */
.waj-logo-fallback img { height: 46px; width: auto; display: block; }
.mobile-menu-panel .waj-logo-fallback img { height: 40px; margin: 0 auto; }

/* ── Light (cream) section treatment ──────────────────────── */
.waj-light {
  --waj-bg:        var(--waj-cream);
  --waj-surface:   #FFFDF8;
  --waj-surface-2: #FFFDF8;
  --waj-border:    rgba(42, 45, 50, 0.16);
  --waj-text:      #2A2D32;
  --waj-muted:     #5C6066;
  --bg: var(--waj-bg); --surface: var(--waj-surface);
  --text: var(--waj-text); --muted: var(--waj-muted);
  --line: rgba(42, 45, 50, 0.16);
  background: var(--waj-cream);
  color: var(--waj-text);
}

/* ── Generic dark-surface corrections ─────────────────────── */

::selection { background: var(--waj-accent); color: var(--waj-on-accent); }

.site-header,
.mobile-menu-panel,
.waj-search {
  background: rgba(31, 33, 37, 0.95);
  color: var(--waj-text);
}

.site-header { border-bottom: 1px solid var(--waj-border); backdrop-filter: blur(12px); }

.primary-menu a,
.mobile-navigation a,
.header-tools .waj-tool { color: var(--waj-text); }

.primary-menu a:hover,
.header-tools .waj-tool:hover { color: var(--waj-accent); }

/* Dropdown / mega panels */
.primary-menu .sub-menu,
.waj-mega {
  background: var(--waj-surface-2);
  border: 1px solid var(--waj-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ── Unified CTA buttons: square-ish corners, lighter weight ── */
.button,
button.button,
input[type="submit"],
input[type="button"],
.wp-element-button,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.add_to_cart_button,
.single_add_to_cart_button,
.waj-register__btn,
.submit-btn,
.waj-foot__news-form .newsletter-form button {
  border-radius: var(--radius-md, 10px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Header register button — .header-tools a outranks .button, so re-assert */
.header-tools .waj-register__btn {
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: var(--radius-md, 10px);
}

/* ── Mobile header: keep it uncramped ─────────────────────── */
@media (max-width: 820px) {
  .header-tools .waj-register__btn { padding: 0.5rem 1rem; font-size: 0.74rem; }
  .waj-lang__list a { padding: 4px 5px; font-size: 11px; }
}
@media (max-width: 700px) {
  /* Mobile header: keep it minimal — hamburger · logo · search · cart.
     Registration lives in the slide-in menu + on-page CTAs; language too. */
  .header-tools .waj-register,
  .header-tools .waj-lang { display: none; }
  .header-tools { gap: 0.7rem; }
  .site-branding img, .waj-logo-fallback img { max-height: 48px !important; }
}

/* Language switcher inside the mobile menu footer */
.mobile-menu-panel__lang { justify-content: center; margin: 0 0 1.1rem; }
.mobile-menu-panel__lang a { font-size: 13px; padding: 6px 10px; }

/* ── Featured-image hero covers (page templates) ──────────── */
.waj-has-hero { position: relative; overflow: hidden; }
.waj-has-hero > .container { position: relative; z-index: 2; }
.waj-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.waj-hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(31, 33, 37, 0.55), rgba(31, 33, 37, 0.82));
}

/* Header register button */
.waj-register__btn,
.button,
button.button,
.submit-btn {
  background: var(--waj-accent);
  color: var(--waj-on-accent);
  border-color: var(--waj-accent);
}

.waj-register__btn:hover,
.button:hover { background: var(--waj-accent-2); color: var(--waj-on-accent); }

.button--ghost {
  background: transparent;
  color: var(--waj-text);
  border: 1px solid var(--waj-border);
}
.button--ghost:hover { border-color: var(--waj-accent); color: var(--waj-accent); }

/* Language switcher (Polylang) */
.waj-lang__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.waj-lang__list a {
  display: inline-block; padding: 4px 7px;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--waj-muted); border-radius: 4px;
}
.waj-lang__list .current-lang a,
.waj-lang__list a:hover { color: var(--waj-accent); }

/* Cards / surfaces */
.section-copy--card,
.waj-foot,
.cart-drawer,
.cart-drawer__inner {
  background: var(--waj-surface);
  color: var(--waj-text);
  border-color: var(--waj-border);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea {
  background: var(--waj-bg);
  color: var(--waj-text);
  border: 1px solid var(--waj-border);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--waj-accent);
  outline: none;
  background: var(--waj-bg);   /* donor reset them to #fff on focus */
  color: var(--waj-text);
}
.waj-light input:focus, .waj-light select:focus, .waj-light textarea:focus {
  background: var(--waj-surface);
}

::placeholder { color: var(--waj-muted); }

/* Footer */
.site-footer { background: var(--waj-surface); border-top: 1px solid var(--waj-border); }
.waj-foot__news-title { color: var(--waj-text); }
.waj-foot__col-title { color: var(--waj-accent); }
.waj-foot__menu a:hover { color: var(--waj-accent); }
.waj-foot__social { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.waj-foot__social-link { color: var(--waj-accent); background: transparent; }
.waj-foot__social-link:hover { color: #fff; background: var(--waj-accent); }
.waj-foot__bottom { border-top: 1px solid var(--waj-border); color: var(--waj-muted); }

/* Newsletter form */
.newsletter-form input[type="email"] {
  background: var(--waj-bg);
  border: 1px solid var(--waj-border);
  color: var(--waj-text);
}
.newsletter-form button {
  background: var(--waj-accent);
  color: var(--waj-on-accent);
  border: none;
}
.newsletter-form button:hover { background: var(--waj-accent-2); }

/* Cart count bubble */
.cart-count { background: var(--waj-accent); color: var(--waj-on-accent); }

/* Eyebrow labels */
.eyebrow { color: var(--waj-accent); letter-spacing: 3px; }

/* Legal pages: the donor's newer live version uses --accent-olive,
   which the zip never defines. Map it to the brand accent. */
:root { --accent-olive: var(--waj-accent); }


/* ── Generic page head (DUK, simple pages) ─────────────────── */
.waj-page-head {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--waj-border);
  text-align: center;
}
.waj-page-head h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 0 0 0.6rem; }
.waj-page-head__sub { max-width: 620px; margin: 0 auto; color: var(--waj-muted); }

/* ── Generic FAQ accordion (Pradėk šokti, Pamokos, DUK) ───── */
.waj-faq { max-width: 720px; }
.waj-faq--wide { max-width: 100%; }
.waj-faq__item {
  border: 1px solid var(--waj-border); border-radius: var(--radius-md);
  background: var(--waj-surface-2); margin-bottom: 12px;
  padding: 0 var(--space-6);
}
.waj-faq__item summary {
  padding: 20px 0; cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.08rem; font-weight: 600; letter-spacing: 0.01em;
  list-style: none; position: relative; padding-right: 32px;
}
.waj-faq__item summary::-webkit-details-marker { display: none; }
.waj-faq__item summary::after {
  content: '+'; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); color: var(--waj-accent);
  font-size: 1.5rem; font-weight: 400; line-height: 1;
}
.waj-faq__item[open] summary::after { content: '\2013'; }
.waj-faq__body { padding: 0 0 20px; color: var(--waj-muted); line-height: 1.75; font-size: 1rem; }
.waj-faq__body p { margin: 0 0 0.8em; }
.waj-faq__body p:last-child { margin-bottom: 0; }
.waj-faq__body a { color: var(--waj-accent); text-decoration: underline; }
.waj-faq__more { margin-top: var(--space-4); }
.waj-faq__more a { color: var(--waj-accent); font-weight: 600; }

/* Cloudflare Turnstile widget spacing */
.waj-turnstile { margin: 14px 0; }

/* Front page: bottom photo divider sits flush with the newsletter (no big gap) */
body.home .waj-foot { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

/* NEWSLETTER input readability — fields render on white, so force dark text
   (fixes invisible cream-on-white typing in both the fallback and MailPoet form). */
.newsletter-form input,
.mailpoet_form input.mailpoet_text,
.mailpoet_form input[type="text"],
.mailpoet_form input[type="email"] { color: var(--waj-grey); background: #fff; }
.newsletter-form input::placeholder,
.mailpoet_form input::placeholder { color: rgba(42, 45, 50, 0.55); }

/* Self-hosted newsletter form — honeypot + result message */
.newsletter-form .waj-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.waj-news__result { margin: 0.6rem 0 0; font-size: 0.9rem; }
.waj-news__result.is-error { color: #ffb4a8; }
.waj-news__result.is-ok { color: var(--waj-text); font-weight: 600; }