/*
Theme Name: Gatha Maharashtrachi
Theme URI: https://gathamaharashtrachi.com
Author: Gatha Maharashtrachi Team
Author URI: https://gathamaharashtrachi.com
Description: महाराष्ट्राचा इतिहास, संस्कृती, किल्ले, सण-उत्सव, खाद्यसंस्कृती आणि लोककला यांची गोष्ट सांगणारी थीम. A richly illustrated storytelling theme for Maharashtra's history & culture, built around a Sahyadri ridgeline motif, warm Peshwa-maroon and kesari palette, and Devanagari-first typography.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gatha-maharashtrachi
Tags: blog, custom-menu, featured-images, translation-ready, threaded-comments

*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  /* colors -- inspired by Peshwa-era textiles & Sahyadri dusk */
  --gadh-maroon:   #5A1B25; /* fort maroon -- primary dark */
  --gadh-maroon-2: #7A2733; /* lighter maroon for hovers */
  --kesari:        #E89B3C; /* saffron -- accent / CTA */
  --kesari-dark:   #C97D22;
  --peacock:       #0F5B57; /* deep teal -- secondary sections */
  --peacock-2:     #146B66;
  --ink:           #2B1810; /* body text on light */
  --ink-soft:      #5A4436; /* secondary text on light */
  --paper:         #F8F1DE; /* warm ivory page background */
  --paper-2:       #F1E6C8; /* slightly deeper card background */
  --cream:         #FBF7EC; /* lightest, text-on-dark */
  --gold:          #C79A2B; /* hairline / highlight */
  --line:          rgba(43,24,16,0.12);

  /* type */
  --font-display: 'Baloo 2', 'Noto Sans Devanagari', sans-serif;
  --font-body: 'Mukta', 'Noto Sans Devanagari', sans-serif;
  --font-label: 'Poppins', sans-serif;

  --step-1: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --step-2: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --step-3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-4: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem);
  --step-5: clamp(2.4rem, 1.8rem + 2.6vw, 4.2rem);

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --container: 1180px;
  --ease: cubic-bezier(.22,.72,.24,1);
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-2);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--gadh-maroon);
  line-height:1.15;
  margin:0 0 0.5em;
  font-weight:700;
}
p{ margin:0 0 1.2em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:var(--container); margin:0 inline-start auto; margin-inline:auto; padding-inline:24px; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
:focus-visible{ outline:3px solid var(--kesari); outline-offset:3px; }

/* eyebrow / label style */
.eyebrow{
  font-family:var(--font-label);
  font-size:0.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--kesari-dark);
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* =========================================================
   3. WARLI DOT DIVIDER (signature texture, reused small)
   ========================================================= */
.warli-divider{
  height:14px;
  background-image: radial-gradient(var(--gold) 1.6px, transparent 1.8px);
  background-size: 16px 14px;
  background-position: center;
  opacity:.55;
}

/* =========================================================
   4. SITE HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
  gap:24px;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding .brand-mark{ width:40px; height:40px; flex-shrink:0; }
.site-title{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:800;
  color:var(--gadh-maroon);
  margin:0;
  letter-spacing:.01em;
}
.site-title a{ display:block; }
.site-description{
  display:block;
  font-family:var(--font-label);
  font-size:0.68rem;
  letter-spacing:.08em;
  color:var(--ink-soft);
  text-transform:uppercase;
}
.primary-nav ul{ display:flex; gap:28px; align-items:center; }
.primary-nav a{
  font-family:var(--font-label);
  font-weight:600;
  font-size:0.92rem;
  color:var(--ink);
  position:relative;
  padding-block:6px;
}
.primary-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--kesari);
  transition:width .25s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item a::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-search-toggle,
.menu-toggle{
  background:transparent; border:1.5px solid var(--line); border-radius:50%;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  color:var(--gadh-maroon);
}
.menu-toggle{ display:none; border-radius:var(--radius-s); width:44px; }
.header-search{
  position:absolute; inset-inline:0; top:100%; background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:16px 24px; display:none;
}
.header-search.is-open{ display:block; }
.header-search form{ max-width:var(--container); margin-inline:auto; display:flex; gap:10px; }
.header-search input[type="search"]{
  flex:1; border:1.5px solid var(--line); border-radius:999px; padding:10px 18px;
  font-family:var(--font-body); font-size:1rem; background:var(--cream);
}
.header-search button{
  background:var(--kesari); color:var(--gadh-maroon); border:none; border-radius:999px;
  padding:10px 22px; font-weight:700;
}

@media (max-width:900px){
  .primary-nav{
    position:fixed; inset:0; top:0; background:var(--gadh-maroon);
    transform:translateX(100%); transition:transform .35s var(--ease);
    padding:100px 32px 32px; z-index:60;
  }
  .primary-nav.is-open{ transform:translateX(0); }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
  .primary-nav a{ color:var(--cream); font-size:1.3rem; }
  .menu-toggle{ display:flex; }
}

/* =========================================================
   5. HERO -- Sahyadri ridgeline (signature)
   ========================================================= */
.hero{
  position:relative;
  background:linear-gradient(180deg, var(--gadh-maroon) 0%, var(--gadh-maroon-2) 100%);
  color:var(--cream);
  overflow:hidden;
  padding-top:clamp(64px, 9vw, 120px);
}
.hero .container{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:end;
  padding-bottom:0;
}
.hero-copy{ padding-bottom:80px; }
.hero .eyebrow{ color:var(--kesari); }
.hero h1{
  color:var(--cream);
  font-size:var(--step-5);
  margin-top:.4em;
  max-width:12ch;
}
.hero h1 .accent{ color:var(--kesari); }
.hero-sub{
  font-size:var(--step-3);
  color:rgba(251,247,236,0.85);
  max-width:46ch;
  margin-top:.6em;
}
.hero-topics{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;
}
.topic-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(251,247,236,0.08);
  border:1px solid rgba(251,247,236,0.25);
  color:var(--cream);
  padding:9px 16px 9px 10px;
  border-radius:999px;
  font-family:var(--font-label);
  font-size:0.85rem; font-weight:600;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.topic-pill svg{ width:20px; height:20px; flex-shrink:0; }
.topic-pill:hover{ background:var(--kesari); color:var(--gadh-maroon); transform:translateY(-2px); }

.hero-figure{
  position:relative; padding-bottom:40px;
}
.hero-figure .diva{
  width:78%; margin-inline:auto;
  animation: flicker 2.6s ease-in-out infinite;
  transform-origin:50% 100%;
}
@keyframes flicker{
  0%,100%{ opacity:1; transform:scaleY(1) rotate(0deg); }
  50%{ opacity:.85; transform:scaleY(0.97) rotate(-1deg); }
}

.ridgeline{
  position:absolute; left:0; right:0; bottom:-2px; width:100%; height:auto;
  z-index:2;
}
.ridgeline .ridge-far{ fill:var(--peacock); opacity:.55; }
.ridgeline .ridge-near{ fill:var(--paper); }
.ridge-parallax-wrap{ position:relative; }

/* small reused ridgeline as section divider */
.section-ridge{ width:100%; display:block; margin-top:-1px; }

/* =========================================================
   6. TOPIC / CATEGORY BAND
   ========================================================= */
.topic-band{ background:var(--paper); padding-block:64px; }
.topic-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px; margin-top:32px;
}
.topic-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:24px 18px;
  text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.topic-card svg{ width:36px; height:36px; color:var(--peacock); margin-inline:auto; }
.topic-card .t-name{
  display:block; margin-top:14px; font-family:var(--font-display);
  font-weight:700; color:var(--gadh-maroon); font-size:1.05rem;
}
.topic-card .t-count{
  display:block; margin-top:4px; font-family:var(--font-label);
  font-size:0.75rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em;
}
.topic-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px -20px rgba(90,27,37,0.35);
  border-color:var(--kesari);
}

/* =========================================================
   7. SECTION HEADINGS
   ========================================================= */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:32px; flex-wrap:wrap;
}
.section-head h2{ font-size:var(--step-4); margin:0.15em 0 0; }
.section-head .view-all{
  font-family:var(--font-label); font-weight:700; font-size:0.9rem;
  color:var(--peacock); border-bottom:2px solid var(--kesari); padding-bottom:2px;
  white-space:nowrap;
}

/* =========================================================
   8. STORY GRID / CARDS
   ========================================================= */
.story-band{ padding-block:70px; }
.story-band.alt{ background:var(--paper-2); }
.story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.story-grid .card:first-child{ grid-column:span 2; grid-row:span 2; }
.story-grid .card:first-child .card-media{ aspect-ratio:16/11; }
.story-grid .card:first-child h3{ font-size:var(--step-3); }

.card{
  display:flex; flex-direction:column;
  background:var(--cream);
  border-radius:var(--radius-m);
  overflow:hidden;
  border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -22px rgba(43,24,16,0.28); }
.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .card-media img{ transform:scale(1.06); }
.card-media .card-tag{
  position:absolute; top:12px; left:12px;
  background:var(--kesari); color:var(--gadh-maroon);
  font-family:var(--font-label); font-size:0.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.card-body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card h3{ font-size:1.15rem; margin:0; }
.card h3 a::after{ content:""; position:absolute; inset:0; }
.card h3 a{ position:relative; }
.card-excerpt{ color:var(--ink-soft); font-size:0.95rem; margin:0; }
.card-meta{
  margin-top:auto; display:flex; align-items:center; gap:10px;
  font-family:var(--font-label); font-size:0.75rem; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.04em;
}
.card-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--ink-soft); }

@media (max-width:900px){
  .story-grid{ grid-template-columns:1fr 1fr; }
  .story-grid .card:first-child{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width:620px){
  .story-grid{ grid-template-columns:1fr; }
  .story-grid .card:first-child{ grid-column:span 1; }
}

/* =========================================================
   9. FEATURED / SPOTLIGHT (आजची गोष्ट)
   ========================================================= */
.spotlight{
  background:var(--peacock);
  color:var(--cream);
  padding-block:70px;
  position:relative;
}
.spotlight .container{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center;
}
.spotlight .eyebrow{ color:var(--kesari); }
.spotlight h2{ color:var(--cream); font-size:var(--step-4); }
.spotlight p{ color:rgba(251,247,236,0.85); }
.spotlight-media{ border-radius:var(--radius-l); overflow:hidden; aspect-ratio:5/4; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--kesari); color:var(--gadh-maroon);
  font-family:var(--font-label); font-weight:700; font-size:0.9rem;
  padding:13px 26px; border-radius:999px; border:none;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); background:#F3B463; }
.btn-outline{
  background:transparent; color:var(--cream); border:1.5px solid rgba(251,247,236,0.4);
}
.btn-outline:hover{ background:rgba(251,247,236,0.12); }

@media (max-width:820px){
  .spotlight .container{ grid-template-columns:1fr; }
  .hero .container{ grid-template-columns:1fr; }
  .hero-figure{ order:-1; }
}

/* =========================================================
   10. GALLERY / VIDEO STRIP (baghnaryane baghatach rahave)
   ========================================================= */
.gallery-band{ padding-block:70px; background:var(--paper); }
.gallery-scroll{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:16px; margin-top:32px;
  scrollbar-width:thin; scrollbar-color:var(--kesari) transparent;
}
.gallery-scroll::-webkit-scrollbar{ height:6px; }
.gallery-scroll::-webkit-scrollbar-thumb{ background:var(--kesari); border-radius:999px; }
.gallery-item{
  scroll-snap-align:start; flex:0 0 auto; width:min(340px,80vw);
  border-radius:var(--radius-m); overflow:hidden; position:relative; aspect-ratio:3/4;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item .g-cap{
  position:absolute; inset-inline:0; bottom:0;
  background:linear-gradient(0deg, rgba(43,24,16,0.85), transparent);
  color:var(--cream); padding:18px 16px 14px;
  font-family:var(--font-display); font-weight:700;
}
.gallery-item .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.gallery-item .play svg{
  width:52px; height:52px; color:var(--cream);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));
  transition:transform .25s var(--ease);
}
.gallery-item:hover .play svg{ transform:scale(1.12); }

/* =========================================================
   11. NEWSLETTER / CTA (सामील व्हा)
   ========================================================= */
.join-band{
  background:var(--gadh-maroon); color:var(--cream);
  padding-block:64px; text-align:center; position:relative; overflow:hidden;
}
.join-band h2{ color:var(--cream); font-size:var(--step-4); }
.join-band p{ color:rgba(251,247,236,0.8); max-width:52ch; margin-inline:auto; }
.join-form{
  display:flex; justify-content:center; gap:10px; margin-top:26px; flex-wrap:wrap;
}
.join-form input[type="email"]{
  border:1.5px solid rgba(251,247,236,0.35); background:rgba(251,247,236,0.08);
  color:var(--cream); border-radius:999px; padding:13px 20px; font-size:1rem;
  min-width:280px;
}
.join-form input::placeholder{ color:rgba(251,247,236,0.6); }

/* =========================================================
   12. SINGLE / PAGE CONTENT
   ========================================================= */
.entry-header{ padding-block:56px 30px; background:var(--paper-2); }
.entry-header .eyebrow{ margin-bottom:14px; }
.entry-header h1{ font-size:var(--step-5); max-width:22ch; }
.entry-meta{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:18px;
  font-family:var(--font-label); font-size:0.85rem; color:var(--ink-soft);
}
.entry-thumb{ margin-top:-30px; }
.entry-thumb img{ border-radius:var(--radius-l); aspect-ratio:16/8; object-fit:cover; }
.entry-content{ max-width:74ch; margin:48px auto; padding-inline:24px; font-size:1.08rem; }
.entry-content h2{ margin-top:1.6em; font-size:var(--step-4); }
.entry-content h3{ margin-top:1.3em; font-size:var(--step-3); }
.entry-content blockquote{
  border-left:4px solid var(--kesari); margin:2em 0; padding:0.4em 0 0.4em 1.4em;
  font-family:var(--font-display); font-size:1.3rem; color:var(--gadh-maroon);
}
.entry-content img{ border-radius:var(--radius-m); margin-block:1.6em; }
.entry-content a{ color:var(--peacock); text-decoration:underline; text-underline-offset:3px; }
.entry-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:40px; }
.entry-tags a{
  border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  font-family:var(--font-label); font-size:0.8rem;
}

.content-area{ max-width:var(--container); margin-inline:auto; padding:56px 24px; }
.page-grid{ display:grid; grid-template-columns:2fr 1fr; gap:48px; }
@media (max-width:900px){ .page-grid{ grid-template-columns:1fr; } }

/* archive list */
.archive-list{ display:grid; gap:24px; }
.archive-header{ padding-block:56px 20px; background:var(--paper-2); text-align:center; }
.archive-header h1{ font-size:var(--step-5); }

/* pagination */
.pagination{ display:flex; gap:10px; justify-content:center; margin-top:44px; flex-wrap:wrap; }
.pagination a, .pagination span{
  min-width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line); font-family:var(--font-label); font-weight:600;
}
.pagination .current{ background:var(--kesari); color:var(--gadh-maroon); border-color:var(--kesari); }

/* widgets / sidebar */
.widget{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; margin-bottom:24px; }
.widget-title{ font-family:var(--font-display); color:var(--gadh-maroon); font-size:1.1rem; margin-bottom:16px; }
.widget ul li{ padding-block:8px; border-bottom:1px solid var(--line); }
.widget ul li:last-child{ border-bottom:none; }

/* comments */
.comments-area{ margin-top:56px; }
.comment-list{ display:grid; gap:20px; }
.comment-body{ background:var(--paper-2); border-radius:var(--radius-m); padding:20px; }
.comment-form textarea, .comment-form input{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius-s);
  padding:12px 14px; font-family:var(--font-body); margin-bottom:14px;
}

/* 404 */
.error-404{ text-align:center; padding-block:100px; }
.error-404 h1{ font-size:5rem; color:var(--kesari); }

/* =========================================================
   13. SCROLL REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   14. FOOTER
   ========================================================= */
.site-footer{ background:var(--peacock); color:var(--cream); }
.footer-top{ padding-block:56px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; }
.footer-brand .site-title{ color:var(--cream); }
.footer-brand p{ color:rgba(251,247,236,0.75); max-width:32ch; margin-top:14px; }
.footer-col h4{ font-family:var(--font-label); font-size:0.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--kesari); margin-bottom:16px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a:hover{ color:var(--kesari); }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(251,247,236,0.3);
  display:flex; align-items:center; justify-content:center;
}
.footer-social svg{ width:18px; height:18px; }
.footer-bottom{
  border-top:1px solid rgba(251,247,236,0.15);
  padding-block:20px; text-align:center;
  font-family:var(--font-label); font-size:0.82rem; color:rgba(251,247,236,0.65);
}
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }