/* ==========================================================================
   Wifaq — screen.css
   Tokens from DESIGN-TOKENS.md (extracted from the approved mockups).
   RTL-first: logical properties only, except intentional LTR islands.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted (woff2 in assets/fonts/). Per-subset unicode-range so
   the browser only fetches the Arabic or Latin bytes a page actually uses.
   font-display: swap. Replaces the Google Fonts <link>. The four Arabic-subset
   faces are declared in partials/fonts.hbs instead, with {{asset}} URLs that match
   their <link rel=preload> exactly (else each preloaded font downloads twice).
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-400-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-400-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-500-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-600-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-700-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --wifaq-blue: #6E8CA8;
    --wifaq-blue-hover: #5d7a95;
    --wifaq-terracotta: #C4704F;
    --wifaq-terracotta-hover: #b0603f;
    --wifaq-cream: #F5EEDC;
    --wifaq-cream-card: #FBF6EA;
    --wifaq-cream-deep: #F0E7D2;
    --wifaq-ink: #2E3440;
    --radius: 3px;
    /* Ghost custom-font settings are honored via --gh-font-*; brand default is IBM Plex Sans Arabic. */
    --font-sans: var(--gh-font-body, 'IBM Plex Sans Arabic'), sans-serif;
    --font-heading: var(--gh-font-heading, var(--gh-font-body, 'IBM Plex Sans Arabic')), sans-serif;
    /* Plex Mono has no Arabic glyphs: without the Arabic fallback here, Arabic in
       mono labels drops to the system monospace (Courier New's stretched Arabic on
       Windows, an arbitrary system font on phones). Latin stays in Plex Mono. */
    --font-mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
}

body.cards-rounded {
    --radius: 16px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--wifaq-ink);
    background: var(--wifaq-cream);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #C4704F;
    color: #F5EEDC;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

svg {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

:focus-visible {
    outline: 3px solid var(--wifaq-blue);
    outline-offset: 2px;
}

/* On terracotta panels the blue ring all but vanishes (≈1:1); ink is ≈3.6:1. */
.cta-band :focus-visible,
.subscribe-cta :focus-visible,
.gh-post-upgrade-cta :focus-visible,
.kg-callout-card :focus-visible,
.wifaq-callout :focus-visible {
    outline-color: var(--wifaq-ink);
}

.skip-link {
    position: absolute;
    top: -60px;
    inset-inline-start: 0;
    z-index: 100;
    background: var(--wifaq-ink);
    color: var(--wifaq-cream);
    padding: 10px 18px;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* Screen-reader-only text. Clipped in place, no offsets (an inline-start offset
   creates real overflow in RTL — see the skip-link). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Layout containers
   -------------------------------------------------------------------------- */

.container {
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 32px;
}

.container-narrow {
    max-width: 760px;
    margin-inline: auto;
    padding-inline: 32px;
}

.container-about {
    max-width: 820px;
    margin-inline: auto;
    padding-inline: 32px;
}

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

.site-header {
    max-width: 1160px;
    margin-inline: auto;
    padding: 26px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-inline-end: auto; /* pushes nav + search to the inline-end (left in RTL) */
}

.site-wordmark {
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.5px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 16px;
    font-weight: 500;
}

.site-nav a {
    color: var(--wifaq-ink);
    text-decoration: none;
}

.site-nav a.is-muted {
    opacity: 0.72;
    transition: opacity 0.15s;
}

.site-nav a.is-muted:hover {
    opacity: 1;
}

.site-nav .nav-channel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--wifaq-terracotta);
    font-weight: 600;
}

.site-nav .nav-channel:hover {
    color: var(--wifaq-terracotta-hover);
}

.nav-toggle {
    display: none;
    background: none;
    border: 2px solid var(--wifaq-ink);
    border-radius: 2px;
    padding: 8px;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--wifaq-ink);
}

.site-divider {
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 32px;
}

.site-divider > div {
    height: 1px;
    background: var(--wifaq-ink);
    opacity: 0.14;
}

/* --------------------------------------------------------------------------
   Shared bits
   -------------------------------------------------------------------------- */

.section-heading {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 34px;
}

.section-heading h2 {
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.5px;
}

.section-label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--wifaq-blue);
}

.btn {
    font-family: inherit;
    font-weight: 600;
    font-size: 17px;
    padding: 15px 32px;
    border: 2px solid var(--wifaq-ink);
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}

.btn-primary {
    color: var(--wifaq-cream);
    background: var(--wifaq-terracotta);
}

.btn-primary:hover {
    background: var(--wifaq-terracotta-hover);
}

.btn-secondary {
    color: var(--wifaq-ink);
    background: transparent;
    border-color: var(--wifaq-blue);
}

.btn-secondary:hover {
    background: var(--wifaq-blue);
    color: var(--wifaq-cream);
}

.btn-blue {
    color: var(--wifaq-cream);
    background: var(--wifaq-blue);
    font-size: 16px;
    padding: 14px 28px;
    white-space: nowrap;
}

.btn-blue:hover {
    background: var(--wifaq-blue-hover);
}

.btn-cream {
    color: var(--wifaq-terracotta);
    background: var(--wifaq-cream);
    font-size: 16px;
    padding: 14px 30px;
    white-space: nowrap;
}

.btn-cream:hover {
    background: var(--wifaq-cream-card);
}

.back-row {
    padding: 48px 0 0;
}

.back-link {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--wifaq-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.back-link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
    padding: 72px 0 84px;
}

.hero-kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--wifaq-blue);
    margin-bottom: 22px;
}

.hero h1 {
    font-weight: 700;
    font-size: 60px;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 22px;
    text-wrap: balance;
}

.hero-copy > p {
    font-size: 21px;
    line-height: 1.7;
    opacity: 0.78;
    max-width: 520px;
    margin-bottom: 38px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-art {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-art svg {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Category grid
   -------------------------------------------------------------------------- */

.home-categories {
    padding: 16px 0 20px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.category-card {
    background: var(--wifaq-cream-card);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    padding: 30px 28px;
    cursor: pointer;
    transition: transform 0.15s;
    text-decoration: none;
    display: block;
}

.category-card:hover {
    transform: translateY(-4px);
}

.category-card svg {
    margin-bottom: 20px;
}

.category-card h3 {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 8px;
}

.category-card p {
    font-size: 14.5px;
    line-height: 1.7;
    opacity: 0.75; /* ≥4.5:1 on the card (0.62 gave 3.8:1) */
}

/* --------------------------------------------------------------------------
   Post cards (video-style)
   -------------------------------------------------------------------------- */

.home-latest {
    padding: 76px 0 40px;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.post-grid-single {
    grid-template-columns: 1fr;
    max-width: 520px;
}

.post-card-panel {
    position: relative;
    background: var(--wifaq-blue);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    overflow: hidden;
    text-decoration: none;
}

.post-card-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.post-card-panel-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
}

.play-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--wifaq-terracotta);
    border: 2px solid var(--wifaq-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.post-card-series {
    color: var(--wifaq-cream);
    font-weight: 700;
    font-size: 22px;
}

.post-card-meta {
    padding: 16px 2px 0;
}

.post-card-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--wifaq-terracotta);
}

.post-card-title {
    font-weight: 700;
    font-size: 19px;
    line-height: 1.5;
    margin-top: 8px;
}

.post-card-title a {
    text-decoration: none;
    color: var(--wifaq-ink);
}

.post-card-title a:hover {
    text-decoration: underline;
}

.post-card-excerpt {
    font-size: 14.5px;
    line-height: 1.7;
    opacity: 0.75; /* builder value; 0.62 (mockup desc opacity) fails AA on cream */
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blue/terracotta alternation: even cards flip panel, play button and logo halves. */

.post-grid .post-card:nth-child(even) .post-card-panel {
    background: var(--wifaq-terracotta);
}

.post-grid .post-card:nth-child(even) .play-btn {
    background: var(--wifaq-blue);
}

.post-grid .post-card:nth-child(even) .post-card-logo svg path:first-child {
    fill: var(--wifaq-cream);
}

.post-grid .post-card:nth-child(even) .post-card-logo svg path:last-child {
    fill: var(--wifaq-blue);
}

/* --------------------------------------------------------------------------
   About strip + CTA band (home)
   -------------------------------------------------------------------------- */

.about-strip {
    margin: 64px 0 24px;
    background: var(--wifaq-blue);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    padding: 48px 44px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
}

.about-strip h2 {
    color: var(--wifaq-cream);
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 14px;
}

.about-strip p {
    color: var(--wifaq-cream);
    font-size: 17px;
    line-height: 1.8;
    opacity: 0.92;
    max-width: 640px;
}

.cta-band {
    background: var(--wifaq-terracotta);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    padding: 34px;
    margin: 8px 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.cta-band h3 {
    color: var(--wifaq-cream);
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 8px;
}

.cta-band p {
    color: var(--wifaq-cream);
    font-size: 16px;
    opacity: 0.92;
}

/* --------------------------------------------------------------------------
   Post page
   -------------------------------------------------------------------------- */

.post-full {
    padding: 28px 0 40px;
}

.post-chip {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--wifaq-terracotta);
    text-decoration: none;
}

.post-chip:hover {
    text-decoration: underline;
}

.post-header h1 {
    font-weight: 700;
    font-size: 44px;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin: 14px 0 20px;
    text-wrap: balance;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
    opacity: 0.75; /* ≥4.5:1 on cream (0.6 gave 3.5:1) */
    margin-bottom: 36px;
}

.post-meta-time {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Post body */

.gh-content > * + * {
    margin-top: 0;
}

.gh-content p {
    font-size: 19px;
    line-height: 1.95;
    margin-bottom: 34px;
}

.gh-content a {
    color: var(--wifaq-blue);
    text-decoration: none;
}

.gh-content a:hover {
    text-decoration: underline;
}

.gh-content {
    counter-reset: wifaq-section;
    /* Long URLs / unspaced strings wrap instead of widening the page on phones. */
    overflow-wrap: anywhere;
}

.gh-content h2 {
    font-weight: 700;
    font-size: 27px;
    margin: 8px 0 16px;
}

/* Auto-numbered sections: only the article's own H2s — not the headings
   inside header, signup, CTA or paywall cards. */
.gh-content > h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    counter-increment: wifaq-section;
}

.gh-content > h2::before {
    content: "٠" counter(wifaq-section, arabic-indic);
    color: var(--wifaq-terracotta);
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 400;
    flex-shrink: 0;
}

.gh-content h3 {
    font-weight: 700;
    font-size: 22px;
    margin: 8px 0 14px;
}

.gh-content ul,
.gh-content ol {
    font-size: 19px;
    line-height: 1.95;
    margin-bottom: 34px;
    padding-inline-start: 28px;
}

.gh-content li > ul,
.gh-content li > ol {
    margin-bottom: 0;
}

.gh-content blockquote {
    border-inline-start: 3px solid var(--wifaq-terracotta);
    padding-inline-start: 22px;
    font-size: 19px;
    line-height: 1.95;
    margin-bottom: 34px;
    opacity: 0.85;
}

/* Koenig's alternative quote style: a centred pull quote. */
.gh-content blockquote.kg-blockquote-alt {
    border: 0;
    padding: 0 20px;
    text-align: center;
    font-size: 24px;
    line-height: 1.7;
    font-weight: 700;
    font-style: normal; /* Arabic has no italic; browsers fake a slant */
    opacity: 1;
}

.gh-content blockquote.kg-blockquote-alt::before {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 0 auto 18px;
    background: var(--wifaq-terracotta);
}

/* Code: always left-to-right, scrolls inside its own box. */
.gh-content pre {
    direction: ltr;
    text-align: left;
    max-width: 100%;
    overflow-x: auto;
    background: var(--wifaq-cream-card);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 34px;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.7;
    overflow-wrap: normal;
}

.gh-content code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    direction: ltr;
    unicode-bidi: isolate;
    background: rgba(46, 52, 64, 0.07);
    border-radius: 2px;
    padding: 0.1em 0.35em;
}

.gh-content pre code {
    font-size: inherit;
    background: none;
    padding: 0;
}

/* Tables (markdown card) */
.gh-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-bottom: 34px;
    font-size: 17px;
    line-height: 1.7;
}

.gh-content th,
.gh-content td {
    border: 1px solid rgba(46, 52, 64, 0.35);
    padding: 8px 14px;
    text-align: start;
    unicode-bidi: plaintext; /* "30 min" stays "30 min" inside RTL */
    overflow-wrap: normal;
}

.gh-content th {
    background: var(--wifaq-cream-card);
    font-weight: 700;
}

.gh-content hr {
    border: none;
    border-top: 1px solid var(--wifaq-ink);
    opacity: 0.14;
    margin: 40px 0;
}

/* Images / Koenig width helpers */

.gh-content .kg-image-card img {
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
}

.gh-content .kg-card {
    margin-bottom: 34px;
}

.kg-width-wide {
    position: relative;
    width: 100%;
}

.kg-width-full {
    position: relative;
    width: 100%;
}

.gh-content figcaption {
    font-family: var(--font-mono);
    font-size: 12px;
    opacity: 0.75; /* ≥4.5:1 on cream (0.5 gave 2.7:1) */
    margin-top: 10px;
}

/* Gallery: Ghost spaces images with physical margin-left, which lands on the
   wrong side in RTL — mirror it. */
.gh-content .kg-gallery-image:not(:first-of-type) {
    margin: 0 0.75em 0 0;
}

.gh-content .kg-gallery-image img {
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
}

/* Embeds. Video embeds (YouTube, Vimeo, and the click-to-play poster) get the
   mockup's framed blue 16:9 panel; the frame sits on the player itself so an
   embed caption falls below it. Other embeds (posts, audio) render as given. */

.gh-content .kg-embed-card {
    margin-bottom: 14px;
}

.gh-content .kg-embed-card > iframe {
    max-width: 100%;
}

.gh-content .kg-embed-card > iframe[data-wifaq-src],
.gh-content .kg-embed-card > iframe[src*="youtube"],
.gh-content .kg-embed-card > iframe[src*="vimeo"],
.wifaq-embed-facade {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    background: var(--wifaq-blue);
}

.gh-content .kg-embed-card figcaption {
    margin-top: 10px;
}

/* Uploaded video card */
.gh-content .kg-video-card .kg-video-container {
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Click-to-load facade (JS-enhanced) — mirrors the mockup's video block. */
.wifaq-embed-facade {
    position: relative;
    padding: 24px;
    font-family: inherit;
    cursor: pointer;
}

.wifaq-embed-facade-top {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-start: 24px;
    display: block;
}

.wifaq-embed-facade-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--wifaq-terracotta);
    border: 3px solid var(--wifaq-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wifaq-embed-facade-title {
    position: absolute;
    inset-block-end: 24px;
    inset-inline-start: 24px;
    color: var(--wifaq-cream);
    font-weight: 700;
    font-size: 22px;
}

.wifaq-embed-facade:hover .wifaq-embed-facade-play {
    background: var(--wifaq-terracotta-hover);
}

.gh-content .kg-embed-card + p:has(> em:only-child),
.gh-content .video-caption {
    font-family: var(--font-mono);
    font-size: 12px;
    opacity: 0.75; /* ≥4.5:1 on cream (0.5 gave 2.7:1) */
    margin-bottom: 40px;
}

/* Callouts — native Koenig callout card renders as إعادة الصياغة by default */

.gh-content .kg-callout-card,
.wifaq-callout {
    background: var(--wifaq-terracotta);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    padding: 28px 30px;
    margin: 12px 0 40px;
    display: block;
}

.gh-content .kg-callout-card::before {
    /* Header row: refresh icon at inline-start + mono label (mockup layout). */
    content: "إعادة الصياغة";
    display: block;
    width: fit-content;
    color: var(--wifaq-cream);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 500;
    line-height: 20px;
    padding-inline-start: 29px;
    margin-bottom: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EEDC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 100% 50%; /* physical right = inline start; theme is RTL-only */
}

/* «خط الأمان» (abuse-topic posts): the same callout with its colour set to Red
   in the editor — shield icon + safety label. */
.gh-content .kg-callout-card.kg-callout-card-red::before {
    content: "خط الأمان";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EEDC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L20 6 V11 C20 16.5 16.6 20.4 12 21.5 C7.4 20.4 4 16.5 4 11 V6 Z'/%3E%3C/svg%3E");
}

.gh-content .kg-callout-card .kg-callout-emoji {
    display: none;
}

.gh-content .kg-callout-card .kg-callout-text {
    display: block;
    color: var(--wifaq-cream);
    font-size: 19px;
    line-height: 1.85;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Ghost's default editor cards (bookmark, toggle, button) in the brand
   language: cream card, 2px ink border, --radius, no shadows. Ghost injects
   its own card CSS after this file, so each rule is scoped one level deeper.
   -------------------------------------------------------------------------- */

.gh-content .kg-bookmark-card .kg-bookmark-container {
    background: var(--wifaq-cream-card);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--wifaq-ink);
    overflow: hidden;
}

.gh-content .kg-bookmark-card .kg-bookmark-title {
    font-weight: 700;
    color: var(--wifaq-ink);
}

.gh-content .kg-bookmark-card .kg-bookmark-description,
.gh-content .kg-bookmark-card .kg-bookmark-metadata {
    color: var(--wifaq-ink);
    opacity: 0.75;
}

.gh-content .kg-bookmark-card .kg-bookmark-thumbnail {
    border-inline-start: 2px solid var(--wifaq-ink);
}

.gh-content .kg-bookmark-card .kg-bookmark-thumbnail img {
    border-radius: 0;
}

.gh-content .kg-card.kg-toggle-card {
    background: var(--wifaq-cream-card);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    box-shadow: none;
}

.gh-content .kg-toggle-card .kg-toggle-heading-text {
    color: var(--wifaq-ink);
    font-weight: 700;
}

.gh-content .kg-toggle-card .kg-toggle-card-icon {
    color: var(--wifaq-ink);
}

.gh-content .kg-button-card .kg-btn {
    font-family: inherit;
    font-weight: 600;
    font-size: 17px;
    height: auto;
    padding: 15px 32px;
    border: 2px solid var(--wifaq-ink);
    border-radius: 2px;
    color: var(--wifaq-cream);
    background: var(--wifaq-terracotta);
    text-decoration: none;
}

.gh-content .kg-button-card .kg-btn:hover {
    background: var(--wifaq-terracotta-hover);
    opacity: 1;
}

/* Product, file and audio cards: same cream card + ink border. */
.gh-content .kg-product-card .kg-product-card-container,
.gh-content .kg-file-card a.kg-file-card-container,
.gh-content .kg-card.kg-audio-card {
    background: var(--wifaq-cream-card);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--wifaq-ink);
    font-family: inherit;
}

.gh-content .kg-product-card .kg-product-card-image,
.gh-content .kg-audio-card .kg-audio-thumbnail {
    border-radius: 0;
}

.gh-content .kg-product-card a.kg-product-card-button,
.gh-content .kg-header-card .kg-header-card-button,
.gh-content .kg-signup-card .kg-signup-card-button {
    font-family: inherit;
    font-weight: 600;
    border: 2px solid var(--wifaq-ink);
    border-radius: 2px;
}

.gh-content .kg-product-card a.kg-product-card-button {
    color: var(--wifaq-cream);
    background: var(--wifaq-terracotta);
}

/* File size ("193 KB") keeps its LTR order inside RTL text; Ghost's "•"
   separator moves to its right end, i.e. between the filename and the size. */
.gh-content .kg-file-card-filesize {
    direction: ltr;
    unicode-bidi: isolate;
    opacity: 0.75;
}

.gh-content .kg-file-card-filesize::before {
    content: none;
}

.gh-content .kg-file-card-filesize::after {
    content: "\2022";
    display: inline-block;
    margin: 0 6px;
}

/* Header + signup cards keep the background chosen in the editor; they get
   the brand frame, and the email field reads left-to-right. */
.gh-content .kg-header-card,
.gh-content .kg-signup-card {
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    overflow: hidden;
}

.gh-content .kg-signup-card .kg-signup-card-input {
    direction: ltr;
    text-align: left;
    font-family: inherit;
}

/* Ghost's paywall box (partials/content-cta.hbs): the subscribe band's look. */
.gh-content .gh-post-upgrade-cta {
    margin: 12px 0 40px;
}

.gh-content .gh-post-upgrade-cta-content {
    background: var(--wifaq-terracotta);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    padding: 34px 30px;
    text-align: center;
    color: var(--wifaq-cream);
}

.gh-content .gh-post-upgrade-cta-content h2 {
    font-size: 24px;
    margin: 0 0 20px;
    color: var(--wifaq-cream);
}

.gh-content .gh-post-upgrade-cta-content p {
    font-size: 16px;
    margin: 18px 0 0;
}

.gh-content .gh-post-upgrade-cta .btn-cream {
    color: var(--wifaq-terracotta);
    text-decoration: none;
}

.gh-content .gh-post-upgrade-cta-content p a {
    color: var(--wifaq-cream);
    text-decoration: underline;
    font-weight: 600;
}

/* HTML-snippet callouts (exact mockup structure) */

.wifaq-callout-header {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}

.wifaq-callout-header svg {
    flex-shrink: 0;
}

.wifaq-callout-label {
    color: var(--wifaq-cream);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 500;
}

.wifaq-callout > p {
    color: var(--wifaq-cream);
    font-size: 19px;
    line-height: 1.85;
    font-weight: 500;
    margin: 0;
}

/* Comments CTA + subscribe */

.comments-cta {
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.comments-cta h3 {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 6px;
}

.comments-cta p {
    font-size: 15px;
    opacity: 0.65;
}

.subscribe-cta {
    background: var(--wifaq-terracotta);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    padding: 30px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.subscribe-cta h3 {
    color: var(--wifaq-cream);
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 6px;
}

.subscribe-cta p {
    color: var(--wifaq-cream);
    font-size: 15px;
    opacity: 0.92;
}

.post-comments {
    margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Tag page
   -------------------------------------------------------------------------- */

.tag-header {
    margin: 22px 0 44px;
    background: var(--wifaq-blue);
    border: 2px solid var(--wifaq-ink);
    border-radius: var(--radius);
    padding: 44px 40px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 34px;
    align-items: center;
}

.tag-header-kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--wifaq-cream);
    opacity: 0.8;
    margin-bottom: 10px;
}

.tag-header h1 {
    color: var(--wifaq-cream);
    font-weight: 700;
    font-size: 38px;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.tag-header p {
    color: var(--wifaq-cream);
    font-size: 18px;
    line-height: 1.7;
    opacity: 0.92;
    max-width: 600px;
}

.tag-posts {
    padding: 0 0 20px;
}

/* --------------------------------------------------------------------------
   Articles archive (/articles/) — values from the dc mockup's archive view
   -------------------------------------------------------------------------- */

.archive-header {
    padding: 64px 0 0;
}

.archive-kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--wifaq-blue);
    margin-bottom: 14px;
}

.archive-header h1 {
    font-weight: 700;
    font-size: 46px;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
}

.archive-header p {
    font-size: 19px;
    line-height: 1.7;
    opacity: 0.72;
    max-width: 560px;
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 40px;
}

.category-chip {
    font-weight: 500;
    font-size: 14px;
    color: var(--wifaq-ink);
    background: transparent;
    border: 2px solid var(--wifaq-ink);
    border-radius: 2px;
    padding: 9px 18px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.category-chip:hover,
.category-chip.is-active {
    background: var(--wifaq-ink);
    color: var(--wifaq-cream);
}

.category-chip.is-active {
    font-weight: 600;
}

.archive-posts {
    padding: 0 0 20px;
}

/* "All articles" link under the homepage's latest section — same chip as the
   archive filters and pagination (terracotta text on cream is only 3.1:1). */
.section-more {
    display: inline-block;
    margin-top: 32px;
    font-weight: 600;
    font-size: 14px;
    color: var(--wifaq-ink);
    background: transparent;
    border: 2px solid var(--wifaq-ink);
    border-radius: 2px;
    padding: 9px 18px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.section-more:hover {
    background: var(--wifaq-ink);
    color: var(--wifaq-cream);
}

.tag-posts .section-heading {
    gap: 14px;
    margin-bottom: 28px;
}

.tag-posts .section-heading h2 {
    font-size: 24px;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Pagination (builder-designed)
   -------------------------------------------------------------------------- */

/* Three columns so the status stays centred when one side is empty. */
.pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 40px 0 20px;
}

.pagination > :first-child {
    justify-self: start;
}

.pagination > :last-child {
    justify-self: end;
}

.pagination-chip {
    font-weight: 600;
    font-size: 14px;
    color: var(--wifaq-ink);
    background: transparent;
    border: 2px solid var(--wifaq-ink);
    border-radius: 2px;
    padding: 9px 18px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.pagination-chip:hover {
    background: var(--wifaq-ink);
    color: var(--wifaq-cream);
}

.pagination-status {
    font-family: var(--font-mono);
    font-size: 12px;
    opacity: 0.75; /* ≥4.5:1 on cream (0.6 gave 3.5:1) */
}

/* --------------------------------------------------------------------------
   About page + start-here
   -------------------------------------------------------------------------- */

.about-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 36px;
    align-items: center;
    padding: 64px 0 20px;
}

.about-avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 2px solid var(--wifaq-ink);
    background: var(--wifaq-cream-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--wifaq-blue);
    margin-bottom: 12px;
}

.about-header h1 {
    font-weight: 700;
    font-size: 42px;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.about-header > div > p {
    font-size: 19px;
    line-height: 1.75;
    opacity: 0.8;
}

.about-content {
    padding: 40px 0 8px;
}

.about-content h2 {
    font-size: 26px;
    gap: 12px;
    margin-bottom: 14px;
}

.about-content h2::before {
    font-size: 20px;
}

/* Puzzle-bulleted list (used via HTML snippet in About content) */

.wifaq-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 38px;
    padding: 0;
}

.wifaq-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 18px;
    line-height: 1.7;
}

.wifaq-list li svg {
    flex-shrink: 0;
    margin-top: 5px;
}

.start-intro p {
    font-size: 19px;
    line-height: 1.95;
    margin-bottom: 34px;
}

.start-first {
    margin-bottom: 56px;
}

.start-categories {
    padding: 16px 0 20px;
}

.start-categories .category-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* --------------------------------------------------------------------------
   Error page
   -------------------------------------------------------------------------- */

.error-page {
    padding: 96px 0 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.error-art {
    margin-bottom: 34px;
}

.error-code {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--wifaq-blue);
    margin-bottom: 14px;
}

.error-page h1 {
    font-weight: 700;
    font-size: 44px;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
}

.error-page p {
    font-size: 19px;
    line-height: 1.8;
    opacity: 0.72;
    margin-bottom: 34px;
    max-width: 460px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    margin-top: 40px;
    border-top: 2px solid var(--wifaq-ink);
    background: var(--wifaq-cream-deep);
}

.site-footer-inner {
    max-width: 1160px;
    margin-inline: auto;
    padding: 44px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.footer-safety {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-safety p {
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 520px;
    opacity: 0.78;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-social a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--wifaq-ink);
    background: var(--wifaq-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
}

.footer-social a:hover {
    background: var(--wifaq-terracotta);
}

.footer-legal {
    max-width: 1160px;
    margin-inline: auto;
    padding: 0 32px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13px;
}

.footer-legal a {
    color: var(--wifaq-ink);
    opacity: 0.65;
    text-decoration: none;
}

.footer-legal a:hover {
    opacity: 1;
    text-decoration: underline;
}

.footer-copyright {
    max-width: 1160px;
    margin-inline: auto;
    padding: 0 32px 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    opacity: 0.75; /* mockup has 0.45 (2.39:1); raised for AA like the card excerpts */
}

/* --------------------------------------------------------------------------
   Responsive — mobile is the primary audience
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .category-grid,
    .post-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h1 {
        font-size: 48px;
    }
}

@media (max-width: 680px) {
    .container,
    .container-narrow,
    .container-about {
        padding-inline: 20px;
    }

    .site-header {
        padding: 20px;
    }

    .site-divider {
        padding-inline: 20px;
    }

    .nav-toggle {
        display: flex;
    }

    /* Mobile: the menu becomes an anchored dropdown so the search button and
       hamburger stay on the header row. */
    .site-nav {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        background: var(--wifaq-cream);
        padding: 18px 20px 22px;
        border-bottom: 2px solid var(--wifaq-ink);
        z-index: 50;
    }

    .site-nav.is-open {
        display: flex;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 44px 0 56px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .hero-copy > p {
        font-size: 18px;
    }

    .hero-art {
        order: -1;
    }

    .hero-art svg {
        width: 200px;
        height: 178px;
    }

    .category-grid,
    .post-grid,
    .start-categories .category-grid {
        grid-template-columns: 1fr;
    }

    .about-strip {
        grid-template-columns: 1fr;
        padding: 32px 26px;
    }

    .about-strip svg {
        width: 90px;
        height: 80px;
    }

    .post-header h1 {
        font-size: 32px;
    }

    .gh-content p,
    .gh-content ul,
    .gh-content ol {
        font-size: 17px;
    }

    .gh-content h2 {
        font-size: 23px;
    }

    .tag-header {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 30px 26px;
    }

    .tag-header h1 {
        font-size: 30px;
    }

    .archive-header {
        padding-top: 44px;
    }

    .archive-header h1 {
        font-size: 34px;
    }

    .about-header {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 44px 0 12px;
    }

    .about-header h1 {
        font-size: 34px;
    }

    .error-page h1 {
        font-size: 34px;
    }

    .section-heading h2 {
        font-size: 26px;
    }
}

/* Search trigger in the nav (binds Ghost sodo-search via data-ghost-search) */
.nav-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--wifaq-ink);
    border-radius: 50%;
    background: var(--wifaq-cream);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

.nav-search:hover {
    background: var(--wifaq-terracotta);
}

/* Numbered lists (and footnotes) in Arabic-Indic digits, like the rest of the UI. */
.gh-content ol {
    list-style-type: arabic-indic;
}

/* Without JavaScript the hamburger and Ghost's search can't work (html has no
   .js class — see default.hbs): hide both, and on phones show the menu as a
   row under the brand instead of a dropdown. */
html:not(.js) .nav-toggle,
html:not(.js) .nav-search {
    display: none;
}

/* Portal (sign-up/sign-in) and comments are JS apps too — hide their triggers. */
html:not(.js) [data-portal],
html:not(.js) .subscribe-cta,
html:not(.js) .comments-cta--onsite {
    display: none;
}

@media (max-width: 680px) {
    html:not(.js) .site-header {
        flex-wrap: wrap;
        row-gap: 14px;
    }

    html:not(.js) .site-nav {
        position: static;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex-basis: 100%;
        gap: 12px 22px;
        padding: 0;
        border: 0;
        background: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Print: the article, not the site chrome. */
@media print {
    .site-header,
    .site-divider,
    .back-row,
    .comments-cta,
    .subscribe-cta,
    .post-comments,
    .gh-post-upgrade-cta,
    .cta-band,
    .site-footer .footer-social,
    .site-footer .footer-legal,
    .wifaq-embed-facade {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .gh-content a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        overflow-wrap: anywhere;
    }
}