/* ==========================================================================
   Vedic People v3 — Base stylesheet (loads on every page)
   Design tokens, reset, type scale, buttons, tags, header, footer.
   Page-type-specific CSS lives in home.css / hub.css / content.css /
   search.css / vac.css — loaded conditionally, see functions.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Adobe Clean — served from wp-content/uploads/fonts/ (already on the
   production server, used by vedic-people-v2 today). Not re-bundled here.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Adobe Clean'; font-weight: 300 450; font-style: normal; font-display: swap;
  src: url('https://vedicpeople.com/wp-content/uploads/fonts/AdobeClean-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Adobe Clean'; font-weight: 451 650; font-style: normal; font-display: swap;
  src: url('https://vedicpeople.com/wp-content/uploads/fonts/AdobeClean-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Adobe Clean'; font-weight: 651 850; font-style: normal; font-display: swap;
  src: url('https://vedicpeople.com/wp-content/uploads/fonts/AdobeClean-ExtraBold.otf') format('opentype');
}
@font-face {
  font-family: 'Adobe Clean'; font-weight: 851 900; font-style: normal; font-display: swap;
  src: url('https://vedicpeople.com/wp-content/uploads/fonts/AdobeClean-Black.otf') format('opentype');
}
@font-face {
  font-family: 'Adobe Clean Black'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('https://vedicpeople.com/wp-content/uploads/fonts/AdobeClean-Black.otf') format('opentype');
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root{
  --paper:#FBF6EC; --paper-deep:#F4EAD3; --surface:#F6F4EE; --line:#E3D8C2; --line-soft:#EEE4CC;
  --ink:#2A241E; --ink-soft:#6B6152; --ink-faint:#9C9282;

  --gold:#ECC843; --gold-ink:#8A661C; --gold-line:#D9B34A;
  --vermilion:#D73C21; --vermilion-ink:#A32C17;
  --green:#10673D; --green-deep:#0B4A2C; --green-soft:#E1EEE4;

  --role-primary-bg:var(--green); --role-primary-color:#F3FBF6; --role-primary-hover:var(--green-deep);
  --role-secondary-bg:var(--green-soft); --role-secondary-border:var(--green); --role-secondary-color:var(--green-deep);
  --role-outline-border:var(--ink); --role-outline-color:var(--ink);
  --role-tertiary-color:var(--green);
  --role-tag-color:var(--ink); --role-tag-border:var(--ink);
  --role-available-bg:transparent; --role-available-border:var(--gold-line); --role-available-color:var(--gold-ink); --role-available-dot:var(--gold);
  --role-filter-bg:var(--green-soft); --role-filter-border:var(--green); --role-filter-color:var(--green-deep);
  --role-footer-link:var(--ink-soft); --role-footer-link-hover:var(--green);

  --font-serif:'Lora', Georgia, serif;
  --font-ui:'Adobe Clean', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-te:'Mallanna', 'Adobe Clean', sans-serif;
  --font-hi:'Martel', 'Lora', serif;

  --radius-sm:4px; --radius-md:8px;
  --shadow-card:0 1px 2px rgba(42,36,30,.05), 0 6px 20px -8px rgba(42,36,30,.18);

  --h1-en:2rem;   --h1-te:2.16rem;  --h1-hi:2.1rem;
  --h2-en:1.7rem; --h2-te:1.82rem;  --h2-hi:1.775rem;
  --h3-en:1.5rem; --h3-te:1.604rem; --h3-hi:1.565rem;
  --h4-en:1.3rem; --h4-te:1.388rem; --h4-hi:1.355rem;
  --body-en:1.4rem; --body-te:1.323rem; --body-hi:1.292rem;
}

/* --------------------------------------------------------------------------
   Reset & base typography
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-ui); font-size:var(--body-en); line-height:1.5; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:var(--ink);}
b, strong{font-weight:900;}

h1,h2,h3,h4{font-family:var(--font-serif); font-weight:600;}
h1{font-size:var(--h1-en); margin-block:32px 8px;}
h2{font-size:var(--h2-en); margin-block:24px 8px;}
h3{font-size:var(--h3-en); margin-block:24px 8px;}
h4{font-size:var(--h4-en); margin-block:0;}

/* Core paragraph blocks read justified by default (see also .read-body p
   in grantha-reader.css, which already matched this). */
.wp-block-paragraph{text-align:justify;}

/* Blockquotes — branded gold rule on the left, everywhere (editorial
   .prose content and reader chapters both use plain <blockquote>; verse
   blocks in content.css layer extra styling on top of this). */
blockquote{
  border-left:16px solid var(--gold);
  margin:18px 0;
  border-radius:8px;
  background:var(--line-soft);
  width:80%;
  padding:20px;
}

/* Paragraph blocks carrying a legacy Kadence "theme-palette-7" background
   class from content authored before the v3 rebuild — that palette slot no
   longer exists, so give it a concrete fallback rather than leaving it
   with no background at all. */
.wp-block-paragraph.has-theme-palette-7-background-color.has-background{
  background:var(--line-soft);
  width:80%;
  padding:20px;
}

/* Frontend CSS for the editor-color-palette registered in functions.php —
   classic themes don't get this generated automatically the way a
   theme.json palette would. */
.has-paper-color{color:var(--paper);} .has-paper-background-color{background-color:var(--paper);}
.has-paper-deep-color{color:var(--paper-deep);} .has-paper-deep-background-color{background-color:var(--paper-deep);}
.has-surface-color{color:var(--surface);} .has-surface-background-color{background-color:var(--surface);}
.has-ink-color{color:var(--ink);} .has-ink-background-color{background-color:var(--ink);}
.has-ink-soft-color{color:var(--ink-soft);} .has-ink-soft-background-color{background-color:var(--ink-soft);}
.has-gold-color{color:var(--gold);} .has-gold-background-color{background-color:var(--gold);}
.has-vermilion-color{color:var(--vermilion);} .has-vermilion-background-color{background-color:var(--vermilion);}
.has-green-color{color:var(--green);} .has-green-background-color{background-color:var(--green);}

/* Page-language typography: page_lang ACF field (te/hi/en) sets a body
   class; headings swap family + size together so nothing in the heading
   scale ever reads smaller than body text in that language. */
/* H1 is deliberately exempt from the language swap on these pages — always
   Lora at --h1-en, matching every other page type regardless of content
   language. Only h2-h4 and .prose (body text) switch family/size. */
body.telugu h2{font-size:var(--h2-te); font-family:var(--font-te);}
body.telugu h3{font-size:var(--h3-te); font-family:var(--font-te);} body.telugu h4{font-size:var(--h4-te); font-family:var(--font-te);}
body.telugu{font-size:var(--body-te);}
body.telugu .prose{font-family:var(--font-te); font-size:calc(var(--body-en) + 1rem);}

body.hindi h2{font-size:var(--h2-hi); font-family:var(--font-hi);}
body.hindi h3{font-size:var(--h3-hi); font-family:var(--font-hi);} body.hindi h4{font-size:var(--h4-hi); font-family:var(--font-hi);}
body.hindi{font-size:var(--body-hi);}
body.hindi .prose{font-family:var(--font-hi); font-size:calc(var(--body-en) + 1rem);}

.wordmark-logo{height:28px; width:auto; display:block;}

/* Shared "inset body" wrapper — front-page.php's post-hero editorial
   content only (hub/content pages constrain their own top-level
   containers directly in hub.css/content.css). */
.site-main{width:90%; margin:0 auto;}

.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;}

/* --------------------------------------------------------------------------
   Breadcrumbs — shared by the theme (vp_breadcrumbs) AND Grantha's reader
   template, so reader pages and content pages read identically. Do not
   fork this component per-template.
   -------------------------------------------------------------------------- */
.crumb{font:400 1.30rem var(--font-ui); color:var(--ink-faint); margin:0 0 14px; line-height:1.3; display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.crumb a{color:var(--ink-faint); text-decoration:none;}
.crumb a:hover{color:var(--green); text-decoration:underline;}
.crumb .crumb-home svg{display:block; width:14px; height:14px;}
.crumb .crumb-current{color:var(--ink); font-weight:600;}
.crumb .sep{color:var(--ink-faint); opacity:.7;}

/* --------------------------------------------------------------------------
   Buttons — four tiers (for editorial content, e.g. core Button blocks)
   -------------------------------------------------------------------------- */
.btn{font:400 16.7px var(--font-ui); padding:11px 22px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none;}
.btn.primary{background:var(--role-primary-bg); color:var(--role-primary-color); font-weight:900;}
.btn.primary:hover{background:var(--role-primary-hover);}
.btn.secondary{background:var(--role-secondary-bg); color:var(--role-secondary-color); border-color:var(--role-secondary-border); font-weight:900;}
.btn.secondary:hover{background:var(--role-primary-bg); border-color:var(--role-primary-bg); color:var(--role-primary-color);}
.btn.outline{background:transparent; border-color:var(--role-outline-border); color:var(--role-outline-color);}
.btn.outline:hover{background:var(--role-primary-bg); border-color:var(--role-primary-bg); color:var(--role-primary-color);}
.btn.tertiary{background:transparent; border-color:transparent; color:var(--role-tertiary-color); padding:8px 6px; text-decoration:none; font-weight:400;}
.btn.tertiary:hover{text-decoration:underline;}

/* --------------------------------------------------------------------------
   Tags — category tag is the only cross-page-type tag (search, autocomplete,
   hub cards). The gold "available" tag is content-page/infobox-specific —
   see content.css (Phase 3).
   -------------------------------------------------------------------------- */
.tag{font:900 14.2px var(--font-ui); letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px; display:inline-block;}
.tag.category{background:transparent; border:1.4px solid var(--role-tag-border); color:var(--role-tag-color);}

/* --------------------------------------------------------------------------
   Kolam ornaments
   -------------------------------------------------------------------------- */
.kolam-header{display:block; width:100%; height:18px;}
.footer-kolam{width:300px; margin:22px auto 0; display:block;}
.footer-kolam svg{display:block; width:100%; height:auto;}

/* --------------------------------------------------------------------------
   Header — wordmark, primary nav (with submenu dropdowns), search, kolam
   -------------------------------------------------------------------------- */
.site-header{background:var(--surface); position:relative;}
.site-header__row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 28px;}

.nav-toggle{display:none; background:none; border:none; padding:8px; cursor:pointer; color:var(--ink);}
.nav-toggle svg{width:22px; height:22px; display:block;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

.site-nav{display:flex; gap:24px; list-style:none; margin:0; padding:0;}
.site-nav ul{list-style:none; margin:0; padding:0;}
.site-nav > ul{display:flex; gap:24px;}
.site-nav li{position:relative;}
.site-nav a{font:400 1.25rem var(--font-ui); color:var(--ink); padding-bottom:3px; border-bottom:2px solid transparent; text-decoration:none; display:inline-block;}
.site-nav a:hover{color:var(--green); border-color:var(--gold);}

/* Parent items get an invisible hover-bridge (padding added, then cancelled
   by a matching negative margin) so the mouse never leaves the li's hover
   hit-box while crossing the gap into the dropdown below — otherwise the
   submenu closes mid-diagonal-move before the user reaches it. */
.site-nav li.menu-item-has-children{padding-bottom:6px; margin-bottom:-6px;}

/* Submenus: WordPress core nav walker already nests <ul class="sub-menu">
   inside a parent <li class="menu-item-has-children"> — no custom walker
   needed. Desktop: hover/focus-within dropdown. Mobile: JS-toggled
   accordion, see base.js and the max-width:960px block below. */
.site-nav .sub-menu{
  display:none; position:absolute; top:100%; left:0; z-index:20;
  min-width:220px; margin-top:0; padding:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
}
.site-nav li.menu-item-has-children:hover > .sub-menu,
.site-nav li.menu-item-has-children:focus-within > .sub-menu,
.site-nav li.menu-item-has-children.submenu-open > .sub-menu{
  display:block;
}
.site-nav .sub-menu li{width:100%;}
.site-nav .sub-menu a{display:block; width:100%; padding:8px 10px; border-bottom:none;}
.site-nav .sub-menu a:hover{background:var(--green); color:#fff; text-decoration:none;}

/* Mobile-only toggle button for parent items — lets a touch user open the
   submenu without triggering the parent link's own navigation. Injected by
   base.js; hidden entirely on desktop, where hover/focus-within is enough. */
.submenu-toggle{display:none; background:none; border:none; padding:6px; color:var(--ink); cursor:pointer;}
.submenu-toggle svg{width:14px; height:14px; transition:transform .15s;}
.submenu-open > .submenu-toggle svg{transform:rotate(180deg);}

/* Consistent keyboard focus ring across header/footer/nav interactive
   elements — none of these had one; browsers' default outline is fine
   functionally but doesn't match the design system. */
.site-nav a:focus-visible,
.nav-toggle:focus-visible,
.submenu-toggle:focus-visible,
.search-pill:focus-within,
.site-footer a:focus-visible{
  outline:2px solid var(--green); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .submenu-toggle svg{transition:none;}
}

.search-pill{display:flex; align-items:center; gap:8px; background:var(--surface); border:1.4px solid var(--line); border-radius:999px; padding:9px 16px; min-width:190px; color:var(--ink-faint); font:400 16.2px var(--font-ui); box-shadow:0 1px 3px rgba(42,36,30,.05);}
.search-pill svg{width:15px; height:15px; flex:none; color:var(--green);}
.search-pill input{border:none; outline:none; background:transparent; color:var(--ink); font:inherit; flex:1; min-width:0;}
.search-pill input::placeholder{color:var(--ink-faint);}

/* Larger search field used on the homepage hero AND search.php's own top
   bar — a shared component, not front-page-specific. */
.search-hero-wrap{max-width:520px; margin:0 auto;}
.search-hero{display:flex; align-items:center; background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:5px 6px 5px 20px; box-shadow:var(--shadow-card);}
.search-hero input{border:none; outline:none; font:400 1.16rem var(--font-ui); flex:1; background:transparent; color:var(--ink); min-width:0;}
.search-hero button{border:none; background:var(--green); color:#F3FBF6; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;}
.search-hero button:hover{background:var(--green-deep);}

/* Core WP the_posts_pagination() markup: nav.pagination > .nav-links > .page-numbers.
   Used by both search.php and index.php's archive/404 fallback. */
.pagination{padding:20px 28px 0;}
.pagination .nav-links{display:flex; gap:10px; align-items:center; font:400 1rem var(--font-ui);}
.pagination .page-numbers{color:var(--ink-soft); text-decoration:none; padding:4px 8px;}
.pagination .page-numbers:hover{color:var(--green);}
.pagination .page-numbers.current{color:var(--green-deep); font-weight:900;}

/* --------------------------------------------------------------------------
   Footer — full (default) and reader (minimal, copyright-only) variants
   -------------------------------------------------------------------------- */
.site-footer{background:var(--paper-deep); border-top:1px solid var(--line); padding-top:6px;}
.site-footer__row{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:8px 28px 20px;}
.site-footer__cols{display:flex; gap:44px; flex-wrap:wrap;}
.site-footer h5{font:900 13.7px var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px;}
.site-footer a{font:400 16.2px var(--font-ui); color:var(--role-footer-link); display:block; margin-bottom:6px; text-decoration:none;}
.site-footer a:hover{color:var(--role-footer-link-hover); text-decoration:none;}
.site-footer__sign{font:italic 400 1.12rem var(--font-serif); color:var(--ink-soft);}
.footer-meta{font:400 .98rem var(--font-ui); color:var(--ink-faint); margin-top:4px;}

/* Reader footer: copyright only, no kolam/nav/pub-dates. */
.site-footer--reader{padding:16px 28px 20px;}
.site-footer--reader .footer-copyright{font:400 .98rem var(--font-ui); color:var(--ink-faint); margin:0;}

/* --------------------------------------------------------------------------
   Mobile (≤960px): hamburger nav, submenus as accordions
   -------------------------------------------------------------------------- */
@media (max-width: 960px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; order:2;}

  /* Logo + hamburger stay on the top line; the search field wraps onto its
     own full-width line below rather than competing for space with them. */
  .site-header__row{flex-wrap:wrap;}
  .search-pill{order:3; flex:1 0 100%; margin-top:10px;}

  .site-nav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:30;
    flex-direction:column; gap:0; background:var(--surface);
    border-top:1px solid var(--line); box-shadow:var(--shadow-card);
    padding:8px 0;
  }
  .site-header.nav-is-open .site-nav{display:flex;}
  .site-nav > ul{flex-direction:column; width:100%; gap:0;}
  .site-nav li{width:100%; display:flex; flex-wrap:wrap; align-items:center;}
  .site-nav a{flex:1; padding:12px 28px; border-bottom:1px solid var(--line-soft);}
  .submenu-toggle{display:inline-flex; align-items:center; justify-content:center; flex:none;}

  /* Submenus become inline accordions instead of floating dropdowns. */
  .site-nav .sub-menu{
    position:static; display:none; flex:1 0 100%; margin:0; padding:0 0 0 14px;
    border:none; box-shadow:none; background:transparent;
  }
  .site-nav li.menu-item-has-children.submenu-open > .sub-menu{display:block;}
  .site-nav li.menu-item-has-children:hover > .sub-menu,
  .site-nav li.menu-item-has-children:focus-within > .sub-menu{display:none;}
  .site-nav li.menu-item-has-children.submenu-open:hover > .sub-menu,
  .site-nav li.menu-item-has-children.submenu-open:focus-within > .sub-menu{display:block;}
}