/*
Theme Name: Belenga
Description: Storefront theme for the Belenga ebook and audiobook marketplace — warm cream paper, charcoal ink, Belenga orange and Ankara-inspired pattern accents. Designed to be used with the Belenga Platform plugin.
Version: 1.2.0
Requires at least: 6.2
Requires PHP: 7.4
Author: Belenga
Text Domain: belenga-theme
*/

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bl-cream, #FBF1E4) var(--bl-ankara-soft) 0 0 / 72px 72px fixed; color: var(--bl-ink, #2A2420); font: 400 1rem/1.6 var(--bl-sans); -webkit-font-smoothing: antialiased; }
body.has-plain-bg { background-image: none; }
img { max-width: 100%; height: auto; }
a { color: var(--bl-orange-deep, #B54A0F); text-underline-offset: 3px; }
a:hover { color: var(--bl-orange); }
h1, h2, h3, h4 { line-height: 1.15; color: var(--bl-ink); }
h1, h2 { font-family: var(--bl-serif); }
[id] { scroll-margin-top: 110px; }
:focus-visible { outline: 3px solid var(--bl-orange); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 1000; background: #fff; padding: .5rem 1rem; border-radius: 8px; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 253, 249, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--bl-line); }
.site-header::after { content: ""; display: block; height: 5px; background: var(--bl-ankara) 0 0 / 20px 20px; }
.admin-bar .site-header { top: 32px; }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.site-logo img { display: block; height: 38px; width: auto; }
.site-nav { flex: 1; display: flex; align-items: center; gap: .25rem; }
.site-nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: .55rem .85rem; border-radius: 999px; color: var(--bl-ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.site-nav a:hover, .site-nav .current-menu-item > a { background: var(--bl-sand); color: var(--bl-ink); }
.site-search { margin-left: auto; position: relative; }
.site-search input { width: 220px; padding: .6rem 1rem .6rem 2.4rem; border-radius: 999px; border: 1.5px solid var(--bl-line); background: var(--bl-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237A6B5F' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") .9rem 50% no-repeat; font: inherit; font-size: .9rem; transition: width .2s, border-color .2s; }
.site-search input:focus { width: 280px; outline: none; border-color: var(--bl-orange); }
.site-actions { display: flex; align-items: center; gap: .5rem; }
.site-signout { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .7rem; border-radius: 999px; color: var(--bl-ink-2); text-decoration: none; font-weight: 600; font-size: .875rem; }
.site-signout:hover { background: var(--bl-sand); color: var(--bl-ink); }
.site-nav__account { display: none !important; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 12px; width: 20px; height: 2px; background: var(--bl-ink); content: ""; transition: transform .2s; }
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -6px; left: 0; }
.nav-toggle span::after { top: 6px; left: 0; }

/* ---------- Main ---------- */
.site-main { padding: clamp(1.5rem, 4vw, 3rem) 0 4rem; min-height: 60vh; }
.page-head { margin-bottom: 2rem; }
.page-head h1 { font: italic 800 clamp(2rem, 5vw, 3rem)/1.05 var(--bl-serif); margin: 0; letter-spacing: -.01em; }
.page-head h1::after { content: ""; display: block; width: 72px; height: 10px; margin-top: .9rem; background: var(--bl-zigzag) 0 0 / 24px 10px; border-radius: 2px; }
.entry { font-size: 1.05rem; }
.entry > p { max-width: 72ch; }

/* ---------- Home ---------- */
.hero { position: relative; padding: clamp(2rem, 6vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { font: italic 800 clamp(2.6rem, 6.4vw, 5rem)/.98 var(--bl-serif); letter-spacing: -.02em; margin: 0 0 1.25rem; }
.hero h1 em { font-style: italic; color: var(--bl-orange); }
.hero p.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--bl-ink-2); max-width: 46ch; margin: 0 0 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; font-size: .9rem; color: var(--bl-ink-2); }
.hero__trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__trust span::before { content: ""; width: 10px; height: 10px; background: var(--bl-orange); transform: rotate(45deg); border-radius: 2px; }
.hero__art { position: relative; aspect-ratio: 1 / 1; max-width: 520px; margin-left: auto; width: 100%; }
.hero__disc { position: absolute; inset: 6%; border-radius: 50%; background: var(--bl-ankara) 0 0 / 56px 56px; box-shadow: var(--bl-shadow-lg); }
.hero__disc::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--bl-cream); box-shadow: inset 0 0 0 10px var(--bl-ink); }
.hero__books { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero__books > * { position: absolute; width: 38%; }
.hero__books > *:nth-child(1) { transform: translate(-58%, 4%) rotate(-10deg); }
.hero__books > *:nth-child(2) { transform: translate(0, -4%); z-index: 2; width: 42%; }
.hero__books > *:nth-child(3) { transform: translate(58%, 6%) rotate(9deg); }
.hero__books .bl-cover { box-shadow: 0 24px 40px -18px rgba(42, 36, 32, .6); }
.hero__cover { aspect-ratio: 2 / 3; object-fit: cover; object-position: center top; transition: transform .35s ease; }
.hero__books > *:nth-child(1):hover .hero__cover, .hero__books > *:nth-child(3):hover .hero__cover { transform: translateY(-6px); }
.hero__ph { aspect-ratio: 2 / 3; border-radius: 6px 10px 10px 6px; background: var(--bl-ink); color: var(--bl-cream); display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; font: italic 800 1.1rem/1.1 var(--bl-serif); box-shadow: 0 24px 40px -18px rgba(42, 36, 32, .6); overflow: hidden; position: relative; }
.hero__ph::before { content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: var(--bl-ankara) 0 0 / 36px 36px; }
.hero__ph--o { background: var(--bl-orange-deep); }
.hero__ph small { font: 600 .65rem var(--bl-sans); letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-top: .35rem; position: relative; }
.hero__ph span { position: relative; }
.band { height: 22px; background: var(--bl-zigzag) 0 0 / 40px 15px; }
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--white { background: var(--bl-white); }
.section--ink { background: var(--bl-ink); color: var(--bl-cream); position: relative; overflow: hidden; }
.section--ink h2, .section--ink h3 { color: var(--bl-cream); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.feature { padding: 1.5rem; border-radius: var(--bl-radius); background: var(--bl-paper); border: 1px solid var(--bl-line); }
.feature__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--bl-orange-soft); font-size: 1.5rem; margin-bottom: 1rem; }
.feature h3 { font: 700 1.2rem/1.2 var(--bl-serif); margin: 0 0 .4rem; }
.feature p { margin: 0; color: var(--bl-ink-2); }
.author-band { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center; }
.author-band h2 { font: italic 800 clamp(2rem, 5vw, 3.25rem)/1.02 var(--bl-serif); margin: 0 0 1rem; }
.author-band h2 em { color: var(--bl-orange); font-style: italic; }
.author-band p { color: #D8C7B3; font-size: 1.1rem; max-width: 52ch; }
.split-stat { display: grid; gap: .75rem; }
.split-stat div { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 1.25rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.split-stat strong { font: 800 2.25rem/1 var(--bl-serif); color: var(--bl-orange); }
.split-stat div:last-child strong { color: var(--bl-cream); font-size: 1.5rem; }
@media (min-width: 961px) { .section--ink .author-band { padding-right: 110px; } }
.section--ink .ankara-edge { position: absolute; top: 0; right: 0; bottom: 0; width: 90px; background: var(--bl-ankara) 0 0 / 45px 45px; opacity: .9; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bl-ink); color: #D8C7B3; padding: 0 0 2rem; margin-top: 0; }
.site-footer::before { content: ""; display: block; height: 18px; background: var(--bl-zigzag) 0 0 / 40px 15px; margin-bottom: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.footer-grid h4 { color: var(--bl-cream); font: 700 .8rem/1 var(--bl-sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin: .45rem 0; }
.footer-grid a { color: #D8C7B3; text-decoration: none; }
.footer-grid a:hover { color: var(--bl-orange); }
.footer-logo img { height: 40px; width: auto; }
.footer-pay { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }
.footer-pay span { font-size: .7rem; font-weight: 700; padding: .3rem .6rem; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 4rem 0; }
.notfound h1 { font: italic 800 clamp(3rem, 10vw, 6rem)/1 var(--bl-serif); color: var(--bl-orange); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.nav-toggle { display: block; order: 3; }
	.site-header__inner { flex-wrap: wrap; }
	.site-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; padding: .5rem 0 1rem; }
	.site-nav ul { flex-direction: column; }
	.nav-open .site-nav { display: flex; }
	.site-search { margin: .5rem 0 0; }
	.site-nav .site-nav__account { display: flex !important; border-top: 1px solid var(--bl-line); margin-top: .5rem; padding-top: .5rem; }
	.site-nav__account .is-signout { color: var(--bl-red); }
	.site-signout span { display: none; }
	.site-search input, .site-search input:focus { width: 100%; }
	.site-actions { margin-left: auto; }
	.hero__grid, .author-band { grid-template-columns: 1fr; }
	.hero__art { max-width: 380px; margin: 0 auto; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.section--ink .ankara-edge { display: none; }
}
@media (max-width: 560px) {
	.site-logo img { height: 30px; }
	.site-actions .bl-btn--ghost { display: none; }
	.footer-grid { grid-template-columns: 1fr; }
	.admin-bar .site-header { top: 0; }
}

/* The reader's toolbar sticks just below the site header. */
body { --bl-header-h: 77px; }
body.admin-bar { --bl-header-h: 109px; }
@media (max-width: 782px) { body.admin-bar { --bl-header-h: 77px; } }