/* Hidden Roots – Default Styles
   Reset, page ground and layout primitives. Components live beside their
   markup in template-parts/<component>/, page-specific CSS in css/pages/. */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--header-height);
}

body {
    margin:     0;
    background: var(--color-paper);
    overflow-x: clip;
}

img, svg, video, canvas, iframe {
    display:   block;
    max-width: 100%;
}

img {
    height: auto;
}

button {
    font:       inherit;
    color:      inherit;
    background: none;
    border:     0;
    padding:    0;
    cursor:     pointer;
}

figure {
    margin: 0;
}

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

.on-dark :focus-visible {
    outline-color: var(--color-sage);
}

.screen-reader-text {
    position:    absolute !important;
    width:       1px;
    height:      1px;
    overflow:    hidden;
    clip-path:   inset(50%);
    white-space: nowrap;
}

.skip-link:focus {
    position:   fixed;
    top:        var(--space-sm);
    left:       var(--space-sm);
    z-index:    200;
    width:      auto;
    height:     auto;
    clip-path:  none;
    padding:    var(--space-sm) var(--space-md);
    background: var(--color-bark);
    color:      var(--color-paper);
}

/* ── Layout ──────────────────────────────────────────────── */
.container {
    width:          100%;
    max-width:      calc(var(--container-width) + 2 * var(--gutter));
    margin-inline:  auto;
    padding-inline: var(--gutter);
}

.container-narrow {
    max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

.section {
    padding-block: var(--space-2xl);

    @media (min-width: 992px) {
        padding-block: var(--space-3xl);
    }
}

.section--linen  { background: var(--color-linen); }
.section--forest { background: var(--color-forest); }
.section--bark   { background: var(--color-bark); }

.section-header {
    max-width:     640px;
    margin-bottom: var(--space-xl);

    > :last-child {
        margin-bottom: 0;
    }

    &.is-centred {
        margin-inline: auto;
        text-align:    center;

        .eyebrow {
            justify-content: center;
        }
    }
}

/* Two columns from 992px – text beside an image */
.split {
    display:     grid;
    gap:         var(--space-xl);
    align-items: center;

    @media (min-width: 992px) {
        grid-template-columns: 1fr 1fr;
        gap:                   var(--space-2xl);
    }

    &.is-reversed > :first-child {
        @media (min-width: 992px) {
            order: 2;
        }
    }
}

/* ── Image frames ────────────────────────────────────────── */
/* An image that fills its frame; the frame sets the shape and ratio. */
.frame {
    position:      relative;
    overflow:      hidden;
    border-radius: var(--radius-lg);
    background:    var(--color-sand);
    isolation:     isolate;

    img {
        position:   absolute;
        inset:      0;
        width:      100%;
        height:     100%;
        object-fit: cover;
    }
}

.frame--arch     { border-radius: var(--radius-arch); }
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--tall     { aspect-ratio: 3 / 4; }
.frame--square   { aspect-ratio: 1; }
.frame--wide     { aspect-ratio: 16 / 10; }

/* A thin offset outline behind a frame – a joinery detail */
.frame-outline {
    position: relative;

    &::before {
        content:       '';
        position:      absolute;
        inset:         14px -14px -14px 14px;
        border:        1px solid var(--color-oak);
        border-radius: inherit;
        opacity:       .5;
        pointer-events: none;
    }
}

.frame--arch.frame-outline::before,
.frame-outline:has(> .frame--arch)::before {
    border-radius: var(--radius-arch);
}

/* ── Logo mark ───────────────────────────────────────────── */
/* The tree of life in a single brand colour. Sized by the component using it. */
.logo-mark {
    display:    block;
    background: var(--logo-colour);
    mask:       url('../../assets/images/logo-tree.png') center / contain no-repeat;
    transition: background-color var(--transition-base);
}

.on-dark,
.site-header.is-overlay:not(.is-scrolled),
.site-header.menu-open {
    --logo-colour: var(--color-sage);
}

/* ── Page content shell ──────────────────────────────────── */
.site-content {
    min-height: 60vh;
}