/*
Theme Name: Khoobsurat Andaaz
Theme URI: https://www.khoobsuratandaaz.com/
Author: Khoobsurat Andaaz
Description: Custom WordPress theme for Khoobsurat Andaaz -- kahaniyan, shayari, nazm, mashahoor hastiyaan and the flagship dastaan Teri Ulfat Main.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: khoobsurat-andaaz
*/

:root{
  /* agent.md Section 4 - primary tokens */
  --ka-bg:#F1F5FA;
  --ka-maroon:#720019;
  --ka-rust:#A4493F;
  --ka-ink:#171514;

  /* supporting tones - restrained: logo + fine editorial details only */
  --ka-cream:#F7F1E1;
  --ka-gold:#B08A4E;

  /* derived surfaces/tints, kept in the same family as the tokens above */
  --ka-surface:#FFFFFF;
  --ka-promo:#F3E7E5;
  --ka-maroon-dark:#45000E;
  --ka-ink-soft:#56514D;
  --ka-ink-faint:#8B8681;
  --ka-line:#DDE4EC;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ka-bg);
  color:var(--ka-ink);
  font-family:'Noto Sans Devanagari','Hind',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; height:auto; }
h1,h2,h3,h4,h5{ font-family:'Noto Serif Devanagari',Georgia,serif; font-weight:600; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; }

.screen-reader-text{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

.ka-wrap{ max-width:1240px; margin:0 auto; padding-inline:24px; }
@media (max-width:480px){ .ka-wrap{ padding-inline:16px; } }

.ka-wordmark{ font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; color:var(--ka-maroon); }
.ka-wordmark__accent{ font-style:italic; font-weight:500; color:var(--ka-gold); }
.ka-footer__brand .ka-wordmark__accent{ color:var(--ka-gold); }

/* ---- placeholder art: shown until a real featured image is set ---- */
.ka-ph{ position:relative; overflow:hidden; border-radius:4px; background:linear-gradient(165deg, var(--g1), var(--g2)); }
.ka-ph::after{
  content:attr(data-letter); position:absolute; right:-0.05em; bottom:-0.2em;
  font-family:'Noto Serif Devanagari',serif; font-size:clamp(50px,30%,160px);
  color:rgba(255,255,255,0.12); line-height:1;
}
.ka-ph--a{ --g1:#8a2f22; --g2:#2a0d0a; }
.ka-ph--b{ --g1:#720019; --g2:#28000a; }
.ka-ph--c{ --g1:#7a352c; --g2:#241210; }
.ka-ph--d{ --g1:#6b241a; --g2:#1e0906; }
.ka-ph--e{ --g1:#8f4133; --g2:#2c1410; }
.ka-ph--f{ --g1:#5c1d14; --g2:#190705; }

.ka-photo, .ka-ph{ width:100%; }
img.ka-photo{ object-fit:cover; border-radius:4px; }
.ka-ph--hero, img.ka-ph--hero{ aspect-ratio:3/4; }
.ka-ph--card, img.ka-ph--card{ aspect-ratio:4/3; }

/* ---- buttons ---- */
.ka-btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:8px; font-size:15px; }
.ka-btn--primary{ background:var(--ka-maroon); color:#fbeee9; }
.ka-btn--primary:hover{ background:var(--ka-maroon-dark); }
.ka-btn--outline{ border:1px solid var(--ka-maroon); color:var(--ka-maroon); background:transparent; }
.ka-btn--outline:hover{ background:var(--ka-promo); }
.ka-see-all{ font-size:13.5px; color:var(--ka-maroon); border-bottom:1px solid transparent; white-space:nowrap; }
.ka-see-all:hover{ border-color:var(--ka-maroon); }

/* ---- header ---- */
.ka-header{ background:var(--ka-bg); border-bottom:1px solid var(--ka-line); position:sticky; top:0; z-index:40; }
.ka-header__row{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px; }
.ka-brand{ display:flex; align-items:center; gap:10px; }
.ka-brand__logo{ height:56px; width:auto; max-width:260px; object-fit:contain; }
.ka-nav__list{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.ka-nav__list a{ font-size:15px; color:var(--ka-ink-soft); }
.ka-nav__list a:hover{ color:var(--ka-maroon); }
.ka-header__actions{ display:flex; align-items:center; gap:12px; }
.ka-icon-btn{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--ka-line); color:var(--ka-ink-soft); }
.ka-icon-btn:hover{ border-color:var(--ka-maroon); color:var(--ka-maroon); }
.ka-nav-toggle{ display:none; }
@media (max-width:900px){ .ka-nav{ display:none; } .ka-nav-toggle{ display:flex; } }

/* ---- shared section scaffolding ---- */
.ka-section{ padding-block:44px; }
.ka-section + .ka-section{ border-top:1px solid var(--ka-line); }
.ka-section--ad{ padding-block:24px; text-align:center; }
.ka-section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:24px; }
.ka-section__head h2{ font-size:24px; }
.ka-ad-slot{ text-align:center; padding:18px; border:1px dashed var(--ka-line); border-radius:6px; color:var(--ka-ink-faint); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; background:var(--ka-surface); }

/* ---- footer ---- */
.ka-footer{ background:var(--ka-maroon-dark); color:#e3d4d1; padding-block:44px 22px; }
.ka-footer__grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:32px; padding-bottom:28px; border-bottom:1px solid rgba(247,241,225,.14); }
.ka-footer__brand .ka-wordmark{ color:#fbeee9; }
.ka-footer__brand p{ font-size:13px; color:#c7a7a2; margin-top:10px; max-width:34ch; line-height:1.7; }
.ka-footer__col h5, .ka-social__label{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ka-gold); margin-bottom:14px; }
.ka-social__label{ margin-top:22px; margin-bottom:12px; }
.ka-footer__list{ display:flex; flex-direction:column; gap:10px; }
.ka-footer__list a{ font-size:13.5px; color:#e0c7c3; }
.ka-footer__list a:hover{ color:#fff; }
.ka-social{ display:flex; gap:10px; }
.ka-social a{ width:32px; height:32px; border:1px solid rgba(247,241,225,.28); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#e3d4d1; }
.ka-social a:hover{ border-color:#e3d4d1; color:#fff; }
.ka-footer__bottom{ padding-top:18px; font-size:12px; color:#a67d78; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ka-footer__legal{ display:flex; gap:16px; }
.ka-footer__legal a:hover{ color:#e3d4d1; }
@media (max-width:700px){ .ka-footer__grid{ grid-template-columns:1fr; } }