/*
 * miPress default theme.
 *
 * Warm rather than the blue every CMS default reaches for: espresso as ink,
 * dandelion as the one accent, stone as ground. The same three families the
 * control panel uses, so a site and its admin look like one product.
 *
 * Written against the class names the core block views emit rather than by
 * replacing those views. Ten block types are styled here and the theme carries
 * no block templates at all - which is also the proof that the fallback chain
 * works.
 *
 * Plain CSS on purpose. Sites have no Node and never will.
 */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light;

    --ink: oklch(0.25 0.04 58);
    --ink-soft: oklch(0.46 0.05 62);
    --ink-faint: oklch(0.55 0.015 90);

    --ground: oklch(0.99 0.004 90);
    --ground-raised: oklch(1 0 0);
    --ground-sunken: oklch(0.965 0.005 90);

    --line: oklch(0.9 0.008 85);
    --line-soft: oklch(0.94 0.006 85);

    --accent: oklch(0.68 0.14 85);
    --accent-ink: oklch(0.3 0.045 60);
    --accent-wash: oklch(0.96 0.06 95);

    --danger: oklch(0.55 0.16 27);
    --danger-wash: oklch(0.96 0.03 27);
    --good: oklch(0.52 0.11 155);
    --good-wash: oklch(0.96 0.04 155);

    --measure: 68ch;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --width: 68rem;
    --radius: 0.75rem;

    --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/*
 * Dark is not an inversion. Espresso moves up into the light end rather than
 * the ground turning grey, so the warmth survives; the accent loses saturation
 * because a dandelion that reads as friendly on white glares on near-black.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-appearance='light']) {
        color-scheme: dark;

        --ink: oklch(0.93 0.02 85);
        --ink-soft: oklch(0.8 0.035 78);
        --ink-faint: oklch(0.65 0.02 85);

        --ground: oklch(0.17 0.014 60);
        --ground-raised: oklch(0.21 0.016 60);
        --ground-sunken: oklch(0.14 0.012 60);

        --line: oklch(0.3 0.014 60);
        --line-soft: oklch(0.25 0.012 60);

        --accent: oklch(0.79 0.11 90);
        --accent-ink: oklch(0.17 0.014 60);
        --accent-wash: oklch(0.26 0.03 85);

        --danger: oklch(0.7 0.13 27);
        --danger-wash: oklch(0.26 0.04 27);
        --good: oklch(0.72 0.1 155);
        --good-wash: oklch(0.24 0.04 155);
    }
}

:root[data-appearance='dark'] {
    color-scheme: dark;

    --ink: oklch(0.93 0.02 85);
    --ink-soft: oklch(0.8 0.035 78);
    --ink-faint: oklch(0.65 0.02 85);

    --ground: oklch(0.17 0.014 60);
    --ground-raised: oklch(0.21 0.016 60);
    --ground-sunken: oklch(0.14 0.012 60);

    --line: oklch(0.3 0.014 60);
    --line-soft: oklch(0.25 0.012 60);

    --accent: oklch(0.79 0.11 90);
    --accent-ink: oklch(0.17 0.014 60);
    --accent-wash: oklch(0.26 0.03 85);

    --danger: oklch(0.7 0.13 27);
    --danger-wash: oklch(0.26 0.04 27);
    --good: oklch(0.72 0.1 155);
    --good-wash: oklch(0.24 0.04 155);
}

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

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

body {
    margin: 0;
    /* Explicit, not inherited: without it the page borrows whatever ground the
       browser paints and one theme's text lands on the other's background. */
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-thickness: 2px;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

h1,
h2,
h3 {
    /* A long unbroken word - a URL in a heading - must not widen the page. */
    overflow-wrap: anywhere;
    text-wrap: balance;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0;
}

h1 {
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    font-weight: 660;
}

h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 640;
    margin-bottom: 0.75rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 620;
}

p {
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.site-header,
.site-footer,
.section-inner,
.entry-inner {
    width: min(var(--width), calc(100% - var(--gutter) * 2));
    margin-inline: auto;
}

.site-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--line-soft);
}

.brand {
    font-weight: 680;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    margin-right: auto;
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.site-nav a {
    color: var(--ink-soft);
    text-decoration: none;
    padding-block: 0.25rem;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.shell-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--ground-raised);
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1;
}

.theme-toggle:hover {
    color: var(--ink);
    border-color: var(--accent);
}

.site-footer {
    margin-top: 5rem;
    padding-block: 2.5rem 3.5rem;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.cms-site-footer-text,
.cms-site-footer-address,
.cms-site-footer-company {
    margin: 0;
    white-space: pre-line;
}

.cms-site-footer-contact,
.cms-site-footer-company,
.cms-site-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
}

.cms-site-footer-address {
    margin-top: 0.75rem;
    font-style: normal;
}

.cms-site-footer-social {
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------------------
   Sections and shared block furniture
   -------------------------------------------------------------------------- */

.page-section {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.page-section + .page-section {
    border-top: 1px solid var(--line-soft);
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: var(--accent-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rich-text {
    max-width: var(--measure);
    color: var(--ink-soft);
    font-size: 1.0625rem;
}

.rich-text > :first-child {
    margin-top: 0;
}

.rich-text > :last-child {
    margin-bottom: 0;
}

.rich-text a {
    text-decoration: underline;
}

.rich-text blockquote {
    margin: 1.75rem 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--accent);
    color: var(--ink);
    font-style: italic;
}

.rich-text figure.cms-rich-text-media {
    margin: 1.75rem 0;
}

.rich-text figure.cms-rich-text-media img {
    border-radius: var(--radius);
    background: var(--ground-sunken);
}

.rich-text figure.cms-rich-text-media figcaption {
    margin-top: 0.5rem;
    color: var(--ink-faint);
    font-size: 0.875rem;
}

.button {
    display: inline-flex;
    align-items: center;
    min-height: 2.875rem;
    margin-top: 1.75rem;
    padding-inline: 1.375rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 660;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    filter: brightness(1.06);
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 26rem);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.split.is-reversed {
    grid-template-columns: minmax(280px, 26rem) minmax(0, 1fr);
}

.split.is-reversed .split-media {
    order: -1;
}

.media-frame {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--ground-sunken);
}

/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 1rem;
}

.gallery-grid figure {
    margin: 0;
}

.gallery-grid img {
    border-radius: var(--radius);
    background: var(--ground-sunken);
}

.gallery-grid figcaption {
    margin-top: 0.5rem;
    color: var(--ink-faint);
    font-size: 0.875rem;
}

/* Call to action */
.cta {
    padding: clamp(1.75rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) * 1.5);
    background: var(--accent-wash);
}

.cta .rich-text {
    color: var(--ink);
}

/* Forms */
.cf-form {
    max-width: 34rem;
    margin-top: 1.75rem;
}

.cf-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.cf-label {
    font-size: 0.9375rem;
    font-weight: 600;
}

.cf-input {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--ground-raised);
    color: inherit;
    font: inherit;
}

.cf-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}

.cf-input--error {
    border-color: var(--danger);
}

.cf-textarea {
    min-height: 8rem;
    resize: vertical;
}

.cf-field-error {
    color: var(--danger);
    font-size: 0.875rem;
}

.cf-success,
.cf-error {
    max-width: 34rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
}

.cf-success {
    border: 1px solid var(--good);
    background: var(--good-wash);
}

.cf-error {
    border: 1px solid var(--danger);
    background: var(--danger-wash);
}

/* Embed */
.cms-embed {
    margin: 2.5rem 0;
}

.cms-embed-ratio {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: #000;
}

.cms-embed-ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cms-embed-caption {
    margin-top: 0.5rem;
    color: var(--ink-faint);
    font-size: 0.875rem;
    text-align: center;
}

.cms-embed-fallback {
    text-align: center;
}

/* Pricing */
.cms-pricing {
    margin: 2.5rem 0;
}

.cms-pricing-heading {
    font-size: 1.6rem;
    font-weight: 640;
    margin-bottom: 0.75rem;
}

.cms-pricing-intro {
    margin-bottom: 1.25rem;
    color: var(--ink-soft);
}

.cms-pricing-list {
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.cms-pricing-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: var(--ground-raised);
    border-bottom: 1px solid var(--line-soft);
}

.cms-pricing-row:last-child {
    border-bottom: none;
}

.cms-pricing-row:nth-child(even) {
    background: var(--ground-sunken);
}

.cms-pricing-label {
    flex: 1;
    min-width: 0;
}

.cms-pricing-name {
    font-weight: 600;
}

.cms-pricing-desc {
    margin-top: 0.2rem;
    color: var(--ink-faint);
    font-size: 0.875rem;
}

.cms-pricing-price {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
    .site-header {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    .brand {
        margin-right: 0;
        flex: 1 0 auto;
    }

    .site-nav {
        order: 3;
        width: 100%;
    }

    .split,
    .split.is-reversed {
        grid-template-columns: 1fr;
    }

    .split.is-reversed .split-media {
        order: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Entries, archives and notices

   Written after the views that use them, unlike the block rules above - those
   had core markup to answer to, these did not exist yet.
   -------------------------------------------------------------------------- */

.lede {
    max-width: var(--measure);
    color: var(--ink-soft);
    font-size: 1.15rem;
    line-height: 1.6;
}

.entry {
    max-width: var(--measure);
}

.entry > h1 {
    margin-bottom: 1.5rem;
}

.entry-field + .entry-field {
    margin-top: 2rem;
}

/*
 * A field label, not a heading in the document's argument. Sized down and
 * lettered out so it reads as the name of the thing below it - the entry's
 * title is the only real heading on the page.
 */
.entry-field-label {
    margin-bottom: 0.4rem;
    color: var(--ink-faint);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/*
 * Cards size themselves to the space rather than to a column count, so an
 * archive of three entries and one of thirty both look deliberate. `minmax`
 * with `min()` because a bare `1fr` minimum is `auto`, which is the widest
 * word in the card - one long title and the grid overflows sideways.
 */
.section-inner:has(> .card) {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line-soft);
}

.card-media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    object-fit: cover;
}

.card-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    text-wrap: balance;
}

.card-title a {
    color: inherit;
    text-decoration: none;
}

.card-title a:hover,
.card-title a:focus-visible {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.card-excerpt {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* Laravel's paginator markup, kept legible without adopting its utilities. */
.pagination {
    grid-column: 1 / -1;
    margin-top: 1rem;
    font-size: 0.9375rem;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    color: var(--ink-soft);
    text-decoration: none;
}

.pagination a:hover,
.pagination a:focus-visible {
    color: var(--accent-ink);
    text-decoration: underline;
}

/*
 * The error and closed-site shell. Centred and short: there is nothing to read
 * here beyond one sentence, and the visitor's next move is the only thing on
 * the page that matters.
 */
.notice {
    display: flex;
    min-height: 70vh;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.notice .section-inner {
    display: flex;
    max-width: 32rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.notice-code {
    margin: 0;
    color: var(--ink-faint);
    font-size: clamp(3rem, 12vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.notice h1 {
    margin: 0;
    font-size: 1.35rem;
}

/* --------------------------------------------------------------------------
   Consent placeholder

   Shown instead of an embed nobody has agreed to yet. The core ships the
   markup and no colours at all, so this is the theme's job - and it has to
   look deliberate rather than broken, because a visitor who thinks the video
   failed to load will not read the button.
   -------------------------------------------------------------------------- */

.cms-embed-consent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ground-sunken);
}

.cms-embed-consent-body {
    display: flex;
    max-width: 32rem;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

.cms-embed-consent-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.cms-embed-consent-text {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.cms-embed-consent-cookies {
    margin: 0;
    color: var(--ink-faint);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.cms-embed-consent-actions {
    margin-top: 0.4rem;
}

.cms-embed-consent-button {
    padding: 0.6rem 1.1rem;
    border: 0;
    border-radius: calc(var(--radius) - 0.25rem);
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

.cms-embed-consent-button:hover,
.cms-embed-consent-button:focus-visible {
    filter: brightness(0.95);
}

.cms-embed-consent-policy {
    margin: 0;
    font-size: 0.8125rem;
}

.cms-embed-consent-policy a {
    color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Consent banner and privacy settings

   The core ships structure and no colours at all. Accepting and refusing look
   the same on purpose - a refuse button styled as a quiet link is a dark
   pattern whatever the markup says.
   -------------------------------------------------------------------------- */

.mp-consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    border-top: 1px solid var(--line);
    background: var(--ground-raised);
    box-shadow: 0 -8px 30px oklch(0 0 0 / 0.08);
}

.mp-consent-inner {
    width: min(var(--width), calc(100% - var(--gutter) * 2));
    margin-inline: auto;
    padding-block: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mp-consent-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 640;
}

.mp-consent-intro,
.mp-consent-policy {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.mp-consent-actions,
.mp-privacy-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Same element, same size, same weight. Only the ground differs. */
.mp-consent-button {
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) - 0.25rem);
    background: var(--ground);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
}

.mp-consent-button--accept {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
}

.mp-consent-button:hover,
.mp-consent-button:focus-visible {
    filter: brightness(0.97);
}

.mp-consent-details summary {
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.mp-consent-categories {
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
}

.mp-consent-category label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.mp-consent-category-text {
    margin: 0.25rem 0 0 1.6rem;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

.mp-consent-services {
    margin: 0.4rem 0 0 1.6rem;
    padding: 0;
    list-style: none;
    color: var(--ink-faint);
    font-size: 0.8125rem;
}

.mp-consent-service-cookies {
    overflow-wrap: anywhere;
}

/*
 * Opened by the footer link, closed otherwise. `:target` rather than a script,
 * so changing your mind never depends on JavaScript having loaded.
 */
.mp-privacy-settings:not(:target) {
    display: none;
}

.mp-privacy-settings {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background: oklch(0 0 0 / 0.45);
}

.mp-privacy-settings-inner {
    width: min(36rem, 100%);
    max-height: 85vh;
    overflow-y: auto;
    padding: clamp(1.25rem, 4vw, 2rem);
    border-radius: var(--radius);
    background: var(--ground-raised);
}

.mp-privacy-settings-title {
    margin: 0 0 1rem;
    font-size: 1.35rem;
}

.mp-privacy-settings-withdraw {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
}

.mp-privacy-settings-note,
.mp-privacy-settings-policy {
    margin: 0.5rem 0 0;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

.mp-privacy-settings-close {
    display: inline-block;
    margin-top: 1.25rem;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.site-footer-privacy {
    margin: 0.75rem 0 0;
}