/* =========================================================
   JUST FIZJO
   Global styles
   ========================================================= */


/* ---------------------------------------------------------
   01. VARIABLES
   --------------------------------------------------------- */

:root {
    /* Brand */
    --jf-blue: #0759d9;
    --jf-blue-hover: #064fc3;
    --jf-blue-light: #eef5ff;

    --jf-navy: #071c3d;
    --jf-navy-dark: #03152f;

    /* Neutral */
    --jf-white: #ffffff;
    --jf-background: #ffffff;
    --jf-surface: #f7f9fc;

    --jf-text: #081a38;
    --jf-text-muted: #667085;

    --jf-border: #e5eaf1;
    --jf-border-dark: rgba(255, 255, 255, 0.15);

    /* Layout */
    --jf-container: 1440px;
    --jf-container-wide: 1600px;
    --jf-container-narrow: 1180px;

    --jf-page-padding: 48px;
    --jf-section-space: 120px;

    /* Typography */
    --jf-font-primary: "Montserrat", Arial, Helvetica, sans-serif;

    /* Radius */
    --jf-radius-small: 6px;
    --jf-radius-medium: 10px;
    --jf-radius-large: 18px;

    /* Shadows */
    --jf-shadow-small: 0 8px 30px rgba(7, 28, 61, 0.06);
    --jf-shadow-medium: 0 18px 50px rgba(7, 28, 61, 0.10);

    /* Transitions */
    --jf-transition-fast: 180ms ease;
    --jf-transition: 280ms ease;

    /* Header */
    --jf-header-height: 100px;
}


/* ---------------------------------------------------------
   02. RESET
   --------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--jf-background);
    color: var(--jf-text);

    font-family: var(--jf-font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
    overflow: hidden;
}

main {
    display: block;
}

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

img {
    height: auto;
}

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

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

button {
    border: 0;
    cursor: pointer;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

::selection {
    background: var(--jf-blue);
    color: var(--jf-white);
}


/* ---------------------------------------------------------
   03. ACCESSIBILITY
   --------------------------------------------------------- */

:focus-visible {
    outline: 3px solid rgba(7, 89, 217, 0.35);
    outline-offset: 4px;
}

.jf-sr-only {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}


/* ---------------------------------------------------------
   04. CONTAINERS
   --------------------------------------------------------- */

.jf-container {
    width: min(
        calc(100% - (var(--jf-page-padding) * 2)),
        var(--jf-container)
    );

    margin-inline: auto;
}

.jf-container-wide {
    width: min(
        calc(100% - (var(--jf-page-padding) * 2)),
        var(--jf-container-wide)
    );

    margin-inline: auto;
}

.jf-container-narrow {
    width: min(
        calc(100% - (var(--jf-page-padding) * 2)),
        var(--jf-container-narrow)
    );

    margin-inline: auto;
}


/* ---------------------------------------------------------
   05. SECTIONS
   --------------------------------------------------------- */

.jf-section {
    position: relative;
    padding-block: var(--jf-section-space);
}

.jf-section-surface {
    background: var(--jf-surface);
}

.jf-section-dark {
    background: var(--jf-navy-dark);
    color: var(--jf-white);
}


/* ---------------------------------------------------------
   06. TYPOGRAPHY
   --------------------------------------------------------- */

.jf-eyebrow {
    display: block;
    margin-bottom: 14px;

    color: var(--jf-blue);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.jf-title {
    margin-bottom: 24px;

    color: var(--jf-text);

    font-size: clamp(38px, 4vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.jf-title strong {
    color: var(--jf-blue);
    font-weight: inherit;
}

.jf-section-title {
    margin-bottom: 20px;

    color: var(--jf-text);

    font-size: clamp(30px, 3vw, 48px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.jf-section-title strong {
    color: var(--jf-blue);
    font-weight: inherit;
}

.jf-lead {
    max-width: 680px;
    margin-bottom: 0;

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

    font-size: 18px;
    line-height: 1.75;
}

.jf-text {
    color: var(--jf-text-muted);
    line-height: 1.75;
}


/* ---------------------------------------------------------
   07. BUTTONS
   --------------------------------------------------------- */

.jf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 52px;
    padding: 0 26px;

    border: 1px solid transparent;
    border-radius: var(--jf-radius-small);

    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;

    transition:
        background-color var(--jf-transition),
        border-color var(--jf-transition),
        color var(--jf-transition),
        transform var(--jf-transition),
        box-shadow var(--jf-transition);
}

.jf-button:hover {
    transform: translateY(-2px);
}

.jf-button-primary {
    background: var(--jf-blue);
    color: var(--jf-white);
    box-shadow: 0 8px 24px rgba(7, 89, 217, 0.18);
}

.jf-button-primary:hover {
    background: var(--jf-blue-hover);
    box-shadow: 0 12px 30px rgba(7, 89, 217, 0.25);
}

.jf-button-outline {
    border-color: var(--jf-blue);
    background: transparent;
    color: var(--jf-blue);
}

.jf-button-outline:hover {
    background: var(--jf-blue);
    color: var(--jf-white);
}

.jf-button-text {
    min-height: auto;
    padding: 8px 0;

    border-radius: 0;
    background: transparent;
    color: var(--jf-blue);
    box-shadow: none;
}

.jf-button-text:hover {
    transform: none;
    color: var(--jf-blue-hover);
}

.jf-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: transform var(--jf-transition);
}

.jf-button:hover .jf-button-icon {
    transform: translateX(4px);
}


/* ---------------------------------------------------------
   08. UTILITIES
   --------------------------------------------------------- */

.jf-blue {
    color: var(--jf-blue);
}

.jf-text-center {
    text-align: center;
}

.jf-no-margin {
    margin: 0;
}


/* ---------------------------------------------------------
   09. RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1200px) {
    :root {
        --jf-page-padding: 36px;
        --jf-section-space: 100px;
        --jf-header-height: 90px;
    }
}

@media (max-width: 768px) {
    :root {
        --jf-page-padding: 24px;
        --jf-section-space: 80px;
        --jf-header-height: 78px;
    }

    body {
        font-size: 15px;
    }

    .jf-lead {
        font-size: 17px;
    }

    .jf-button {
        min-height: 50px;
        padding-inline: 22px;
    }
}

@media (max-width: 480px) {
    :root {
        --jf-page-padding: 20px;
        --jf-section-space: 68px;
    }

    .jf-title {
        font-size: 38px;
    }

    .jf-section-title {
        font-size: 30px;
    }
}


/* ---------------------------------------------------------
   10. REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}