/*
 * ============================================================
 * M.H College
 * File: 00-foundation.css
 * Purpose:
 * Global variables, resets, typography, containers and utilities
 * ============================================================
 */

:root {
    --bg: #080808;
    --bg-soft: #11100e;
    --surface: #15130f;
    --surface-2: #1d1912;

    --cream: #f3eadb;
    --cream-2: #e7d7bf;

    --gold: #d9ad57;
    --gold-light: #f5dc98;
    --gold-deep: #a66d26;
    --gold-dark: #704719;

    --text: #f7f2e8;
    --muted: #bbb2a4;

    --line: rgba(217, 173, 87, .28);
    --line-strong: rgba(245, 220, 152, .52);

    --shadow: 0 24px 70px rgba(0, 0, 0, .38);
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, .28);
    --shadow-gold: 0 18px 46px rgba(166, 109, 38, .24);

    --radius: 24px;
    --container: 1180px;

    --ease-luxury: cubic-bezier(.22, 1, .36, 1);

    --font: "Noto Sans Arabic", system-ui, sans-serif;
}

.lang-he {
    --font: "Noto Sans Hebrew", system-ui, sans-serif;
}

/*
 * Reset
 */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;

    background: var(--bg);
    color: var(--text);

    font-family: var(--font);
    line-height: 1.75;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

/*
 * Prevent grid and flex children from overflowing
 */

main,
section,
.container,
.hero-copy,
.hero-visual,
.trainer-content,
.trainer-visual,
.why-content,
.why-visual,
.split-copy,
.split-media,
.course-feature-copy,
.course-feature-media {
    min-width: 0;
}

/*
 * Main container
 */

.container {
    width: min(
        var(--container),
        calc(100% - 40px)
    );

    margin-inline: auto;
}

/*
 * Screen-reader-only content
 */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}

/*
 * Skip navigation link
 */

.skip-link {
    position: fixed;
    top: -100px;
    inset-inline-start: 16px;

    z-index: 9999;

    padding: 12px 18px;

    border-radius: 10px;

    background: var(--gold);
    color: #111;

    font-weight: 800;

    box-shadow: var(--shadow-soft);

    transition:
        top .25s ease,
        transform .25s ease;
}

.skip-link:focus {
    top: 16px;
}

/*
 * Shared icon sizing
 */

.icon {
    width: 1.35em;
    height: 1.35em;

    flex: 0 0 auto;
}

/*
 * Shared section layout
 */

.section {
    position: relative;

    padding: 92px 0;
}

.section-heading {
    max-width: 720px;

    margin-bottom: 42px;
}

.section-heading.centered {
    margin-inline: auto;

    text-align: center;
}

.eyebrow {
    margin: 0 0 10px;

    color: var(--gold-light);

    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .03em;
}

/*
 * Shared heading typography
 */

.section-heading h2,
.page-hero h1,
.split-copy h2,
.course-feature-copy h2 {
    margin: 0;

    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.25;
}

.section-heading p:last-child {
    margin: 12px 0 0;

    color: var(--muted);
}

/*
 * Shared text behavior
 */

.hero-copy,
.trainer-content,
.why-content,
.course-feature-copy,
.split-copy {
    overflow: visible;
}

.hero-copy p,
.trainer-content p,
.why-content p,
.course-feature-copy p,
.split-copy p {
    word-break: normal;
    overflow-wrap: break-word;
}

/*
 * ============================================================
 * Progressive reveal animation foundation
 *
 * Elements remain fully visible by default. JavaScript adds the
 * .reveal-ready class only when IntersectionObserver is available
 * and motion is allowed, preventing hidden content if JavaScript
 * fails or is disabled.
 * ============================================================
 */

.reveal.reveal-ready {
    opacity: 0;

    transform: translateY(26px);

    transition:
        opacity .72s ease,
        transform .82s var(--ease-luxury);

    will-change:
        opacity,
        transform;
}

.reveal.reveal-ready.visible {
    opacity: 1;

    transform: translateY(0);

    will-change: auto;
}

/*
 * Never hide or animate reveal content when the visitor requests
 * reduced motion.
 */

@media (prefers-reduced-motion: reduce) {
    .reveal.reveal-ready,
    .reveal.reveal-ready.visible {
        opacity: 1;

        transform: none;

        transition: none;

        will-change: auto;
    }
}