/* Immersify – Default Styles
   Reset, page ground, layout primitives. Everything else lives in its own
   file: css/base (typography, buttons, content, effects), the components under
   template-parts/ and each block's CSS beside it in templates/blocks/<slug>/. */

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

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

/* Smooth scrolling only while something has focus – i.e. after clicking an
   in-page link. A plain html { scroll-behavior: smooth } also animates the
   browser's own scrolling: loading a page at #services, or restoring your
   position on Back, would start at the top and glide down. */
@media (prefers-reduced-motion: no-preference) {
    html:focus-within {
        scroll-behavior: smooth;
    }
}

body {
    margin:     0;
    background: var(--color-black);
    overflow-x: hidden;
    min-height: 100vh;
}

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

img {
    height: auto;
}

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

ul, ol {
    margin-top: 0;
}

iframe {
    border: 0;
}

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

.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:    100;
    width:      auto;
    height:     auto;
    clip-path:  none;
    padding:    var(--space-sm) var(--space-md);
    background: var(--color-snow);
    color:      var(--color-black);
}

/* ── 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));
}

/* Every flexible-content block is a .block section – one rhythm site-wide */
.block {
    padding-block: var(--space-2xl);

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

.block-header {
    margin-bottom: var(--space-xl);

    h2 {
        margin-bottom: 0;
    }
}

/* Auto-fitting card grid: as many columns as fit at the minimum width */
.grid {
    display:               grid;
    gap:                   var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 240px), 100%), 1fr));
}

.page-content {
    padding-bottom: var(--space-xl);
}

.embed-container {
    position:     relative;
    aspect-ratio: 16 / 9;

    iframe, video {
        position: absolute;
        inset:    0;
        width:    100%;
        height:   100%;
    }
}

/* Images that cover their box (helpers in inc/image-functions.php) */
.fill-image {
    position:       absolute;
    inset:          0;
    width:          100%;
    height:         100%;
    object-fit:     cover;
    pointer-events: none;
}

.contain-image {
    position:       absolute;
    inset:          0;
    width:          100%;
    height:         100%;
    object-fit:     contain;
    pointer-events: none;
}

/* ── Card ────────────────────────────────────────────────── */
/* The branding's panel: graphite, a violet hairline that brightens on hover */
.card {
    background:    var(--color-graphite);
    border:        1px solid var(--color-violet-18);
    border-radius: var(--radius-lg);
    transition:    border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.card--link {
    display: block;

    &:hover,
    &:focus-visible {
        border-color: var(--color-violet-50);
        box-shadow:   var(--glow-violet);
        transform:    translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .card--link:hover {
        transform: none;
    }
}