/*
Theme Name:   Voice of Ara
Theme URI:    https://voiceofara.com
Description:  Child theme for Voice of Ara (आवाज़ आरा) — built on Kadence. Implements the "Cut" brand system: आ device, editorial typography (Playfair Display / Mukta / Inter), and sub-brand sections for Long Reads, Morning Brief, and Ara Live.
Author:       Voice of Ara
Template:     kadence
Version:      1.0.4
Text Domain:  voice-of-ara
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand colors */
  --voa-night:        #0E0E0C;
  --voa-saffron:      #FF5722;
  --voa-cream:        #F5EFE0;
  --voa-breaking-red: #C9242C;

  /* Derived / utility tones */
  --voa-night-soft:    #1A1A17;
  --voa-cream-dim:     #E8E0CC;
  --voa-ink-on-cream:  #0E0E0C;
  --voa-ink-on-night:  #F5EFE0;
  --voa-hairline:      rgba(14, 14, 12, 0.14);
  --voa-hairline-dark: rgba(245, 239, 224, 0.16);

  /* Typography */
  --voa-font-display: 'Playfair Display', Georgia, serif;         /* Latin display / wordmark / pull-quotes */
  --voa-font-hindi:   'Mukta', 'Noto Serif Devanagari', sans-serif; /* Hindi/Bhojpuri headlines & body */
  --voa-font-ui:      'Inter', -apple-system, sans-serif;          /* Meta, bylines, nav, tags */

  /* Type scale */
  --voa-size-hero:      clamp(2.4rem, 5vw, 4.2rem);
  --voa-size-h1:        clamp(1.9rem, 3.4vw, 2.75rem);
  --voa-size-h2:        clamp(1.4rem, 2.2vw, 1.9rem);
  --voa-size-h3:        1.25rem;
  --voa-size-body:      1.0625rem;
  --voa-size-meta:      0.8125rem;

  /* Layout */
  --voa-container:      1280px;
  --voa-container-read: 700px;
  --voa-gutter:         clamp(1.25rem, 3vw, 3rem);
  --voa-radius:         0; /* editorial = square, no soft UI rounding */

  /* Sub-brand accent (overridden per-section below) */
  --voa-section-accent: var(--voa-saffron);
}

/* ==========================================================================
   2. BASE / RESET LAYER (works with Kadence's own reset)
   ========================================================================== */

body {
  background: var(--voa-cream);
  color: var(--voa-night);
  font-family: var(--voa-font-hindi);
  font-size: var(--voa-size-body);
  line-height: 1.65;
}

h1, h2, h3, .voa-headline {
  font-family: var(--voa-font-hindi);
  font-weight: 700;
  color: var(--voa-night);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.voa-eyebrow,
.entry-meta,
.voa-meta,
.voa-nav {
  font-family: var(--voa-font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--voa-size-meta);
}

.voa-pullquote,
.voa-wordmark-latin {
  font-family: var(--voa-font-display);
  font-style: italic;
}

a {
  color: var(--voa-night);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--voa-saffron); }

::selection {
  background: var(--voa-saffron);
  color: var(--voa-cream);
}

/* ==========================================================================
   3. THE आ MARK — persistent brand device
   ========================================================================== */

.voa-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.voa-mark svg { display: block; height: 100%; width: auto; }

.voa-mark--fill { width: 100%; height: 100%; }

/* Masthead lockup: आ + wordmark, cut-line always present */
.voa-masthead {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.4rem 0;
  border-bottom: 3px solid var(--voa-night);
}

.voa-masthead .voa-mark { width: 40px; height: 40px; }

.voa-masthead-word {
  font-family: var(--voa-font-hindi);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.voa-masthead-tagline {
  font-family: var(--voa-font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--voa-night);
  opacity: 0.65;
  margin-inline-start: auto;
}

/* ==========================================================================
   3b. MEDIA BOXES — fixed aspect-ratio containers with object-fit crop.
   Every featured image renders inside one of these, so an odd source
   image (wrong aspect ratio, portrait graphic, etc.) can never blow out
   the layout the way raw width:100%;height:auto can.
   ========================================================================== */

.voa-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
  background: var(--voa-hairline);
}

.voa-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.voa-media--hero { aspect-ratio: 16 / 9; }
.voa-media--lead { aspect-ratio: 4 / 3; }
.voa-media--card { aspect-ratio: 3 / 2; }
.voa-media--square { aspect-ratio: 1 / 1; }
.voa-media--banner { aspect-ratio: 4 / 1; }

/* ==========================================================================
   3c. RESPONSIVE EMBEDS — YouTube/video oEmbeds inside post content.
   WordPress wraps oEmbeds in .wp-embed-responsive-related markup only if
   the theme opts in; this covers it directly so a pasted YouTube URL
   always scales to the article column instead of overflowing or staying
   a fixed 16:9 iframe at whatever width YouTube's default embed used.
   ========================================================================== */

.voa-entry-content iframe,
.voa-entry-content video,
.voa-entry-content embed {
  max-width: 100%;
}

.voa-entry-content .wp-block-embed__wrapper,
.voa-entry-content .wp-video,
.voa-entry-content iframe[src*="youtube"],
.voa-entry-content iframe[src*="youtu.be"],
.voa-entry-content iframe[src*="vimeo"] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin-block: 2rem;
}

.voa-entry-content iframe[src*="youtube"],
.voa-entry-content iframe[src*="youtu.be"],
.voa-entry-content iframe[src*="vimeo"] {
  display: block;
}


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.voa-container {
  max-width: var(--voa-container);
  margin-inline: auto;
  padding-inline: var(--voa-gutter);
}

.voa-section {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.voa-hairline {
  border: none;
  border-top: 1px solid var(--voa-hairline);
  margin-block: 2.5rem;
}

.voa-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.voa-grid--editorial {
  grid-template-columns: repeat(12, 1fr);
}

.voa-grid--editorial .voa-col-lead   { grid-column: span 7; }
.voa-grid--editorial .voa-col-side   { grid-column: span 5; }

/* Hero + Top Headlines module */
.voa-grid--hero-headlines { grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 900px) { .voa-grid--hero-headlines { grid-template-columns: 1fr; } }

/* River (dense grid) + Most Read sidebar module */
.voa-grid--river { grid-template-columns: 3fr 1fr; align-items: start; }
@media (max-width: 900px) { .voa-grid--river { grid-template-columns: 1fr; } }

/* Dense card grid — tighter than the standard 3-column grid */
.voa-grid--dense { grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1.75rem; }
@media (max-width: 1024px) { .voa-grid--dense { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .voa-grid--dense { grid-template-columns: 1fr; } }

.voa-section--tight { padding-block: clamp(1.25rem, 2.5vw, 2rem); }

/* Dense, image-free headline list — Top Headlines + Most Read */
.voa-headline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.voa-headline-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--voa-hairline);
}
.voa-headline-list li:first-child { padding-top: 0; }

.voa-headline-list__num {
  font-family: var(--voa-font-display);
  font-style: italic;
  font-size: 1.1rem;
  opacity: 0.35;
  flex: 0 0 auto;
  width: 1.25rem;
  padding-top: 0.1rem;
}

.voa-headline-list__thumb {
  flex: 0 0 auto;
  width: 3.5rem;
}

.voa-headline-list__title {
  display: block;
  font-family: var(--voa-font-hindi);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--voa-night);
  text-decoration: none;
  line-height: 1.35;
  margin-top: 0.2rem;
}
.voa-headline-list__title:hover { color: var(--voa-saffron); }

/* Promo banner — 1:1, always disclosed with a "Promoted" label */
.voa-promo { margin-top: 2rem; }

.voa-promo__label {
  font-family: var(--voa-font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.voa-promo--sitewide { margin: 0; padding-block: 1.25rem; }
.voa-promo--sitewide .voa-promo__label { text-align: center; }

/* Reels — horizontally scrolling rail of 9:16 vertical clips */
.voa-media--reel { aspect-ratio: 9 / 16; }

.voa-reels-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.voa-reel-card {
  flex: 0 0 auto;
  width: 9.5rem;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--voa-night);
  display: block;
}

.voa-reel-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: rgba(14, 14, 12, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.voa-reel-card__play::before {
  content: "";
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--voa-cream);
  margin-left: 3px;
}

.voa-reel-card__title {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--voa-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 782px) {
  .voa-grid--editorial .voa-col-lead,
  .voa-grid--editorial .voa-col-side { grid-column: span 12; }
  .voa-masthead-tagline { display: none; }
}

/* ==========================================================================
   5. ARTICLE CARD (reused across home, archive, sub-brand grids)
   ========================================================================== */

.voa-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.voa-card__section {
  color: var(--voa-section-accent);
  font-family: var(--voa-font-ui);
  font-size: var(--voa-size-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.voa-card__title a { color: inherit; text-decoration: none; }
.voa-card__title a:hover { color: var(--voa-saffron); }

.voa-card__title {
  font-size: var(--voa-size-h3);
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.voa-card__excerpt {
  color: var(--voa-night);
  opacity: 0.8;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.voa-card__meta {
  font-family: var(--voa-font-ui);
  font-size: 0.75rem;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.voa-card--lead .voa-card__title { font-size: var(--voa-size-h1); }

/* ==========================================================================
   6. BREAKING / URGENT SEMANTIC ACCENT (used ONLY for live/urgent flags)
   ========================================================================== */

.voa-flag--breaking {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--voa-breaking-red);
  color: var(--voa-cream);
  font-family: var(--voa-font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
}

.voa-flag--breaking::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--voa-cream);
  border-radius: 50%;
  animation: voa-pulse 1.4s ease-in-out infinite;
}

@keyframes voa-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Watch flag — shown on cards/hero when a post has an embedded video,
   same visual weight as the section eyebrow, sits over the thumbnail. */
.voa-flag--watch {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--voa-night);
  color: var(--voa-cream);
  font-family: var(--voa-font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem 0.3rem 0.5rem;
}

.voa-flag--watch::before {
  content: "";
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--voa-saffron);
}

/* ==========================================================================
   7. SUB-BRAND SECTION THEMING
   Each sub-brand gets its own accent + optional inverted masthead treatment.
   Applied via body classes added in inc/sub-brands.php
   ========================================================================== */

/* Long Reads — contemplative, night background, cream text, Playfair accents */
.voa-section--long-reads {
  --voa-section-accent: var(--voa-cream);
  background: var(--voa-night);
  color: var(--voa-cream);
}
.voa-section--long-reads h1,
.voa-section--long-reads h2,
.voa-section--long-reads h3,
.voa-section--long-reads .voa-card__title a { color: var(--voa-cream); }
.voa-section--long-reads .voa-card__excerpt { color: var(--voa-cream); opacity: 0.75; }
.voa-section--long-reads .voa-hairline { border-top-color: var(--voa-hairline-dark); }

/* Morning Brief — digest/newsletter feel, saffron rule, compact */
.voa-section--morning-brief {
  --voa-section-accent: var(--voa-saffron);
  background: var(--voa-cream-dim);
}
.voa-section--morning-brief .voa-card { border-bottom: 1px solid var(--voa-hairline); padding-bottom: 1.25rem; }

/* Ara Live — ticker/live-blog feel, breaking-red accent on timestamps only */
.voa-section--ara-live {
  --voa-section-accent: var(--voa-breaking-red);
}
.voa-section--ara-live .voa-card__meta { color: var(--voa-breaking-red); opacity: 1; font-weight: 600; }

/* ==========================================================================
   8. RESPONSIVE / ACCESSIBILITY FLOOR
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--voa-saffron);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .voa-flag--breaking::before { animation: none; }
}