/*==================== PRIVACY POLICY PAGE STYLES ======================*/
:root{
    --legal-panel-bg: light-dark(#0D0D0D, #f7f7f7);
}
:where(.page-legal) .bg-legal-panel {background-color: var(--legal-panel-bg) !important;}

/*-------------------- ICONS --------------------*/
/* style.css sets `color` on every element, which breaks `currentColor` inside SVG */
svg, svg * {color: inherit;}

/*-------------------- PAGE BANNER --------------------*/
:where(.page-legal) .legal-banner {
    display: flex;
    align-items: center;
    overflow: hidden;
}

/*-------------------- CONTENTS SIDEBAR --------------------*/
:where(.page-legal) .legal-contents {
    background-color: var(--legal-panel-bg);
    border: 1px solid var(--border-color-light);
    padding: 24px;
    position: sticky;
    top: 100px;
}
:where(.page-legal) .legal-contents-list {margin: 0;padding: 0;}
:where(.page-legal) .legal-contents-list li {border-bottom: 1px solid var(--border-color-light);}
:where(.page-legal) .legal-contents-list li:last-child {border-bottom: 0;}
:where(.page-legal) .legal-contents-list a {display: flex;gap: 12px;align-items: flex-start;padding: 10px 0;transition: 0.3s ease;}
:where(.page-legal) .legal-contents-list a .legal-contents-num {min-width: 22px;color: var(--color-golden);}
:where(.page-legal) .legal-contents-list a .legal-contents-text {color: var(--color-content);}
:where(.page-legal) .legal-contents-list a:hover .legal-contents-text,
:where(.page-legal) .legal-contents-list a.active .legal-contents-text {color: var(--color-white);}
:where(.page-legal) .legal-contents-meta {padding-top: 20px;}

/*-------------------- SECTIONS --------------------*/
:where(.page-legal) .legal-section {padding: 36px 0;border-bottom: 1px solid var(--border-color-light);scroll-margin-top: 100px;}
:where(.page-legal) .legal-section:first-child {padding-top: 0;}
:where(.page-legal) .legal-section:last-child {border-bottom: 0;}
:where(.page-legal) .legal-section-head {display: flex;gap: 16px;align-items: flex-start;margin-bottom: 14px;}
:where(.page-legal) .legal-section-num {min-width: 32px;color: var(--color-golden);}
:where(.page-legal) .legal-section p {color: var(--color-content);line-height: 1.65;}
:where(.page-legal) .legal-section p + p {margin-top: 12px;}
:where(.page-legal) .legal-section a {color: var(--color-golden);}

/*-------------------- BACK TO TOP --------------------*/
:where(.page-legal) .back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-golden);
    background-color: var(--legal-panel-bg);
    color: var(--color-golden);
    transition: 0.3s ease;
}
:where(.page-legal) .back-to-top.show {display: flex;}
:where(.page-legal) .back-to-top:hover {background-color: var(--color-golden);color: var(--color-white-same);}

/*-------------------- MEDIA QUERY --------------------*/
@media screen and (max-width: 991px) {
    :where(.page-legal) .legal-contents {position: static;}
}
@media screen and (max-width: 767px) {
    :where(.page-legal) .legal-contents {padding: 20px;}
    :where(.page-legal) .legal-section {padding: 28px 0;}
    :where(.page-legal) .back-to-top {right: 16px;bottom: 16px;}
}