/*
Theme Name: Astra Child — Kushals Fashion Jew (Concept D V2)
Theme URI: https://kushalsfashionjew.com/
Description: Child theme of Astra Free for the Concept D V2 premium international jewellery discovery + Amazon.com affiliate website. Original code, free tools only. Implements the Concept D V2 design system with Gutenberg/WooCommerce. NOT tested on a live site — install on staging first and test before any production approval.
Author: Kushals Fashion Jew (development package)
Author URI: https://kushalsfashionjew.com/
Template: astra
Version: 1.0.8
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kfj
Tags: custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============ Concept D V2 design tokens ============ */
:root {
  --kfj-ivory: #FAF7F2;
  --kfj-white: #FFFFFF;
  --kfj-charcoal: #24201E;
  --kfj-gold: #C6A66B;
  --kfj-rose: #EADDD0;
  --kfj-taupe: #A89A8A;
  --kfj-secondary: #746C65;
  --kfj-deep-gold: #A88447;
  --kfj-border: #E8E1D8;
  --kfj-font-heading: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --kfj-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

body {
  background: var(--kfj-ivory);
  color: var(--kfj-charcoal);
  font-family: var(--kfj-font-body);
  font-size: 16px;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--kfj-font-heading);
  color: var(--kfj-charcoal);
  line-height: 1.2;
}
h1 { font-size: clamp(34px, 5vw, 64px); }
h2 { font-size: clamp(26px, 3.5vw, 40px); }
h3 { font-size: 20px; }
a { color: var(--kfj-charcoal); }
a:hover, a:focus { color: var(--kfj-deep-gold); }
a:focus, button:focus, input:focus, select:focus { outline: 3px solid var(--kfj-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============ Buttons ============ */
.kfj-btn, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button {
  background: var(--kfj-charcoal);
  color: var(--kfj-white);
  border: 1px solid var(--kfj-charcoal);
  border-radius: 999px;
  font-family: var(--kfj-font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  text-decoration: none;
  display: inline-block;
}
.kfj-btn:hover, .kfj-btn:focus, .wp-block-button__link:hover, .woocommerce a.button:hover {
  background: var(--kfj-deep-gold);
  border-color: var(--kfj-deep-gold);
  color: var(--kfj-white);
}
.kfj-btn-outline {
  background: transparent;
  color: var(--kfj-charcoal);
  border: 1px solid var(--kfj-charcoal);
}
.kfj-btn-outline:hover { background: var(--kfj-charcoal); color: var(--kfj-white); }

/* ============ 3-layer header (Concept D V2) ============ */
.kfj-announcement {
  background: var(--kfj-charcoal);
  color: var(--kfj-white);
  text-align: center;
  font-size: 13px;
  padding: 8px 16px;
  white-space: normal;
}
.kfj-header-main {
  background: var(--kfj-white);
  border-bottom: 1px solid var(--kfj-border);
}
.kfj-header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  flex-wrap: nowrap; /* FIX: logo stays in the header row; nav never wraps inside this row */
}
.kfj-logo { flex: 0 0 auto; font-family: var(--kfj-font-heading); font-size: 28px; line-height: 1; white-space: nowrap; }
.kfj-logo a { color: var(--kfj-charcoal); text-decoration: none; }
/* Audit 1.0.6: constrain the custom-logo image to the declared logo size.
   Without this the image rendered at its native size and dominated the header. */
.kfj-logo img { max-height: 60px; width: auto; max-width: 240px; height: auto; display: block; }
.kfj-search { flex: 1 1 auto; min-width: 180px; }
.kfj-search form { display: flex; }
.kfj-search input[type="search"] {
  flex: 1; background: var(--kfj-ivory); border: 1px solid var(--kfj-border);
  border-radius: 999px; padding: 11px 18px; font-size: 15px; width: 100%;
}
.kfj-header-actions { display: flex; gap: 16px; flex: 0 0 auto; white-space: nowrap; font-size: 14px; font-weight: 600; }
.kfj-nav { background: var(--kfj-white); border-bottom: 1px solid var(--kfj-border); }
.kfj-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.kfj-nav ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; overflow-x: auto; }
.kfj-nav li { flex: 0 0 auto; }
.kfj-nav a {
  display: block; padding: 13px 2px; font-size: 14px; font-weight: 500;
  color: var(--kfj-charcoal); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent;
}
.kfj-nav a:hover, .kfj-nav a:focus { color: var(--kfj-deep-gold); border-bottom-color: var(--kfj-deep-gold); }
/* Mega-menu panel: real submenu markup (fallback menu renders
   <ul class="kfj-mega sub-menu">; an assigned WP menu renders
   <ul class="sub-menu">). Hidden until JS opens it (see kfj.js).
   Round-3: CSS :hover/:focus-within deliberately do NOT display
   a panel — a CSS-only visible panel can never update
   aria-expanded, which caused panels to be visibly open while
   their trigger reported [collapsed]. Desktop hover and focus
   are handled by JS mouseenter/focusin, which open through the
   same helper as click and sync aria-expanded, so visual state
   and aria state can never diverge. Mobile rules below keep it
   a single-column expandable list. */
.kfj-nav li { position: relative; }
.kfj-nav li > .kfj-mega, .kfj-nav li > .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 260px;
  background: var(--kfj-white); border: 1px solid var(--kfj-border);
  padding: 12px 0; flex-direction: column; z-index: 50;
}
.kfj-nav li > .kfj-mega li, .kfj-nav li > .sub-menu li { flex: 1 1 auto; }
.kfj-nav li > .kfj-mega a, .kfj-nav li > .sub-menu a { padding: 10px 18px; border-bottom: 0; white-space: normal; }
.kfj-submenu-toggle {
  background: none; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--kfj-charcoal);
  padding: 13px 2px; cursor: pointer; white-space: nowrap;
}
.kfj-submenu-toggle:hover, .kfj-submenu-toggle:focus { color: var(--kfj-deep-gold); border-bottom-color: var(--kfj-deep-gold); }
@media (min-width: 769px) {
  /* Dropdowns are absolutely positioned below the nav row, so the nav
     row must NOT use overflow-x:auto here — that would clip the panel
     vertically (overflow-y computes to auto). The top-level row is kept
     uncrowded instead (smaller gap/font below 1100px). */
  .kfj-header-main, .kfj-nav, .kfj-nav-inner, .kfj-nav ul { overflow: visible; }
  /* Only JS classes display a panel (see the comment above):
     kfj-mega-open is set by every open path, kfj-mega-hover by
     the desktop mouseenter handler. No :hover/:focus-within
     display rule exists on purpose. */
  .kfj-nav li.kfj-mega-open > .kfj-mega, .kfj-nav li.kfj-mega-open > .sub-menu,
  .kfj-nav li.kfj-mega-hover > .kfj-mega, .kfj-nav li.kfj-mega-hover > .sub-menu {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0;
  }
  /* Panel items are a vertical list, never a horizontal strip: the
     top-level row is flex, so panel items must not stretch as row
     flex items when a parent theme rule interferes. */
  .kfj-nav li > .kfj-mega li, .kfj-nav li > .sub-menu li { flex: none; display: block; width: 100%; }
  .kfj-nav li > .kfj-mega a, .kfj-nav li > .sub-menu a { display: block; width: 100%; }
  /* Escape force-close: a panel closed by Escape stays closed while
     the pointer is still over its group. mouseleave clears this
     class. (The JS Escape handler also suppresses the focusin
     reopen caused by returning focus to the trigger.) */
  .kfj-nav li.kfj-mega-force-closed > .kfj-mega, .kfj-nav li.kfj-mega-force-closed > .sub-menu { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .kfj-nav ul { gap: 12px; }
  .kfj-nav a, .kfj-submenu-toggle { font-size: 13px; }
}
.kfj-menu-toggle { display: none; background: var(--kfj-charcoal); color: var(--kfj-white); border: 0; border-radius: 8px; padding: 10px 14px; font-weight: 600; }

/* ---- Mobile header/hero FIXES (known V2 issues) ----
   - Nav must NOT wrap over multiple lines inside a black block.
   - Logo must NOT sit below the nav.
   - Hero text must NOT overlap busy photography on mobile. */
@media (max-width: 768px) {
  body { font-size: 15px; }
  h1 { font-size: clamp(34px, 9vw, 42px); }
  h2 { font-size: clamp(26px, 7vw, 30px); }
  .kfj-header-row { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .kfj-logo { order: 1; }
  .kfj-menu-toggle { display: inline-block; order: 2; margin-left: auto; }
  .kfj-search { order: 3; flex: 1 1 100%; } /* search full-width BELOW logo row — logo stays in its row */
  .kfj-header-actions { order: 4; }
  .kfj-nav-inner { padding: 0 16px; }
  .kfj-nav ul { display: none; flex-direction: column; flex-wrap: nowrap; overflow-x: visible; }
  .kfj-nav.kfj-nav-open ul { display: flex; } /* single-column menu, opened by toggle only */
  .kfj-nav a { padding: 12px 0; }
  /* Mobile mega menu: nested lists are expandable, in-flow, single-column.
     They open only when their parent li is toggled (see kfj.js). */
  .kfj-submenu-toggle { display: block; width: 100%; text-align: left; padding: 12px 0; }
  .kfj-nav li > .kfj-mega, .kfj-nav li > .sub-menu {
    position: static; min-width: 0; border: 0; border-left: 2px solid var(--kfj-gold);
    padding: 0 0 0 16px; margin: 0 0 8px;
  }
  .kfj-nav li.kfj-mega-open > .kfj-mega, .kfj-nav li.kfj-mega-open > .sub-menu { display: flex; flex-direction: column; }
  .kfj-hero { flex-direction: column; }
  .kfj-hero-media { order: 1; }
  .kfj-hero-slider { order: 1; }
  .kfj-hero-text { order: 2; position: static !important; background: var(--kfj-white); padding: 20px 16px; }
}

/* ============ Homepage sections ============ */
.kfj-section { padding: 48px 24px; }
.kfj-section-inner { max-width: 1280px; margin: 0 auto; }
.kfj-section-alt { background: var(--kfj-white); }
.kfj-hero { display: flex; gap: 32px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 32px 24px; }
.kfj-hero-text { flex: 0 1 45%; }
/* Demo-match 1.0.7: content never touches the left/right edges.
   The child theme's <main> wraps every template (homepage, single
   product, single post, pages), so this guarantees at least 20px of
   side gap on product, blog and home pages, on top of the 24px
   section padding already present on the homepage. */
main#main, .site-main { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
/* Demo-match 1.0.7: hero slider (existing product images only). */
.kfj-hero-slider { flex: 0 1 55%; position: relative; overflow: hidden; border-radius: 12px; }
.kfj-hero-slide { display: none; }
.kfj-hero-slide.kfj-slide-active { display: block; }
.kfj-hero-slide img { width: 100%; height: auto; display: block; }
.kfj-hero-slide figcaption { text-align: center; font-size: 14px; padding: 8px 0 0; }
.kfj-hero-media { flex: 0 1 55%; background: var(--kfj-rose); min-height: 320px; display: flex; align-items: center; justify-content: center; color: var(--kfj-secondary); text-align: center; padding: 16px; }
.kfj-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kfj-tile { background: var(--kfj-white); border: 1px solid var(--kfj-border); border-radius: 12px; padding: 28px 16px; text-align: center; }
/* Audit 1.0.6: Curated Picks product images (existing product images only). */
.kfj-products .kfj-tile img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }
.kfj-tile:hover { border-color: var(--kfj-gold); }
.kfj-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1024px) {
  .kfj-tiles, .kfj-products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .kfj-tiles, .kfj-products { grid-template-columns: 1fr 1fr; }
}

/* ============ Product cards (WooCommerce) ============ */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  background: var(--kfj-white);
  border: 1px solid var(--kfj-border);
  border-radius: 12px;
  padding: 12px;
}
.woocommerce ul.products li.product:hover { border-color: var(--kfj-gold); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 18px; font-family: var(--kfj-font-heading); }
.woocommerce ul.products li.product .price { color: var(--kfj-charcoal); }

/* ============ Gift finder / footer ============ */
.kfj-gift-finder { background: var(--kfj-rose); border-radius: 12px; padding: 24px; }
.kfj-gift-finder form { background: var(--kfj-white); border: 1px solid var(--kfj-border); border-radius: 12px; padding: 20px; }
.kfj-footer { background: var(--kfj-charcoal); color: var(--kfj-white); padding: 48px 24px 24px; }
.kfj-footer a { color: var(--kfj-white); }
.kfj-footer h3, .kfj-footer h4 { color: var(--kfj-gold); font-family: var(--kfj-font-heading); }
.kfj-footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 768px) { .kfj-footer-inner { grid-template-columns: 1fr 1fr; } }
.kfj-disclosure { font-size: 13px; color: var(--kfj-secondary); border-top: 1px solid var(--kfj-border); padding-top: 12px; margin-top: 16px; }
.kfj-footer .kfj-disclosure { color: #D8D0C8; }

/* ------------------------------------------------------------------ */
/* KFJ Discovery (staging-ready) — appended only. Existing mobile      */
/* header/hero rules above are untouched.                               */
/* ------------------------------------------------------------------ */
.kfj-discovery-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 16px 0; }
.kfj-discovery-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.kfj-discovery-form input[type="search"], .kfj-discovery-form select { padding: 10px 12px; border: 1px solid var(--kfj-border); border-radius: 4px; background: #fff; font-family: var(--kfj-font-body); font-size: 15px; max-width: 100%; }
.kfj-discovery-form select[multiple] { min-width: 260px; }
.kfj-card { border: 1px solid var(--kfj-border); border-radius: 8px; padding: 16px; margin: 12px 0; background: #fff; }
.kfj-card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.kfj-card-actions .kfj-note { font-size: 13px; }
.kfj-card h3 { margin: 0 0 8px; font-family: var(--kfj-font-heading); }
.kfj-note { font-size: 14px; color: var(--kfj-secondary); }
.kfj-empty { font-size: 15px; color: var(--kfj-secondary); border: 1px dashed var(--kfj-border); padding: 16px; border-radius: 8px; }
.kfj-gift-finder fieldset { border: 1px solid var(--kfj-border); border-radius: 8px; padding: 16px; margin: 12px 0; background: #fff; }
.kfj-gift-finder legend { font-family: var(--kfj-font-heading); font-size: 18px; padding: 0 8px; }
.kfj-compare-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.kfj-compare-table th, .kfj-compare-table td { border: 1px solid var(--kfj-border); padding: 8px 10px; text-align: left; vertical-align: top; }
.kfj-compare-table th { background: var(--kfj-ivory); font-family: var(--kfj-font-heading); }
/* Compare cap message: a persistent, clearly visible inline message
   next to the Compare control (round-2 fix). It is NOT a short-lived
   toast and must never be hidden by a re-render of a tray elsewhere. */
.kfj-compare-cap-message {
  display: block; margin-top: 8px; padding: 8px 12px;
  background: var(--kfj-ivory); border: 1px solid var(--kfj-gold); border-radius: 8px;
  color: var(--kfj-charcoal); font-size: 14px; font-weight: 600; line-height: 1.4;
}
@media (max-width: 768px) {
	.kfj-discovery-form { flex-direction: column; align-items: stretch; }
	.kfj-discovery-form select[multiple] { min-width: 0; width: 100%; }
	.kfj-compare-table { display: block; overflow-x: auto; }
}