/* =================================================================
   KREDLO DESIGN SYSTEM
   Based on Kredlo_v2.css from XD export
   ================================================================= */

:root {
  /* Colors from XD export */
  --ljusgrå-25: #A5A8A940;
  --ljusgrå-50: #A5A8A980;
  --ljusgrå: #A5A8A9;
  --grå: #868B8C;
  --beige: #F2EAE2;
  --lila-25: #4114C840;
  --lila-50: #4114C880;
  --lila: #4114C8;
  --primär-25: #00023340;
  --primär-50: #00023380;
  --primär-75: #000233BF;
  --primär-navy: #000233;
  --primär-violet-25: #A319B240;
  --primär-violet-50: #A319B280;
  --primär-violet-75: #A319B2BF;
  --primär-violet: #A319B2;
  --svart: #000000;
  --vit: #FFFFFF;

  /* Additional brand colors */
  --light-purple-bg: #FAF3FC;
  --dark-hover: #3F3E65;

  /* Typography from XD export */
  --font-lato: 'Lato', sans-serif;
  --font-montserrat: 'Montserrat', sans-serif;

  /* Font sizes */
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-44: 44px;
  --font-size-50: 50px;

  /* Line heights */
  --line-height-19: 19px;
  --line-height-20: 20px;
  --line-height-22: 22px;
  --line-height-24: 24px;
  --line-height-29: 29px;
  --line-height-34: 34px;
  --line-height-42: 42px;
  --line-height-54: 54px;
  --line-height-61: 61px;
}

/* =================================================================
   TYPOGRAPHY CLASSES FROM XD
   ================================================================= */

p {
    color: var(--primär-navy);
}

.h1, h1 {
  font-family: var(--font-montserrat);
  font-weight: bold;
  font-size: var(--font-size-50);
  line-height: var(--line-height-61);
  letter-spacing: 0;
  color: var(--primär-navy);
}

.h2, h2 {
  font-family: var(--font-montserrat);
  font-weight: bold;
  font-size: var(--font-size-44);
  line-height: var(--line-height-54);
  letter-spacing: 0;
  color: var(--primär-navy);
}

.h3, h3 {
  font-family: var(--font-montserrat);
  font-weight: bold;
  font-size: var(--font-size-28);
  line-height: var(--line-height-34);
  letter-spacing: 0;
  color: var(--primär-navy);
}

.h4, h4 {
  font-family: var(--font-montserrat);
  font-weight: bold;
  font-size: var(--font-size-24);
  line-height: var(--line-height-29);
  letter-spacing: 0;
  color: var(--primär-navy);
}

.h5, h5 {
  font-family: var(--font-montserrat);
  font-weight: bold;
  font-size: var(--font-size-20);
  line-height: var(--line-height-24);
  letter-spacing: 0;
  color: var(--primär-navy);
}

.h6, h6 {
  font-family: var(--font-montserrat);
  font-weight: bold;
  font-size: var(--font-size-16);
  line-height: var(--line-height-19);
  letter-spacing: 0;
  color: var(--primär-navy);
}

.underrubrik {
  font-family: var(--font-lato);
  font-weight: normal;
  font-size: var(--font-size-30);
  line-height: var(--line-height-42);
  letter-spacing: 0;
  color: var(--primär-navy);
}

.ingress {
  font-family: var(--font-lato);
  font-weight: normal;
  font-size: var(--font-size-18);
  line-height: var(--line-height-22);
  letter-spacing: 0;
  color: var(--primär-navy);
}

.bröd {
  font-family: var(--font-lato);
  font-weight: normal;
  font-size: var(--font-size-16);
  line-height: var(--line-height-22);
  letter-spacing: 0;
  color: var(--primär-navy);
}

.meny {
  font-family: var(--font-lato);
  font-weight: bold;
  font-size: var(--font-size-18);
  line-height: var(--line-height-22);
  letter-spacing: 0;
  color: var(--primär-navy);
}

.knapptext {
  font-family: var(--font-lato);
  font-weight: bold;
  font-size: var(--font-size-18);
  line-height: var(--line-height-22);
  letter-spacing: 0;
  color: var(--vit);
}

.footer {
  font-family: var(--font-lato);
  font-weight: normal;
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: 0;
  color: var(--vit);
}

/* =================================================================
   APPLY DESIGN SYSTEM TO STANDARD HTML ELEMENTS
   Higher specificity to override parent theme
   ================================================================= */

html body h1, html body .h1, .site-content h1, .entry-content h1 {
  font-family: var(--font-montserrat) ;
  font-weight: bold ;
  font-size: var(--font-size-50) ;
  line-height: var(--line-height-61) ;
  color: var(--primär-navy);
}

html body h2, html body .h2, .site-content h2, .entry-content h2 {
  font-family: var(--font-montserrat) ;
  font-weight: bold ;
  font-size: var(--font-size-44) ;
  line-height: var(--line-height-54) ;
}

@media(max-width: 768px) {

  html body h2,
  html body .h2,
  .site-content h2,
  .entry-content h2 {
    font-size: var(--font-size-30) ;
    line-height: var(--line-height-42) ;
  }

}

html body h3, html body .h3, .site-content h3, .entry-content h3 {
  font-family: var(--font-montserrat) ;
  font-weight: bold ;
  font-size: var(--font-size-28) ;
  line-height: var(--line-height-34) ;
}

html body h4, html body .h4, .site-content h4, .entry-content h4 {
  font-family: var(--font-montserrat) ;
  font-weight: bold ;
  font-size: var(--font-size-24) ;
  line-height: var(--line-height-29) ;
}

html body h5, html body .h5, .site-content h5, .entry-content h5 {
  font-family: var(--font-montserrat) ;
  font-weight: bold ;
  font-size: var(--font-size-20) ;
  line-height: var(--line-height-24) ;
}

html body h6, html body .h6, .site-content h6, .entry-content h6 {
  font-family: var(--font-montserrat) ;
  font-weight: bold ;
  font-size: var(--font-size-16) ;
  line-height: var(--line-height-19) ;
}

html body, html body p, .site-content p, .entry-content p {
  font-family: var(--font-lato) ;
  font-weight: normal;
  font-size: var(--font-size-16) ;
  line-height: var(--line-height-22) ;
}

/* =================================================================
   BUTTON STYLES
   ================================================================= */

.btn, a.btn, input[type="submit"], button[type="submit"], .wp-block-button__link {
  font-weight: 700 !important;
  font-size: var(--font-size-18, 18px);
  font-family: var(--font-lato) ;
  line-height: var(--line-height-22) ;
  letter-spacing: 0;
  background-color: var(--primär-violet) ;
  color: var(--vit) ;
  border: 2px solid var(--primär-violet) ;
  cursor: pointer;
  display: inline-flex ;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn:hover, button[type="submit"]:hover {
  background-color: var(--primär-violet-75);
  border-color: var(--primär-violet-75);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(163, 25, 178, 0.3);
}

.btn--secondary {
  background-color: transparent;
  color: var(--primär-violet);
  border: 2px solid var(--primär-violet);
}

.btn--secondary:hover {
  background-color: var(--primär-violet);
  color: var(--vit);
  border-color: var(--primär-violet);
}

/* Team section button styling */
.team-section__button .btn {
  background-color: var(--primär-violet);
  color: var(--vit);
}

/* Header navigation styling */
nav a, .menu a {
  font-family: var(--font-lato);
  font-weight: bold;
  font-size: var(--font-size-18);
  line-height: var(--line-height-22);
  color: var(--primär-navy);
  text-decoration: none;
}

nav a:hover, .menu a:hover {
  color: var(--primär-violet);
}

/* =================================================================
   BLOCK-SPECIFIC OVERRIDES
   ================================================================= */

/* Ensure our ACF blocks use correct styling */
.wp-block-acf-page-hero .page-hero__title {
  font-family: var(--font-montserrat) !important;
  color: var(--vit) !important;
}

.wp-block-acf-team-section .team-section__title {
  font-family: var(--font-montserrat) !important;
  color: var(--primär-navy) !important;
}

.wp-block-acf-team-section .team-member__name {
  font-family: var(--font-montserrat) !important;
  color: var(--primär-navy) !important;
}

.wp-block-acf-team-section .team-member__position {
  font-family: var(--font-lato) !important;
  color: var(--primär-navy) !important;
}

.wp-block-acf-dark-cta-section .dark-cta-section__title {
  font-family: var(--font-montserrat) !important;
  color: var(--vit) !important;
}


/* Force button colors */
.team-section__button .btn,
.dark-cta-section__button .btn {
  background-color: var(--primär-violet) !important;
  border-color: var(--primär-violet) !important;
  color: var(--vit) ;
}

.team-section__button .btn:hover,
.dark-cta-section__button .btn:hover {
  background-color: var(--primär-violet-75) ;
  border-color: var(--primär-violet-75) ;
}

/* =================================================================
   BLOCK-SPECIFIC DESIGN SYSTEM ENFORCEMENT
   Ensures correct styling for ACF blocks
   ================================================================= */

/* Team section block */
.team-section {
  background-color: var(--beige) ;
}

.team-section__title {
  font-family: var(--font-montserrat) ;
  font-size: var(--font-size-44) ;
  font-weight: bold ;
  line-height: var(--line-height-54) ;
  color: var(--primär-navy);
}

.team-member__name {
  font-family: var(--font-montserrat) ;
  font-size: var(--font-size-20) ;
  font-weight: bold ;
  line-height: var(--line-height-24) ;
  color: var(--primär-navy) ;
  margin-bottom: 0;
}

.team-member__position {
  font-family: var(--font-lato) ;
  font-size: var(--font-size-16) ;
  font-weight: normal ;
  line-height: var(--line-height-22) ;
  color: var(--primär-navy);
}

/* Page hero block */
.page-hero {
  background-color: var(--primär-navy) ;
}

.page-hero__title {
  font-family: var(--font-montserrat) ;
  color: var(--vit) ;
}

/* Hero section block */
.hero-section {
  background-size: auto 100% ;
  background-position: top center ;
}

.hero-section__title {
  font-family: var(--font-montserrat) ;
  color: var(--primär-navy) ;
}

.hero-section__text {
  font-family: var(--font-lato) ;
  color: var(--primär-navy) ;
}


/* Dark CTA section block */
.dark-cta-section {
  background-color: var(--primär-navy) ;
}

.dark-cta-section__title {
  font-family: var(--font-montserrat) ;
  color: var(--vit) ;
}

.dark-cta-section__text {
  font-family: var(--font-lato) ;
  color: var(--vit) ;
}

/* =================================================================
   SITE-SPECIFIC STYLING ENHANCEMENTS
   Custom styling requirements for improved UX
   ================================================================= */

/* Header logo sizing */
.header__logo-svg {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

/* Homepage header background */
body.home .header {
  background: var(--light-purple-bg, #FAF3FC);
}

/* Navigation styling */
body .nav__link {
  font-weight: 700 !important;
  font-size: var(--font-size-18, 18px);
}

li.nav__item a {
  padding: 10px 0;
  border-bottom: 1.5px solid transparent;
}

li.nav__item a:hover,
li.nav__item a:active,
li.nav__item a.current {
  border-bottom: 1.5px solid var(--primär-violet, #A319B2);
  padding: 10px 0 9px 0;
}

/* Button navigation items should not have bottom border on hover */
li.nav__item a.nav__link.btn:hover,
li.nav__item a.nav__link.btn:active {
  border-bottom: 2px solid #3F3E65 !important;
}

/* Global button styling */
.btn,
a.btn,
button[type="submit"],
input[type="submit"],
.wp-block-button__link {
  padding: 8px 28px !important;
  border-radius: 8px !important;
}

.btn:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--dark-hover, #3F3E65) !important;
  border-color: var(--dark-hover, #3F3E65) !important;
  transform: none !important;
  box-shadow: none !important;
  color: var(--vit, #FFFFFF) !important;
}

/* Breadcrumb styling */
.breadcrumb__link {
  font-family: var(--font-lato, 'Lato', sans-serif);
  font-size: var(--font-size-14, 14px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--primär-navy, #000233);
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb__arrow {
  opacity: 1;
}

/* Language switcher - make more circular and compact */
.header .btn[href*="language"],
.header .language-switcher,
.header .wpml-ls-legacy-dropdown a {
  min-width: 50px !important;
  height: 40px !important;
  border-radius: 50% !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--font-size-14, 14px) !important;
  font-weight: 700 !important;
}

/* Navigation link spacing */
.header .nav__item {
  margin: 0 16px !important;
}

/* Logo refinements */
.header .site-branding {
  margin-right: auto !important;
}

.section__container {
  max-width: 1400px;
  padding: 0 32px;
  position: relative;
  width: 100%;
  margin: 0 auto;

}

@media(max-width: 768px) {
  .section__container {
    padding: 0 16px;
  }
}

/* Large desktop responsive adjustments */
@media (min-width: 1400px) {
  .breadcrumb-section {
    margin-top: 118px;
  }

  .breadcrumb__link,
  .breadcrumb__current {
    font-size: var(--font-size-14, 14px);
    font-weight: 700;
  }

  .header .nav__item {
    margin: 0 20px !important;
  }
}