/*
Theme Name: Women of BAPS
Theme URI: https://womenofbaps.org
Author: Women of BAPS Volunteers
Description: A volunteer-run tribute site highlighting women-centric activities of BAPS Swaminarayan Sanstha. Not an official BAPS publication. Content sourced from BAPS.org and BAPSCharities.org.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: womenofbaps
*/

:root{
  --pink-deep:#d16b93;
  --pink-main:#f48fb1;
  --pink-mid:#f8bbd0;
  --pink-light:#fce4ec;
  --pink-pale:#fff5f8;
  --pink-pale-2:#fdeef3;
  --plum:#8a3b5e;
  --ink:#4a2c3a;
  --grey:#8a747e;
  --white:#ffffff;
  --shadow: 0 6px 20px rgba(209,107,147,0.13);
  --radius: 18px;
  --font-head: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--pink-pale);
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:var(--pink-deep);text-decoration:none;}
a:hover{color:var(--pink-main);}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--plum);line-height:1.2;margin:0 0 .5em;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;
  color:var(--pink-deep);margin-bottom:8px;display:inline-block;
}
.btn{
  display:inline-block;padding:12px 26px;border-radius:999px;font-weight:700;
  background:var(--pink-deep);color:#fff;border:none;cursor:pointer;font-size:.95rem;
  box-shadow:var(--shadow);transition:transform .15s ease, background .15s ease;
}
.btn:hover{background:var(--plum);color:#fff;transform:translateY(-2px);}
.btn.outline{background:transparent;border:2px solid var(--pink-deep);color:var(--pink-deep);box-shadow:none;}
.btn.outline:hover{background:var(--pink-deep);color:#fff;}
.btn.small{padding:8px 16px;font-size:.8rem;}

/* Header */
.site-header{
  background:linear-gradient(120deg,var(--pink-light),var(--pink-mid));
  color:var(--plum);position:sticky;top:0;z-index:999;box-shadow:0 2px 14px rgba(138,59,94,.08);
  border-bottom:1px solid var(--pink-mid);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;flex-wrap:wrap;gap:12px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-logo{height:58px;width:auto;}
.main-nav ul{list-style:none;display:flex;gap:4px;margin:0;padding:0;flex-wrap:wrap;}
.main-nav a{color:var(--plum);padding:10px 14px;border-radius:999px;font-weight:600;font-size:.9rem;}
.main-nav a:hover, .main-nav .current-menu-item a{background:rgba(255,255,255,.65);color:var(--pink-deep);}

/* EN/FR toggle — plain links, no external service, nothing to break */
.wob-lang-toggle{
  display:flex;align-items:center;gap:6px;margin-left:6px;
  font-size:.85rem;font-weight:700;
}
.wob-lang-toggle a{color:#fff;padding:4px 6px;border-radius:6px;text-shadow:0 1px 3px rgba(74,20,56,.65);}
.wob-lang-toggle a.active{color:#fff;text-decoration:underline;}
.wob-lang-toggle a:hover{color:#fff;background:rgba(255,255,255,.25);}
.wob-lang-toggle span{color:#fff;opacity:.85;text-shadow:0 1px 3px rgba(74,20,56,.65);}

/* Follow us on X / Facebook — plain SVG icons in the header, each in its
   own real brand colour rather than inheriting the header's text colour */
.wob-social-links{display:flex;align-items:center;gap:10px;margin-left:6px;}
.wob-social-links a{
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:rgba(255,255,255,.6);transition:transform .15s ease, background .15s ease;
}
.wob-social-links a:hover{background:#fff;transform:translateY(-2px);}
.wob-social-x{color:#000;}
.wob-social-fb{color:#1877f2;}

/* Hero */
.hero{
  background:radial-gradient(circle at 30% 20%, var(--pink-light), var(--pink-pale) 60%);
  padding:64px 0 40px;text-align:center;
}
.hero h1{font-size:2.6rem;margin-bottom:.3em;}
.hero p.lead{max-width:680px;margin:0 auto 26px;color:var(--grey);font-size:1.15rem;}
.hero-stats{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:36px;}
.stat-pill{
  background:#fff;border-radius:16px;padding:18px 26px;box-shadow:var(--shadow);
  min-width:150px;
}
.stat-pill .num{font-family:var(--font-head);font-size:1.7rem;color:var(--pink-deep);font-weight:700;}
.stat-pill .label{font-size:.82rem;color:var(--grey);}

/* Sections */
section{padding:56px 0;}
.section-title{text-align:center;max-width:720px;margin:0 auto 40px;}
.section-title p{color:var(--grey);}

/* Category pills (homepage) — same capsule style as the Stories/Videos/
   Gallery filter bar (.wob-pill), just centered on its own here since
   there's no "All" option or active state needed on the homepage. */
.category-pill-row{
  display:flex !important;flex-wrap:wrap;justify-content:center !important;align-items:center;
  gap:10px;width:100%;
}

/* Category + Year filter bar (Stories / Videos / Gallery) */
.wob-filter-bar{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:32px;padding:18px 20px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);}
.wob-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.wob-filter-label{font-weight:700;color:var(--plum);font-size:.85rem;margin-right:4px;}
.wob-pill{
  display:inline-block;padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:600;
  background:var(--pink-pale-2);color:var(--plum);
}
.wob-pill:hover{background:var(--pink-light);color:var(--plum);}
.wob-pill.active{background:var(--pink-main);color:#fff;}

/* Category chips on story cards */
.card-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.cat-chip{
  background:var(--pink-light);color:var(--pink-deep);font-size:.7rem;font-weight:700;
  padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em;
}

/* Story grid / cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px;}
.card{
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .18s ease;
}
.card:hover{transform:translateY(-4px);}
.card img{width:100%;height:190px;object-fit:cover;}
.card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.card-body .date{font-size:.75rem;color:var(--pink-deep);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.card-body h3{font-size:1.15rem;margin:0;}
.card-body p{color:var(--grey);font-size:.92rem;margin:0;flex:1;}
.card-body .stat{
  background:var(--pink-pale-2);color:var(--pink-deep);font-weight:700;border-radius:10px;
  padding:8px 12px;font-size:.85rem;display:inline-block;
}
.card-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center;}
.source-tag{font-size:.72rem;color:var(--grey);font-style:italic;margin-top:4px;}

/* Single story */
.story-hero-img{width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);}
.story-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:18px 0;color:var(--grey);font-size:.9rem;}
.story-quote{
  border-left:5px solid var(--pink-main);background:var(--pink-pale-2);padding:16px 22px;
  font-style:italic;color:var(--plum);border-radius:0 12px 12px 0;margin:26px 0;font-size:1.1rem;
}
.share-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:30px 0;padding:20px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);}
.share-row .label{font-weight:700;color:var(--plum);margin-right:6px;}
.share-btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-weight:600;font-size:.85rem;color:#fff;
}
.share-btn.twitter{background:#000;}
.share-btn.facebook{background:#1877f2;}
.share-btn.whatsapp{background:#25d366;}
.share-btn.native{background:var(--pink-main);}
.share-btn.pdf{background:var(--plum);}

/* Infinite scroll loading indicator */
.wob-load-more-sentinel{display:flex;justify-content:center;padding:30px 0;}
.wob-loading-spinner{
  font-size:.85rem;font-weight:700;color:var(--pink-deep);text-transform:uppercase;letter-spacing:.05em;
  padding:10px 20px;background:var(--pink-pale-2);border-radius:999px;
}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.gallery-grid figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);position:relative;background:#fff;}
.gallery-grid img{width:100%;height:220px;object-fit:cover;cursor:pointer;transition:transform .2s;}
.gallery-grid img:hover{transform:scale(1.04);}
.gallery-grid figcaption{padding:10px 12px;font-size:.82rem;color:var(--grey);}
.gallery-grid figcaption a{color:inherit;text-decoration:none;display:block;}
.gallery-grid figcaption a:hover strong{color:var(--pink-deep);text-decoration:underline;}
.gallery-grid figcaption strong{color:var(--plum);display:block;font-size:.86rem;}
.gallery-date{color:var(--pink-deep);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(58,16,48,.9);display:none;align-items:center;justify-content:center;z-index:2000;padding:24px;}
.lightbox.open{display:flex;}
.lightbox img{max-height:88vh;max-width:92vw;border-radius:12px;}
.lightbox .close{position:absolute;top:20px;right:30px;color:#fff;font-size:2rem;cursor:pointer;}

/* Community Posts — social embeds have unpredictable heights, so this
   uses CSS columns (a simple masonry effect) rather than a rigid grid,
   on the full listing page. The homepage teaser reuses .trio-row instead
   since it only ever shows exactly 3. */
.social-post-grid{column-count:3;column-gap:24px;}
@media (max-width:900px){ .social-post-grid{column-count:2;} }
@media (max-width:600px){ .social-post-grid{column-count:1;} }
.social-post-card{
  break-inside:avoid;margin-bottom:24px;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;overflow:hidden;
}
.social-post-note{color:var(--ink);font-size:.92rem;margin:10px 0 0;}
.social-post-credit{color:var(--pink-deep);font-weight:700;font-size:.8rem;margin:8px 0 0;}
.trio-row .social-post-card{margin-bottom:0;}

/* Video grid */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;}
.video-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.video-card .ratio{position:relative;padding-top:56.25%;}
.video-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-card .vbody{padding:14px 18px;}

/* Front-page teasers (up to 3 Stories, up to 3 Videos): fills however
   many items exist (1, 2, or 3) evenly across a single row on desktop —
   a rigid 3-column grid would leave visible empty gaps whenever there
   are fewer than 3 items (e.g. only 1-2 videos uploaded so far), which
   looked broken/misaligned compared to Stories. auto-fit sizes exactly
   to the item count instead, so it always fills the row regardless of
   how many items are actually present, and still stacks to one clean
   column on mobile. */
.trio-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;}
@media (max-width:760px){ .trio-row{grid-template-columns:1fr;} }

.video-thumb-card{cursor:pointer;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .18s ease;}
.video-thumb-card:hover{transform:translateY(-4px);}
.video-thumb-card .thumb-wrap{position:relative;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;}
.video-thumb-card img{width:100%;height:170px;object-fit:cover;}
.video-thumb-card .play-badge{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:#fff;background:rgba(138,56,104,.28);
}
.video-thumb-card h3{font-size:.95rem;margin:0;padding:12px 16px 16px;}

/* Press / response section */
.press-box{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:36px;max-width:820px;margin:0 auto;
}
.press-box .tag-date{color:var(--pink-deep);font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em;margin-bottom:10px;}
.press-box p{margin:0 0 1em;}
.context-note{
  background:var(--pink-pale-2);border-left:5px solid var(--plum);padding:18px 22px;border-radius:0 12px 12px 0;margin-bottom:30px;color:var(--ink);
}

/* Life stories */
.story-quote-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;}

/* Counter / footer */
.site-footer{background:var(--plum);color:#fde3ee;padding:50px 0 20px;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;margin-bottom:30px;}
.footer-grid h4{color:#fff;font-size:1rem;}
.footer-grid a{color:#f6c9dd;}
.footer-grid a:hover{color:#fff;}
.visitor-counter{
  text-align:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;color:#f0bcd6;
}
.visitor-counter strong{color:#fff;font-size:1rem;}
.disclaimer{font-size:.78rem;color:#e6a8c6;text-align:center;padding-top:14px;max-width:760px;margin:0 auto;}

/* Contact form */
.contact-form{max-width:600px;margin:0 auto;background:#fff;padding:30px;border-radius:var(--radius);box-shadow:var(--shadow);}
.contact-form label{display:block;font-weight:700;color:var(--plum);margin:14px 0 6px;font-size:.9rem;}
.contact-form input, .contact-form textarea{
  width:100%;padding:11px 14px;border-radius:10px;border:1px solid #f0c3d9;font-family:inherit;font-size:.95rem;
}
.contact-form textarea{min-height:130px;}

/* Print styles for PDF export */
@media print{
  .site-header,.site-footer,.share-row,.no-print{display:none !important;}
  body{background:#fff;}
  .container{max-width:100%;padding:0;}
  a{color:#000;text-decoration:underline;}
}

@media (max-width:760px){
  .hero h1{font-size:1.9rem;}
  .header-inner{flex-direction:column;align-items:flex-start;}
  .trio-row,.grid,.video-grid,.gallery-grid{gap:34px;}
}