/* The Date&Learn logo (includes/brand.php): heart of flags + wordmark + optional slogan. One look everywhere. */
:root{--brand-gold:#cc9a3d;--brand-amp:#1e293b;--brand-coral:#e05d48;--brand-slogan:#64748b}
html[data-theme="dark"]{--brand-gold:#f3c768;--brand-amp:#f8fafc;--brand-coral:#ff8a74;--brand-slogan:#a2b3ca}

.brand{--brand-mark:40px;--brand-size:1.6rem;display:inline-flex;align-items:center;gap:calc(var(--brand-mark) * .22);flex-shrink:0;color:inherit;text-decoration:none;line-height:1;-webkit-tap-highlight-color:transparent}
.brand-mark{display:block;flex:none}
.brand-mark img{display:block;height:var(--brand-mark);width:auto;max-width:none;filter:drop-shadow(0 2px 3px rgba(15,23,42,.14));transition:transform .45s cubic-bezier(.2,.9,.3,1.5);-webkit-user-drag:none}
a.brand:hover .brand-mark img,a.brand:focus-visible .brand-mark img{transform:scale(1.08) rotate(-5deg)}
a.brand,a.brand:hover{text-decoration:none}
a.brand:focus-visible{outline:2px solid #1a9ee5;outline-offset:4px;border-radius:12px}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-name{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:var(--brand-size);letter-spacing:-.02em;line-height:1;white-space:nowrap}
.brand-date{color:var(--brand-gold)}
.brand-amp{color:var(--brand-amp);margin:0 .015em}
.brand-learn{color:var(--brand-coral)}
.brand-slogan{margin-top:.34em;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:calc(var(--brand-size) * .44);font-weight:600;line-height:1.15;letter-spacing:.005em;color:var(--brand-slogan);white-space:nowrap}

/* Sizes */
.brand--header{--brand-mark:40px;--brand-size:1.6rem}
.brand--footer{--brand-mark:46px;--brand-size:1.85rem}
.brand--auth{--brand-mark:56px;--brand-size:2.3rem}
.brand--admin{--brand-mark:32px;--brand-size:1.3rem}
.brand--mini{--brand-mark:26px;--brand-size:1.1rem}
@media (max-width:640px){
  .brand--header{--brand-mark:36px;--brand-size:1.42rem}
  .brand--auth{--brand-mark:48px;--brand-size:1.95rem}
  .brand--footer{--brand-mark:42px;--brand-size:1.7rem}
}
@media (max-width:359px){.brand--header .brand-slogan{display:none}}

/* On the blue gradients (sign-in pages, footer): white name and the yellow "&" of the site accents */
.brand--on-color{--brand-gold:#fff;--brand-amp:#ffd140;--brand-coral:#fff;--brand-slogan:rgba(255,255,255,.9)}
.brand--on-color .brand-name{text-shadow:0 2px 12px rgba(0,56,112,.25)}
.brand--on-color .brand-slogan{text-shadow:0 1px 6px rgba(0,56,112,.22)}
.brand--on-color .brand-mark img{filter:drop-shadow(0 4px 10px rgba(0,56,112,.3))}
.brand--on-color:focus-visible{outline-color:#fff}
/* ... in the dark theme those backgrounds are dark: brand colours again */
html[data-theme="dark"] .brand--on-color{--brand-gold:#f3c768;--brand-amp:#f8fafc;--brand-coral:#ff8a74;--brand-slogan:#a2b3ca}
html[data-theme="dark"] .brand--on-color .brand-name,html[data-theme="dark"] .brand--on-color .brand-slogan{text-shadow:none}
/* Always-dark surfaces (admin sidebar) */
.brand--dark{--brand-gold:#f3c768;--brand-amp:#f8fafc;--brand-coral:#ff8a74;--brand-slogan:#94a3b8}

@media (prefers-reduced-motion:reduce){.brand-mark img{transition:none}a.brand:hover .brand-mark img,a.brand:focus-visible .brand-mark img{transform:none}}
@media print{.brand-mark img{filter:none}}

/* Logo above the form on the sign-in pages (login, register, password recovery, e-mail confirmation, onboarding) */
.auth-brand{margin-bottom:22px;position:relative;z-index:1}
@media (max-width:640px){.auth-brand{margin-top:34px;margin-bottom:18px}}
/* Soft halo in the background colour: the floating decorative flags do not show through behind the logo */
.auth-brand::before{content:"";position:absolute;inset:-30px -46px;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(33,165,233,.94) 58%,rgba(33,165,233,0))}
html[data-theme="dark"] .auth-brand::before{background:radial-gradient(closest-side,rgba(28,38,56,.94) 58%,rgba(28,38,56,0))}