/*
Theme Name: Ḥāshiya
Author: Waleed Jhumka
Description: A two-world theme for thoughts and books. By day, Terra: paper, ink, and grotesque type for fieldnotes on political economy. Click Mars and the site slips into its parallel night world: rust-red light, Mincho serif, night entries and the other shelf. Named for the ḥāshiya — the classical margin-note — with matching styles for marginal commentary inside essays.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hashiya
Tags: blog, one-column, custom-menu, translation-ready
*/

/* ---------- tokens: the two worlds ---------- */
:root{
  --bg:#F7F6F2;
  --ink:#1A1A1A;
  --soft:#6B6B66;
  --line:#DDDCD4;
  --acc:#3B5BA5;
  --mars:#C1502E;
  --body-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
html[data-world="night"]{
  --bg:#12100F;
  --ink:#EAE6DC;
  --soft:#94897F;
  --line:#2A2522;
  --acc:#C1502E;
  --body-font:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho",Georgia,"Times New Roman",serif;
}

/* The library pages (the Shelf and single books) keep the Bayt al-Hikma
   world: parchment, lapis and gold by day; night-lapis under Mars. */
body.post-type-archive-book,
body.single-book{
  --bg:#F0E7D3;
  --ink:#22314E;
  --soft:#77683F;
  --line:#D8C89A;
  --acc:#1E4477;
  --gold:#C9A227;
  --rosette:.12;
}
html[data-world="night"] body.post-type-archive-book,
html[data-world="night"] body.single-book{
  --bg:#0E1626;
  --ink:#E8E0C9;
  --soft:#9A9070;
  --line:#2C3A55;
  --acc:#C9A227;
  --gold:#C9A227;
  --rosette:.16;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body-font);
  font-size:17px;
  line-height:1.7;
  transition:background-color .5s ease, color .5s ease;
}
a{ color:var(--ink); text-decoration-color:var(--acc); text-underline-offset:3px; }
a:hover{ color:var(--acc); }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* world-dependent text: real text, toggled */
.night-txt{ display:none; }
html[data-world="night"] .night-txt{ display:inline; }
html[data-world="night"] .day-txt{ display:none; }

/* ---------- Mars, hanging in the night sky ---------- */
.mars{
  position:fixed; top:72px; right:7vw; width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #E0876A, #C1502E 55%, #7E2E18);
  box-shadow:0 0 36px rgba(193,80,46,.45);
  opacity:0; transform:translateY(-10px);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none; z-index:1;
}
html[data-world="night"] .mars{ opacity:.95; transform:none; }

/* ---------- header ---------- */
.site-header{
  max-width:760px; margin:0 auto; padding:40px 24px 18px;
  display:flex; justify-content:space-between; align-items:center; gap:14px 20px; flex-wrap:wrap;
  position:relative; z-index:2;
}
.site-title{ margin:0; font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; }
.site-title a{ text-decoration:none; color:var(--ink); }
.site-title .ar{ margin-inline-start:10px; color:var(--acc); letter-spacing:0; }
.main-nav ul{ display:flex; gap:18px; list-style:none; margin:0; padding:0; font-size:14px; }
.main-nav a{ text-decoration:none; }
.main-nav a:hover{ text-decoration:underline; text-decoration-color:var(--acc); }

.world-toggle{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; cursor:pointer; color:var(--soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  transition:border-color .5s ease, color .5s ease;
}
.world-toggle .disc{ width:11px; height:11px; border-radius:50%; }
.disc-day{ background:#E8E6DE; border:1px solid #B9B7AD; }
.disc-mars{ background:transparent; border:1px solid var(--mars); }
html[data-world="night"] .disc-mars{ background:var(--mars); box-shadow:0 0 8px rgba(193,80,46,.6); }
html[data-world="night"] .disc-day{ background:transparent; border-color:#55504B; }

/* ---------- layout ---------- */
.site-main{ max-width:760px; margin:0 auto; padding:28px 24px 80px; position:relative; z-index:2; }
.stream-head{ margin:26px 0 30px; }
.stream-head h1{ font-size:clamp(28px,5vw,38px); margin:0 0 6px; letter-spacing:-.01em; line-height:1.15; }
.stream-head .tagline{ margin:0; color:var(--soft); font-size:15px; }

/* ---------- entry list (Fieldnotes / Night Entries) ---------- */
.entry-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.entry-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.entry-list a{ text-decoration:none; font-size:17px; }
.entry-list a:hover{ color:var(--acc); }
.entry-list .d{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--soft); white-space:nowrap; }

.pagination, .nav-links{ margin-top:28px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; }
.nav-links{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- single entry ---------- */
.entry-header{ margin:26px 0 26px; }
.entry-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin:0 0 10px; }
.entry-title{ font-size:clamp(28px,5vw,40px); line-height:1.15; margin:0; letter-spacing:-.01em; text-wrap:balance; }
.entry-content{ font-size:17px; line-height:1.75; }
.entry-content > *{ margin-block:0 1.2em; }
.entry-content h2{ font-size:24px; margin-top:1.6em; }
.entry-content h3{ font-size:19px; margin-top:1.4em; }
.entry-content blockquote{
  margin:1.4em 0; padding:2px 0 2px 18px; border-inline-start:2px solid var(--acc);
  color:var(--soft); font-style:italic;
}
.entry-content pre{ overflow-x:auto; background:rgba(127,127,127,.08); padding:14px 16px; border-radius:6px; font-size:14px; }
.entry-content code{ font-family:var(--mono); font-size:.9em; }

/* the ḥāshiya: margin notes. Wrap in <aside class="hashiya">…</aside> */
.hashiya{
  border-inline-start:2px solid var(--acc);
  padding:6px 16px; margin:1.4em 0;
  font-size:14px; font-style:italic; color:var(--soft); line-height:1.55;
}
@media (min-width:1240px){
  .single .entry-content{ position:relative; }
  .single .entry-content .hashiya{
    float:right; clear:right; width:200px;
    margin:2px -244px 14px 20px;
    border-inline-start:none; border-top:1px solid var(--line);
    padding:8px 0 0;
  }
}

/* ---------- the library (the Shelf as a khizana of arched niches) ---------- */
/* Sixfold rosette geometry, laid faintly over the whole library wall. */
body.post-type-archive-book::before,
body.single-book::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--rosette,0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='56'%3E%3Cg fill='none' stroke='%23C9A227' stroke-opacity='0.5'%3E%3Ccircle cx='-16' cy='-28' r='32'/%3E%3Ccircle cx='16' cy='-28' r='32'/%3E%3Ccircle cx='48' cy='-28' r='32'/%3E%3Ccircle cx='-32' cy='0' r='32'/%3E%3Ccircle cx='0' cy='0' r='32'/%3E%3Ccircle cx='32' cy='0' r='32'/%3E%3Ccircle cx='64' cy='0' r='32'/%3E%3Ccircle cx='-16' cy='28' r='32'/%3E%3Ccircle cx='16' cy='28' r='32'/%3E%3Ccircle cx='48' cy='28' r='32'/%3E%3Ccircle cx='-32' cy='56' r='32'/%3E%3Ccircle cx='0' cy='56' r='32'/%3E%3Ccircle cx='32' cy='56' r='32'/%3E%3Ccircle cx='64' cy='56' r='32'/%3E%3Ccircle cx='-16' cy='84' r='32'/%3E%3Ccircle cx='16' cy='84' r='32'/%3E%3Ccircle cx='48' cy='84' r='32'/%3E%3C/g%3E%3C/svg%3E");
}
body.post-type-archive-book .site-main{ max-width:960px; }
.library-head{ border-bottom:2px solid var(--gold,#C9A227); padding-bottom:14px; }
.library-head .ar{ color:var(--gold,#C9A227); font-size:.7em; margin-inline-start:12px; }

.khizana{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:26px 20px; margin:30px 0 40px;
}
.niche{
  position:relative; min-height:236px;
  display:flex; align-items:flex-end; justify-content:center;
  padding:30px 14px 14px;
  border:1px solid var(--gold,#C9A227);
  border-radius:76px 76px 0 0;
  background:
    linear-gradient(180deg, rgba(30,68,119,.10), rgba(30,68,119,.03) 55%, rgba(0,0,0,.06));
}
html[data-world="night"] .niche{
  background:
    linear-gradient(180deg, rgba(201,162,39,.07), rgba(0,0,0,0) 55%, rgba(0,0,0,.28));
}
.niche::before{ /* inner arch line */
  content:''; position:absolute; inset:6px 6px 0;
  border:1px solid var(--gold,#C9A227); border-bottom:none;
  border-radius:70px 70px 0 0; opacity:.45; pointer-events:none;
}
.niche::after{ /* the ledge */
  content:''; position:absolute; left:-5px; right:-5px; bottom:-9px; height:9px;
  background:linear-gradient(180deg, #D9B54A, #8A6D1F);
  border-radius:2px;
}
.cover{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  width:76%; aspect-ratio:2/3; padding:12px 9px;
  text-align:center; text-decoration:none; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); border-radius:2px 5px 5px 2px;
  box-shadow:-3px 0 0 rgba(0,0,0,.18) inset, 0 8px 16px rgba(0,0,0,.35);
  transition:transform .18s ease;
}
.cover:hover{ transform:translateY(-6px); }
.cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover .rule{ display:block; height:0; border-top:1px solid rgba(244,237,220,.55); margin:0 6px; }
.cover .t{
  font-family:Georgia,'Times New Roman',serif; font-weight:600; font-style:normal;
  font-size:13px; line-height:1.3; color:#F4EDDC; text-wrap:balance;
}
.cover .a{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,237,220,.78);
}

.manifest{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.manifest li{ padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; }
.manifest a{ text-decoration:none; }
.manifest a:hover{ color:var(--acc); }
.manifest .by{ color:var(--soft); }
.shelf-empty{ color:var(--soft); font-style:italic; }

/* world-scoped blocks (whole shelves) */
.world-night{ display:none; }
html[data-world="night"] .world-night{ display:block; }
html[data-world="night"] .world-day{ display:none; }

/* ---------- book single ---------- */
.book-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--soft); margin:6px 0 0; }

/* ---------- comments ---------- */
.comments{ margin-top:56px; border-top:1px solid var(--line); padding-top:28px; }
.comments h2{ font-size:19px; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list .comment{ padding:14px 0; border-bottom:1px solid var(--line); }
.comment-list .comment-meta{ font-family:var(--mono); font-size:11px; color:var(--soft); }
.comment-form label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); margin-bottom:4px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{
  width:100%; padding:9px 12px; margin-bottom:14px;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:4px; font:inherit; font-size:15px;
}
.comment-form input[type="submit"]{
  background:var(--ink); color:var(--bg); border:none; border-radius:999px;
  padding:9px 22px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; cursor:pointer;
}
.comment-form input[type="submit"]:hover{ background:var(--acc); color:#fff; }

/* ---------- footer ---------- */
.site-footer{
  max-width:760px; margin:0 auto; padding:28px 24px 48px;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--soft);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.site-footer p{ margin:0; }

/* ---------- misc ---------- */
.wp-block-image figcaption{ font-size:13px; color:var(--soft); }
.alignwide, .alignfull{ max-width:100%; }
.sticky{ /* required class */ }
.bypostauthor{ /* required class */ }

@media (prefers-reduced-motion: reduce){
  body, .mars, .world-toggle, .spine{ transition:none; }
}