/*
Theme Name:   Solfesten Kadence Child
Theme URI:    https://solfesten.com
Description:  Kadence child theme for Solfesten på Rjukan. Mobile-first festival design.
Author:       Solfesten
Author URI:   https://solfesten.com
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  solfesten-kadence-child
Tags:         festival, mobile-first, norwegian
*/

/* ══════════════════════════════════════════════
   SOLFESTEN – DESIGN TOKENS
   Disse CSS-variablene er kilden til sannheten.
   Endre her for å oppdatere hele temaet.
   ══════════════════════════════════════════════ */
:root {
  /* Primærfarger */
  --sol-yellow:        #FFE000;   /* Logogul */
  --sol-yellow-dark:   #D4A017;   /* Aksent/grenser */
  --sol-yellow-pale:   #FFF8CC;   /* Lys bakgrunn */
  --sol-maroon:        #6B1A1A;   /* Mørkerød – overskrifter, knapper */
  --sol-maroon-light:  #8B2222;   /* Hover-tilstand */

  /* Bakgrunner */
  --sol-cream:         #F7F2E8;   /* Primær sidebakgrunn */
  --sol-cream-mid:     #EDE6D6;   /* Seksjonsbakgrunn */
  --sol-cream-dark:    #DDD0BA;   /* Alternerende seksjon */

  /* Tekst */
  --sol-text-dark:     #1E0E02;
  --sol-text-mid:      #4A3220;
  --sol-text-light:    #7A5A3A;

  /* Grenser og skillelinjer */
  --sol-divider:       #C8B898;
  --sol-border:        #D4A017;

  /* Typografi – koblet til Google Fonts i functions.php */
  --font-display:      'Playfair Display', Georgia, serif;
  --font-body:         'Source Sans 3', sans-serif;
  --font-serif:        'Lora', Georgia, serif;
}

/* ══════════════════════════════════════════════
   GLOBAL BASE
   ══════════════════════════════════════════════ */
body {
  background-color: var(--sol-cream);
  font-family: var(--font-body);
  color: var(--sol-text-dark);
  font-size: 16px;
  line-height: 1.65;
}

/* Kadence bruker dette for max-width på innhold */
.wp-site-blocks,
.site-container {
  background-color: var(--sol-cream);
}

/* ══════════════════════════════════════════════
   TYPOGRAFI
   ══════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--sol-maroon);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.4rem); }

p {
  font-family: var(--font-body);
  color: var(--sol-text-mid);
  line-height: 1.7;
}

/* Blokksitering – brukes til historietekst */
blockquote,
.wp-block-quote {
  font-family: var(--font-serif);
  font-style: italic;
  border-left: 4px solid var(--sol-yellow-dark);
  padding-left: 1.2rem;
  color: var(--sol-text-mid);
  margin: 1.5rem 0;
}

/* Lenker */
a {
  color: var(--sol-maroon);
  text-decoration: none;
  border-bottom: 1.5px solid var(--sol-yellow-dark);
  transition: color 0.15s, border-color 0.15s;
}
a:hover {
  color: var(--sol-maroon-light);
  border-bottom-color: var(--sol-maroon-light);
}

/* ══════════════════════════════════════════════
   HEADER / NAVIGASJON
   Kadence header-klasser
   ══════════════════════════════════════════════ */
.site-header,
#masthead {
  background-color: var(--sol-yellow) !important;
  border-bottom: 3px solid #2A1A00;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Logo-tekst */
.site-branding .site-title,
.site-branding .custom-logo-link,
.header-logo .site-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--sol-maroon) !important;
  letter-spacing: 0.04em;
  border-bottom: none;
}

/* Navigasjonslenker i header */
.main-navigation a,
.nav-menu > li > a,
.kadence-navigation .menu > li > a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sol-maroon) !important;
  border-bottom: none;
}

.main-navigation a:hover,
.nav-menu > li > a:hover,
.kadence-navigation .menu > li > a:hover {
  color: var(--sol-text-dark) !important;
  background-color: rgba(0,0,0,0.06);
  border-radius: 6px;
  border-bottom: none;
}

/* Mobilheader */
#mobile-header,
.site-mobile-header-wrap {
  background-color: var(--sol-yellow) !important;
  border-bottom: 3px solid #2A1A00 !important;
}

/* site-container inne i header – transparent */
.site-header-row-container-inner .site-container {
  background-color: transparent !important;
}

/* Hamburger-meny (mobil) */
.kadence-mobile-menu-toggle,
button.menu-toggle {
  background: var(--sol-maroon) !important;
  color: var(--sol-yellow) !important;
  border-radius: 6px;
}

/* Mobil dropdown-panel */
.kadence-mobile-nav,
.main-navigation.toggled .nav-menu {
  background-color: var(--sol-maroon) !important;
}
.kadence-mobile-nav a,
.main-navigation.toggled .nav-menu a {
  color: var(--sol-cream) !important;
  border-bottom: none;
  border-left: 3px solid transparent;
  transition: border-color 0.15s;
}
.kadence-mobile-nav a:hover,
.main-navigation.toggled .nav-menu a:hover {
  border-left-color: var(--sol-yellow);
  color: var(--sol-yellow) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* ══════════════════════════════════════════════
   KNAPPER (Kadence Button-blokk + WP standard)
   ══════════════════════════════════════════════ */
.wp-block-button .wp-block-button__link,
.button,
button[type="submit"],
input[type="submit"] {
  background-color: var(--sol-yellow) !important;
  color: var(--sol-maroon) !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  border: 2px solid #2A1A00 !important;
  border-radius: 8px !important;
  padding: 12px 32px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  transition: transform 0.15s, box-shadow 0.15s !important;
  text-decoration: none;
}

.wp-block-button .wp-block-button__link:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(0,0,0,0.28) !important;
  background-color: var(--sol-yellow) !important;
  color: var(--sol-maroon) !important;
  border: none;
}

/* Omriss-knapp (f.eks. "Fullt program") */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--sol-maroon) !important;
  border: 2px solid var(--sol-maroon) !important;
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--sol-maroon) !important;
  color: #fff !important;
  transform: none;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════
   KADENCE SEKSJON-BAKGRUNNER
   Bruk disse klassene i Kadence Row-blokken
   ══════════════════════════════════════════════ */

/* Cream – standard */
.bg-cream,
.section-cream {
  background-color: var(--sol-cream);
}

/* Cream-mid – alternerende seksjoner */
.bg-cream-mid,
.section-alt {
  background-color: var(--sol-cream-mid);
}

/* Mørkerød – CTA og sitat-band */
.bg-maroon,
.section-dark {
  background-color: var(--sol-maroon);
  color: #fff;
}
.bg-maroon h1, .bg-maroon h2, .bg-maroon h3,
.section-dark h1, .section-dark h2, .section-dark h3 {
  color: var(--sol-yellow-pale);
}
.bg-maroon p, .section-dark p {
  color: rgba(255, 248, 204, 0.88);
}

/* Gul – logo-match bakgrunn */
.bg-yellow,
.section-yellow {
  background-color: var(--sol-yellow);
  border-top: 3px solid #2A1A00;
  border-bottom: 3px solid #2A1A00;
}
.bg-yellow h1, .bg-yellow h2, .bg-yellow h3,
.section-yellow h1, .section-yellow h2, .section-yellow h3 {
  color: var(--sol-maroon);
}
.bg-yellow p, .section-yellow p {
  color: var(--sol-text-mid);
}

/* ══════════════════════════════════════════════
   FEATURE / ICON BOKS (Kadence Icon List / Info Box)
   ══════════════════════════════════════════════ */
.wp-block-kadence-infobox,
.kt-blocks-info-box-wrap {
  background-color: var(--sol-yellow-pale) !important;
  border: 1.5px solid var(--sol-yellow-dark) !important;
  border-radius: 10px !important;
}

.kt-blocks-info-box-title {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--sol-text-dark) !important;
}

/* ══════════════════════════════════════════════
   PROGRAM-LISTE
   Bruk Kadence Timeline-blokk eller Custom HTML
   ══════════════════════════════════════════════ */
.solfesten-program-item {
  display: grid;
  grid-template-columns: 60px 12px 1fr;
  align-items: start;
  gap: 0 10px;
  padding: 12px 14px;
  background: var(--sol-cream-mid);
  border-radius: 8px;
  border-left: 4px solid var(--sol-yellow-dark);
  margin-bottom: 4px;
}

.solfesten-program-item .prog-time {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sol-maroon);
  letter-spacing: 0.06em;
  padding-top: 3px;
}

.solfesten-program-item .prog-dot {
  width: 10px;
  height: 10px;
  background: var(--sol-yellow-dark);
  border-radius: 50%;
  margin-top: 5px;
}

.solfesten-program-item .prog-name {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--sol-text-dark);
  line-height: 1.35;
}

.solfesten-program-item .prog-sub {
  font-size: 0.8rem;
  color: var(--sol-text-light);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════
   SPONSOR GRID
   ══════════════════════════════════════════════ */
.solfesten-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 1rem 0;
}

@media (max-width: 480px) {
  .solfesten-sponsor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.solfesten-sponsor-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--sol-divider);
  padding: 10px 8px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solfesten-sponsor-card img {
  max-width: 100%;
  max-height: 36px;
  object-fit: contain;
  opacity: 0.82;
  transition: opacity 0.2s;
}

.solfesten-sponsor-card:hover img {
  opacity: 1;
}

.solfesten-main-sponsor {
  background: #fff;
  border-radius: 10px;
  border: 2.5px solid var(--sol-yellow-dark);
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.solfesten-main-sponsor img {
  max-height: 52px;
  object-fit: contain;
}

/* ══════════════════════════════════════════════
   DIVIDER MED LABEL
   ══════════════════════════════════════════════ */
.solfesten-divider-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1rem 0 0.8rem;
}
.solfesten-divider-label::before,
.solfesten-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sol-divider);
}
.solfesten-divider-label span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sol-text-light);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   GALLERI
   ══════════════════════════════════════════════ */
.wp-block-gallery .blocks-gallery-grid {
  gap: 4px !important;
}

.wp-block-gallery .blocks-gallery-item figure {
  border-radius: 0 !important;
}

.wp-block-gallery .blocks-gallery-item img {
  transition: transform 0.4s ease;
}

.wp-block-gallery .blocks-gallery-item:hover img {
  transform: scale(1.04);
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.site-footer,
#colophon {
  background-color: var(--sol-maroon) !important;
  color: rgba(255, 255, 255, 0.6);
}

.site-footer a,
#colophon a {
  color: var(--sol-yellow);
  border-bottom: none;
}

.site-footer a:hover,
#colophon a:hover {
  color: #fff;
}

.site-footer .site-title,
#colophon .site-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--sol-yellow) !important;
}

/* Sosiale ikoner i footer */
.site-footer .social-links-wrap a,
.footer-social a {
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  transition: background 0.2s;
}

.site-footer .social-links-wrap a:hover,
.footer-social a:hover {
  background: rgba(255,255,255,0.22);
}

/* ══════════════════════════════════════════════
   KADENCE-SPESIFIKKE OVERRIDES
   Kadence bruker egne CSS-variabler – vi mapper
   Solfesten-fargene til Kadence sine variabler
   ══════════════════════════════════════════════ */
:root {
  /* Kadence Global Colors */
  --global-palette1:   var(--sol-maroon);       /* Primary */
  --global-palette2:   var(--sol-maroon-light);  /* Secondary */
  --global-palette3:   var(--sol-yellow);        /* Accent 1 */
  --global-palette4:   var(--sol-yellow-dark);   /* Accent 2 */
  --global-palette5:   var(--sol-cream);         /* Background */
  --global-palette6:   var(--sol-cream-mid);     /* Light bg */
  --global-palette7:   var(--sol-text-dark);     /* Text dark */
  --global-palette8:   var(--sol-text-mid);      /* Text mid */
  --global-palette9:   var(--sol-text-light);    /* Text light */

  /* Kadence typography */
  --global-display-font:  'Playfair Display', Georgia, serif;
  --global-body-font:     'Source Sans 3', sans-serif;
  --global-heading-font:  'Playfair Display', Georgia, serif;
}

/* ══════════════════════════════════════════════
   MOBIL-FIRST JUSTERINGER
   ══════════════════════════════════════════════ */
@media (max-width: 600px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.1rem; }

  .wp-block-button .wp-block-button__link {
    width: 100%;
    text-align: center;
  }

  /* Kadence section padding mobil */
  .wp-block-kadence-rowlayout {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

@media (min-width: 601px) and (max-width: 960px) {
  .solfesten-sponsor-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ══════════════════════════════════════════════
   UTILITY-KLASSER
   Bruk direkte i Kadence Advanced CSS-feltet
   ══════════════════════════════════════════════ */
.text-maroon     { color: var(--sol-maroon) !important; }
.text-yellow     { color: var(--sol-yellow-dark) !important; }
.text-cream      { color: var(--sol-cream) !important; }
.text-center     { text-align: center; }
.font-display    { font-family: var(--font-display); }
.font-serif      { font-family: var(--font-serif); }
.italic          { font-style: italic; }
.border-yellow   { border: 2px solid var(--sol-yellow-dark) !important; border-radius: 10px !important; }
.mt-0            { margin-top: 0 !important; }
.mb-0            { margin-bottom: 0 !important; }