/**
 * @file
 * Base styles for the republica FL theme.
 *
 * Global defaults, layout structure, and typography basics.
 * All styling is handled via custom CSS — no framework dependencies.
 */

/* ========================================================================
   Font-face declarations (ABC Solar — self-hosted)

   'ABC Solar' covers the regular/italic/bold/bold-italic combinations
   used in body copy.  'ABC Solar Ultra' is a synthetic second family
   whose default-weight glyphs are drawn from the Ultra cut — this lets
   --font-heading resolve to the heaviest weight without every selector
   needing to spell out font-weight.
   ======================================================================== */

@font-face {
  font-family: 'ABC Solar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ABCSolar-Regular.woff2) format('woff2'),
       url(../fonts/ABCSolar-Regular.woff) format('woff');
}

@font-face {
  font-family: 'ABC Solar';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ABCSolar-RegularItalic.woff2) format('woff2'),
       url(../fonts/ABCSolar-RegularItalic.woff) format('woff');
}

/* No Bold cut — anything that asks for bold inside the 'ABC Solar'
   family is served the Ultra glyphs instead. */
@font-face {
  font-family: 'ABC Solar';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/ABCSolar-Ultra.woff2) format('woff2'),
       url(../fonts/ABCSolar-Ultra.woff) format('woff');
}

@font-face {
  font-family: 'ABC Solar';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/ABCSolar-UltraItalic.woff2) format('woff2'),
       url(../fonts/ABCSolar-UltraItalic.woff) format('woff');
}

@font-face {
  font-family: 'ABC Solar Ultra';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ABCSolar-Ultra.woff2) format('woff2'),
       url(../fonts/ABCSolar-Ultra.woff) format('woff');
}

@font-face {
  font-family: 'ABC Solar Ultra';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ABCSolar-UltraItalic.woff2) format('woff2'),
       url(../fonts/ABCSolar-UltraItalic.woff) format('woff');
}

/* ========================================================================
   Color variables (single source of truth)
   All color values should be defined here as CSS custom properties.
   Other CSS files must only reference these variables — no hardcoded colors.
   ======================================================================== */

:root {
  /* Theme colors */
  --color-black: #000;
  --color-white: #fff;
  --color-grey-light: #a0a0a0;
  --color-grey-dark: #3c3c3c;
  /* --color-highlight: #fed802;  */

  /* Semantic colors */
  --color-text: var(--color-black);
  --color-text-muted: var(--color-grey-light);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-white);
  --color-link: var(--color-black);
  --color-link-hover: var(--color-grey-dark);
  --color-focus: var(--color-grey-light);
  --color-podcast: #ff1818;
  --color-podcast-mercator: #01aafe;
  --color-podcast-background: #d2d2d2;
  --color-podcast-st1: #113dc9;
  --color-podcast-st2: #d311d4;
  --color-podcast-st3: #ff1818;


  /* Font families */
  --font-body: 'ABC Solar', system-ui, -apple-system, sans-serif;
  --font-heading: 'ABC Solar Ultra', system-ui, -apple-system, sans-serif;

  /* specific font sizes */
  --font-size-menu-heading: 22px;
  --font-size-menu-item: 22px;
  --font-size-lang-switch: 22px;
  --font-size-standard: 25px;
  --font-size-catch: 42px;
  --font-size-mega-catch: 70px;
  --font-size-expand: 18px;
  --font-size-section-header: 32px;      /* h2 */
  --font-size-section-subheader-3: 28px; /* h3 */
  --font-size-section-subheader-4: 24px; /* h4 */

  --line-height-menu-heading: 30px;
  --line-height-menu-item: 30px;
  --line-height-lang-switch: 30px;
  --line-height-standard: 32px;
  --line-height-catch: 50px;
  --line-height-mega-catch: 78px;
  --line-height-expand: 22px;
  --line-height-section-header: 38px;      /* h2 */
  --line-height-section-subheader-3: 34px; /* h3 */
  --line-height-section-subheader-4: 30px; /* h4 */

  /* Borders */
  --border-radius: 12px;
  --button-radius: 25px;

  /* Block spacing*/  
  --block-spacing: 6rem;
  --block-padding: 2rem; 

  /* Message colors */
  --color-status-bg: #d4edda;
  --color-status-border: #c3e6cb;
  --color-status-text: #155724;

  /* Track colors — keyed by taxonomy term ID (test values — replace with final brand colors)
     1 = Politik & Gesellschaft, 10 = Wirtschaft & Innovation,
     11 = Wissenschaft & Technologie, 14 = Medien & Öffentlichkeit,
     120 = Bildung & Lernen, 155 = Kunst & Kultur */
  --color-track-default: #f0e6f6;
  --color-track-1: #f0e8d0;
  --color-track-10: #d0d8f0;
  --color-track-11: #d0f0d8;
  --color-track-14: #e0d0f0;
  --color-track-120: #f0d0d0;
  --color-track-155: #d0e8f0;

  --color-warning-bg: #fff3cd;
  --color-warning-border: #ffeeba;
  --color-warning-text: #856404;

  --color-error-bg: #f8d7da;
  --color-error-border: #f5c6cb;
  --color-error-text: #721c24;

  /*structure */
  --layout-width: 1920px;
  --layout-width-small: 1600px;
  --layout-width-xsmall: 1024px;
}

@media (max-width: 1280px) {
  :root {
    --font-size-menu-heading: 20px;
    --font-size-menu-item: 20px;
    --font-size-lang-switch: 16px;
    --font-size-standard: 20px;
    --font-size-catch: 36px;
    --font-size-mega-catch: 50px;
    --font-size-expand: 16px;
    --font-size-section-header: 28px;
    --font-size-section-subheader-3: 24px;
    --font-size-section-subheader-4: 22px;

    --line-height-menu-heading: 28px;
    --line-height-menu-item: 25px;
    --line-height-lang-switch: 20px;
    --line-height-standard: 25px;
    --line-height-catch: 42px;
    --line-height-mega-catch: 58px;
    --line-height-expand: 20px;
    --line-height-section-header: 34px;
    --line-height-section-subheader-3: 30px;
    --line-height-section-subheader-4: 28px;

    --layout-width: 1280px;
    --layout-width-small: 1024px;
    --layout-width-xsmall: 767px;
    --block-spacing: 4rem;
  }
 }

 @media (max-width: 767px) {
  :root {
    --font-size-menu-heading: 17px;
    --font-size-menu-item: 17px;
    --font-size-lang-switch: 13px;
    --font-size-standard: 18px;
    --font-size-catch: 24px;
    --font-size-mega-catch: 35px;
    --font-size-expand: 13px;
    --font-size-section-header: 20px;
    --font-size-section-subheader-3: 18px;
    --font-size-section-subheader-4: 16px;

    --line-height-menu-heading: 24px;
    --line-height-menu-item: 22px;
    --line-height-lang-switch: 18px;
    --line-height-standard: 22px;
    --line-height-catch: 30px;
    --line-height-mega-catch: 42px;
    --line-height-expand: 18px;
    --line-height-section-header: 26px;
    --line-height-section-subheader-3: 22px;
    --line-height-section-subheader-4: 20px;
    
    --layout-width: 767px;
    --layout-width-small: 550px;
    --layout-width-xsmall: 550px;
    --block-spacing: 2rem;
    --block-padding: 1rem;

  }
}
  @media (max-width: 320px) {
  :root {
    --font-size-menu-heading: 17px;
    --font-size-menu-item: 17px;
    --font-size-lang-switch: 13px;
    --font-size-standard: 18px;
    --font-size-catch: 24px;
    --font-size-mega-catch: 35px;
    --font-size-expand: 13px;
    --font-size-section-header: 20px;
    --font-size-section-subheader-3: 18px;
    --font-size-section-subheader-4: 16px;

    --line-height-menu-heading: 24px;
    --line-height-menu-item: 22px;
    --line-height-lang-switch: 18px;
    --line-height-standard: 22px;
    --line-height-catch: 30px;
    --line-height-mega-catch: 42px;
    --line-height-expand: 18px;
    --line-height-section-header: 26px;
    --line-height-section-subheader-3: 22px;
    --line-height-section-subheader-4: 20px;
    
    --layout-width: 767px;
    --layout-width-small: 550px;
    --layout-width-xsmall: 320px;
    --block-spacing: 2rem;
    --block-padding: 1rem;

  }
  body {
    hyphens: auto;
  }
}


/* ========================================================================
   Reset / Normalize supplements
   ======================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-section-header);
  line-height: var(--line-height-section-header);
  margin: 2.5rem 0 1rem;
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-section-subheader-3);
  line-height: calc(var(--line-height-section-subheader-3));
  margin: 2rem 0 0.75rem;
}

h4 {
  font-family: var(--font-heading);
  font-size: var(--font-size-section-subheader-4);
  line-height: calc(var(--line-height-section-subheader-4));
  margin: 1.5rem 0 0.5rem;
}


/* ========================================================================
   Body defaults
   ======================================================================== */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================================
   text & formats
   ======================================================================== */

.catchphrase {
  font-size: var(--font-size-catch);
  line-height: var(--line-height-catch);
}

p {
  font-size: var(--font-size-standard);
  line-height: var(--line-height-standard);
}

.field--name-field-body li {
  font-size: var(--font-size-standard);
  line-height: var(--line-height-standard);
}


.field--name-field-body ul, .field--name-field-body ol {
  padding: 2rem 4rem;
}

.field--name-field-body ul li, .field--name-field-body ol li {
  margin-bottom: 1rem;
}

/* ========================================================================
   Container
   ======================================================================== */

.container {
  width: 100%;
  /* max-width: var(--layout-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem; */
}
/* 
@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
} */

/* ========================================================================
   Region layout
   ======================================================================== */

.region {
  width: 100%;
}

.layout-content {
  flex: 1 0 auto;
  min-width: 0;
  margin-top:1rem;
}

/* ========================================================================
   Site header
   ======================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Full-width white background only behind the logo bar (top row) */
.site-header::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4.5rem;
  background-color: var(--color-bg);
  z-index: 0;
}

/* ========================================================================
   Subhead
   ======================================================================== */

.subhead {
  background-color: var(--color-bg-alt);
}

/* --- Speaker menu in subhead --- */

.subhead nav ul {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.subhead nav ul li {
  margin: 0;
}

.subhead nav ul li a {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  font-family: var(--font-body);
  font-size: var(--font-size-expand);
  font-weight: 400;
  text-decoration: none;
  color: var(--color-black);
  border: 1px solid var(--color-black);
  border-radius: var(--button-radius);
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.subhead nav ul li a:hover {
  background: var(--color-grey-light, #eee);
}

.subhead nav ul li a.is-active {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

@media (max-width: 767px) {
  .subhead nav ul {
    gap: 0.4rem;
  }

  .subhead nav ul li a {
    padding: 0.35rem 0.85rem;
    font-size: calc(var(--font-size-expand) * 0.9);
  }
}

/* ========================================================================
   Skip link (accessibility)
   ======================================================================== */

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

.visually-hidden.focusable:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  clip: auto;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: bold;
  text-decoration: none;
}

/* ========================================================================
   Drupal admin / contextual links compatibility
   ======================================================================== */

.contextual-region {
  position: relative;
}

/* ========================================================================
   Typography base
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: 900;
}

a {
  color: inherit;
  text-decoration: underline;
}
p a:hover {
  text-decoration: underline dotted;
}

/* ========================================================================
   Drupal system messages
   ======================================================================== */

.messages {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
}

.messages--status {
  background-color: var(--color-status-bg);
  border: 1px solid var(--color-status-border);
  color: var(--color-status-text);
}

.messages--warning {
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
}

.messages--error {
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
}


/* ========================================================================
   Buttons & Elements
   ======================================================================== */

div.button { 
    border: 1px solid black;
    border-radius: var(--button-radius);
    margin-right: 1rem;
    font-size: var(- --font-size-menu-item);
    max-width: fit-content;

    /* Link fills whole button */
    /* padding: .5rem 1.5rem; */
    display: flex;
    align-items: center;
    padding: 0;
}

div.button a {
    text-transform: uppercase;
    text-decoration: none;
    font-size: var(--font-size-menu-item);

    display: block;
    padding: .5rem 1.5rem;
    flex: 1;
}

div.button:hover {
    background-color: #000000;
    /* border-color: var(--color-highlight); */
    color: #ffffff;
}

div.button a:hover {
    color: #ffffff;
}

@media (max-width: 767px) {
    div.button {
        padding: .4rem .5rem;
    }


}

/* ========================================================================
   Primary Local Tasks (admin tabs)
   ======================================================================== */

.block-local-tasks-block ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
}

.block-local-tasks-block ul li {
  margin: 0;
}

.block-local-tasks-block ul li a {
  display: block;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  border: 1px solid var(--color-grey-light);
  border-radius: var(--button-radius);
  color: var(--color-grey-dark);
  background: var(--color-white);
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.block-local-tasks-block ul li a:hover {
  background: var(--color-grey-dark);
  color: var(--color-white);
  border-color: var(--color-grey-dark);
}

.block-local-tasks-block ul li a.is-active {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* ========================================================================
   Drupal Messages
   ======================================================================== */

[data-drupal-messages] > div {  
  padding: 3rem 1.5rem;
  margin: 1rem;
  max-width: var(--layout-width);
  font-family: var(--font-body);
  font-size: var(--font-size-section-subheader-3);
  font-weight: bold;
  border-left: 8px solid;
  border-radius: 4px;
}

[data-drupal-messages] > div[aria-label*="Status"],
[data-drupal-messages] > div[aria-label*="status"] {
  background: #e8f5e9;
  border-color: #2e7d32;
  color: #1b5e20;
}

[data-drupal-messages] > div[aria-label*="Warnung"],
[data-drupal-messages] > div[aria-label*="warning"] {
  background: #fff8e1;
  border-color: #f9a825;
  color: #e65100;
}

[data-drupal-messages] > div[aria-label*="Fehler"],
[data-drupal-messages] > div[aria-label*="error"],
[data-drupal-messages] > div[role="alert"] {
  background: #fce4ec;
  border-color: #c62828;
  color: #b71c1c;
}

/* ========================================================================
   Cookie Banner
   ======================================================================== */

.disagree-button.eu-cookie-compliance-more-button, 
.eu-cookie-compliance-agree-button, 
.eu-cookie-compliance-default-button, 
.eu-cookie-compliance-hide-button, 
.eu-cookie-compliance-more-button-thank-you, 
.eu-cookie-withdraw-button, 
.eu-cookie-compliance-save-preferences-button, 
.eu-cookie-compliance-secondary-button {
  border: 1px solid #ffffff;
  background-color: #000000;
  box-shadow: none;
  border-radius: 25px;
  font-size: var(--font-size-expand);
  line-height: var(--line-height-standard);
  border-color: white;
  color: #ffffff;
  background: none;
  padding: .3rem .8rem;
  font-weight: normal;
  text-transform: uppercase;
  text-shadow: none;
}

#sliding-popup h1, #sliding-popup h2, #sliding-popup h3, #sliding-popup p, #sliding-popup label, #sliding-popup div, .eu-cookie-compliance-more-button, .eu-cookie-compliance-secondary-button, .eu-cookie-withdraw-tab {
    color: #ffffff;
    font-family: var(--font-body);
    font-size: var(--font-size-expand);
    background-color: #3c3c3c;
}

.disagree-button.eu-cookie-compliance-more-button:hover, 
.eu-cookie-compliance-agree-button:hover, 
.eu-cookie-compliance-default-button:hover, 
.eu-cookie-compliance-hide-button:hover, 
.eu-cookie-compliance-more-button-thank-you:hover, 
.eu-cookie-withdraw-button:hover,
.eu-cookie-compliance-secondary-button:hover {
  background-color: #000000;
  background-image: none;
}

/* ========================================================================
   Pager / Pagination
   ======================================================================== */

.pager {
  margin: 2.5rem auto 1rem;
}

.pager__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pager__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  font-family: var(--font-body);
  font-size: var(--font-size-expand);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  transition: background-color 0.2s, border-color 0.2s;
}

.pager__item a:hover {
  background-color: var(--color-grey-light);
  color: var(--color-white);
}

.pager__item.is-active a {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.pager__item--next a,
.pager__item--last a {
  font-weight: 400;
}

.pager__item--ellipsis {
  min-width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-expand);
  color: var(--color-grey-dark);
}


/* ========================================================================
   Layout Builder sections
   ======================================================================== */

.layout--twocol-section {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.layout--twocol-section--67-33 > .layout__region--first {
  flex: 0 0 67%;
  max-width: 67%;
  min-width: 0;
}

.layout--twocol-section--67-33 > .layout__region--second {
  flex: 0 0 33%;
  max-width: 33%;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

@media (max-width: 767px) {
  .layout--twocol-section--67-33 > .layout__region--first,
  .layout--twocol-section--67-33 > .layout__region--second {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ========================================================================
    Tables in Text field (Body)
   ======================================================================== */
/* In all tables: collapse borders */
.field--name-body table {
  border-collapse: collapse;
}

/* If "align" is set to "center" in popup, apply these rules: */
.field--name-body table[align='center'] {
  /* Set these to overwrite settings made in popup */
  width: 100% !important;
  border: none !important;
}

.field--name-body table[align='center'] td {
  /* Also here: overwrite settings made in popup */
  border: none !important;
  padding: 3px !important;
}

/* reduce text size to expand */
.field--name-body table[align='center'] p {
    font-size: var(--font-size-menu-heading);
    line-height: var(--line-height-menu-heading);
}

/* On mobile */
@media (max-width: 768px) {
  .field--name-body table[align='center'] tr {
    display: flex;
    flex-direction: column;
  }

  .field--name-body table[align='center'] td {
    width: 100% !important;
  }
}

/* ========================================================================
   Other
   ======================================================================== */

/* Photo Credits */
.field--name-field-image-video {
  position: relative;
}
.field--label-inline {
  display: flex;
  font-size: var(--font-size-expand);
  gap: .2rem;
  position: absolute;
  bottom: 0;
  right: 0;
  background: black;
  color: white;
  padding-right: 0 .5rem;
  border-radius: 0 0 var(--border-radius);
}
.field--label-inline .field__label::after {
  content: ':';
}

/* Photo Credits On Mobile: Dont overlay, white background one line below */
@media (max-width: 767px) {
  .field--label-inline {
    position: static;
    background: none;
    color: var(--color-text);
    padding: 0;
    margin-top: .25rem;
  }
}