/*
Theme Name: Diwan
Theme URI: https://example.com/diwan
Author: Your Name
Author URI: https://example.com
Description: A serene wellness theme built around calm, airy space, a signature grid of wellbeing 'paths', a gentle affirmation band and soft segmented sections. An elegant serif (Marcellus) with a Work Sans body, per-category pastel accents, light and dark modes, self-hosted fonts and one-click demo content with original artwork.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diwan
Tags: blog, news, magazine, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template
*/

:root {
  --bg: #f7f4ee;
  --surface: #ffffff;
  --surface-2: #eef0e9;
  --text: #2e3330;
  --text-2: #55605a;
  --muted: #8a938c;
  --line: #e4e4da;
  --accent: #6f9b8e;
  --accent-ink: #ffffff;
  --accent-hover: #2e3330;
  --accent-hover-ink: #ffffff;

  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-display: 400;
  --lh-display: 1.16;
  --track-display: 0.005em;

  --radius: 18px;
  --radius-ui: 12px;
  --footer-bg: #2e3330;
  --footer-text: #eef1ec;
  --footer-muted: #a3aaa4;
  --footer-line: rgba(255,255,255,.12);
  --overlay: linear-gradient(180deg, rgba(25,30,27,0) 32%, rgba(25,30,27,.86) 100%);
}
:root[data-theme="dark"] {
  --bg: #181b19;
  --surface: #1f2321;
  --surface-2: #272c29;
  --text: #eef1ec;
  --text-2: #c6cdc7;
  --muted: #8c948e;
  --line: #2f3431;
  --accent: #8bbaad;
  --accent-ink: #181b19;
  --accent-hover: #eef1ec;
  --accent-hover-ink: #181b19;
  --footer-bg: #101211;
}

body { font-size: 17px; }
.meta, .cat, .primary-menu a, .mobile-menu a, .section-link, .widget-title, .btn, .header-cta { font-family: var(--font-ui); }
.brand__name { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: .02em; }
h1, h2, h3, h4, .card__title, .mini__title, .entry-title, .section-title { font-family: var(--font-display); font-weight: 400; letter-spacing: .005em; }
.entry-content { font-family: var(--font-body); }

.site-header { border-bottom: 1px solid var(--line); }
.primary-menu > li > a { font-weight: 500; font-size: .9rem; letter-spacing: .02em; }
.header-cta { background: var(--accent); color: #fff; border-radius: 100px; }
.cat { color: hsl(var(--cat-hue,165) 36% 42%); font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
[data-theme="dark"] .cat { color: hsl(var(--cat-hue,165) 42% 70%); }
.card-overlay .cat { color: #fff; }
.section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.section-head { align-items: baseline; }

/* ---------- Hero ---------- */
.dw-hero__grid { display: grid; gap: clamp(24px, 4vw, 44px); }
@media (min-width: 900px) { .dw-hero__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.dw-hero__lead .card--lead .media { border-radius: var(--radius); }
.dw-hero__lead .card--lead .card__title { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.dw-hero__lead .card--lead .card__excerpt { font-size: 1.05rem; }
.dw-hero__side { display: grid; gap: 22px; align-content: start; }
.dw-hero__side .card .media { border-radius: var(--radius); aspect-ratio: 16/10; }

/* ---------- Paths ---------- */
.dw-paths { padding-block: clamp(30px, 4vw, 56px); }
.dw-paths__head { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); text-align: center; margin-bottom: 1.6rem; color: var(--text); }
.dw-paths__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
@media (min-width: 960px) { .dw-paths__grid { grid-template-columns: repeat(6, 1fr); } }
.dw-path { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 1.2rem; border-radius: var(--radius); background: hsl(var(--cat-hue,165) 32% 94%); border: 1px solid hsl(var(--cat-hue,165) 26% 86%); min-height: 148px; transition: transform .2s ease; }
[data-theme="dark"] .dw-path { background: hsl(var(--cat-hue,165) 16% 17%); border-color: hsl(var(--cat-hue,165) 16% 26%); }
.dw-path:hover { transform: translateY(-3px); }
.dw-path__name { font-family: var(--font-display); font-size: 1.3rem; color: hsl(var(--cat-hue,165) 42% 32%); }
[data-theme="dark"] .dw-path__name { color: hsl(var(--cat-hue,165) 46% 74%); }
.dw-path__desc { font-size: .82rem; color: var(--text-2); line-height: 1.42; flex: 1; }
.dw-path__count { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

/* ---------- Affirmation ---------- */
.dw-affirm { background: var(--accent); color: #fff; padding-block: clamp(48px, 7vw, 96px); }
.dw-affirm .wrap { max-width: 860px; text-align: center; }
.dw-affirm__text { font-family: var(--font-display); font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.3; color: #fff; margin: 0; }

/* ---------- Sections ---------- */
.dw-section .card .media, .dw-latest .card .media { border-radius: var(--radius); }

/* ---------- Signup ---------- */
.dw-signup .signup--band { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
.dw-signup .signup--band .signup__title { color: var(--text); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.dw-signup .signup--band .signup__desc { color: var(--text-2); }
.dw-signup .signup--band .signup__form { min-width: 320px; }
.dw-signup .signup--band .signup__button { background: var(--accent); color: #fff; }
@media (max-width: 760px) { .dw-signup .signup--band { grid-template-columns: 1fr; } .dw-signup .signup--band .signup__form { min-width: 0; } }

.entry-content { font-size: 1.1rem; line-height: 1.8; }
.entry-content blockquote { border-left: 3px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--text); }