/* public_html/css/core.css - 2026-05-14 - version 15.2 - Defines the mediajour.nl core stylesheet. */
* { box-sizing: border-box; }
body { background: linear-gradient(180deg, #d7dad7, #ecedea); color: #151719; font-family: "Segoe UI", Arial, sans-serif; margin: 0; overflow-wrap: break-word; }
.sr-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.core { display: grid; gap: 24px; min-height: 100vh; min-width: 0; }
.core-container { display: grid; gap: 20px; margin: 0; max-width: none; min-width: 0; width: 100%; }
.core-layout { align-items: start; display: grid; gap: 20px; grid-template-columns: 272px minmax(0, 1fr); min-width: 0; width: 100%; }
.core-main { display: grid; gap: 16px; min-width: 0; padding: 18px 18px 88px 0; width: 100%; }
.core-head { background: #e8e9e5; border: 1px solid #aeb6ae; border-radius: 8px; box-shadow: none; display: grid; gap: 10px; min-width: 0; padding: 20px; }
.core-head-wordmark { color: #2b323b; font-size: large; font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; margin: 0; min-width: 0; }
.core-head-title { color: #151719; font-size: x-large; font-weight: 800; line-height: 1.15; margin: 0; min-width: 0; }
.core-head-page-title { color: #151719; font-size: x-large; font-weight: 800; line-height: 1.15; margin: 0; min-width: 0; }
.core-head-intro { color: #4f5757; font-size: medium; line-height: 1.6; margin: 0; max-width: 880px; min-width: 0; overflow-wrap: anywhere; }
.core-section { background: #e8e9e5; border: 1px solid #aeb6ae; border-radius: 8px; box-shadow: none; color: #151719; display: grid; gap: 12px; min-width: 0; overflow: hidden; padding: 18px; }
.core-section-title { color: #151719; font-size: large; font-weight: 800; line-height: 1.2; margin: 0; min-width: 0; }
.core-section-intro { color: #4f5757; font-size: medium; line-height: 1.55; margin: 0; min-width: 0; }
.core-sidebar { align-self: start; background: linear-gradient(180deg, #151a21, #101318); border: 1px solid rgba(241, 242, 239, 0.22); border-left: 0; border-radius: 0 8px 8px 0; box-shadow: none; color: #f1f2ef; display: grid; gap: 12px; max-height: 100vh; min-height: 100vh; min-width: 0; overflow-y: auto; padding: 14px; position: sticky; top: 0; width: 100%; }
.core-sidebar-head { border-bottom: 1px solid rgba(241, 242, 239, 0.22); display: grid; gap: 6px; min-width: 0; padding-bottom: 12px; }
.core-sidebar-title-row { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.core-sidebar-title { color: #f1f2ef; display: block; font-size: medium; font-weight: 800; line-height: 1.2; margin: 0; min-width: 0; text-decoration: none; }
.core-sidebar-meta { color: rgba(241, 242, 239, 0.82); font-size: small; line-height: 1.45; min-width: 0; }
.core-sidebar-meta-link { color: #f1f2ef; font-weight: 700; text-decoration: none; }
.core-sidebar-meta-link:hover { color: #f1f2ef; }
.core-sidebar-link { align-items: center; background: rgba(241, 242, 239, 0.12); border: 1px solid transparent; border-radius: 8px; color: #f1f2ef; display: flex; font-size: small; font-weight: 700; gap: 8px; min-height: 40px; min-width: 0; padding: 10px 12px; text-decoration: none; }
.core-sidebar-link:hover { background: rgba(24, 168, 255, 0.24); border-color: rgba(241, 242, 239, 0.24); }
.core-sidebar-link:active { background: rgba(24, 168, 255, 0.34); }
.core-sidebar-link-current { align-items: center; background: #2b323b; border: 1px solid #3b4552; border-radius: 8px; color: #f1f2ef; display: flex; font-size: small; font-weight: 700; gap: 8px; min-height: 40px; min-width: 0; padding: 10px 12px; text-decoration: none; }
.core-sidebar-link-current:hover { background: #3b4552; border-color: rgba(241, 242, 239, 0.34); }
.core-sidebar-title:focus-visible { box-shadow: 0 0 0 3px rgba(241, 242, 239, 0.7); outline: 0; }
.core-sidebar-meta-link:focus-visible { box-shadow: 0 0 0 3px rgba(241, 242, 239, 0.7); outline: 0; }
.core-sidebar-link:focus-visible { box-shadow: 0 0 0 3px rgba(241, 242, 239, 0.7); outline: 0; }
.core-sidebar-link-current:focus-visible { box-shadow: 0 0 0 3px rgba(241, 242, 239, 0.7); outline: 0; }
.core-sidebar-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(241, 242, 239, 0.7); outline: 0; }
.core-sidebar-profile-link:focus-visible { box-shadow: 0 0 0 3px rgba(241, 242, 239, 0.7); outline: 0; }
.core-sidebar-ad-link:focus-visible { box-shadow: 0 0 0 3px rgba(241, 242, 239, 0.7); outline: 0; }
.core-sidebar-rotator-link:focus-visible { box-shadow: 0 0 0 3px rgba(241, 242, 239, 0.7); outline: 0; }
.core-sidebar-bubble:focus-visible { box-shadow: 0 0 0 3px rgba(241, 242, 239, 0.7), 0 8px 18px rgba(5, 12, 18, 0.18); outline: 0; }
.core-sidebar .fa { flex: 0 0 1.1rem; text-align: center; width: 1.1rem; }
.core-sidebar-link-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.core-sidebar-toggle { align-items: center; background: rgba(241, 242, 239, 0.14); border: 1px solid rgba(241, 242, 239, 0.22); border-radius: 999px; color: #f1f2ef; cursor: pointer; display: inline-flex; font: inherit; height: 36px; justify-content: center; min-width: 0; padding: 0; width: 36px; }
.core-sidebar-toggle:hover { background: rgba(24, 168, 255, 0.32); border-color: rgba(241, 242, 239, 0.34); }
.core-sidebar-toggle-text { display: none; min-width: 0; }
.core-sidebar-profile { border-bottom: 1px solid rgba(241, 242, 239, 0.22); display: grid; gap: 8px; min-width: 0; padding-bottom: 12px; }
.core-sidebar-profile-link { align-items: center; color: #f1f2ef; display: grid; gap: 10px; grid-template-columns: 48px minmax(0, 1fr); min-width: 0; text-decoration: none; }
.core-sidebar-profile-image { border: 2px solid rgba(241, 242, 239, 0.22); border-radius: 999px; display: block; height: 48px; object-fit: cover; width: 48px; }
.core-sidebar-profile-name { color: #f1f2ef; font-size: small; font-weight: 700; line-height: 1.4; min-width: 0; }
.core-sidebar-groups { display: grid; gap: 12px; min-width: 0; }
.core-sidebar-group { display: grid; gap: 8px; min-width: 0; }
.core-sidebar-group-label { color: rgba(241, 242, 239, 0.82); font-size: x-small; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; min-width: 0; text-transform: uppercase; }
.core-sidebar-logo { display: grid; justify-content: center; min-width: 0; padding-top: 4px; }
.core-sidebar-logo-image { display: block; height: auto; max-width: 100%; }
.core-sidebar-ad { background: rgba(241, 242, 239, 0.1); border: 1px solid rgba(241, 242, 239, 0.18); border-radius: 8px; color: #f1f2ef; display: grid; gap: 8px; min-width: 0; overflow: hidden; padding: 12px; }
.core-sidebar-ad-link { color: #f1f2ef; display: grid; gap: 8px; min-width: 0; text-decoration: none; }
.core-sidebar-ad-link:hover .core-sidebar-ad-title { color: #f1f2ef; }
.core-sidebar-ad-link:focus-visible .core-sidebar-ad-title { color: #f1f2ef; }
.core-sidebar-ad-label { color: rgba(241, 242, 239, 0.72); font-size: x-small; font-weight: 800; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; }
.core-sidebar-ad-title { color: #f1f2ef; font-size: small; font-weight: 800; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.core-sidebar-ad-summary { color: rgba(241, 242, 239, 0.82); font-size: small; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.core-sidebar-ad-note { color: rgba(241, 242, 239, 0.72); font-size: x-small; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.core-sidebar-ad-action { color: #f1f2ef; font-size: small; font-style: normal; font-weight: 800; line-height: 1.35; min-width: 0; }
.core-sidebar-rotator { background: rgba(24, 168, 255, 0.22); border: 1px solid rgba(241, 242, 239, 0.18); border-radius: 8px; color: #f1f2ef; display: grid; gap: 8px; min-width: 0; overflow: hidden; padding: 12px; }
.core-sidebar-rotator-link { color: #f1f2ef; display: grid; gap: 8px; min-width: 0; text-decoration: none; }
.core-sidebar-rotator-link:hover .core-sidebar-rotator-title { color: #f1f2ef; }
.core-sidebar-rotator-link:focus-visible .core-sidebar-rotator-title { color: #f1f2ef; }
.core-sidebar-rotator-label { color: rgba(241, 242, 239, 0.72); font-size: x-small; font-weight: 800; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; }
.core-sidebar-rotator-title { color: #f1f2ef; font-size: small; font-weight: 800; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.core-sidebar-rotator-message { color: rgba(241, 242, 239, 0.82); font-size: small; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.core-sidebar-skip-link { height: 1px; left: -9999px; overflow: hidden; position: absolute; top: auto; width: 1px; }
.core-sidebar-skip-link:focus { background: #f1f2ef; border: 1px solid #c3c8c2; border-radius: 10px; color: #151719; height: auto; left: 12px; padding: 10px 14px; top: 12px; width: auto; z-index: 20; }
.core-sidebar-bubble { align-items: center; background: #2b323b; border: 1px solid rgba(241, 242, 239, 0.22); border-radius: 999px; box-shadow: 0 8px 18px rgba(5, 12, 18, 0.18); color: #f1f2ef; cursor: pointer; display: inline-flex; font: inherit; font-weight: 700; gap: 8px; min-height: 42px; min-width: 42px; padding: 0 12px; position: fixed; right: 18px; bottom: 18px; user-select: none; z-index: 2200; }
.core-sidebar-bubble[hidden] { display: none; }
.core-sidebar-bubble[aria-expanded="true"] { display: none; }
.core-sidebar-bubble:hover { background: #3b4552; border-color: rgba(241, 242, 239, 0.34); }
@media (max-width: 900px) {
.core-layout { display: block; }
.core-main { padding: 18px 14px 108px; }
.core-sidebar { border-left: 1px solid rgba(241, 242, 239, 0.22); border-radius: 0 8px 8px 0; bottom: 0; left: 0; max-height: none; min-height: 0; position: fixed; top: 0; width: min(86vw, 320px); z-index: 2100; }
.core-sidebar-link-text { overflow: visible; text-overflow: clip; white-space: normal; word-break: break-word; }
}
@media (max-width: 680px) {
.core-layout { gap: 14px; }
.core-head { padding: 16px; }
.core-section { padding: 16px; }
.core-head-title { font-size: 1.65rem; }
.core-head-page-title { font-size: 1.65rem; }
.core-head-intro { font-size: 0.96rem; }
.core-sidebar { padding: 12px; }
.core-sidebar-link { min-height: 44px; }
.core-sidebar-link-current { min-height: 44px; }
.core-sidebar-toggle { height: 40px; width: 40px; }
}

/* Contrast repair for dark action surfaces */
.core-sidebar-bubble, .core-sidebar-bubble * { color: #f7f9fb !important; fill: currentColor; }
.core-sidebar-bubble:hover, .core-sidebar-bubble:hover * { color: #f7f9fb !important; fill: currentColor; }
.core-sidebar-link-current, .core-sidebar-link-current * { color: #f7f9fb !important; fill: currentColor; }
.core-sidebar-link-current:hover, .core-sidebar-link-current:hover * { color: #f7f9fb !important; fill: currentColor; }
/* End contrast repair */