/* =========================================================
   VARKA SWEETS & BAKERS
   LEGAL / POLICY PAGES
   Refined Premium Responsive CSS

   Used by:
   - privacy-policy.php
   - terms.php
   - shipping-policy.php
   - refund-policy.php

   Header / Footer CSS intentionally excluded.
========================================================= */


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

:root {

    --legal-bg: #fbf8f4;
    --legal-white: #ffffff;

    --legal-burgundy: #7e1824;
    --legal-burgundy-dark: #5c111a;
    --legal-burgundy-soft: #fbf0f1;

    --legal-gold: #c49a52;
    --legal-gold-soft: #f7edda;

    --legal-text: #28211e;
    --legal-text-soft: #625852;
    --legal-muted: #8d817a;

    --legal-border: #eadfd8;
    --legal-border-soft: #f2ebe6;

    --legal-success: #277653;

    --legal-radius-xl: 30px;
    --legal-radius-lg: 22px;
    --legal-radius-md: 15px;

    --legal-shadow:
        0 24px 70px rgba(63, 35, 24, .075);

    --legal-shadow-soft:
        0 12px 35px rgba(63, 35, 24, .055);

    --legal-serif:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    --legal-sans:
        "DM Sans",
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


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

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(196, 154, 82, .075),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(126, 24, 36, .045),
            transparent 30%
        ),
        var(--legal-bg);

    color: var(--legal-text);

    font-family: var(--legal-sans);

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


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


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


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


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

.policy-page .container {

    width:
        min(
            1280px,
            calc(100% - 48px)
        );

    margin-inline: auto;

}


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

.policy-hero {

    position: relative;

    overflow: hidden;

    padding:
        88px 0 82px;

    border-bottom:
        1px solid
        var(--legal-border-soft);

    background:

        radial-gradient(
            circle at 85% 25%,
            rgba(196, 154, 82, .14),
            transparent 25%
        ),

        radial-gradient(
            circle at 12% 90%,
            rgba(126, 24, 36, .07),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #fffdf9 0%,
            #fbf5ef 100%
        );

}


.policy-hero::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -110px;
    top: -120px;

    border:
        1px solid
        rgba(196, 154, 82, .18);

    border-radius: 50%;

}


.policy-hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -80px;
    bottom: -100px;

    border:
        1px solid
        rgba(126, 24, 36, .08);

    border-radius: 50%;

}


.policy-hero .container {

    position: relative;

    z-index: 2;

}


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

.policy-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color:
        var(--legal-gold);

    font-size: 11px;

    font-weight: 800;

    line-height: 1.3;

    letter-spacing: .25em;

}


.policy-eyebrow::before {

    content: "";

    width: 30px;

    height: 1px;

    background:
        var(--legal-gold);

}


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

.policy-hero h1 {

    margin: 0;

    max-width: 800px;

    color:
        var(--legal-burgundy);

    font-family:
        var(--legal-serif);

    font-size:
        clamp(
            50px,
            6vw,
            78px
        );

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.045em;

}


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

.policy-hero p {

    max-width: 680px;

    margin:
        24px 0 0;

    color:
        var(--legal-text-soft);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.85;

    letter-spacing: .002em;

}


/* =========================================================
   LAST UPDATED
========================================================= */

.policy-updated {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 28px;

    padding:
        10px 15px;

    border:
        1px solid
        var(--legal-border);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .75);

    color:
        var(--legal-muted);

    font-size: 11px;

    line-height: 1.4;

    letter-spacing: .01em;

}


.policy-updated strong {

    color:
        var(--legal-text-soft);

    font-weight: 700;

}


/* =========================================================
   POLICY CONTENT
========================================================= */

.policy-content {

    padding:
        68px 0 105px;

}


.policy-layout {

    display: grid;

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

    align-items: start;

    gap: 32px;

}


/* =========================================================
   SIDEBAR
========================================================= */

.policy-sidebar {

    position: sticky;

    top: 25px;

}


.policy-sidebar-card {

    overflow: hidden;

    padding: 0;

    border:
        1px solid
        var(--legal-border);

    border-radius:
        var(--legal-radius-lg);

    background:
        var(--legal-white);

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

}


.policy-sidebar-title {

    padding:
        22px 22px 17px;

    border-bottom:
        1px solid
        var(--legal-border-soft);

    color:
        var(--legal-text);

    font-size: 12px;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: .07em;

    text-transform: uppercase;

}


/* =========================================================
   POLICY NAV
========================================================= */

.policy-nav {

    padding:
        9px;

}


.policy-nav a {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 46px;

    padding:
        10px 14px;

    border-radius: 11px;

    color:
        var(--legal-text-soft);

    font-size: 12px;

    font-weight: 600;

    line-height: 1.45;

    letter-spacing: .005em;

    transition:
        color .22s ease,
        background .22s ease,
        transform .22s ease;

}


.policy-nav a:hover {

    background:
        #faf5f0;

    color:
        var(--legal-burgundy);

    transform:
        translateX(2px);

}


.policy-nav a.active {

    background:
        var(--legal-burgundy-soft);

    color:
        var(--legal-burgundy);

    font-weight: 700;

}


.policy-nav a.active::before {

    content: "";

    width: 3px;

    height: 18px;

    position: absolute;

    left: 0;

    top: 50%;

    transform:
        translateY(-50%);

    border-radius:
        0 4px 4px 0;

    background:
        var(--legal-burgundy);

}


/* =========================================================
   SIDEBAR HELP
========================================================= */

.policy-help {

    display: flex;

    gap: 12px;

    margin:
        12px;

    padding:
        17px;

    border:
        1px solid
        rgba(196, 154, 82, .22);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #fffaf2,
            #fffdf9
        );

}


.policy-help-icon {

    flex:
        0 0 auto;

    width: 33px;

    height: 33px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        var(--legal-gold-soft);

    color:
        #9b7132;

    font-size: 13px;

    font-weight: 800;

}


.policy-help strong {

    display: block;

    color:
        var(--legal-text);

    font-size: 12px;

    font-weight: 700;

    line-height: 1.4;

}


.policy-help p {

    margin:
        6px 0 8px;

    color:
        var(--legal-muted);

    font-size: 10.5px;

    line-height: 1.65;

}


.policy-help a {

    color:
        var(--legal-burgundy);

    font-size: 10.5px;

    font-weight: 800;

}


/* =========================================================
   POLICY CARD
========================================================= */

.policy-card {

    overflow: hidden;

    padding:
        48px 52px;

    border:
        1px solid
        var(--legal-border);

    border-radius:
        var(--legal-radius-xl);

    background:
        var(--legal-white);

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

}


/* =========================================================
   POLICY SECTION
========================================================= */

.policy-section {

    display: grid;

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

    gap: 23px;

    padding:
        4px 0;

}


.policy-number {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(126, 24, 36, .13);

    border-radius: 13px;

    background:
        var(--legal-burgundy-soft);

    color:
        var(--legal-burgundy);

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: .06em;

}


/* =========================================================
   POLICY HEADING
========================================================= */

.policy-section h2 {

    margin:
        0 0 15px;

    color:
        var(--legal-text);

    font-family:
        var(--legal-serif);

    font-size:
        clamp(
            26px,
            2.2vw,
            31px
        );

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.025em;

}


/* =========================================================
   POLICY TEXT
========================================================= */

.policy-section p {

    margin:
        0 0 15px;
    color:
        var(--legal-text-soft);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.88;
    letter-spacing: .002em;

}


.policy-section p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   DIVIDER
========================================================= */

.policy-divider {

    height: 1px;

    margin:
        37px 0;

    background:
        var(--legal-border-soft);

}


/* =========================================================
   HIGHLIGHT
========================================================= */

.policy-highlight {

    margin-top: 21px;

    padding:
        19px 21px;

    border-left:
        3px solid
        var(--legal-gold);

    border-radius:
        0 13px 13px 0;

    background:
        #fffaf3;

}


.policy-highlight strong {

    display: block;

    margin-bottom: 8px;

    color:
        #8d6427;

    font-size: 11px;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: .09em;

    text-transform: uppercase;

}


.policy-highlight p {

    margin: 0;

    font-size: 13.5px;

    line-height: 1.78;

}


/* =========================================================
   POLICY LIST
========================================================= */

.policy-list {

    display: grid;

    gap: 11px;

    margin:
        19px 0 0;

    padding: 0;

    list-style: none;

}


.policy-list li {

    position: relative;

    padding-left: 26px;

    color:
        var(--legal-text-soft);

    font-size: 15.5px;

    line-height: 1.75;

}


.policy-list li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 2px;

    width: 17px;

    height: 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #eef7f2;

    color:
        var(--legal-success);

    font-size: 9px;

    font-weight: 800;

}


/* =========================================================
   POLICY ACTION
========================================================= */

.policy-action {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 8px;

    padding:
        13px 18px;

    border-radius: 12px;

    background:
        var(--legal-burgundy);

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.2;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.policy-action:hover {

    transform:
        translateY(-2px);

    background:
        var(--legal-burgundy-dark);

    box-shadow:
        0 10px 25px
        rgba(126, 24, 36, .18);

}


.policy-action span {

    font-size: 15px;

}


/* =========================================================
   FINAL NOTE
========================================================= */

.policy-bottom-note {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 46px;

    padding:
        22px;

    border:
        1px solid
        rgba(39, 118, 83, .14);

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #f3faf6,
            #fbfdfb
        );

}


.policy-bottom-icon {

    flex:
        0 0 auto;

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        #e1f2e8;

    color:
        var(--legal-success);

    font-size: 15px;

    font-weight: 800;

}


.policy-bottom-note strong {

    display: block;

    margin-bottom: 5px;

    color:
        #245f45;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.4;

}


.policy-bottom-note p {

    margin: 0;

    color:
        #648073;

    font-size: 11px;

    line-height: 1.7;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .policy-layout {

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

        gap: 22px;

    }


    .policy-card {

        padding:
            40px 36px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {

    .policy-page .container {

        width:
            calc(100% - 32px);

    }


    .policy-hero {

        padding:
            67px 0 61px;

    }


    .policy-layout {

        grid-template-columns: 1fr;

    }


    .policy-sidebar {

        position: static;

    }


    .policy-sidebar-card {

        display: grid;

        grid-template-columns: 1fr;

    }


    .policy-nav {

        display: grid;

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

        gap: 5px;

    }


    .policy-help {

        margin:
            10px 12px 12px;

    }


    .policy-card {

        padding:
            36px 32px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .policy-page .container {

        width:
            calc(100% - 22px);

    }


    .policy-hero {

        padding:
            53px 0 49px;

    }


    .policy-eyebrow {

        margin-bottom: 15px;

        font-size: 8.5px;

        letter-spacing: .2em;

    }


    .policy-eyebrow::before {

        width: 21px;

    }


    .policy-hero h1 {

        font-size:
            clamp(
                40px,
                12vw,
                56px
            );

        line-height: 1;

        letter-spacing:
            -.04em;

    }


    .policy-hero p {

        margin-top: 19px;

        font-size: 13.5px;

        line-height: 1.76;

    }


    .policy-updated {

        margin-top: 21px;

        padding:
            9px 13px;

        font-size: 9.5px;

    }


    .policy-content {

        padding:
            37px 0 63px;

    }


    .policy-layout {

        gap: 19px;

    }


    .policy-sidebar-card {

        border-radius: 18px;

    }


    .policy-sidebar-title {

        padding:
            18px 18px 14px;

        font-size: 10px;

    }


    .policy-nav {

        grid-template-columns:
            1fr 1fr;

        padding: 8px;

    }


    .policy-nav a {

        min-height: 41px;

        padding:
            9px 10px;

        font-size: 10px;

    }


    .policy-help {

        padding: 14px;

    }


    .policy-card {

        padding:
            29px 20px;

        border-radius: 21px;

    }


    .policy-section {

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

        gap: 14px;

    }


    .policy-number {

        width: 34px;

        height: 34px;

        border-radius: 10px;

        font-size: 8px;

    }


    .policy-section h2 {

        margin-bottom: 11px;

        font-size: 21.5px;

        line-height: 1.22;

    }


    .policy-section p {

        font-size: 12.8px;

        line-height: 1.82;

    }


    .policy-divider {

        margin:
            28px 0;

    }


    .policy-list {

        gap: 9px;

        margin-top: 17px;

    }


    .policy-list li {

        padding-left: 23px;

        font-size: 12px;

        line-height: 1.74;

    }


    .policy-highlight {

        padding:
            16px 17px;

    }


    .policy-highlight strong {

        font-size: 9px;

    }


    .policy-highlight p {

        font-size: 12px;

        line-height: 1.76;

    }


    .policy-bottom-note {

        align-items: flex-start;

        margin-top: 32px;

        padding: 18px;

        gap: 12px;

    }


    .policy-bottom-icon {

        width: 37px;

        height: 37px;

        flex-basis: 37px;

        border-radius: 10px;

    }


    .policy-bottom-note strong {

        font-size: 12px;

    }


    .policy-bottom-note p {

        font-size: 10px;

        line-height: 1.7;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .policy-page .container {

        width:
            calc(100% - 18px);

    }


    .policy-hero h1 {

        font-size: 39px;

    }


    .policy-card {

        padding:
            25px 16px;

    }


    .policy-section {

        grid-template-columns:
            1fr;

        gap: 12px;

    }


    .policy-number {

        width: 35px;

        height: 30px;

        border-radius: 9px;

    }


    .policy-section h2 {

        font-size: 20px;

    }


    .policy-section p {

        font-size: 12px;

    }


    .policy-nav {

        grid-template-columns: 1fr;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.policy-page a:focus-visible,
.policy-page button:focus-visible {

    outline:
        3px solid
        rgba(196, 154, 82, .35);

    outline-offset: 3px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }

}