/* ============================================================================
   DentCare — Privacy Policy page (privacy.php, 2026-10-03, client revision 22)
   ----------------------------------------------------------------------------
   A bright reading page with the storefront photograph and warm palette of the
   public landing page. Motion is decorative and never controls visibility.
   ========================================================================== */

.privacy-page {
    --auth-stone:  #FAF7F1;
    --auth-deep:   #F2ECE1;
    --auth-gold:   201, 169, 97;
    --auth-brand:  138, 95, 58;
    --canvas:      #FFFCF7;
    --canvas-deep: #F5EFE4;
    --lift:        #FFFFFF;
    --ink:         #2F3331;
    --ink-2:       #5C6360;
    --brand:       #8A5F3A;
    --brand-deep:  #6F4B2D;
    --line:        #E7DDCC;
    --mark-bg:     #FFF1C7;
    --mark-ink:    #5E4310;
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body:    "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

    margin: 0;
    background-color: var(--auth-stone);
    background-image:
        radial-gradient(58vmax 46vmax at 12% 8%, rgba(var(--auth-gold), .10), transparent 68%),
        radial-gradient(52vmax 42vmax at 88% 4%, rgba(var(--auth-brand), .06), transparent 66%),
        radial-gradient(64vmax 52vmax at 78% 92%, rgba(var(--auth-gold), .07), transparent 70%),
        radial-gradient(46vmax 46vmax at 4% 84%, rgba(var(--auth-brand), .05), transparent 64%),
        linear-gradient(180deg, transparent 0%, var(--auth-deep) 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}
.privacy-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M-40 620 C 220 520 360 660 640 540 C 900 430 1010 520 1240 430' fill='none' stroke='%23C9A961' stroke-opacity='0.30' stroke-width='1.2'/%3E%3Cpath d='M-40 690 C 240 600 380 720 660 610 C 920 505 1040 590 1240 505' fill='none' stroke='%23C9A961' stroke-opacity='0.16' stroke-width='0.9'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}
.privacy-page > * { position: relative; z-index: 1; }
.privacy-page > .privacy-skip { position: fixed; z-index: 10; }

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

.privacy-page a { color: var(--brand); text-underline-offset: 3px; }
.privacy-page a:hover { color: var(--brand-deep); }
.privacy-page a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.privacy-skip { position: fixed; top: -70px; left: 16px; z-index: 10; padding: 10px 16px; border-radius: 8px; background: #fff; font-weight: 700; }
.privacy-skip:focus { top: 12px; }

/* ── The DRAFT banner: only while the policy is not approved ───────────────── */
.privacy-draft-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: center;
    padding: 10px 16px;
    background: var(--mark-bg);
    color: var(--mark-ink);
    border-bottom: 1px solid #E9D28A;
    font-size: 15px;
    text-align: center;
}

/* A fact still waiting for a person to confirm it (the draft only). It sits
   on its own line under the sentence it belongs to: still impossible to miss,
   but the policy around it reads as a policy (2026-10-05). */
.needs-confirmation {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 8px 0 4px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--mark-bg);
    color: var(--mark-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.privacy-page ::selection { background: #E8D6BE; color: var(--ink); }

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.privacy-bar {
    width: 100%;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 252, 247, .94);
}
.privacy-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
}
.privacy-bar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--ink) !important;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 26px;
}
.privacy-bar__brand img { border-radius: 10px; background: var(--lift); box-shadow: 0 5px 18px rgba(47, 51, 49, .11); }
.privacy-bar__back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--brand);
    border-radius: 8px;
    background: var(--brand);
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.privacy-bar__back:hover { background: var(--brand-deep); color: #fff; box-shadow: 0 8px 20px rgba(111, 75, 45, .22); transform: translateY(-1px); }
.privacy-bar__back:active { transform: translateY(0); }

/* ── Title ────────────────────────────────────────────────────────────────── */
.privacy-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #f7efe3;
    background-image:
        linear-gradient(90deg, rgba(255, 252, 246, .98) 0%, rgba(255, 250, 241, .93) 37%, rgba(255, 248, 236, .69) 59%, rgba(255, 247, 231, .18) 100%),
        url("../images/clinic-hero.jpg");
    background-size: cover;
    background-position: center 39%;
    color: var(--ink);
    border-bottom: 1px solid #e9dcc9;
}
.privacy-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: min(40vw, 520px);
    height: min(40vw, 520px);
    right: -8%;
    top: -44%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 225, 166, .26), transparent 68%);
    pointer-events: none;
}
.privacy-main { max-width: 1160px; margin: 0 auto; padding: 8px 24px 104px; }

.privacy-head { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: clamp(72px, 9vw, 116px) 24px clamp(64px, 8vw, 92px); }
.privacy-head__eyebrow { margin: 0 0 20px; color: var(--brand-deep); font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.privacy-head h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(52px, 10vw, 88px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #29302d;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.privacy-head__lede { max-width: 48ch; margin: 16px 0 0; color: #505b55; font-size: 19px; }
.privacy-meta { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 28px 0 0; }
.privacy-meta div { display: grid; gap: 2px; }
.privacy-meta dt { color: #715b43; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.privacy-meta dd { margin: 0; color: #29302d; font-size: 17px; font-weight: 700; line-height: 1.3; }

/* ── Contents and text ────────────────────────────────────────────────────── */
.privacy-layout { display: block; padding-top: 38px; }
.privacy-toc__desktop { display: none; }

.privacy-toc details {
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
}
.privacy-toc summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #986507;
    font-weight: 700;
    list-style: none;
    -webkit-text-stroke: .25px rgba(95, 57, 3, .55);
    text-shadow: 0 -1px 0 rgba(255, 237, 152, .78), 0 1px 1px rgba(103, 60, 4, .45), 0 0 8px rgba(235, 174, 35, .25);
}
.privacy-toc summary::-webkit-details-marker { display: none; }
/* A chevron that says the folded list opens, and turns when it has. */
.privacy-toc summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.privacy-toc details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
/* The headings carry their own numbers (1. Who is responsible ...). */
.privacy-toc ol { margin: 0 0 12px; padding-left: 0; list-style: none; }
.privacy-toc li { padding: 2px 0; }
.privacy-toc a { display: inline-block; padding: 3px 0; text-decoration: none; color: var(--ink); transition: color .2s ease, transform .2s ease; }
.privacy-toc a:hover { color: var(--brand); transform: translateX(3px); }
.privacy-toc li { line-height: 1.45; }

.privacy-text {
    max-width: none;
}
.privacy-text > * { max-width: 68ch; margin-inline: auto; }

/* Each section is separated by a hairline and generous space; the heading
   sits closer to its own text than to the section above. */
.policy-section { padding: 32px 0 0; scroll-margin-top: 24px; }
.policy-section + .policy-section { margin-top: 32px; border-top: 1px solid var(--line); }
.policy-section--short + .policy-section { margin-top: 8px; border-top: 0; }
.policy-section h2 {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(27px, 5vw, 34px);
    line-height: 1.2;
    text-wrap: balance;
}
.policy-section h2 {
    color: #b77d08;
    font-weight: 700;
    -webkit-text-stroke: .4px #865604;
    text-shadow: 0 -1px 0 rgba(255, 242, 169, .92), 0 1px 0 rgba(98, 56, 3, .72), 0 2px 3px rgba(109, 63, 0, .38), 0 0 13px rgba(239, 183, 40, .32);
}
.policy-section:target h2 { filter: brightness(1.06); }
.policy-section p { margin: 0 0 14px; }
.policy-section ul { margin: 0 0 14px; padding-left: 22px; }
.policy-section li { margin: 0 0 10px; padding-left: 4px; }
.policy-section li::marker { color: var(--brand); }
.policy-section strong { font-weight: 600; }

/* The introduction reads as a lead paragraph, then a quiet rule. */
.policy-section--short {
    padding: 0 0 24px;
    border-bottom: 1px solid var(--line);
    color: #414a45;
    font-size: 19px;
    line-height: 1.7;
}
.policy-section--short p:last-child { margin-bottom: 0; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.privacy-foot {
    padding: 52px 24px 24px;
    background: #282b2a;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
}
.privacy-foot__inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 40px; align-items: start; }
.privacy-foot__brand { display: flex; align-items: center; gap: 14px; }
.privacy-foot__brand img { border-radius: 12px; background: #fff; }
.privacy-foot__brand strong { display: block; color: #fff; font: 500 28px/1.1 var(--font-display); }
.privacy-foot__brand span { display: block; margin-top: 4px; line-height: 1.5; }
.privacy-foot__details p { margin: 0 0 10px; line-height: 1.6; }
.privacy-foot a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.privacy-foot a:hover { color: #f1cb89; text-decoration: underline; }
.privacy-foot a:focus-visible { outline-color: #f1cb89; }
.privacy-foot__links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.privacy-foot__links a { min-height: 32px; }
.privacy-foot__bottom { max-width: 1120px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .58); font-size: 13px; }

/* ── Wide screens: the contents stay beside the text ──────────────────────── */
@media (min-width: 960px) {
    .privacy-bar__inner { padding: 20px 40px; }
    .privacy-head { padding-left: 40px; padding-right: 40px; }
    .privacy-main { padding: 8px 40px 96px; }
    .privacy-layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 64px;
        align-items: start;
    }
    .privacy-toc { position: sticky; top: 24px; }
    .privacy-toc details { display: none; }
    .privacy-toc__desktop {
        display: block;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--line);
    }
    .privacy-toc__title {
        margin: 0 0 8px;
        color: #986507;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        -webkit-text-stroke: .25px rgba(95, 57, 3, .55);
        text-shadow: 0 -1px 0 rgba(255, 237, 152, .78), 0 1px 1px rgba(103, 60, 4, .45), 0 0 8px rgba(235, 174, 35, .25);
    }
    .privacy-toc ol { font-size: 16px; }
    .policy-section--short { padding-bottom: 28px; }
}

@media (max-width: 700px) {
    .privacy-page { background-attachment: scroll; }
    .privacy-bar__inner { padding: 12px 16px; }
    .privacy-bar__brand { font-size: 23px; }
    .privacy-bar__back { padding: 0 12px; font-size: 14px; }
    .privacy-head { padding-left: 20px; padding-right: 20px; }
    .privacy-hero { background-image: linear-gradient(90deg, rgba(255, 252, 246, .96), rgba(255, 251, 244, .84)), url("../images/clinic-hero-1280.jpg"); background-position: 42% center; }
    .privacy-main { padding: 8px 20px 72px; }
    .privacy-foot__inner { grid-template-columns: 1fr; gap: 26px; }
    .privacy-foot__bottom { margin-top: 32px; }
}

@media (max-width: 380px) {
    .privacy-bar__brand { gap: 7px; font-size: 21px; }
    .privacy-bar__brand img { width: 32px; height: 32px; }
    .privacy-bar__back { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .privacy-page *, .privacy-page *::before, .privacy-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (prefers-reduced-motion: no-preference) {
    .privacy-page { scroll-behavior: smooth; }
    .privacy-head__eyebrow, .privacy-head h1, .privacy-head__lede, .privacy-meta { animation: privacy-enter .75s both cubic-bezier(.22, 1, .36, 1); }
    .privacy-head h1 { animation-delay: .08s; }
    .privacy-head__lede { animation-delay: .16s; }
    .privacy-meta { animation-delay: .24s; }
    .privacy-toc, .privacy-text { animation: privacy-enter .75s .12s both cubic-bezier(.22, 1, .36, 1); }
    .privacy-hero::after { animation: privacy-glow 12s ease-in-out infinite alternate; }
    .policy-section:target { animation: privacy-target 1.1s ease-out; }
}
@keyframes privacy-enter { from { opacity: .72; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes privacy-glow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6%, 8%) scale(1.12); } }
@keyframes privacy-target { from { background-color: rgba(242, 210, 156, .36); } to { background-color: transparent; } }

@media print {
    .privacy-bar, .privacy-toc, .privacy-foot, .privacy-skip { display: none; }
    .privacy-page { background: #fff; }
    .privacy-page::before { display: none; }
    .privacy-hero { background: #fff; color: #000; }
    .privacy-head { padding: 0 0 18px; }
    .privacy-head h1, .privacy-head__lede, .privacy-meta dt, .privacy-meta dd { color: #000; text-shadow: none; }
    .privacy-head__eyebrow { color: #333; }
    .policy-section h2 {
        background: none;
        color: #000;
        -webkit-text-fill-color: #000;
        -webkit-text-stroke: 0;
        text-shadow: none;
    }
    .privacy-layout { display: block; }
    .privacy-text { padding: 0; border: 0; box-shadow: none; }
}