/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {
    /* Brand */
    --color-primary: #496af9;
    --color-primary-hover: #5472f9;

    /* Backgrounds */
    --color-background: #fafaf8;
    --color-background-secondary: #f3f4f6;
    --color-surface: #ffffff;

    /* Typography */
    --color-heading: #111827;
    --color-paragraph: #6b7280;

    /* Borders */
    --color-border: #e5e7eb;

    /* Layout */
    --container-width: 1240px;
    --container-padding: 24px;

    /* Radius */
    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 22px;
    --radius-pill: 12px;

    /* Motion */
    --transition-fast: 180ms ease;
    --transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);
    --transition-premium: 550ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Shadows */
    --shadow-small:
        0 1px 2px rgba(17, 24, 39, 0.03),
        0 4px 12px rgba(17, 24, 39, 0.04);

    --shadow-header:
        0 8px 30px rgba(17, 24, 39, 0.06),
        0 2px 8px rgba(17, 24, 39, 0.03);
}

/* ==========================================================
   RESET
========================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--color-background);
    color: var(--color-paragraph);
    font-family:
        "Plus Jakarta Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.navigation-open {
    overflow: hidden;
}

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

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

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

button {
    border: 0;
}
.home-hero .container {
    width: min(calc(100% - 80px), 1380px);
}
/* ==========================================================
   ACCESSIBILITY
========================================================== */

:focus-visible {
    outline: 3px solid rgba(73, 106, 249, 0.28);
    outline-offset: 4px;
}

/* ==========================================================
   CONTAINER
========================================================== */

.container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );
    margin-inline: auto;
}

/* ==========================================================
   WORDPRESS ADMIN BAR
========================================================== */
/* Normal visitors */
.site-header {
    top: 0;
}

/* Logged-in WordPress users — initial position */
.admin-bar .site-header {
    top: 22px;
}

/* Logged-in WordPress users — after scrolling */
.admin-bar .site-header.is-scrolled {
    top: 10px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header,
    .admin-bar .site-header.is-scrolled {
        top: 10px;
    }
}