/**
 * Parken Zoo - Tema 2026
 * Baserat på Brand Book utkast 03
 * Färger: #11312B (mörkgrön), #D5AC67 (guld)
 * Typsnitt: DM Serif Display, DM Sans, Courgette (Google Fonts)
 */

/* ==========================================================================
   CSS Custom Properties - Brand Book 2026
   ========================================================================== */
:root {
  /* Grundfärger */
  --pz-color-primary: #11312b;      /* Mörkgrön - Pantone 627 C */
  --pz-color-accent: #D5AC67;       /* Guld - Pantone 4024 C */
  
  /* Färgvariationer */
  --pz-color-primary-rgb: 17, 49, 43;
  --pz-color-accent-rgb: 213, 172, 103;
  
  /* Typsnitt – DM Serif (Text, inte Display) för rubriker */
  --pz-font-heading: 'DM Serif Text', Georgia, serif;
  --pz-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --pz-font-payoff: 'Courgette', cursive;

  /* Teckenmellanrum – rubriker något tätare (mindre glesa) */
  --pz-letter-spacing-heading: 0.02em;
  --pz-letter-spacing-menu: 0.07em;
  --pz-letter-spacing-btn: 0.05em;

  /* Nedtonad guldfärg för bottenplattor – "pop" */
  --pz-color-accent-muted: rgba(213, 172, 103, 0.25);
}

/* ==========================================================================
   Typografi - Brand Book sid 7: RUBRIK | BRÖDTEXT | PAYOFF
   ========================================================================== */

/* BRÖDTEXT – DM Sans (exempel i PDF: "Djurpark • Tivoli • Bad" = nav/brödtext) */
html {
  font-family: var(--pz-font-body);
}

/* Meny – BRÖDTEXT (DM Sans), vikt Medium för tydlighet */
body .site-header .site-header__nav__main-menu a,
body .site-header .site-header__nav__secondary-menu a,
body .site-footer .site-footer__nav a {
  font-family: var(--pz-font-body) !important;
  font-weight: 500 !important;
}

/* RUBRIK – DM Serif (Text) – inte Display, weight 400 */
body .heading-label,
body h1, body h2, body h3, body h4, body h5,
body .block-calendar .calendar__result__categories button,
body .block-calendar .calendar__result__item__content__labels span,
body .block-newsletter h1, body .block-newsletter h2 {
  font-family: var(--pz-font-heading) !important;
  font-weight: 400 !important;
}

/* Knappar – Bilaga 2: DM Sans Bold (inte DM Serif Display) */
.btn {
  font-family: var(--pz-font-body) !important;
  font-weight: 700 !important;
}

/* Teckenmellanrum – rubriker */
.heading-label,
h1, h2, h3, h4, h5 {
  letter-spacing: var(--pz-letter-spacing-heading);
}

/* Sajtskiss: Gemena rubriker – mjukare, mer välkomnande än versaler */
.heading-label,
h1, h2, h3, h4, h5 {
  text-transform: none !important;
}

.site-header__nav__main-menu > ul > li > a {
  letter-spacing: var(--pz-letter-spacing-menu);
}

.site-footer .site-footer__nav > ul > li.menu-item-has-children > a:first-of-type {
  letter-spacing: var(--pz-letter-spacing-menu);
}

/* Footer – mindre meny (minskad storlek) */
.site-footer .site-footer__nav {
  font-size: 0.82em !important;
}
.site-footer .site-footer__nav > ul > li.menu-item-has-children > a:first-of-type {
  font-size: 1em !important;
}

/* Letter-spacing – mindre gap mellan meny-items (undviker att gå in i loggan) */
.site-header .site-header__nav__main-menu > ul > li > a {
  letter-spacing: 0.05em !important;
}

.site-header .site-header__nav__main-menu .sub-menu a {
  letter-spacing: normal !important;
}

.block-calendar .calendar__result__categories button,
.block-calendar .calendar__result__item__content__labels span {
  letter-spacing: var(--pz-letter-spacing-btn);
}

.btn {
  letter-spacing: var(--pz-letter-spacing-btn);
}

/* PAYOFF – Courgette (slogan, rubrik-stil med handskriven känsla) */
.lede,
.sup-heading {
  font-family: var(--pz-font-payoff) !important;
}

/* Bilaga 1–2: Öppettider – etiketter DM Serif Regular, status DM Sans Bold */
.block-today .today-opening-hours b {
  font-family: var(--pz-font-heading) !important;
  font-weight: 400 !important;
}

.block-today .today-opening-hours a {
  font-family: var(--pz-font-body) !important;
  font-weight: 700 !important;
}

/* Bilaga 2: Program & kalender, Biljetter & säsongskort – DM Sans Bold */
.block-today .today-shortcuts .today-shortcut a {
  font-family: var(--pz-font-body) !important;
  font-weight: 700 !important;
}

/* Brödtext i kort – oförändrad (ej fetstil) */
.block-columns .columns__item__content p,
.block-columns-scroll .columns-scroll-list__item__content p {
  font-family: var(--pz-font-body) !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   Färger - Överskriver gamla färgvärden
   ========================================================================== */
.h1, .h2, h1, h2 {
  color: var(--pz-color-primary) !important;
}

.h3, .h4, h3, h4 {
  color: var(--pz-color-primary) !important;
}

/* Länkar */
p a {
  color: var(--pz-color-accent);
}

/* Knappar – sajtskiss: lite större, svagt rundade hörn */
.btn {
  background-color: var(--pz-color-primary) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 1rem 1.3rem !important;
}

.btn:hover {
  background-color: #1a443c !important;
}

/* ==========================================================================
   Header - Primär grön bakgrund med vit text
   Tillgänglighet: minst 4.5:1 kontrast (vit #fff på #11312B)
   ========================================================================== */
.site-header {
  background: var(--pz-color-primary) !important;
}

/* Huvudmeny + sekundär meny: vit text på grön – tillgänglig kontrast */
body .site-header .site-header__nav__main-menu a,
body .site-header .site-header__nav__main-menu > ul > li > a,
body .site-header .site-header__nav__main-menu > ul > li > a:first-of-type,
body .site-header .site-header__nav__main-menu li.current-menu-ancestor > a,
body .site-header .site-header__nav__main-menu li.current-menu-item > a,
body .site-header .site-header__nav__main-menu li.current_page_ancestor > a,
body .site-header .site-header__nav__main-menu li.current_page_item > a,
body .site-header .site-header__nav__secondary-menu a {
  color: #fff !important;
}


body .site-header .site-header__nav__secondary-menu a:hover {
  color: #fff !important;
  opacity: 1;
}

/* Mobilmeny-ikon (hamburger) - vit för grön bakgrund */
.site-header__nav-open {
  background-image: url(../img/icon-menu-white.svg) !important;
}

/* Mobilmeny: Visa när #site-nav är target (klick på Meny) */
@media (max-width: 991px) {
  #site-nav:target {
    display: block !important;
  }

  /* Mobilmeny-overlay: samma primär grön som header – ingen outline (undviker dubbel grön) */
  #site-nav.site-header__nav {
    background: var(--pz-color-primary) !important;
    outline: none !important;
    padding: 2.5em 2em 5em !important;
  }

  /* Mobilmeny – letter-spacing endast på rubriker, inte undermenyer */
  #site-nav .site-header__nav__main-menu > ul > li > a:first-of-type {
    font-size: 1.35rem !important;
    padding: 0.5em 0 !important;
    letter-spacing: 0.1em !important;
  }

  #site-nav .site-header__nav__main-menu .sub-menu a {
    letter-spacing: normal !important;
  }

  #site-nav .site-header__nav__main-menu .sub-menu a {
    font-size: 1rem !important;
  }

  #site-nav .site-header__nav__secondary-menu,
  #site-nav .site-header__nav__secondary-menu a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.9rem !important;
  }

  #site-nav .site-header__nav__secondary-menu {
    padding-top: 1.25em !important;
  }

  /* Undermeny: samma grön som huvudmenyn (inte mörkare ton) */
  #site-nav .site-header__nav__main-menu .sub-menu {
    background: var(--pz-color-primary) !important;
  }

  #site-nav .site-header__nav__main-menu .sub-menu a {
    color: rgba(255, 255, 255, 0.95) !important;
  }
}

.site-header__nav__main-menu > ul > li {
  white-space: nowrap;
}

.site-header__nav__main-menu > ul > li > a:first-of-type {
  white-space: nowrap;
}

@media (min-width: 992px) {
  .site-header__nav__main-menu > ul {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.site-header__nav__close .close-x {
  stroke: #fff;
}

.site-header__nav__main-menu .sub-menu-toggle {
  color: #fff;
}

.site-header__nav__main-menu > ul > li {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

@media (min-width: 992px) {
  /* Menyer lodrätt centrerade i headern (mitten), alignade till höger */
  .site-header__nav {
    background: transparent !important;
    outline: none !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding: 0.75em 0 1.35em 0 !important;
  }

  .site-header__nav__main-menu,
  .site-header__nav__secondary-menu {
    position: static !important;
  }

  .site-header__nav__secondary-menu {
    top: auto !important;
  }

  /* Höger-alignerade menyrader */
  .site-header__nav__main-menu {
    right: auto !important;
    left: auto !important;
  }

  .site-header__nav__main-menu > ul {
    justify-content: flex-end !important;
  }

  /* Mindre punktstorlek på menyn */
  .site-header .site-header__nav__main-menu > ul > li > a,
  .site-header .site-header__nav__main-menu > ul > li > a:first-of-type {
    font-size: 0.85em !important;
    padding: 0.5em 0.35em !important;
  }

  @media (min-width: 1200px) {
    .site-header .site-header__nav__main-menu > ul > li > a,
    .site-header .site-header__nav__main-menu > ul > li > a:first-of-type {
      font-size: 0.9em !important;
    }
  }

  .site-header__nav__secondary-menu,
  .site-header__nav__secondary-menu a {
    font-size: 0.75em !important;
  }

  /* Dropdown-pil: vit CSS-triangel på grön bakgrund */
  .site-header .site-header__nav__main-menu > ul > li.menu-item-has-children > a {
    background-image: none !important;
  }

  .site-header .site-header__nav__main-menu > ul > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
  }

  .site-header__nav__secondary-menu,
  .site-header__nav__secondary-menu a {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .site-header__nav__secondary-menu a:hover {
    color: #fff !important;
  }

  .site-header__nav__main-menu .sub-menu {
    background: var(--pz-color-primary) !important;
  }

  .site-header__nav__main-menu .sub-menu a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 0.5em 1.25em !important;
  }
}

/* Undermeny – svagt rundade hörn (gap oförändrat, som app.min) */
.site-header__nav__main-menu .sub-menu {
  border-radius: 4px !important;
}

/* ==========================================================================
   Footer - Primär grön bakgrund med vit text
   ========================================================================== */
.site-footer {
  background: var(--pz-color-primary) !important;
  color: rgba(255, 255, 255, 0.95);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.95);
}

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

.site-footer .site-footer__nav > ul > li.menu-item-has-children > a:first-of-type {
  color: #fff !important;
}

.site-footer__last-part {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.site-footer .btn {
  background: var(--pz-color-accent) !important;
  color: var(--pz-color-primary) !important;
}

.site-footer .btn:hover {
  background: #e5c078 !important;
}

/* Footer - vita ikoner för sociala medier på grön bakgrund */
.site-footer .social-media-links__item--icon-facebook {
  background-image: url(../img/icon-facebook-white.svg) !important;
}
.site-footer .social-media-links__item--icon-instagram {
  background-image: url(../img/icon-instagram-white.svg) !important;
}
.site-footer .social-media-links__item--icon-youtube {
  background-image: url(../img/icon-youtube-white.svg) !important;
}
.site-footer .social-media-links__item--icon-tiktok {
  background-image: url(../img/icon-tiktok-white.svg) !important;
}

/* Sajtskiss: Mer marginal mellan rubrik och brödtext – mindre trångt */
h1, h2, h3, h4, h5 {
  margin-bottom: 0.5em !important;
}

.text-image__item h2,
.text-image__item h3,
.block-columns .columns__item h2,
.block-columns-scroll .columns-scroll-list__item__content h2,
h2 + p, h3 + p, h4 + p {
  margin-top: 0.75em !important;
}

.block-columns .columns__item__content h2 + p,
.block-columns-scroll .columns-scroll-list__item__content h2 + p {
  margin-top: 1em !important;
}

/* Kalender och filter – sajtskiss: rundade hörn */
.block-calendar .calendar__result__categories button {
  color: var(--pz-color-primary);
  outline: 2px solid var(--pz-color-primary);
  border-radius: 4px !important;
}

.block-calendar .calendar__result__categories button.calendar-category-active {
  background: var(--pz-color-primary);
  color: #fff;
}

.block-calendar .calendar__result__item__content__labels span {
  background: var(--pz-color-primary);
  color: #fff;
  border-radius: 4px !important;
}

/* Sajtskiss: Rundade hörn på kort och block – bottenplattor svagt rundade */
.block-calendar .calendar__result__item {
  border-radius: 4px !important;
}

.block-columns .columns__item,
.block-columns-scroll .columns-scroll-list__item {
  border-radius: 6px !important;
  overflow: hidden;
}

/* Rutor – guldfärgad bakgrund nedtonad */
.block-columns .columns__item,
.block-columns-scroll .columns-scroll-list__item {
  background: rgba(213, 172, 103, 0.18) !important;
  border-bottom: 4px solid var(--pz-color-accent-muted);
}

/* Knappar i kort – gröna (som nu), DM Sans Bold */
.block-columns .columns__item__content .btn,
.block-columns-scroll .columns-scroll-list__item__button .btn {
  font-family: var(--pz-font-body) !important;
  font-weight: 700 !important;
}

/* Endast knappen centrerad, inte rubrik/brödtext */
.block-columns .columns__item__content,
.block-columns-scroll .columns-scroll-list__item__content {
  text-align: left;
  padding-bottom: 1.5em !important;
}

.block-columns-scroll .columns-scroll-list__item__button {
  text-align: center;
}

.block-columns .columns__item__content .columns__item__button-wrap {
  text-align: center;
}

.block-columns .columns__item,
.block-columns-scroll .columns-scroll-list__item {
  margin-bottom: 1.5em !important;
  padding-bottom: 0.5em !important;
}

/* Sajtskiss: Lika bildhöjd i kolumnslayout – aspect-ratio + object-fit */
.block-columns-scroll .columns-scroll-list__item__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.block-columns-scroll .columns-scroll-list__item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-columns .columns__item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.block-event .event-details {
  border-radius: 4px !important;
}

/* Today-shortcuts */
.block-today .today-shortcuts .today-shortcut a {
  color: var(--pz-color-primary);
}

/* Cookie notice */
.cookie-notice a {
  color: var(--pz-color-primary);
}

/* ==========================================================================
   Nyhetsbrev – förbättrad presentation
   OBS: Knappen (Prenumerera) stylas i Apsis – osynlig text kan behöva
   fixas i Apsis form builder (knappens textfärg mot bakgrund).
   ========================================================================== */
.block-newsletter {
  background: #fff;
  background-image: none;
  border-top: 1px solid rgba(17, 49, 43, 0.15);
  padding: 2.5em 0 3em;
}

.block-newsletter h1,
.block-newsletter h2 {
  color: var(--pz-color-primary) !important;
}

/* Bilaga 2: Nyhetsbrev – DM Sans Medium */
.block-newsletter .lede,
.block-newsletter p {
  color: rgba(17, 49, 43, 0.8);
  font-family: var(--pz-font-body) !important;
  font-weight: 500 !important;
}

.block-newsletter__form-wrapper {
  overflow: hidden;
  border-radius: 4px;
  max-width: 420px;
  margin: 0 auto;
  min-height: 250px;
}

.block-newsletter__form-wrapper iframe {
  display: block;
  width: 100%;
  min-height: 250px;
  border: 1px solid rgba(17, 49, 43, 0.2);
  border-radius: 4px;
}

/* Blockquote - använd accentfärg */
blockquote {
  color: var(--pz-color-accent);
}

/* ==========================================================================
   Hero/slideshow – CTA guldfärgad, h1 nedtonad guld
   body- prefix behövs för att överskrida app.min.css specificitet
   ========================================================================== */

/* CTA: guld med grön text (standard) – måste överskrida alla text-color/background varianter */
body .block-site-intro .flexslider .slides li .btn,
body .block-site-intro .slides li a .btn,
body .block-site-intro li.text-color--white .btn,
body .block-site-intro li.text-color--dark_green .btn,
body .block-site-intro li.text-background-color--white .btn,
body .block-site-intro li.text-background-color--dark_green .btn,
body .block-video-hero .btn {
  background: #D5AC67 !important;
  color: #11312b !important;
  border-radius: 4px !important;
}

/* CTA hover: grön med guld text */
body .block-site-intro .flexslider .slides li .btn:hover,
body .block-site-intro .slides li a .btn:hover,
body .block-video-hero .btn:hover {
  background: #11312b !important;
  color: #D5AC67 !important;
}

/* Bildspelet – bredare ruta så rubriken får plats på en rad (ingen radbrytning) */
body .block-site-intro .slides a,
body .block-site-intro .flexslider .slides a,
body .block-video-hero a {
  max-width: 1000px !important;
}

body .block-site-intro .slides h1,
body .block-site-intro .flexslider .slides h1,
body .block-video-hero h1 {
  line-height: 1.55em !important;
}

@media (min-width: 768px) {
  body .block-site-intro .slides h1,
  body .block-site-intro .flexslider .slides h1,
  body .block-video-hero h1 {
    white-space: nowrap !important;
  }
}

/* Hero h1 – grön bakgrund med vit text, samma padding runt, radavstånd mellan rader */
body .block-site-intro li.text-background-color--dark_green h1,
body .block-site-intro li.text-background-color--white h1,
body .block-video-hero.text-background-color--dark_green h1 {
  background: #11312b !important;
  box-shadow: none !important;
  padding: 0.45em 0.5em !important;
  border-radius: 4px !important;
  color: #fff !important;
  line-height: 1.55em !important;
}

/* text-color (utan bakgrund): rubrik färg */
body .block-site-intro li.text-color--dark_green h1,
body .block-video-hero.text-color--dark_green h1 {
  color: var(--pz-color-primary) !important;
}

/* Hero: endast knappen centrerad (inte rubriken) */
body .block-site-intro .slides a p,
body .block-video-hero a p {
  text-align: center !important;
}

body .block-site-intro .slides .btn,
body .block-video-hero .btn {
  display: inline-block !important;
  text-align: center !important;
}

/* ==========================================================================
   Logotyp - Guldversion för kontrast mot grön bakgrund
   Fixar repetition: no-repeat, overflow, döljer text
   ========================================================================== */
.site-header__logo {
  overflow: hidden;
}

.site-header__logo a {
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  background-position: left center !important;
  overflow: hidden;
  text-indent: -9999px;
  display: block;
}

@media (min-width: 992px) {
  .site-header__logo a {
    background-size: auto 100% !important;
    background-repeat: no-repeat !important;
  }
}

.site-footer__last-part__logo {
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  text-indent: -9999px;
  overflow: hidden;
}