@import url("privacy/tokens.css");
@import url("privacy/handoff.css");

/* Layout adapts the supplied artboards; all component colours stay in the handoff tokens. */
.ulearn-privacy { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--foreground); color-scheme: light; }
.ulearn-privacy [hidden], .ulearn-privacy[hidden] { display: none !important; }
.ulearn-privacy button:focus-visible, .ulearn-privacy a:focus-visible,
.ulearn-privacy label:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.ulearn-privacy .privacy-links { padding: 16px 24px; text-align: center; font-size: 14px; line-height: 20px; }
.ulearn-privacy .privacy-links a, .ulearn-privacy .privacy-links button { color: var(--primary); text-decoration: none; }
.ulearn-privacy .privacy-links a:hover, .ulearn-privacy .privacy-links button:hover { text-decoration: underline; }
.ulearn-privacy.privacy-cookie-banner { position: fixed; inset: auto 0 0; z-index: 1060; width: 100%; max-height: 90dvh; overflow: auto; }
.ulearn-privacy.privacy-settings-overlay { position: fixed; inset: 0; z-index: 1070; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ulearn-privacy .privacy-settings { width: 560px; max-width: 100%; max-height: calc(100dvh - 48px); }
.ulearn-privacy .privacy-settings > header, .ulearn-privacy .privacy-settings > footer { flex: none; }
.ulearn-privacy .privacy-settings-body { overflow-y: auto; min-height: 0; }
.ulearn-privacy.privacy-consent { position: fixed; inset: 0; z-index: 1050; display: flex; flex-direction: column; overflow: hidden; width: 100%; height: 100dvh; background: var(--background); }
.ulearn-privacy .privacy-mobile-jump { display: none; }
.ulearn-privacy .privacy-answered { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.ulearn-privacy label:has(input[type=radio]:checked) { border-color: var(--primary); background: var(--accent); color: var(--accent-foreground); }
.ulearn-privacy label:has(input[type=radio][value=no]:checked) { border-color: var(--foreground); background: var(--secondary); color: var(--foreground); }
.ulearn-privacy label:has(input[type=checkbox]:checked) { border-color: var(--primary); background: var(--accent); }
.ulearn-privacy input[type=checkbox]:checked + span { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.ulearn-privacy .privacy-nav-active { background: var(--accent); color: var(--accent-foreground); font-weight: 600; }
.ulearn-privacy .privacy-purposes-complete { background: var(--primary); color: var(--primary-foreground); }
.ulearn-privacy [data-confirm-pdpl]:not(:disabled) { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); cursor: pointer; }
.ulearn-privacy [data-confirm-pdpl]:not(:disabled):hover { opacity: .9; }
.ulearn-privacy .privacy-error { padding: 16px; color: var(--destructive); background: var(--card); }
.ulearn-privacy.privacy-notice { width: 100%; background: var(--background); }
.ulearn-privacy.privacy-notice > div { margin: 40px auto 0; }
/* The notice supplies its own title and 1200px content frame inside the native Moodle navbar. */
body#page-local-vntraining-privacy #page-header { display: none; }
body#page-local-vntraining-privacy #page { padding: 0 !important; }
body#page-local-vntraining-privacy #topofscroll { width: 100%; max-width: none; margin: 0; padding: 0; }
.ulearn-privacy .privacy-table-mobile { display: none; }
@media (max-width: 767px) {
    .ulearn-privacy.privacy-cookie-banner { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: 0 -100vh 0 100vh var(--overlay); }
    .ulearn-privacy.privacy-cookie-banner .up-max-w-\[1200px\] { padding: 24px; }
    .ulearn-privacy.privacy-cookie-banner h2 { font-size: 20px; line-height: 28px; }
    .ulearn-privacy [data-banner-footer] { align-items: stretch; flex-direction: column; gap: 24px; }
    .ulearn-privacy [data-banner-footer] > div:last-child { flex-direction: column; gap: 8px; }
    .ulearn-privacy [data-banner-footer] button { width: 100%; height: 44px; }
    .ulearn-privacy.privacy-settings-overlay { padding: 0; }
    .ulearn-privacy .privacy-settings { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .ulearn-privacy .privacy-settings > header, .ulearn-privacy .privacy-settings > footer,
    .ulearn-privacy .privacy-settings-body { padding: 24px; }
    .ulearn-privacy .privacy-settings > header > div:first-child { display: none; }
    .ulearn-privacy .privacy-settings > footer { grid-template-columns: 1fr; gap: 8px; }
    .ulearn-privacy .privacy-settings > footer button { height: 44px; }
    .ulearn-privacy.privacy-consent > header { padding: 16px 24px; }
    .ulearn-privacy.privacy-consent > header h1 { font-size: 18px; line-height: 28px; }
    .ulearn-privacy.privacy-consent > header p { display: none; }
    .ulearn-privacy.privacy-consent nav { display: none; }
    .ulearn-privacy.privacy-consent article { padding: 24px; }
    .ulearn-privacy.privacy-consent .privacy-mobile-jump { display: flex; justify-content: space-between; gap: 8px; padding: 16px; margin-bottom: 16px; border: 1px solid var(--primary); border-radius: var(--radius); background: var(--accent); font-weight: 600; }
    .ulearn-privacy.privacy-consent > footer { padding: 16px 24px; flex-direction: column; align-items: stretch; }
    .ulearn-privacy.privacy-consent > footer > div:last-child, .ulearn-privacy.privacy-consent > footer button { width: 100%; }
    .ulearn-privacy.privacy-consent > footer button, .ulearn-privacy label:has(input[type=radio]) { min-height: 44px; }
    .ulearn-privacy [data-co-details] .up-grid { grid-template-columns: 1fr; }
    .ulearn-privacy .privacy-table-desktop { display: none; }
    .ulearn-privacy .privacy-table-mobile { display: block; }
    .ulearn-privacy.privacy-notice > div { padding: 24px; }
    .ulearn-privacy.privacy-notice aside { display: none; }
    .ulearn-privacy.privacy-notice h1 { font-size: 20px; line-height: 28px; }
    .ulearn-privacy.privacy-notice section[id$="ck-s8"] .up-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .ulearn-privacy *, .ulearn-privacy *::before, .ulearn-privacy *::after { scroll-behavior: auto !important; transition: none !important; }
}