/* Cookie consent (CookieConsent v3, assets/vendor/cookieconsent) in the Cokolex
   design system, light variant. Only tokens from tokens.css. The library reads its look from --cc-* variables;
   the few rules below set typography and spacing the variables don't cover. */

#cc-main {
  --cc-font-family: var(--font-sans);
  --cc-z-index: 300;
  --cc-modal-margin: var(--space-6);
  --cc-modal-border-radius: var(--radius-xl);
  --cc-btn-border-radius: var(--radius-sm);
  --cc-modal-transition-duration: var(--duration-slow);
  --cc-pm-toggle-border-radius: var(--radius-pill);

  --cc-bg: var(--surface-card);
  --cc-primary-color: var(--text-strong);
  --cc-secondary-color: var(--text-body);
  --cc-link-color: var(--text-link);
  --cc-separator-border-color: var(--border-subtle);
  --cc-overlay-bg: rgba(17, 24, 39, 0.4);

  /* Accept and reject carry the same weight (Greek DPA: no nudging). */
  --cc-btn-primary-bg: var(--surface-card);
  --cc-btn-primary-color: var(--text-strong);
  --cc-btn-primary-border-color: var(--border-default);
  --cc-btn-primary-hover-bg: var(--surface-sunken);
  --cc-btn-primary-hover-color: var(--text-strong);
  --cc-btn-primary-hover-border-color: var(--border-strong);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--brand-primary);
  --cc-btn-secondary-border-color: transparent;
  --cc-btn-secondary-hover-bg: var(--surface-brand-soft);
  --cc-btn-secondary-hover-color: var(--brand-primary);
  --cc-btn-secondary-hover-border-color: transparent;

  --cc-toggle-on-bg: var(--brand-primary);
  --cc-toggle-off-bg: var(--border-strong);
  --cc-toggle-on-knob-bg: var(--white);
  --cc-toggle-off-knob-bg: var(--white);
  --cc-toggle-enabled-icon-color: var(--brand-primary);
  --cc-toggle-disabled-icon-color: var(--border-strong);
  --cc-toggle-readonly-bg: var(--border-default);
  --cc-toggle-readonly-knob-bg: var(--white);
  --cc-toggle-readonly-knob-icon-color: var(--border-default);

  --cc-section-category-border: var(--border-subtle);
  --cc-cookie-category-block-bg: var(--surface-page);
  --cc-cookie-category-block-border: var(--border-subtle);
  --cc-cookie-category-block-hover-bg: var(--surface-sunken);
  --cc-cookie-category-block-hover-border: var(--border-default);
  --cc-cookie-category-expanded-block-bg: var(--surface-page);
  --cc-cookie-category-expanded-block-hover-bg: var(--surface-sunken);

  --cc-footer-bg: var(--surface-card);
  --cc-footer-color: var(--text-muted);
  --cc-footer-border-color: var(--border-subtle);
  --cc-webkit-scrollbar-bg: var(--border-default);
  --cc-webkit-scrollbar-hover-bg: var(--border-strong);
}

/* Greek pages: one typeface for Greek and Latin letters, so words like
   "cookies" or "YouTube" don't switch to Archivo mid-sentence
   (same idea as Exo 2 for Greek headings, DESIGN.md §3). */
html:lang(el) #cc-main { --cc-font-family: 'Fira Sans', var(--font-sans); }
html:lang(el) .video-consent { font-family: 'Fira Sans', var(--font-sans); }

/* ---- Banner: compact card, logo on top ---- */
#cc-main .cm {
  max-width: 344px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-default); box-shadow: var(--shadow-md);
}
#cc-main .cm__texts { padding-top: var(--space-5); }
#cc-main .cm__title,
#cc-main .cm__desc { padding-inline: var(--space-5); }
/* The library unsets spans inside #cc-main, so the logo classes need the id here. */
#cc-main .cx-consent-brand { display: block; padding: 0 var(--space-5); margin-bottom: var(--space-4); }
#cc-main .cx-consent-brand .logo { display: inline-flex; align-items: center; gap: 9px; color: var(--brand-wordmark); }
#cc-main .cx-consent-brand .logo__mark { width: 22px; height: 22px; }
#cc-main .cx-consent-brand .logo__word {
  font-family: var(--font-display); font-size: 14px; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wordmark); line-height: 1;
}
#cc-main .cm__title {
  font-size: var(--text-md); font-weight: var(--weight-medium);
  line-height: var(--leading-snug); color: var(--text-strong);
}
#cc-main .cm__title + .cm__desc { margin-top: var(--space-2); }
#cc-main .cm__desc { font-size: var(--text-sm); line-height: var(--leading-normal); padding-bottom: var(--space-4); text-wrap: pretty; }
#cc-main .cm__btns { padding: 0 var(--space-5); border-top: 0; }
#cc-main .cm__btn-group { gap: var(--space-2); }
#cc-main .cm__btn + .cm__btn, #cc-main .cm__btn-group + .cm__btn-group { margin-top: var(--space-2); }
#cc-main .cm__btn,
#cc-main .pm__btn { font-size: var(--text-sm); font-weight: var(--weight-medium); transition: var(--transition-control); }
#cc-main .cm__btn { min-height: 36px; padding-block: 0; }
#cc-main .pm__btn { min-height: 44px; }
#cc-main .cm__btn--close { display: none !important; }
/* Footer row: settings and privacy as quiet links, no divider */
#cc-main .cm__footer { background: transparent; border-top: 0; padding: var(--space-3) var(--space-5) var(--space-4); }
#cc-main .cm__links { padding: 0; }
#cc-main .cm__link-group { gap: var(--space-5); align-items: center; }
#cc-main .cm__link-group > * + * { margin-left: 0; }
#cc-main .cm__footer a { font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); white-space: nowrap; transition: var(--transition-control); }
#cc-main .cm__footer a:hover { color: var(--text-strong); }
#cc-main .cm__footer .cx-consent-settings {
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-link);
  white-space: nowrap; cursor: pointer; transition: var(--transition-control);
}
#cc-main .cm__footer .cx-consent-settings:hover { color: var(--text-link-hover); }

/* The library switches to a stacked layout below 640px with !important rules;
   keep our gutter and accept and reject side by side. */
@media screen and (max-width: 640px) {
  #cc-main .cm__title, #cc-main .cm__desc, #cc-main .cm__btns { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  #cc-main .cm__links { padding-left: 0 !important; padding-right: 0 !important; }
  #cc-main .cm__btns { border-top: 0 !important; }
  #cc-main .cm__btn-group { flex-direction: row !important; gap: var(--space-2); }
  #cc-main .cm__btn-group .cm__btn + .cm__btn { margin: 0 !important; }
  #cc-main .cm__link-group { justify-content: flex-start !important; }
}

/* ---- Preferences ---- */
#cc-main .pm { box-shadow: var(--shadow-lg); }
#cc-main .pm__header, #cc-main .pm__body, #cc-main .pm__footer { padding-inline: var(--space-7); }
#cc-main .pm__title {
  font-family: var(--font-display-greek); font-size: var(--text-2xl); font-weight: var(--weight-regular);
  letter-spacing: var(--site-tracking-headline);
}
#cc-main:lang(en) .pm__title { font-family: var(--font-display); }
#cc-main .pm__section-title { font-size: var(--text-md); font-weight: var(--weight-medium); }
#cc-main .pm__section-desc { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-body); }
#cc-main .pm__section-desc a { color: var(--text-link); font-weight: var(--weight-semibold); }
#cc-main .pm__section-desc a:hover { color: var(--text-link-hover); }
#cc-main .pm__badge { background: var(--surface-sunken); color: var(--text-muted); font-weight: var(--weight-medium); }
#cc-main .pm__table-th { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
#cc-main .pm__table-td { font-size: var(--text-xs); color: var(--text-body); }
#cc-main :focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Footer link "Cookie settings" ---- */
.footer__bottom .cx-consent-link {
  font: inherit; color: var(--text-muted); background: none; border: 0; padding: 0; cursor: pointer;
  transition: var(--transition-control);
}
.footer__bottom .cx-consent-link:hover { color: var(--text-strong); }

/* ---- YouTube: notice before anything loads from Google ---- */
.video-consent {
  cursor: default; background: var(--surface-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); padding: var(--space-6); text-align: center;
}
.video-consent:hover { border-color: var(--border-default); }
.video-consent__eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted);
}
.video-consent__text { max-width: 460px; margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-body); text-wrap: pretty; }
.video-consent__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
@media (max-width: 560px) {
  .video-consent { aspect-ratio: auto; min-height: 280px; }
  .video-consent__actions .btn { flex: 1 1 100%; }
}