/*
 * =============================================================================
 * MAEDA SITE — M0
 * Product CSS: composition and layout only.
 * =============================================================================
 *
 * Rules this file obeys (briefing §15/§16):
 *
 * - No color, spacing, type or stroke value is invented here: every value is
 *   an existing --ms-* token.
 * - No design-system primitive is re-implemented here. Anatomy comes from
 *   /maeda-ui/src/css; this file only arranges regions on the page.
 * - No product-local design token exists (no --homepage-*, --hero-*).
 *
 * =============================================================================
 */


/* =============================================================================
   SKIP LINK — accessibility scaffolding, not a visual pattern
   ============================================================================= */

.site-skip {

    position: absolute;

    left: var(--ms-space-4);
    top: var(--ms-space-4);

    transform: translateY(-250%);

    padding:
        var(--ms-space-2)
        var(--ms-space-3);

    background: var(--ms-color-surface);

    border: var(--ms-border-default);

    z-index: var(--ms-z-index-toast);

}

.site-skip:focus {

    transform: none;

}


/* =============================================================================
   PAGE MEASURE — documentation-layout's single measured column
   ============================================================================= */

.site-column {

    max-width: 64rem;

}


/* =============================================================================
   GLOBAL BAR
   ============================================================================= */

.site-bar {

    position: sticky;

    top: 0;

    z-index: var(--ms-z-index-raised);

}

/* .c-navbar lays out a single flex child here (this row); the row itself
   carries the brand/nav/actions layout the component normally applies
   directly, capped to the page measure (.site-column) so the bar's
   content lines up with the rest of the page instead of hugging the
   viewport edge. The bar's own background/border/padding stay full-width
   and untouched — only the content inside is inset. */
.site-bar__row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--ms-space-5);

    width: 100%;

    margin-inline: auto;

}

/* Theme toggle: icon-only button (svg-kit/icons/sun.svg, moon.svg). The
   visible icon states the action, same as the label it replaces — sun
   while dark is active (action: go light), moon while light is active
   (action: go dark). Pure attribute selector, no JS beyond site.js's
   existing data-theme flip. */
.site-theme-icon--moon {

    display: none;

}

:root[data-theme="light"] .site-theme-icon--sun {

    display: none;

}

:root[data-theme="light"] .site-theme-icon--moon {

    display: inline;

}


/* =============================================================================
   HERO
   ============================================================================= */

.site-hero {

    margin-top: var(--ms-space-8);

}

.site-hero__actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: var(--ms-space-4);

    margin-top: var(--ms-space-6);

}

.site-badges,
.site-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--ms-space-3);

}


/* =============================================================================
   SECTIONS
   ============================================================================= */

.site-section {

    /* anchors land below the sticky global bar */
    scroll-margin-top: var(--ms-space-8);

}

.site-lead,
.site-prose {

    max-width: 70ch;

}

.site-prose p + p {

    margin-top: var(--ms-space-4);

}


/* =============================================================================
   OFFERING GRID — 1 column, 2 columns from the tablet breakpoint
   ============================================================================= */

.site-offer {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--ms-space-5);

    margin-top: var(--ms-space-6);

}

.site-icon {

    width: 1.25rem;
    height: 1.25rem;

    flex-shrink: 0;

    color: var(--ms-color-text-muted);

}


/* =============================================================================
   TABLES — keep the measure on small screens
   ============================================================================= */

.site-scroll {

    overflow-x: auto;

}


/* =============================================================================
   METHOD
   ============================================================================= */

.site-method-notes {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--ms-space-4);

    margin-top: var(--ms-space-6);

}


/* =============================================================================
   COMPANY
   ============================================================================= */

.site-company-facts {

    margin-top: var(--ms-space-5);

}


/* =============================================================================
   CONTACT
   ============================================================================= */

.site-contact__question {

    font-size: var(--ms-font-size-xl);

    max-width: 40ch;

}

.site-contact__mail {

    margin-top: var(--ms-space-3);

    font-size: var(--ms-font-size-lg);

}

/* Standalone link: give it a pointer target of at least 24x24 (WCAG 2.2
   SC 2.5.8). Inline links inside prose rely on the inline exception; this
   one is its own paragraph, so the padding is added here, not in the DS. */
.site-contact__mail .c-link {

    display: inline-block;

    padding-block: var(--ms-space-1);

}

.site-contact__note {

    margin-top: var(--ms-space-2);

    color: var(--ms-color-text-muted);

}

.site-contact__action {

    margin-top: var(--ms-space-5);

}


/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer {

    margin-top: var(--ms-space-9);

    padding-bottom: var(--ms-space-7);

}

.site-footer__row {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: var(--ms-space-2) var(--ms-space-5);

    margin-top: var(--ms-space-4);

    font-size: var(--ms-font-size-xs);

    letter-spacing: var(--ms-letter-spacing-wide);

    text-transform: uppercase;

    color: var(--ms-color-text-muted);

}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* 48em = --ms-breakpoint-tablet */

@media (min-width: 48em) {

    .site-offer {

        grid-template-columns: repeat(2, 1fr);

    }

    .site-method-notes {

        grid-template-columns: repeat(3, 1fr);

    }

}

@media (max-width: 48em) {

    /* The global bar wraps to several rows on narrow viewports; pinning it
       would consume too much of the viewport, so it scrolls away instead. */
    .site-bar {

        position: static;

    }

    /* Mirrors .c-navbar's own wrap rule (navbar.css) at the same breakpoint:
       with the row now carrying the flex layout instead of .c-navbar
       directly, it needs the same wrap behavior to keep mobile unchanged. */
    .site-bar__row {

        flex-wrap: wrap;

        gap: var(--ms-space-3);

    }

    .site-hero__actions {

        flex-direction: column;

        align-items: flex-start;

    }

}