/*
 * default-layout.css — styles for template-default-layout.php
 * Moved verbatim from inline <style> in template-default-layout.php (2.3.0); loaded only on
 * that template by m6m_template_styles() in functions.php.
 */

/* ============================================================
   DEFAULT LAYOUT TEMPLATE — scoped styles
   All selectors are prefixed .m6m-dlt-* to avoid collisions
   with other templates or plugin output.
   ============================================================ */

.m6m-dlt-canvas {
    box-sizing: border-box;
    width: 100%;
    background: var(--wp--preset--color--bg);
}

/* ── Title band — always renders (unlike the old full-photo hero,
   which only appeared when a featured image existed). The featured
   image, if set, becomes a dimmed background layer here instead of
   a dominant full-bleed photo — "crisp, minimalist background",
   per the brief, not a photography showcase (that's what /portfolio/
   and /albums/ are for). No image → a solid surface colour with a
   faint dot-grid texture instead. ── */
.m6m-dlt-hero-band {
    position: relative;
    overflow: hidden;
    background: var(--wp--preset--color--surface);
    border-bottom: 1px solid var(--wp--preset--color--border);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: var(--wp--preset--spacing--xl);
}
.m6m-dlt-hero-band__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.16;
}
.m6m-dlt-hero-band__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14,17,22,.4) 0%, var(--wp--preset--color--surface) 100%);
}
/* Fallback texture — only present when there's no featured image, so
   the two treatments never compete with each other. */
.m6m-dlt-hero-band--pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--wp--preset--color--accent-border) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.35;
}
.m6m-dlt-hero-band__inner {
    position: relative;
    z-index: 1;
}

/* Breadcrumb — high-contrast against the dark band, sits directly
   below the title per the brief. */
.m6m-dlt-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    font-size: 0.82rem;
}
.m6m-dlt-breadcrumb a {
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}
.m6m-dlt-breadcrumb a:hover,
.m6m-dlt-breadcrumb a:focus-visible {
    color: #fff;
    text-decoration: underline;
}
.m6m-dlt-breadcrumb__sep {
    color: var(--wp--preset--color--text-muted);
}
.m6m-dlt-breadcrumb__current {
    color: #fff;
    font-weight: 600;
}

.m6m-dlt-page-title {
    font-family: 'Barlow Condensed', 'EB Garamond', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--wp--preset--color--text);
    margin: 0;
}

/* Amber accent rule — matches section-header__accent used site-wide */
.m6m-dlt-accent {
    display: block;
    width: 56px;
    height: 4px;
    background: var(--wp--preset--color--accent);
    border-radius: 2px;
    margin-top: 0.75rem;
}

/* Optional page-level description / standfirst */
.m6m-dlt-standfirst {
    margin-top: var(--wp--preset--spacing--sm);
    font-size: clamp(1rem, 1.4vw, 1.175rem);
    line-height: 1.65;
    color: var(--wp--preset--color--text-secondary);
    max-width: 65ch;
}

/* ── Page body canvas — horizontal 5em safety padding for
   everything below the title band. ── */
.m6m-dlt-body {
    box-sizing: border-box;
    width: 100%;
    padding-inline: 5em;
    padding-bottom: var(--wp--custom--layout--section-py);
}

/* ── Layout wrapper — single centred reading column by default;
   becomes a 70/30 grid only when .m6m-dlt-has-sidebar is present. ── */
.m6m-dlt-layout {
    width: 100%;
    max-width: var(--wp--custom--layout--max-w);
    margin-inline: auto;
}
.m6m-dlt-layout.m6m-dlt-has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--wp--preset--spacing--xl);
    align-items: start;
}

/*
 * ── Unified article wrapper ────────────────────────────────
 * Owns the reading column's own width when there's no sidebar
 * (750–800px optimised reading measure); when a sidebar is present,
 * .m6m-dlt-layout already constrains the overall width and this
 * element just fills its grid track instead.
 */
.m6m-dlt-article {
    max-width: 780px;
    margin-inline: auto;
    width: 100%;
}
.m6m-dlt-has-sidebar .m6m-dlt-article {
    max-width: none;
    margin-inline: 0;
}

/* ── Entry content — WP block-editor output ───────────────── */
.m6m-dlt-content {
    color: var(--wp--preset--color--text);
    width: 100%;
}

.m6m-dlt-content h1,
.m6m-dlt-content h2,
.m6m-dlt-content h3,
.m6m-dlt-content h4,
.m6m-dlt-content h5,
.m6m-dlt-content h6 {
    color: var(--wp--preset--color--text);
    line-height: 1.25;
    margin-top: var(--wp--preset--spacing--lg);
    margin-bottom: var(--wp--preset--spacing--sm);
}

.m6m-dlt-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.m6m-dlt-content h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
.m6m-dlt-content h4 { font-size: 1.2rem; }

.m6m-dlt-content p {
    margin-bottom: var(--wp--preset--spacing--sm);
    line-height: 1.75;
    color: var(--wp--preset--color--text);
}

.m6m-dlt-content a {
    color: var(--wp--preset--color--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--standard), text-decoration-color var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}
.m6m-dlt-content a:hover,
.m6m-dlt-content a:focus-visible {
    color: var(--wp--preset--color--text);
}

.m6m-dlt-content ul,
.m6m-dlt-content ol {
    padding-left: 1.5em;
    margin-bottom: var(--wp--preset--spacing--sm);
    line-height: 1.75;
}

.m6m-dlt-content li {
    margin-bottom: 0.35em;
}

.m6m-dlt-content blockquote {
    border-left: 4px solid var(--wp--preset--color--accent);
    padding-left: var(--wp--preset--spacing--md);
    margin: var(--wp--preset--spacing--lg) 0;
    color: var(--wp--preset--color--text-secondary);
    font-style: italic;
    font-size: 1.1rem;
}

.m6m-dlt-content hr {
    border: none;
    border-top: 1px solid var(--wp--preset--color--border);
    margin: var(--wp--preset--spacing--lg) 0;
}

.m6m-dlt-content figure {
    margin: var(--wp--preset--spacing--lg) 0;
}

.m6m-dlt-content figure img {
    border-radius: var(--wp--custom--radius--md);
    width: 100%;
    height: auto;
}

.m6m-dlt-content figcaption {
    margin-top: 0.6rem;
    font-size: 0.825rem;
    color: var(--wp--preset--color--text-secondary);
    font-style: italic;
}

/* Gutenberg-standard alignment classes */
.m6m-dlt-content .alignleft  { float: left;  margin: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm) 0; }
.m6m-dlt-content .alignright { float: right; margin: 0 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); }
.m6m-dlt-content .aligncenter {
    display: block;
    margin-inline: auto;
    text-align: center;
}
/* Wide / full blocks break out of the reading column back to the
   article's own boundary (or the full layout width, if there's no
   sidebar to make room for). */
.m6m-dlt-content .alignwide {
    max-width: 780px;
    margin-inline: auto;
    width: 100%;
}
.m6m-dlt-has-sidebar .m6m-dlt-content .alignwide { max-width: none; }

/* ── Quick Links — sticky sidebar, sibling/child pages only.
   Minimalist text list with a left-border hover accent. ── */
.m6m-dlt-sidebar {
    position: sticky;
    top: calc(64px + 1.5rem); /* clears the sticky .site-header (64px tall) */
}
.admin-bar .m6m-dlt-sidebar { top: calc(64px + 32px + 1.5rem); }
.m6m-dlt-sidebar__heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--wp--preset--color--text-muted);
    margin: 0 0 0.75rem;
}
.m6m-dlt-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--wp--preset--color--border);
}
.m6m-dlt-sidebar__link {
    display: block;
    padding: 0.65rem 0.25rem 0.65rem 1rem;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--wp--preset--color--border);
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: border-color var(--wp--custom--duration--base) var(--wp--custom--easing--standard), color var(--wp--custom--duration--base) var(--wp--custom--easing--standard), background var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}
.m6m-dlt-sidebar__link:hover,
.m6m-dlt-sidebar__link:focus-visible {
    border-left-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--text);
    background: var(--wp--preset--color--accent-subtle);
}
.m6m-dlt-sidebar__link.is-current {
    border-left-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent);
    font-weight: 600;
}

/* ── Global focus ring — inherits site standard ───────────── */
.m6m-dlt-canvas *:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
    border-radius: var(--wp--custom--radius--sm);
}

/* ── Key Destinations — navigation matrix, replaces a plain link
   list or generic footer widget area with high-impact visual cards. ── */
.m6m-dlt-nextstep {
    background: var(--wp--preset--color--surface);
    border-top: 1px solid var(--wp--preset--color--border);
    padding-block: clamp(3rem, 6vw, 5rem);
    margin-top: clamp(3rem, 6vw, 5rem);
}
.m6m-dlt-nextstep__inner {
    max-width: var(--wp--custom--layout--max-w);
    margin-inline: auto;
    padding-inline: 5em;
    box-sizing: border-box;
}
.m6m-dlt-nextstep__kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--wp--preset--color--accent);
    margin-bottom: 0.5rem;
}
.m6m-dlt-nextstep__heading {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--wp--preset--color--text);
    margin: 0 0 2rem;
}
.m6m-dlt-nextstep__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wp--preset--spacing--md);
}
.m6m-dlt-nextstep__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.75rem 1.5rem;
    background: var(--wp--preset--color--surface-raised);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--radius--lg);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform var(--wp--custom--duration--medium) ease, box-shadow var(--wp--custom--duration--medium) ease, border-color var(--wp--custom--duration--medium) ease;
}
.m6m-dlt-nextstep__card:hover,
.m6m-dlt-nextstep__card:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0,0,0,.35);
    border-color: var(--wp--preset--color--accent-border);
}
.m6m-dlt-nextstep__card:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.m6m-dlt-nextstep__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--wp--preset--color--accent-subtle);
    color: var(--wp--preset--color--accent);
    flex-shrink: 0;
}
.m6m-dlt-nextstep__label {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wp--preset--color--text);
    transition: color var(--wp--custom--duration--base) ease;
}
.m6m-dlt-nextstep__card:hover .m6m-dlt-nextstep__label,
.m6m-dlt-nextstep__card:focus-visible .m6m-dlt-nextstep__label {
    color: var(--wp--preset--color--accent);
}
.m6m-dlt-nextstep__arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wp--preset--color--text-secondary);
    margin-top: -0.4rem;
    transition: color var(--wp--custom--duration--base) ease, transform var(--wp--custom--duration--base) ease;
}
.m6m-dlt-nextstep__card:hover .m6m-dlt-nextstep__arrow,
.m6m-dlt-nextstep__card:focus-visible .m6m-dlt-nextstep__arrow {
    color: var(--wp--preset--color--accent);
    transform: translateX(4px);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .m6m-dlt-body { padding-inline: 3em; }
    .m6m-dlt-nextstep__inner { padding-inline: 3em; }
    .m6m-dlt-nextstep__grid { grid-template-columns: repeat(2, 1fr); }
    .m6m-dlt-layout.m6m-dlt-has-sidebar { grid-template-columns: 1fr; }
    .m6m-dlt-sidebar { position: static; margin-top: var(--wp--preset--spacing--xl); }
    .m6m-dlt-has-sidebar .m6m-dlt-article { max-width: 780px; margin-inline: auto; }
}
@media (max-width: 768px) {
    .m6m-dlt-body { padding-inline: 2em; }
    .m6m-dlt-nextstep__inner { padding-inline: 2em; }
}
@media (max-width: 640px) {
    .m6m-dlt-nextstep__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .m6m-dlt-body { padding-inline: 1.25em; }
    .m6m-dlt-nextstep__inner { padding-inline: 1.25em; }
}
@media (prefers-reduced-motion: reduce) {
    .m6m-dlt-nextstep__card,
    .m6m-dlt-nextstep__label,
    .m6m-dlt-nextstep__arrow {
        transition: none;
    }
    .m6m-dlt-nextstep__card:hover { transform: none; }
}
@media (forced-colors: active) {
    .m6m-dlt-nextstep__card { border: 2px solid ButtonText; }
    .m6m-dlt-nextstep__card:focus-visible { outline: 3px solid Highlight; }
}

    .m6m-dlt-testi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--wp--preset--spacing--lg);
    }
    .m6m-dlt-testi-card {
        background: var(--wp--preset--color--surface-raised);
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 8px;
        padding: 1.75rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .m6m-dlt-testi-card__quote {
        margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--wp--preset--color--text);
    }
    .m6m-dlt-testi-card__quote::before { content: "\201C"; }
    .m6m-dlt-testi-card__quote::after  { content: "\201D"; }
    .m6m-dlt-testi-card__attribution { margin: 0; font-size: 0.85rem; color: var(--wp--preset--color--text-secondary); }
    .m6m-dlt-testi-card__attribution strong { color: var(--wp--preset--color--text); }