/* The yellow dot in logo.svg is WordStay's action and progress accent. */
:root {
 --brand-yellow:#ffbf4a;
 --brand-yellow-hover:#f5b238;
 --brand-yellow-soft:#fff4d9;
 --brand-yellow-border:#efca7c;
 --brand-yellow-edge:#aa7110;
 --brand-yellow-ink:#785016;
}

/* Flat actions use yellow and navy; selected controls use a quiet full fill. */
.btn-primary {
 background:var(--brand-yellow);
 color:var(--navy);
 box-shadow:none;
}
.btn-primary:hover:not(:disabled) {background:var(--brand-yellow-hover)}
.btn-primary:active {transform:none}
.btn-primary:disabled {background:var(--brand-yellow);color:var(--navy);box-shadow:none}
.roadmap-actions>.btn:disabled {background:#edf7f2;color:#43826b}

/* The logo dot repeats as a small wayfinding detail. */
.new-dot {background:var(--brand-yellow);box-shadow:0 0 0 3px var(--brand-yellow-soft)}
/* A long label takes the room a short one leaves; when a label still wraps, the icons stay on one line. */
.mobile-nav {gap:6px}
.mobile-nav a {flex:1 1 auto;min-width:0;justify-content:flex-start}
.mobile-nav a span {max-width:100%;text-align:center;line-height:1.15}
.mobile-nav a.active {position:relative}
.mobile-nav a.active::after {
 content:'';
 position:absolute;
 width:6px;
 height:6px;
 top:1px;
 left:calc(50% + 12px);
 border-radius:50%;
 background:var(--brand-yellow);
 box-shadow:0 0 0 2px #fff;
}
.practice-tabs,.path-tabs {background:#edf1f7}
.practice-tabs>a.active,.path-tabs>a.active {
 background:var(--brand-yellow-soft);
 color:var(--navy);
 box-shadow:none;
}
.practice-tabs>a:not(.active):hover,.path-tabs>a:not(.active):hover {
 background:#ffffffa6;
 color:var(--navy);
}

/* Current steps share one accent; completed/error states retain their meaning. */
.daily-roadmap li.current>span,
.lesson-stepper li.current>span,
.level-stop.selected .level-node,
.video-stage.active .video-stage-code {
 background:var(--brand-yellow);
 border-color:var(--brand-yellow-edge);
 color:var(--navy);
 box-shadow:none;
}
.level-stop.selected,.video-stage.active {border-color:var(--brand-yellow-border);box-shadow:none}
.video-stage.active {background:#fffaf0}
.goal-option.active,.time-goal.selected {background:var(--brand-yellow-soft);border-color:var(--brand-yellow-edge)}
.goal-option.active small {color:var(--brand-yellow-ink)}

/* The darker edge keeps thin progress fills distinct on pale tracks. */
.progress-track>span,.overview-track>span,.session-track>span {
 background:var(--brand-yellow);
 box-shadow:inset 0 0 0 1px var(--brand-yellow-edge);
}
.goal-ring .ring-value {stroke:var(--brand-yellow)}
.foundation-ring {background:conic-gradient(var(--brand-yellow) var(--progress),#dce7fa 0)}
.chart-column:last-child .chart-bar {background:var(--brand-yellow);box-shadow:inset 0 0 0 1px var(--brand-yellow-edge)}
.day.today .day-circle {background:var(--brand-yellow-soft);border-color:var(--brand-yellow-edge);color:var(--navy)}

/* Warm, restrained surfaces connect the learning screens to the brand. */
.overview-icon,.video-progress-icon,.result-symbol,.feature-result-symbol {
 background:var(--brand-yellow-soft);
 color:var(--brand-yellow-ink);
}
.sidebar-note {background:#fffbf3;border-color:#f2e5c9}
.sidebar-note .note-symbol,.spark,.lesson-spark {color:var(--brand-yellow)}
.visual-back {background:var(--brand-yellow);border-color:#e6ad3e}
.word-day {background:#fff8e7;border-color:var(--brand-yellow-border)}
.word-day .eyebrow,.word-day p,.word-day-bottom>span {color:var(--brand-yellow-ink)}
.word-day .round-btn {background:var(--brand-yellow);border-color:var(--brand-yellow-edge);color:var(--navy)}
.streak-small,.streak-label {color:var(--brand-yellow-ink)}
.streak-small .icon {fill:var(--brand-yellow);stroke:var(--brand-yellow-ink)}
.badge.orange {background:var(--brand-yellow-soft);color:var(--brand-yellow-ink)}
.icon-btn.saved {color:var(--brand-yellow-ink)}
.icon-btn.saved .icon {fill:var(--brand-yellow)}
.video-entry-symbol {background:var(--brand-yellow-soft);border-color:var(--brand-yellow-border);box-shadow:none}
.video-entry-arrow {background:var(--brand-yellow);color:var(--navy)}
.video-load-mark {background:var(--brand-yellow);border-color:var(--brand-yellow-edge);color:var(--navy)}
.video-save.saved {background:var(--brand-yellow-soft);color:var(--brand-yellow-ink);box-shadow:none}

/* Social profiles: in the sidebar (wide screens) and the page footer (every screen), each icon in its network's colour. */
.social-links{display:flex;flex-direction:column;gap:9px}
.social-title{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#7a8ca8}
.social-row{display:flex;flex-wrap:wrap;gap:8px}
.social-link{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e1e8f3;transition:transform .15s ease,box-shadow .15s ease}
.social-link svg{width:20px;height:20px}
.social-link:hover{transform:translateY(-2px);box-shadow:0 6px 14px #21385b1f}
.social-link:focus-visible{outline:3px solid #94b5ff;outline-offset:2px}
.social-youtube{color:#ff0033}.social-instagram{color:#d62976}.social-tiktok{color:#111}.social-x{color:#111}.social-facebook{color:#1877f2}
.social-sidebar{margin:10px 0 6px;gap:7px}.social-sidebar .social-row{flex-wrap:nowrap;gap:6px}.social-sidebar .social-link{width:30px;height:30px;border-radius:9px}.social-sidebar .social-link svg{width:16px;height:16px}
.page-footer .social-footer{flex-direction:row;align-items:center;gap:12px}
.page-footer .social-footer .social-link{width:34px;height:34px;border-radius:10px}
@media(max-width:760px){.page-footer{flex-wrap:wrap;gap:14px}.page-footer .social-footer{order:-1;width:100%;justify-content:center;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.social-link{transition:none}}
@media(min-width:761px) and (max-height:860px){.sidebar .small-brand{display:none}.social-sidebar{margin:6px 0 0}}

/* Cookie consent banner (consent.js): bottom of the screen, above the phone navigation; reject and accept equally easy. */
.consent-banner{position:fixed;inset-inline:16px;bottom:16px;z-index:200;display:flex;justify-content:center;pointer-events:none}
.consent-inner{pointer-events:auto;width:min(720px,100%);background:#fff;border:1px solid #dbe5f4;border-radius:18px;box-shadow:0 18px 50px #21385b33;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.consent-inner>strong{font-size:16px;color:var(--navy)}
.consent-inner p{font-size:13px;line-height:1.55;color:#5e7393;margin:0}
.consent-inner p a{color:var(--blue);font-weight:800}
.consent-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid #edf1f7;cursor:pointer}
.consent-row span{display:flex;flex-direction:column;gap:2px}.consent-row strong{font-size:13px}.consent-row small{font-size:12px;color:#6b7f9c}
.consent-row input{width:20px;height:20px;flex-shrink:0;accent-color:var(--blue)}
.consent-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.consent-actions .btn{min-height:42px;padding:9px 16px;font-size:13px;flex:1 1 140px}
.page-footer [data-consent="open"]{background:none;border:0;font:inherit;font-size:12px;color:#7184a2;cursor:pointer;text-decoration:underline}
.video-consent-note{display:block;font-size:11px;color:#7184a2;margin-bottom:8px}
@media(max-width:760px){.consent-banner{bottom:84px;inset-inline:10px}}
.consent-banner [hidden]{display:none!important}
/* Page language in the top bar: only its code (RO) and an arrow; the native select lies invisible over it and opens the full list. */
.lang-pick{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:1px solid #dfe6f1;border-radius:12px;background:#fff;font-size:13px;font-weight:800;color:var(--navy);cursor:pointer}
.lang-pick::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.lang-pick:focus-within{outline:3px solid #94b5ff;outline-offset:2px}
.lang-pick .lang-pick-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0;border:0}