/* =========================================================
   r1218 — vier sitebrede kleurthema's voor Indeling aanpassen.
   Thema 3 is de standaard Snoeten-set.
   ========================================================= */

:root,
:root[data-site-theme="theme3"] {
    --site-theme-background:#F3F5F8;
    --site-theme-panel:#FFFFFF;
    --site-theme-panel-alt:#F7F9FC;
    --site-theme-primary:#4B72AA;
    --site-theme-primary-hover:#3E6398;
    --site-theme-accent:#F19620;
    --site-theme-accent-hover:#D98214;
    --site-theme-secondary:#364152;
    --site-theme-text:#364152;
    --site-theme-muted:#6E7887;
    --site-theme-link:#355E96;
    --site-theme-on-primary:#FFFFFF;
    --site-theme-on-accent:#442804;
    --site-theme-active:#355986;
    --site-theme-active-text:#FFFFFF;
    --site-theme-border:#D9DEE6;
    --site-theme-input:#FFFFFF;
    --site-theme-input-border:#BFC8D4;
    --site-theme-shadow:rgba(31,43,58,.10);
}

:root[data-site-theme="theme1"] {
    --site-theme-background:#EFFBC8;
    --site-theme-panel:#FFFFFF;
    --site-theme-panel-alt:#F8FDE8;
    --site-theme-primary:#B5B5FF;
    --site-theme-primary-hover:#9898EC;
    --site-theme-accent:#FF36BE;
    --site-theme-accent-hover:#E722A7;
    --site-theme-secondary:#D3F365;
    --site-theme-text:#3E4350;
    --site-theme-muted:#68705E;
    --site-theme-link:#6969C6;
    --site-theme-on-primary:#303447;
    --site-theme-on-accent:#FFFFFF;
    --site-theme-active:#D3F365;
    --site-theme-active-text:#303447;
    --site-theme-border:#CFDCAC;
    --site-theme-input:#FFFFFF;
    --site-theme-input-border:#C3CF9F;
    --site-theme-shadow:rgba(72,83,44,.12);
}

:root[data-site-theme="theme2"] {
    --site-theme-background:#1E232B;
    --site-theme-panel:#2A303A;
    --site-theme-panel-alt:#242A33;
    --site-theme-primary:#5D82B8;
    --site-theme-primary-hover:#6D91C5;
    --site-theme-accent:#F2A23A;
    --site-theme-accent-hover:#FFB24C;
    --site-theme-secondary:#E8EDF3;
    --site-theme-text:#E8EDF3;
    --site-theme-muted:#AEB9C6;
    --site-theme-link:#91B5E6;
    --site-theme-on-primary:#FFFFFF;
    --site-theme-on-accent:#1E232B;
    --site-theme-active:#466B9F;
    --site-theme-active-text:#FFFFFF;
    --site-theme-border:#46505F;
    --site-theme-input:#242A33;
    --site-theme-input-border:#535E6E;
    --site-theme-shadow:rgba(0,0,0,.30);
}

:root[data-site-theme="theme4"] {
    --site-theme-background:#570046;
    --site-theme-panel:#FFFFFF;
    --site-theme-panel-alt:#F9F0F7;
    --site-theme-primary:#993399;
    --site-theme-primary-hover:#812881;
    --site-theme-accent:#FF9900;
    --site-theme-accent-hover:#E88600;
    --site-theme-secondary:#FF3300;
    --site-theme-text:#463441;
    --site-theme-muted:#75606F;
    --site-theme-link:#842E84;
    --site-theme-on-primary:#FFFFFF;
    --site-theme-on-accent:#570046;
    --site-theme-active:#FF3300;
    --site-theme-active-text:#FFFFFF;
    --site-theme-border:#DFC9D9;
    --site-theme-input:#FFFFFF;
    --site-theme-input-border:#CFAFC6;
    --site-theme-shadow:rgba(64,0,51,.20);
}

/* De bestaande variabelen blijven de basis voor de gewone layoutbestanden. */
:root[data-site-theme] {
    --text-color:var(--site-theme-text);
    --color-surface-main:var(--site-theme-panel);
    --color-surface-sidebar:var(--site-theme-panel);
    --color-border-main:var(--site-theme-border);
    --color-border:var(--site-theme-border);
    --color-highlight:color-mix(in srgb,var(--site-theme-primary) 15%,var(--site-theme-panel));
    --color-surface-taskbar:linear-gradient(180deg,
        color-mix(in srgb,var(--site-theme-primary) 92%,#fff) 0%,
        var(--site-theme-primary) 48%,
        color-mix(in srgb,var(--site-theme-primary) 86%,#000) 100%);
    --color-surface-header:linear-gradient(180deg,
        color-mix(in srgb,var(--site-theme-accent) 90%,#fff) 0%,
        var(--site-theme-accent) 58%,
        color-mix(in srgb,var(--site-theme-accent) 90%,#000) 100%);
    --color-surface-footer:var(--color-surface-header);
}

/* Achtergrond. Een persoonlijke profielachtergrond houdt bewust voorrang. */
html[data-site-theme]:not(.profile-background-theme-active) body {
    background-color:var(--site-theme-background) !important;
    background-image:none !important;
    color:var(--site-theme-text) !important;
}

html[data-site-theme]:not(.profile-personal-theme-active) #taskbar,
html[data-site-theme]:not(.profile-personal-theme-active) .mobile-snoeten-tabs {
    background:var(--color-surface-taskbar) !important;
    color:var(--site-theme-on-primary) !important;
}

html[data-site-theme]:not(.profile-personal-theme-active) #header,
html[data-site-theme]:not(.profile-personal-theme-active) .mobile-bottom-nav {
    background:var(--color-surface-header) !important;
    color:var(--site-theme-on-accent) !important;
}

html[data-site-theme]:not(.profile-personal-theme-active) #footer {
    background:var(--color-surface-footer) !important;
    color:var(--site-theme-on-accent) !important;
}

html[data-site-theme]:not(.profile-personal-theme-active) #taskbar-nav a,
html[data-site-theme]:not(.profile-personal-theme-active) #taskbar-nav a .taskbar-icon,
html[data-site-theme]:not(.profile-personal-theme-active) .mobile-snoeten-tabs a,
html[data-site-theme]:not(.profile-personal-theme-active) .mobile-snoeten-tabs button {
    color:var(--site-theme-on-primary) !important;
}

html[data-site-theme]:not(.profile-personal-theme-active) #taskbar-nav a.active,
html[data-site-theme]:not(.profile-personal-theme-active) #taskbar-nav a:hover,
html[data-site-theme]:not(.profile-personal-theme-active) .mobile-snoeten-tabs a.is-active,
html[data-site-theme]:not(.profile-personal-theme-active) .mobile-snoeten-tabs a:hover,
html[data-site-theme]:not(.profile-personal-theme-active) .mobile-snoeten-tabs button:hover,
html[data-site-theme]:not(.profile-personal-theme-active) .mobile-snoeten-tabs button[aria-expanded="true"] {
    background:var(--site-theme-active) !important;
    color:var(--site-theme-active-text) !important;
}

html[data-site-theme]:not(.profile-personal-theme-active) #user #user-shortcuts a,
html[data-site-theme]:not(.profile-personal-theme-active) #footer *,
html[data-site-theme]:not(.profile-personal-theme-active) .mobile-bottom-nav a,
html[data-site-theme]:not(.profile-personal-theme-active) .mobile-bottom-nav button {
    color:var(--site-theme-on-accent) !important;
}

/* Hoofdplaten en de meest gebruikte blokken. */
html[data-site-theme]:not(.profile-personal-theme-active) #main article,
html[data-site-theme]:not(.profile-personal-theme-active) #sidebar,
html[data-site-theme]:not(.profile-personal-theme-active) .welcome-panel,
html[data-site-theme]:not(.profile-personal-theme-active) .admin-panel,
html[data-site-theme]:not(.profile-personal-theme-active) .admin-summary > div,
html[data-site-theme]:not(.profile-personal-theme-active) .notification-item,
html[data-site-theme]:not(.profile-personal-theme-active) .notification-card,
html[data-site-theme]:not(.profile-personal-theme-active) .messages-panel,
html[data-site-theme]:not(.profile-personal-theme-active) .profile-home-section,
html[data-site-theme]:not(.profile-personal-theme-active) .profile-block {
    background-color:var(--site-theme-panel) !important;
    color:var(--site-theme-text) !important;
    border-color:var(--site-theme-border) !important;
}

html[data-site-theme]:not(.profile-personal-theme-active) #sidebar h2 {
    background:var(--site-theme-primary) !important;
    border-left-color:var(--site-theme-primary) !important;
    color:var(--site-theme-on-primary) !important;
}
html[data-site-theme]:not(.profile-personal-theme-active) #sidebar h2::after {
    border-top-color:color-mix(in srgb,var(--site-theme-primary) 72%,#000) !important;
}

html[data-site-theme]:not(.profile-personal-theme-active) #nav,
html[data-site-theme]:not(.profile-personal-theme-active) .tabspage,
html[data-site-theme]:not(.profile-personal-theme-active) .tabs-page {
    background:color-mix(in srgb,var(--site-theme-panel) 88%,var(--site-theme-primary)) !important;
    color:var(--site-theme-text) !important;
}
html[data-site-theme]:not(.profile-personal-theme-active) #nav a:hover,
html[data-site-theme]:not(.profile-personal-theme-active) #nav a.active {
    background:var(--site-theme-active) !important;
    color:var(--site-theme-active-text) !important;
}

/* Donker thema: ook standaardvelden, reacties en popupplaten leesbaar houden. */
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) body a:not(.button):not(#taskbar a):not(#header a):not(.mobile-snoeten-tabs a):not(.mobile-bottom-nav a) {
    color:#E8EDF3;
}
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) time,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) small,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .muted {
    color:#B9C3CF !important;
}
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) textarea,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) select,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) input[type="text"],
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) input[type="number"],
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) input[type="date"],
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) input[type="email"],
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) input[type="password"] {
    background:#242A33 !important;
    border-color:#4A5361 !important;
    color:#E8EDF3 !important;
}
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook .status-comment-bubble,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook .status-comment-editor,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook .status-comment-edit-editor {
    background:#2A303A !important;
    color:#E8EDF3 !important;
    border-color:#414A58 !important;
}
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook .status-comment-message,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook .status-comment-message p,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook .status-comment-message span,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook .status-comment-message div,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook .status-comment-name {
    color:#E8EDF3 !important;
}
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook .status-comment-toolbar,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .status-comments.status-comments-facebook .status-comment-submit-row {
    background:#242A33 !important;
    border-color:#414A58 !important;
}

/* =====================================================================
   Thema-keuze in 'Indeling aanpassen'.
   ===================================================================== */
.site-layout-theme-section {
    margin-top:18px;
    padding-top:17px;
    border-top:1px solid #dde1e7;
}
.site-layout-theme-heading {
    margin:0 0 10px;
    color:#303947;
    font-size:15px;
    font-weight:700;
}
.site-layout-theme-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}
.site-layout-theme-choice {
    min-width:0;
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    gap:9px;
    align-items:center;
    padding:11px 12px;
    border:1px solid #d7dce4;
    border-radius:8px;
    background:#f7f8fa;
    cursor:pointer;
}
.site-layout-theme-choice:has(input:checked) {
    border-color:var(--site-theme-primary,#4B72AA);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--site-theme-primary,#4B72AA) 18%,transparent);
}
.site-layout-theme-choice > input {
    width:17px;
    height:17px;
    margin:0;
    accent-color:var(--site-theme-primary,#4B72AA);
}
.site-layout-theme-copy {
    min-width:0;
}
.site-layout-theme-copy strong {
    display:block;
    margin-bottom:6px;
    color:#303947;
    font-size:13px;
}
.site-layout-theme-swatches {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    height:14px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.12);
    border-radius:4px;
}
.site-layout-theme-swatches i {
    display:block;
    min-width:0;
}

/* Popup zelf volgt het gekozen thema zodat de keuze direct zichtbaar is. */
html[data-site-theme] .site-layout-window-body {
    background:var(--site-theme-panel) !important;
    color:var(--site-theme-text) !important;
}
html[data-site-theme] .site-layout-window-intro,
html[data-site-theme] .site-layout-mode-copy span,
html[data-site-theme] .site-layout-preview-title {
    color:color-mix(in srgb,var(--site-theme-text) 72%,transparent) !important;
}
html[data-site-theme] .site-layout-mode-copy strong,
html[data-site-theme] .site-layout-theme-heading,
html[data-site-theme] .site-layout-theme-copy strong {
    color:var(--site-theme-text) !important;
}
html[data-site-theme] .site-layout-mode-choice,
html[data-site-theme] .site-layout-theme-choice,
html[data-site-theme] .site-layout-preview {
    background:color-mix(in srgb,var(--site-theme-panel) 92%,var(--site-theme-background)) !important;
    border-color:var(--site-theme-border) !important;
}
html[data-site-theme] .site-layout-mode-choice:has(> .site-layout-mode-main > input:checked),
html[data-site-theme] .site-layout-theme-choice:has(input:checked) {
    border-color:var(--site-theme-primary) !important;
    background:color-mix(in srgb,var(--site-theme-panel) 88%,var(--site-theme-primary)) !important;
}
html[data-site-theme] .site-layout-mode-main > input,
html[data-site-theme] .site-layout-theme-choice > input {
    accent-color:var(--site-theme-primary) !important;
}
html[data-site-theme] .site-layout-side-option input:checked + span {
    border-color:var(--site-theme-primary) !important;
    background:var(--site-theme-primary) !important;
    color:var(--site-theme-on-primary) !important;
}
html[data-site-theme] .site-layout-mini {
    background:var(--site-theme-background) !important;
    border-color:var(--site-theme-border) !important;
}
html[data-site-theme] .site-layout-mini-taskbar,
html[data-site-theme] .site-layout-mini-taskbar::before {
    background:var(--site-theme-primary) !important;
}
html[data-site-theme] .site-layout-mini-header {
    background:var(--site-theme-accent) !important;
}
html[data-site-theme] .site-layout-mini-main {
    background:var(--site-theme-panel) !important;
}

/* De grijze copyrightplaat blijft in Compact/Vast bewust een eigen element. */
html[data-site-theme] .taskbar-footer-panel {
    color:inherit;
}

@media (max-width:620px) {
    .site-layout-theme-list { grid-template-columns:1fr; }
}


/* r1220 — Indeling aanpassen gebruikt bewust dezelfde grijze plaatstijl als de copyrightknop.
   De titelbalk volgt dus niet het gekozen kleurthema. */
html[data-site-theme] .site-layout-window-header {
    background:
        radial-gradient(circle at 50% -22px, rgba(255,255,255,.28) 0, rgba(255,255,255,.12) 34%, rgba(255,255,255,0) 68%),
        linear-gradient(180deg,#949494 0%,#858585 48%,#777 100%) !important;
    color:#fff !important;
    border-bottom-color:#686868 !important;
}
html[data-site-theme] .site-layout-window {
    border-color:#686868 !important;
}
html[data-site-theme] .site-layout-window-title {
    text-shadow:0 1px 1px rgba(0,0,0,.28) !important;
}
html[data-site-theme] .site-layout-window-footer {
    background:color-mix(in srgb,var(--site-theme-panel) 86%,var(--site-theme-background)) !important;
    border-top-color:var(--site-theme-border) !important;
}
html[data-site-theme="theme2"] .site-layout-side-option span {
    background:#242A33 !important;
    border-color:#4A5361 !important;
    color:#E8EDF3 !important;
}

html[data-site-theme="theme2"]:not(.profile-personal-theme-active) #main h1,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) #main h2,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) #main h3,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) #main h4,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) #sidebar h1,
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) #sidebar h3 {
    color:#E8EDF3 !important;
}


/* =====================================================================
   r1219 — thema's verder doorgetrokken over algemene UI-elementen.
   ===================================================================== */
html[data-site-theme]:not(.profile-personal-theme-active) #main,
html[data-site-theme]:not(.profile-personal-theme-active) #content,
html[data-site-theme]:not(.profile-personal-theme-active) #content-inner {
    color:var(--site-theme-text);
}

html[data-site-theme]:not(.profile-personal-theme-active) #main a:not(.button):not(.status-comment-name):not(.snoeten-mention-link),
html[data-site-theme]:not(.profile-personal-theme-active) #sidebar a:not(.button) {
    color:var(--site-theme-link);
}

html[data-site-theme]:not(.profile-personal-theme-active) #main :is(.panel,.card,.plate,.block,.box,.content-box,.sidebar-block),
html[data-site-theme]:not(.profile-personal-theme-active) #sidebar :is(.panel,.card,.plate,.block,.box),
html[data-site-theme]:not(.profile-personal-theme-active) .status-action-menu,
html[data-site-theme]:not(.profile-personal-theme-active) .status-comment-menu,
html[data-site-theme]:not(.profile-personal-theme-active) .header-profile-start-menu,
html[data-site-theme]:not(.profile-personal-theme-active) .profile-start-panel,
html[data-site-theme]:not(.profile-personal-theme-active) .dropdown-menu {
    border-color:var(--site-theme-border) !important;
    box-shadow:0 4px 14px var(--site-theme-shadow) !important;
}

html[data-site-theme]:not(.profile-personal-theme-active) :is(input[type="text"],input[type="search"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="url"],textarea,select) {
    background:var(--site-theme-input) !important;
    border-color:var(--site-theme-input-border) !important;
    color:var(--site-theme-text) !important;
}
html[data-site-theme]:not(.profile-personal-theme-active) :is(input,textarea)::placeholder {
    color:var(--site-theme-muted) !important;
    opacity:.8;
}
html[data-site-theme]:not(.profile-personal-theme-active) :is(input[type="text"],input[type="search"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="url"],textarea,select):focus {
    border-color:var(--site-theme-primary) !important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--site-theme-primary) 22%,transparent) !important;
    outline:0 !important;
}

/* Gewone Snoeten-knoppen blijven licht, maar krijgen het gekozen thema als rand/hover. */
html[data-site-theme]:not(.profile-personal-theme-active) .button:not(.delete-btn):not(.danger):not(.welcome-primary-action):not(.site-layout-native-button) {
    border-color:color-mix(in srgb,var(--site-theme-primary) 55%,#8b939d) !important;
    background:linear-gradient(#fff,color-mix(in srgb,var(--site-theme-panel-alt) 84%,var(--site-theme-primary))) !important;
    color:var(--site-theme-text) !important;
}
html[data-site-theme]:not(.profile-personal-theme-active) .button:not(.delete-btn):not(.danger):not(.welcome-primary-action):not(.site-layout-native-button):hover,
html[data-site-theme]:not(.profile-personal-theme-active) .button:not(.delete-btn):not(.danger):not(.welcome-primary-action):not(.site-layout-native-button):focus-visible {
    border-color:var(--site-theme-primary) !important;
    background:linear-gradient(color-mix(in srgb,#fff 85%,var(--site-theme-primary)),color-mix(in srgb,var(--site-theme-panel-alt) 68%,var(--site-theme-primary))) !important;
}

html[data-site-theme]:not(.profile-personal-theme-active) :is(.tabs,.tabspage,.tabs-page,.profile-settings-tabs,.prikbord-tabs) a,
html[data-site-theme]:not(.profile-personal-theme-active) :is(.tabs,.tabspage,.tabs-page,.profile-settings-tabs,.prikbord-tabs) button {
    border-color:var(--site-theme-border) !important;
}
html[data-site-theme]:not(.profile-personal-theme-active) :is(.tabs,.tabspage,.tabs-page,.profile-settings-tabs,.prikbord-tabs) :is(a,button):hover,
html[data-site-theme]:not(.profile-personal-theme-active) :is(.tabs,.tabspage,.tabs-page,.profile-settings-tabs,.prikbord-tabs) :is(a,button).active,
html[data-site-theme]:not(.profile-personal-theme-active) :is(.tabs,.tabspage,.tabs-page,.profile-settings-tabs,.prikbord-tabs) :is(a,button)[aria-selected="true"] {
    border-color:var(--site-theme-primary) !important;
    background:color-mix(in srgb,var(--site-theme-primary) 16%,var(--site-theme-panel)) !important;
    color:var(--site-theme-text) !important;
}

/* Thema 1 gebruikt het limoengroen als secundair detail in plaats van alleen in het staal. */
html[data-site-theme="theme1"]:not(.profile-personal-theme-active) :is(.notification-badge,.status-count-badge,.welcome-heading-dot,.online-dot) {
    background:#D3F365 !important;
    color:#303447 !important;
}
/* Thema 4 laat het rood terugkomen in counters en waarschuwingen. */
html[data-site-theme="theme4"]:not(.profile-personal-theme-active) :is(.notification-badge,.status-count-badge,.unread-count) {
    background:#FF3300 !important;
    color:#fff !important;
}

/* Donker thema: geen achtergebleven witte dropdowns/platen. */
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) :is(.status-action-menu,.status-comment-menu,.header-profile-start-menu,.profile-start-panel,.dropdown-menu,.popup-body,.popup-content) {
    background:#2A303A !important;
    color:#E8EDF3 !important;
    border-color:#46505F !important;
}
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) :is(.status-action-menu,.status-comment-menu,.header-profile-start-menu,.profile-start-panel,.dropdown-menu) :is(a,button):hover {
    background:#343C48 !important;
    color:#fff !important;
}
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .button:not(.delete-btn):not(.danger):not(.welcome-primary-action):not(.site-layout-native-button) {
    background:linear-gradient(#39414D,#2F3641) !important;
    border-color:#596579 !important;
    color:#E8EDF3 !important;
}
html[data-site-theme="theme2"]:not(.profile-personal-theme-active) .button:not(.delete-btn):not(.danger):not(.welcome-primary-action):not(.site-layout-native-button):hover {
    background:linear-gradient(#465264,#37404D) !important;
    border-color:#6D91C5 !important;
}

/* =====================================================================
   Tekstgrootte — de JS schaalt de bestaande berekende lettergroottes,
   zodat 100% exact de huidige Snoeten-typografie blijft.
   ===================================================================== */
:root { --site-font-scale:1; }

/* Slider in Indeling aanpassen. */
.site-layout-theme-copy small {
    display:block;
    margin:-2px 0 7px;
    color:var(--site-theme-muted,#6E7887);
    font-size:11px;
    line-height:1.3;
}
.site-layout-font-section {
    margin-top:18px;
    padding-top:17px;
    border-top:1px solid var(--site-theme-border,#dde1e7);
}
.site-layout-font-heading-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}
.site-layout-font-heading-row .site-layout-theme-heading { margin-bottom:3px; }
.site-layout-font-heading-row p {
    margin:0;
    color:var(--site-theme-muted,#6E7887);
    font-size:12px !important;
}
.site-layout-font-value {
    min-width:50px;
    padding:5px 8px;
    border:1px solid var(--site-theme-border,#d7dce4);
    border-radius:6px;
    background:var(--site-theme-panel-alt,#f7f8fa);
    color:var(--site-theme-text,#303947);
    font-size:12px !important;
    font-weight:700;
    text-align:center;
}
.site-layout-font-slider-row {
    display:grid;
    grid-template-columns:24px minmax(0,1fr) 32px;
    align-items:center;
    gap:10px;
    margin-top:14px;
    padding:12px 14px;
    border:1px solid var(--site-theme-border,#d7dce4);
    border-radius:8px;
    background:var(--site-theme-panel-alt,#f7f8fa);
}
.site-layout-font-slider-row input[type="range"] {
    width:100%;
    margin:0;
    accent-color:var(--site-theme-primary,#4B72AA);
    cursor:ew-resize;
}
.site-layout-font-a {
    color:var(--site-theme-text,#303947);
    font-weight:700;
    text-align:center;
}
.site-layout-font-a-small { font-size:12px !important; }
.site-layout-font-a-large { font-size:21px !important; }