/* ==========================================================================
   JobOoro
   Terms & Conditions Page
   Global Standard CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
    --terms-primary: #0f4c81;
    --terms-primary-dark: #0b3558;
    --terms-primary-soft: #eaf3fb;

    --terms-text: #172033;
    --terms-text-muted: #596579;
    --terms-heading: #101828;

    --terms-border: #dce3eb;
    --terms-border-strong: #c8d2df;

    --terms-surface: #ffffff;
    --terms-surface-muted: #f6f8fb;
    --terms-surface-soft: #f9fbfd;

    --terms-success: #176b45;

    --terms-radius-sm: 6px;
    --terms-radius-md: 10px;
    --terms-radius-lg: 16px;

    --terms-shadow-sm:
        0 2px 8px rgba(16, 24, 40, 0.05);

    --terms-shadow-md:
        0 8px 28px rgba(16, 24, 40, 0.08);

    --terms-content-width: 1180px;
    --terms-reading-width: 820px;

    --terms-space-1: 0.5rem;
    --terms-space-2: 0.75rem;
    --terms-space-3: 1rem;
    --terms-space-4: 1.5rem;
    --terms-space-5: 2rem;
    --terms-space-6: 3rem;
    --terms-space-7: 4rem;
    --terms-space-8: 5rem;
}


/* ==========================================================================
   Base
   ========================================================================== */

#main-content {
    width: 100%;
    min-width: 0;
}

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

#main-content a {
    color: var(--terms-primary);
}

#main-content a:hover {
    color: var(--terms-primary-dark);
}

#main-content a:focus-visible {
    outline: 3px solid rgba(15, 76, 129, 0.28);
    outline-offset: 3px;
    border-radius: 4px;
}

#main-content p,
#main-content li {
    color: var(--terms-text-muted);
    line-height: 1.8;
}

#main-content h1,
#main-content h2,
#main-content h3 {
    color: var(--terms-heading);
    line-height: 1.25;
}

#main-content p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

#main-content ul {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

#main-content li {
    margin-bottom: 0.75rem;
}


/* ==========================================================================
   Container
   ========================================================================== */

#main-content .container {
    width: min(
        calc(100% - 2rem),
        var(--terms-content-width)
    );

    margin-inline: auto;
}


/* ==========================================================================
   Typography helpers
   ========================================================================== */

#main-content .eyebrow {
    display: inline-block;

    margin: 0 0 0.75rem;

    color: var(--terms-primary);

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
}

#main-content .text-center {
    text-align: center;
}


/* ==========================================================================
   Breadcrumb
   ========================================================================== */

#main-content .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;

    margin: 0 0 2rem;

    font-size: 0.9rem;
}

#main-content .breadcrumb a {
    color: var(--terms-primary);
    font-weight: 600;
    text-decoration: none;
}

#main-content .breadcrumb a:hover {
    text-decoration: underline;
}

#main-content .breadcrumb span {
    color: var(--terms-text-muted);
}


/* ==========================================================================
   Legal Hero
   ========================================================================== */

#main-content .legal-hero {
    position: relative;

    padding: 4.5rem 0 5rem;

    background:
        linear-gradient(
            180deg,
            #f5f9fd 0%,
            #ffffff 100%
        );

    border-bottom: 1px solid var(--terms-border);
}

#main-content .legal-hero-content {
    max-width: 900px;
}

#main-content .legal-hero h1 {
    max-width: 900px;

    margin: 0 0 1.25rem;

    font-size: clamp(
        2.25rem,
        5vw,
        4rem
    );

    font-weight: 800;
    letter-spacing: -0.035em;
}

#main-content .legal-introduction {
    max-width: 850px;

    margin: 0 0 1.5rem;

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

    font-size: clamp(
        1.05rem,
        2vw,
        1.2rem
    );

    line-height: 1.8;
}

#main-content .legal-updated {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;

    margin: 0;

    padding: 0.7rem 1rem;

    background: var(--terms-surface);
    border: 1px solid var(--terms-border);
    border-radius: var(--terms-radius-sm);

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

    font-size: 0.9rem;

    box-shadow: var(--terms-shadow-sm);
}

#main-content .legal-updated strong {
    color: var(--terms-heading);
}


/* ==========================================================================
   Legal Content Section
   ========================================================================== */

#main-content .legal-content-section {
    padding: 4.5rem 0 6rem;

    background: var(--terms-surface);
}


/* ==========================================================================
   Main legal layout
   ========================================================================== */

#main-content .legal-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        280px;

    align-items: start;

    gap: 4rem;
}


/* ==========================================================================
   Legal document
   ========================================================================== */

#main-content .legal-document {
    width: 100%;
    max-width: var(--terms-reading-width);

    min-width: 0;
}

#main-content .legal-document-header {
    margin-bottom: 3.5rem;
    padding-bottom: 2.5rem;

    border-bottom: 1px solid var(--terms-border);
}

#main-content .legal-document-header h2 {
    margin: 0 0 1.25rem;

    font-size: clamp(
        1.75rem,
        3vw,
        2.25rem
    );

    letter-spacing: -0.02em;
}

#main-content .legal-document-header p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   Individual legal sections
   ========================================================================== */

#main-content .legal-section {
    scroll-margin-top: 2rem;

    margin: 0;
    padding: 0 0 3rem;
}

#main-content .legal-section + .legal-section {
    padding-top: 0.5rem;
}

#main-content .legal-section h2 {
    margin: 0 0 1.25rem;

    font-size: clamp(
        1.4rem,
        2.5vw,
        1.75rem
    );

    font-weight: 750;
    letter-spacing: -0.015em;
}

#main-content .legal-section p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   Legal lists
   ========================================================================== */

#main-content .legal-section ul {
    margin-top: 1.25rem;
    margin-bottom: 0;
}

#main-content .legal-section li {
    padding-left: 0.25rem;
}

#main-content .legal-section li::marker {
    color: var(--terms-primary);
    font-weight: 700;
}


/* ==========================================================================
   Legal links
   ========================================================================== */

#main-content .legal-document a {
    font-weight: 650;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#main-content .legal-document a:hover {
    text-decoration-thickness: 2px;
}


/* ==========================================================================
   Contact card
   ========================================================================== */

#main-content .legal-contact-card {
    margin-top: 2rem;
    padding: 1.75rem;

    background: var(--terms-surface-soft);

    border: 1px solid var(--terms-border);
    border-left: 4px solid var(--terms-primary);

    border-radius: var(--terms-radius-md);

    box-shadow: var(--terms-shadow-sm);
}

#main-content .legal-contact-card h3 {
    margin: 0 0 1.25rem;

    font-size: 1.25rem;
}

#main-content .legal-contact-card p {
    margin-bottom: 0.7rem;
}

#main-content .legal-contact-card p:last-child {
    margin-bottom: 0;
}

#main-content .legal-contact-card strong {
    color: var(--terms-heading);
}

#main-content .legal-contact-website {
    overflow-wrap: anywhere;
}


/* ==========================================================================
   Related information
   ========================================================================== */

#main-content .legal-related {
    margin-top: 1rem;
    padding-top: 3rem;

    border-top: 1px solid var(--terms-border);
}

#main-content .legal-related h2 {
    margin: 0 0 1rem;

    font-size: clamp(
        1.5rem,
        3vw,
        2rem
    );
}

#main-content .legal-related > p:not(.eyebrow) {
    max-width: 700px;
}


/* ==========================================================================
   Related links grid
   ========================================================================== */

#main-content .legal-related-links {
    display: grid;

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

    gap: 1rem;

    margin-top: 2rem;
}

#main-content .legal-related-link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    min-width: 0;

    padding: 1.25rem;

    color: var(--terms-text);
    text-decoration: none;

    background: var(--terms-surface);

    border: 1px solid var(--terms-border);
    border-radius: var(--terms-radius-md);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

#main-content .legal-related-link:hover {
    color: var(--terms-text);

    border-color: var(--terms-primary);

    box-shadow: var(--terms-shadow-md);

    transform: translateY(-2px);
}

#main-content .legal-related-link strong {
    color: var(--terms-heading);

    font-size: 1rem;
}

#main-content .legal-related-link span {
    color: var(--terms-text-muted);

    font-size: 0.92rem;
    line-height: 1.6;
}


/* ==========================================================================
   Sidebar
   ========================================================================== */

#main-content .legal-sidebar {
    position: sticky;
    top: 1.5rem;

    min-width: 0;
}

#main-content .legal-sidebar-card {
    overflow: hidden;

    background: var(--terms-surface);

    border: 1px solid var(--terms-border);
    border-radius: var(--terms-radius-md);

    box-shadow: var(--terms-shadow-sm);
}

#main-content .legal-sidebar-card h2 {
    margin: 0;

    padding: 1.25rem 1.25rem 1rem;

    background: var(--terms-surface-muted);

    border-bottom: 1px solid var(--terms-border);

    font-size: 1rem;
    font-weight: 800;
}

#main-content .legal-sidebar-card nav {
    display: flex;
    flex-direction: column;

    max-height: calc(100vh - 5rem);

    overflow-y: auto;
}

#main-content .legal-sidebar-card nav a {
    display: block;

    padding: 0.7rem 1.25rem;

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

    font-size: 0.88rem;
    font-weight: 600;

    line-height: 1.45;

    text-decoration: none;

    border-left: 3px solid transparent;

    transition:
        background-color 150ms ease,
        color 150ms ease,
        border-color 150ms ease;
}

#main-content .legal-sidebar-card nav a:hover {
    color: var(--terms-primary);

    background: var(--terms-primary-soft);

    border-left-color: var(--terms-primary);
}

#main-content .legal-sidebar-card nav a:focus-visible {
    color: var(--terms-primary);

    background: var(--terms-primary-soft);

    border-left-color: var(--terms-primary);
}


/* ==========================================================================
   Print-friendly legal document
   ========================================================================== */

@media print {

    #main-content .legal-hero {
        padding: 2rem 0;
        background: #ffffff;
    }

    #main-content .legal-content-section {
        padding: 2rem 0;
    }

    #main-content .legal-layout {
        display: block;
    }

    #main-content .legal-sidebar {
        display: none;
    }

    #main-content .legal-document {
        max-width: none;
    }

    #main-content .legal-related-link {
        color: #000000;
        box-shadow: none;
    }

    #main-content a {
        color: #000000;
        text-decoration: underline;
    }
}


/* ==========================================================================
   Large tablets
   ========================================================================== */

@media (max-width: 1050px) {

    #main-content .legal-layout {
        grid-template-columns:
            minmax(0, 1fr)
            240px;

        gap: 2.5rem;
    }

    #main-content .legal-sidebar-card nav a {
        padding-inline: 1rem;
    }
}


/* ==========================================================================
   Tablets
   ========================================================================== */

@media (max-width: 850px) {

    #main-content .legal-hero {
        padding: 3.5rem 0 4rem;
    }

    #main-content .legal-content-section {
        padding: 3.5rem 0 4.5rem;
    }

    #main-content .legal-layout {
        display: block;
    }

    #main-content .legal-document {
        max-width: none;
    }

    #main-content .legal-sidebar {
        position: static;

        margin-top: 3rem;
    }

    #main-content .legal-sidebar-card nav {
        display: grid;

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

        max-height: none;
    }

    #main-content .legal-sidebar-card nav a {
        border-bottom: 1px solid var(--terms-border);
    }

    #main-content .legal-related-links {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {

    #main-content .container {
        width: min(
            calc(100% - 1.25rem),
            var(--terms-content-width)
        );
    }

    #main-content .legal-hero {
        padding: 2.5rem 0 3rem;
    }

    #main-content .breadcrumb {
        margin-bottom: 1.5rem;

        font-size: 0.82rem;
    }

    #main-content .legal-hero h1 {
        margin-bottom: 1rem;

        font-size: 2.1rem;
        line-height: 1.15;
    }

    #main-content .legal-introduction {
        font-size: 1rem;
        line-height: 1.7;
    }

    #main-content .legal-updated {
        display: block;

        width: 100%;

        font-size: 0.85rem;
        line-height: 1.5;
    }

    #main-content .legal-content-section {
        padding: 2.75rem 0 4rem;
    }

    #main-content .legal-document-header {
        margin-bottom: 2.5rem;
        padding-bottom: 2rem;
    }

    #main-content .legal-document-header h2 {
        font-size: 1.55rem;
    }

    #main-content .legal-section {
        padding-bottom: 2.5rem;
    }

    #main-content .legal-section h2 {
        font-size: 1.35rem;
    }

    #main-content .legal-section p,
    #main-content .legal-section li {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    #main-content .legal-contact-card {
        padding: 1.25rem;
    }

    #main-content .legal-related-links {
        grid-template-columns: 1fr;
    }

    #main-content .legal-sidebar {
        margin-top: 2rem;
    }

    #main-content .legal-sidebar-card nav {
        grid-template-columns: 1fr;
    }

    #main-content .legal-sidebar-card nav a {
        padding: 0.75rem 1rem;
    }
}


/* ==========================================================================
   Very small screens
   ========================================================================== */

@media (max-width: 380px) {

    #main-content .container {
        width: calc(100% - 1rem);
    }

    #main-content .legal-hero h1 {
        font-size: 1.85rem;
    }

    #main-content .legal-section h2 {
        font-size: 1.25rem;
    }

    #main-content .legal-section p,
    #main-content .legal-section li {
        font-size: 0.92rem;
    }
}


/* ==========================================================================
   Reduced motion accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    #main-content *,
    #main-content *::before,
    #main-content *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}