.root,
#root,
#docs-root,
:root {
  --site-primary-100-color: #a9d6fa;
  --site-primary-200-color: #d0e1f0;
  --site-primary-300-color: #6bb266;
  --site-primary-400-color: #0B2D5C;
  --site-primary-500-color: #0B2D5C;

  --site-secondary-100-color: #ffeee4;
  --site-secondary-200-color: #fbcdbe;
  --site-secondary-300-color: #fff9e3;

  --site-orange-100-color: #fbcdbe;
  --site-orange-200-color: #f58b68;
  --site-orange-400-color: #f15a28;

  --site-yellow-100-color: #fff9e3;
  --site-yellow-200-color: #ffe792;
  --site-yellow-400-color: #ffc800;

  --site-green-100-color: #96efec;
  --site-green-200-color: #1ec6c1;
  --site-green-400-color: #0e5c5a;

  --site-gray-100-color: #efefef;
  --site-gray-300-color: #dadada;

  --site-footer-bgcolor: #00617f;
  --site-footer-textcolor: #ffffff;

  --site-form-border-color: #ed6c00;

  --site-border-radius-xl: 0px;
  --site-border-radius-md: 0px;
  --site-border-radius-sm: 0px;

  --site-spacing-sm: 56px;
  --site-spacing-md: 64px;
  --site-spacing-xl: 104px;

  --site-footer-margin-sm: 0px;
  --site-footer-margin-md: 0px;
  --site-footer-margin-xl: 104px;

  --site-spacing-negative-sm: 0px;
  --site-spacing-negative-md: 0px;
  --site-spacing-negative-xl: 0px;
}

/* Tryggbrfrevision menu text -> black */
.site-tryggbrfrevision nav a {
  color: #000000 !important;
}

/* Footer phone link za tryggbrfrevision -> white */
footer a[href*="tryggbrfrevision"],
footer a[href*="010"] {
  color: #ffffff !important;
}


@media (min-width: 1024px) {
  .byggakademin-hero-image-margin {
    margin-left: 0 !important;
  }

  figure.byggakademin-hero-image-margin > div {
    /* portrait oval like Offentliga */
    aspect-ratio: 4 / 5 !important;

    width: 100% !important;
    max-width: 560px;        /* stops too wide oval */
    height: auto !important;
    min-height: 0 !important;

    margin-left: auto;
    margin-right: auto;
  }

}

/* =========================================================
   Byggakademin – CTA -> #ed6c00 (no hover/active color shift)
   Targets BaseButton classes: bg-turquoise-400 / bg-orange-400 etc.
   ========================================================= */

:root {
  --bygg-cta: #0B2D5C;
  --bygg-cta-hover: #092447;
}

/* Filled CTA buttons (primary + secondary) */
:is(a, button, input, div, label, [role="button"]).rounded-full:is(.bg-turquoise-400, .bg-turquoise-500, .bg-orange-400) {
  background-color: var(--bygg-cta) !important;
}

/* Hover -> malo svjetlije */
:is(a, button, input, div, label, [role="button"]).rounded-full:is(.bg-turquoise-400, .bg-turquoise-500, .bg-orange-400):hover {
  background-color: var(--bygg-cta-hover) !important;
}

/* Search field / inputs -> orange border (if nešto još ostane plavo) */
input[type="search"],
input[type="text"],
textarea,
select {
  border-color: var(--bygg-cta) !important;
}
input[type="search"]:focus,
input[type="text"]:focus,
textarea:focus,
select:focus {
  outline-color: var(--bygg-cta) !important;
}

/* Search shell (menu + page search): every rounded-full that contains input[name="search"] -> teal */
div.rounded-full:has(input[name="search"]) {
  background-color: var(--site-primary-400-color) !important; /* #00617f */
}


button[aria-label="Sök"] { background-color: var(--bygg-cta) !important; }
button[aria-label="Sök"]:hover { background-color: var(--bygg-cta-hover) !important; }