/* Seef CMS UI themes (auto-loaded) */
/*
 * Component anatomy — feature 017, ADR-0001.
 *
 * UNSCOPED ON PURPOSE, exactly like `_layout.css` beside it, and for a related reason.
 * `_layout.css` owns arrangement because arrangement does not differ per theme. This file
 * owns *anatomy* — which element is a surface, which carries a border, which sits on the
 * inverse ground — because that does not differ per theme either. What differs is the
 * VALUES, and those are the token block each theme file declares.
 *
 * Before this file existed, each theme restated every component with its own literals. The
 * result was not merely duplication: `.cms-page-header` was painted under `minimal` and
 * `funky` and not under `default`, and `.cms-footer-cta` the same, so a client picking the
 * default theme got unstyled bands and nothing failed. A component described once cannot
 * drift that way, and `ThemeTokenContractTest` asserts the token sets stay identical.
 *
 * Named with a leading underscore so `UiTheme::available()` does not offer it as a theme —
 * see that class. Custom-property resolution does not depend on file order, so the sort
 * position of this file relative to the themes is cosmetic.
 */

/* ---------------------------------------------------------------------------
 * The page
 * ------------------------------------------------------------------------- */

body.cms-body {
    background-color: var(--cms-page-bg);
    color: var(--cms-text);
    font-family: var(--cms-font-body);
    font-size: var(--cms-body-size);
    line-height: var(--cms-body-leading);
}

.cms-main {
    background-color: var(--cms-page-bg);
}

/* ---------------------------------------------------------------------------
 * Shell — header, the page-title band, footer
 * ------------------------------------------------------------------------- */

.cms-header {
    background-color: var(--cms-surface);
    border-bottom: var(--cms-header-border);
}

.cms-page-header {
    display: block;
    background-color: var(--cms-surface);
    border-bottom: 1px solid var(--cms-line);
}

.cms-footer {
    background-color: var(--cms-surface-footer) !important;
    color: var(--cms-text-on-inverse) !important;
}

.cms-footer a {
    color: var(--cms-text-on-inverse);
}

.cms-footer-cta {
    background-color: var(--cms-surface-inverse);
    color: var(--cms-text-on-inverse);
}

/* ---------------------------------------------------------------------------
 * Hero and sections
 * ------------------------------------------------------------------------- */

.cms-hero {
    background-color: var(--cms-surface);
    padding-top: var(--cms-section-py);
    padding-bottom: var(--cms-section-py);
}

.cms-hero h1 {
    font-family: var(--cms-font-display);
    font-size: var(--cms-h1-size);
    font-weight: var(--cms-h1-weight);
    line-height: var(--cms-h1-leading);
    color: var(--cms-text);
}

.cms-hero h4 {
    color: var(--cms-text-muted);
    opacity: 1;
}

.cms-section {
    background-color: var(--cms-surface);
    padding-top: calc(var(--cms-section-py) * 0.6);
    padding-bottom: calc(var(--cms-section-py) * 0.6);
}

/* ---------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------- */

.cms-card {
    background-color: var(--cms-surface);
    border: var(--cms-card-border);
    border-radius: var(--cms-radius-card);
    box-shadow: var(--cms-shadow-card);
    transition: var(--cms-transition);
}

.cms-card-media {
    border-radius: 0;
}

.cms-post-media {
    border-radius: var(--cms-radius-media);
}

/* ---------------------------------------------------------------------------
 * The page-builder frame
 * ------------------------------------------------------------------------- */

.cms-widget-grid {
    max-width: var(--cms-container);
    margin-left: auto;
    margin-right: auto;
    padding: var(--cms-block-gap) var(--cms-gutter);
}

.cms-widget-block {
    margin-bottom: var(--cms-block-gap);
}

.cms-widget-title {
    display: var(--cms-widget-title-display);
    font-family: var(--cms-font-display);
    font-size: var(--cms-widget-title-size);
    font-weight: var(--cms-widget-title-weight);
    color: var(--cms-widget-title-color);
    letter-spacing: var(--cms-label-tracking);
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
 * Editor-authored body copy
 * ------------------------------------------------------------------------- */

.cms-prose {
    color: var(--cms-text);
    line-height: var(--cms-body-leading);
}

.cms-prose a {
    color: var(--cms-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cms-prose blockquote {
    border-inline-start: 3px solid var(--cms-primary);
    background-color: var(--cms-surface-sunken);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

/* ---------------------------------------------------------------------------
 * Controls
 *
 * These classes are new markup this feature adds to the Blade tree, replacing runs of Tailwind
 * utilities — several of which named colour tokens the package referenced but never defined, so
 * they resolved to nothing on any client whose own build did not happen to declare them.
 * ------------------------------------------------------------------------- */

.cms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border: var(--cms-btn-border);
    border-radius: var(--cms-radius-control);
    font-weight: 600;
    line-height: 1;
    transition: var(--cms-transition);
}

.cms-btn--primary {
    background-color: var(--cms-primary);
    color: var(--cms-on-primary);
}

.cms-btn--secondary {
    background-color: var(--cms-surface);
    color: var(--cms-text);
    border-color: var(--cms-line-strong);
}

.cms-btn--accent {
    background-color: var(--cms-accent);
    color: var(--cms-on-accent);
}

.cms-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--cms-line);
    background-color: var(--cms-surface-sunken);
    color: var(--cms-text-muted);
    font-size: var(--cms-label-size);
    font-weight: var(--cms-label-weight);
}

/* Secondary copy: the replacement for a Tailwind colour name this package never declared. */
.cms-muted {
    color: var(--cms-text-muted);
}

/* The one place a brand-coloured word appears inside a sentence. */
.cms-accent-text {
    color: var(--cms-primary);
    font-weight: 700;
}

/* Icon pills on the numbers block and the library card. */
.cms-icon-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--cms-radius-control);
    background-color: var(--cms-primary-tint);
    color: var(--cms-primary);
}

/* The full-bleed contact block, which used to carry a client's brand green in markup. */
.cms-contact-banner {
    background-color: var(--cms-surface-inverse);
    color: var(--cms-text-on-inverse);
}

.cms-sticky-socials a {
    background-color: var(--cms-surface);
    border: 1px solid var(--cms-line);
    box-shadow: var(--cms-shadow-raised);
    transition: var(--cms-transition);
}

/* ---------------------------------------------------------------------------
 * Phone rhythm
 *
 * The only responsive rule in this file, and it is about breathing room rather than
 * arrangement — everything structural stays in `_layout.css`.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .cms-hero {
        padding-top: var(--cms-section-py-phone);
        padding-bottom: var(--cms-section-py-phone);
    }

    .cms-widget-grid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/*
 * Responsive layout — feature 013, ADR-0001.
 *
 * UNSCOPED ON PURPOSE. The theme files beside this one are each scoped to a single theme
 * because they declare colour and surface values, which differ per theme. Arrangement does
 * not: a listing collapses to one column on a phone whichever theme is selected. So these
 * rules carry no theme scope, and all three variants get them from one source rather than
 * from three copies drifting apart.
 *
 * `_base.css` is unscoped for the same class of reason — it describes which element is a
 * surface and which carries a border, which is also the same under every theme; only the
 * values differ, and those are what the theme files declare. See feature 017, ADR-0001.
 *
 * Named with a leading underscore so it sorts first in the concatenation the stylesheet
 * route serves — base arrangement first, theme colour after.
 *
 * Why arrangement lives here at all, rather than in Tailwind utilities in the Blade views:
 * a consuming project's build does not necessarily scan this package's views. `vendor/` is
 * normally git-ignored, which Tailwind 4's source detection skips, so utilities used only
 * here may compile to nothing on a client site. Measured on a real consumer: `sm:grid-cols`
 * present in its bundle, `md:grid-cols` absent. Rules in this file need no build anywhere.
 * See docs/responsive-layout.md.
 */

/* ---------------------------------------------------------------------------
 * Nothing exceeds the screen (AC-01, AC-08)
 *
 * Editor-authored content is arbitrary — a post body can carry an image wider than the
 * phone, a table of twelve columns, an embedded video sized for a desktop, or an unbroken
 * 100-character URL. None of it has classes of ours, so it is constrained at the container.
 * ------------------------------------------------------------------------- */

.cms-body img,
.cms-body video,
.cms-body iframe,
.cms-body embed,
.cms-body object {
    max-width: 100%;
}

.cms-body img,
.cms-body video {
    height: auto;
}

/* A long unbroken URL is the one case `overflow-wrap: break-word` alone does not catch. */
.cms-prose {
    overflow-wrap: anywhere;
}

/*
 * A wide table cannot be made narrow without destroying it, so it scrolls inside its own
 * box. This is the same principle as the deliberate scrollers: the component may scroll,
 * the page may not.
 */
.cms-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* ---------------------------------------------------------------------------
 * Listings (AC-04, AC-05)
 *
 * One item per row on a phone, widening in steps that never reduce. The desktop steps
 * reproduce what the twelve-column grid produced before this feature — two per row from
 * the tablet width, three from 1024, four from 1280 — so AC-03 and AC-13 hold.
 * ------------------------------------------------------------------------- */

.cms-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .cms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .cms-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .cms-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* `minmax(0, 1fr)` above is what stops a wide child stretching its own column. */
.cms-grid > * {
    min-width: 0;
}

.cms-card-media {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Post details (AC-02, AC-03)
 *
 * The illustration stacks above the body on a phone. From the tablet width it floats at half
 * width, which is the arrangement that shipped before this feature — `float` rather than a
 * flex row deliberately, because floating lets the text wrap beneath the illustration and a
 * two-column flex does not. AC-03 asks for desktop to be unchanged, not merely similar.
 *
 * PHYSICAL VALUES, NOT LOGICAL ONES, AND DELIBERATELY SO. The markup this replaced used
 * Tailwind's `float-left` and `mr-4` — physical, so the illustration sat on the left of the
 * article whatever the text direction. `float: inline-start` reads like the modern
 * equivalent and is not: this site shell is pinned to `dir="rtl"`, where inline-start
 * resolves to the RIGHT, so every existing post would move its illustration to the other
 * side of the page on upgrade. `float: left` reproduces what shipped. It also avoids a
 * browser floor — `inline-start` needs Chrome 118+, Safari 17.4+ and Firefox 129+, and
 * anything older drops the declaration and stacks the illustration at desktop too.
 *
 * `DesktopArrangementTest` asserts the side, not merely that it floats. Asserting only
 * "it floats, and the body is beside it" is true of both arrangements, which is how the
 * regression this comment describes reached review.
 * ------------------------------------------------------------------------- */

.cms-post-media {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    margin: 0 0 1rem;
}

@media (min-width: 768px) {
    .cms-post-media {
        float: left;
        width: 50%;
        margin-right: 1rem;
        margin-bottom: 1rem;
    }
}

/* The body clears the floated illustration so a short post cannot leave them overlapping. */
.cms-post::after {
    content: '';
    display: block;
    clear: both;
}

/* ---------------------------------------------------------------------------
 * Deliberate horizontal scrollers — the closed exemption list (grill D2)
 *
 * These three express their arrangement AS horizontal scrolling, and they work correctly
 * at phone width. They are exempt from the one-item-per-row rule; they are NOT exempt from
 * AC-01, which is asserted on the document. The component may scroll; the page may not.
 *
 * The rules live here for the same reason as everything else in this file: expressed as
 * `overflow-x-auto` utilities they would depend on a consuming project's build compiling
 * them, and a swipe row that silently stops scrolling is a worse defect than one that
 * never worked.
 * ------------------------------------------------------------------------- */

.cms-scroller {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.cms-scroller > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.cms-numbers--row .cms-scroller > * {
    min-width: 220px;
}

/* The partners marquee is clipped rather than scrolled — it moves on its own. */
.cms-partners--carousel .cms-scroller {
    overflow-x: hidden;
    scroll-snap-type: none;
}

/*
 * default — contemporary, quiet, neutral.
 *
 * The floor the other two are written against. White surfaces on a cool grey ground, hairline
 * borders, one soft shadow, and the client's colour confined to actions: buttons, links, chips,
 * the short rule above a section title. No surface in this theme is tinted by the brand, which
 * is what lets it carry an arbitrary primary without ever clashing.
 */

[data-ui-theme='default'] {
    /* Client roles — the shell overrides these inline from the active Theme record. */
    --cms-primary: #1D4ED8;
    --cms-on-primary: #FFFFFF;
    --cms-primary-tint: rgba(29, 78, 216, 0.08);
    --cms-accent: #1D4ED8;
    --cms-on-accent: #FFFFFF;

    /* Surfaces */
    --cms-page-bg: #F6F7F9;
    --cms-surface: #FFFFFF;
    --cms-surface-sunken: #FBFCFD;
    --cms-surface-inverse: #101720;
    --cms-surface-footer: #0A0F16;

    /* Ink */
    --cms-text: #16202B;
    --cms-text-muted: #5C6773;
    --cms-text-on-inverse: rgba(255, 255, 255, 0.78);

    /* Line */
    --cms-line: #E5E9ED;
    --cms-line-strong: #CDD4DB;
    --cms-card-border: 1px solid #E5E9ED;
    --cms-header-border: 1px solid #E5E9ED;
    --cms-btn-border: 1px solid transparent;

    /* Shape */
    --cms-radius-control: 8px;
    --cms-radius-card: 14px;
    --cms-radius-media: 14px;

    /* Depth — one shadow in the whole theme. */
    --cms-shadow-card: 0 1px 2px rgba(16, 32, 48, 0.04), 0 10px 30px -20px rgba(16, 32, 48, 0.28);
    --cms-shadow-raised: 0 4px 12px rgba(16, 32, 48, 0.12);

    /* Rhythm */
    --cms-section-py: 6rem;
    --cms-section-py-phone: 3.5rem;
    --cms-container: 75rem;
    --cms-gutter: 1.5rem;
    --cms-block-gap: 1.5rem;

    /* Type */
    --cms-font-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cms-font-display: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cms-h1-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    --cms-h1-weight: 600;
    --cms-h1-leading: 1.28;
    --cms-body-size: 1.03rem;
    --cms-body-leading: 1.9;
    --cms-label-size: 0.84rem;
    --cms-label-weight: 600;
    --cms-label-tracking: 0;

    /* Chrome — the block name the editor sees is not shown to the visitor. */
    --cms-widget-title-display: none;
    --cms-widget-title-size: 1.25rem;
    --cms-widget-title-weight: 600;
    --cms-widget-title-color: var(--cms-text-muted);

    --cms-transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

[data-ui-theme='default'] .cms-card:hover {
    box-shadow: 0 1px 2px rgba(16, 32, 48, 0.04), 0 18px 40px -24px rgba(16, 32, 48, 0.35);
}

/*
 * funky — high contrast, thick edges, hard shadow.
 *
 * The same energy the previous version had, rebuilt so it can be handed to a real client.
 * Four things changed, each for a stated reason (ADR-0001, feature 017):
 *
 * - The violet/fuchsia/cyan page gradient is gone. A gradient behind the whole document makes
 *   text contrast depend on where the text happens to sit, and it collides with any brand.
 *   The ground is one warm paper; the energy moved into the blocks.
 * - The fixed fuchsia is gone. The second colour is derived from the client's own primary and
 *   arrives as `--cms-accent`, so this theme is finally built out of the client's brand instead
 *   of ignoring it.
 * - Cards no longer sit permanently rotated 1deg — it fought a four-card grid and cropped
 *   image corners. The tilt survives as a hover.
 * - The hard shadow is mirrored. `6px 6px` drops it under the reading edge of an RTL page; the
 *   offset is now negative on the inline axis so it falls away from the text.
 */

[data-ui-theme='funky'] {
    --cms-primary: #1D4ED8;
    --cms-on-primary: #FFFFFF;
    --cms-primary-tint: rgba(29, 78, 216, 0.1);
    --cms-accent: #B45309;
    --cms-on-accent: #FFFBF2;

    --cms-page-bg: #FFFBF2;
    --cms-surface: #FFFFFF;
    /* The one theme whose recessed surface is the client's own colour. */
    --cms-surface-sunken: var(--cms-primary-tint);
    --cms-surface-inverse: #17120E;
    --cms-surface-footer: #17120E;

    --cms-text: #17120E;
    --cms-text-muted: #6A5F55;
    --cms-text-on-inverse: rgba(255, 251, 242, 0.75);

    --cms-line: #17120E;
    --cms-line-strong: #17120E;
    --cms-card-border: 3px solid #17120E;
    --cms-header-border: 3px solid #17120E;
    --cms-btn-border: 3px solid #17120E;

    --cms-radius-control: 999px;
    --cms-radius-card: 20px;
    --cms-radius-media: 16px;

    --cms-shadow-card: -6px 6px 0 0 #17120E;
    --cms-shadow-raised: -4px 4px 0 0 #17120E;

    --cms-section-py: 5rem;
    --cms-section-py-phone: 3.25rem;
    --cms-container: 70rem;
    --cms-gutter: 2rem;
    --cms-block-gap: 2.5rem;

    --cms-font-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cms-font-display: 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --cms-h1-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
    --cms-h1-weight: 900;
    --cms-h1-leading: 1.25;
    --cms-body-size: 1.03rem;
    --cms-body-leading: 1.9;
    --cms-label-size: 0.82rem;
    --cms-label-weight: 700;
    --cms-label-tracking: 0.02em;

    --cms-widget-title-display: block;
    --cms-widget-title-size: 1.875rem;
    --cms-widget-title-weight: 900;
    --cms-widget-title-color: var(--cms-text);

    --cms-transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

[data-ui-theme='funky'] .cms-header,
[data-ui-theme='funky'] .cms-hero,
[data-ui-theme='funky'] .cms-page-header {
    background-color: var(--cms-primary-tint);
}

[data-ui-theme='funky'] .cms-hero {
    border-bottom: 3px solid var(--cms-line);
}

/* The tilt, kept where it costs nothing: on the way in, not at rest. */
[data-ui-theme='funky'] .cms-card:hover {
    transform: rotate(-0.6deg) translateY(-0.4rem);
    box-shadow: -10px 10px 0 0 #17120E;
}

[data-ui-theme='funky'] .cms-body {
    font-weight: 500;
}

/*
 * minimal — editorial: paper, ink, and rules.
 *
 * No radius and no shadow anywhere; separation comes from a line or from space. The column is
 * the narrowest of the three on purpose — a long measure is the first thing that spoils Arabic
 * body copy — and the card stops being a box altogether: image, label, headline, held together
 * by the grid rather than by a border.
 *
 * Two corrections to the theme this replaces. Its block labels were set in `uppercase`, which
 * does nothing in Arabic (the script has no letter case) while its 0.2em tracking pulled the
 * joined letters apart — so the label is now carried by size, weight and a smaller positive
 * tracking. And the hero's negative letter-spacing is gone: Arabic takes none, ever.
 */

[data-ui-theme='minimal'] {
    --cms-primary: #1D4ED8;
    --cms-on-primary: #FBF9F4;
    --cms-primary-tint: rgba(29, 78, 216, 0.08);
    --cms-accent: #1D4ED8;
    --cms-on-accent: #FBF9F4;

    --cms-page-bg: #F1EEE7;
    --cms-surface: #FBF9F4;
    --cms-surface-sunken: #E9E4DA;
    --cms-surface-inverse: #1A1714;
    --cms-surface-footer: #1A1714;

    --cms-text: #1A1714;
    --cms-text-muted: #6B6259;
    --cms-text-on-inverse: rgba(241, 238, 231, 0.72);

    --cms-line: #D9D2C6;
    --cms-line-strong: #1A1714;
    --cms-card-border: 1px solid transparent;
    --cms-header-border: 2px solid #1A1714;
    --cms-btn-border: 2px solid transparent;

    --cms-radius-control: 0;
    --cms-radius-card: 0;
    --cms-radius-media: 0;

    --cms-shadow-card: none;
    --cms-shadow-raised: none;

    --cms-section-py: 4.5rem;
    --cms-section-py-phone: 3rem;
    --cms-container: 56rem;
    --cms-gutter: 2.5rem;
    --cms-block-gap: 3rem;

    --cms-font-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cms-font-display: 'Noto Naskh Arabic', 'IBM Plex Sans Arabic', Georgia, serif;
    --cms-h1-size: clamp(1.9rem, 1.3rem + 3vw, 3.5rem);
    --cms-h1-weight: 300;
    --cms-h1-leading: 1.4;
    --cms-body-size: 1.06rem;
    --cms-body-leading: 1.95;
    --cms-label-size: 0.78rem;
    --cms-label-weight: 500;
    --cms-label-tracking: 0.1em;

    /* The one theme that shows the editor's block name — editorial scaffolding is its manner. */
    --cms-widget-title-display: block;
    --cms-widget-title-size: 0.84rem;
    --cms-widget-title-weight: 500;
    --cms-widget-title-color: var(--cms-text-muted);

    --cms-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Structure a token cannot express: every section closes with a rule. */
[data-ui-theme='minimal'] .cms-section,
[data-ui-theme='minimal'] .cms-hero {
    border-bottom: 1px solid var(--cms-line);
}

[data-ui-theme='minimal'] .cms-widget-block:not(:last-child) {
    padding-bottom: var(--cms-block-gap);
    border-bottom: 1px solid var(--cms-line);
}

[data-ui-theme='minimal'] .cms-footer {
    border-top: 4px solid #1A1714;
}