/* =========================================================
   Växjö Värmepump & VVS — theme.css
   Endast Bootstrap-variabler. Ingen egen layout-CSS här.
   Laddas EFTER bootstrap.min.css.
   ========================================================= */

:root,
[data-bs-theme="light"] {
  /* --- Varumärkesfärger (från befintligt bootstrap_theme) --- */
  --bs-primary:            #0099a8;
  --bs-primary-rgb:        0, 153, 168;
  --bs-primary-text-emphasis: #04333a;
  --bs-primary-bg-subtle:  #e6f5f6;
  --bs-primary-border-subtle: #b3e0e5;

  --bs-danger:             #860823;
  --bs-danger-rgb:         134, 8, 35;
  --bs-danger-text-emphasis: #5a0518;
  --bs-danger-bg-subtle:   #f7e9ec;
  --bs-danger-border-subtle: #e3cdd2;

  /* Ljus teal för text på mörk botten (hero, serviceavtal, sidfot).
     Ersätter Bootstraps cyan #0dcaf0, som inte hörde till paletten.
     Uppmätt mot heron 1200–2560 px: minst 3,5:1 bakom rubriken och
     5,2:1 bakom eyebrow-raden. Använd INTE på ljus botten. */
  --bs-info:               #5cc4cd;
  --bs-info-rgb:           92, 196, 205;

  /* Djup teal ersätter svart som mörk bottenfärg */
  --bs-dark:               #04333a;
  --bs-dark-rgb:           4, 51, 58;

  --bs-secondary:          #5e706f;
  --bs-secondary-rgb:      94, 112, 111;
  --bs-light:              #f6f4f1;
  --bs-light-rgb:          246, 244, 241;

  /* --- Yta och text --- */
  --bs-body-bg:            #f6f4f1;
  --bs-body-bg-rgb:        246, 244, 241;
  --bs-body-color:         #16211f;
  --bs-body-color-rgb:     22, 33, 31;
  --bs-secondary-color:    rgba(22, 33, 31, .72);
  --bs-border-color:       #e6e2dd;
  --bs-emphasis-color:     #04333a;

  /* --- Typografi --- */
  --bs-font-sans-serif:    "Ruda", "Trebuchet MS", system-ui, sans-serif;
  --bs-body-font-family:   var(--bs-font-sans-serif);
  --bs-body-font-size:     1.05rem;
  --bs-body-line-height:   1.65;
  --bs-headings-font-family: "Sansita", Georgia, serif;
  --bs-heading-color:      #04333a;

  /* --- Länkar (kontrastsäkrad teal) --- */
  --bs-link-color:         #00707c;
  --bs-link-color-rgb:     0, 112, 124;
  --bs-link-hover-color:   #04333a;
  --bs-link-hover-color-rgb: 4, 51, 58;

  /* --- Form och radie --- */
  --bs-border-radius:      .375rem;
  --bs-border-radius-sm:   .25rem;
  --bs-border-radius-lg:   .5rem;
}

/* Rubriker: Bootstrap läser inte --bs-headings-font-family själv i 5.3 */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2,
.display-3, .display-4, .display-5, .display-6 {
  font-family: var(--bs-headings-font-family);
  color: var(--bs-heading-color);
  line-height: 1.12;
}

/* =========================================================
   Knappar — sätter ENBART komponentvariabler (steg 3/4)
   ========================================================= */
.btn {
  --bs-btn-font-family: "Sansita", Georgia, serif;
  --bs-btn-font-size: 1.0625rem;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-padding-y: .875rem;
  --bs-btn-border-radius: .25rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* .btn ovan laddas efter Bootstrap och skulle annars slå ut btn-sm/btn-lg
   (samma specificitet, vår fil sist). Därför sätts storlekarna om här. */
.btn-sm {
  --bs-btn-padding-x: 1.125rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: .875rem;
}

.btn-lg {
  --bs-btn-padding-x: 2.25rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-size: 1.1875rem;
}

.btn-primary {
  --bs-btn-bg: #0099a8;
  --bs-btn-border-color: #0099a8;
  --bs-btn-hover-bg: #007e8b;
  --bs-btn-hover-border-color: #00747f;
  --bs-btn-active-bg: #006974;
  --bs-btn-active-border-color: #006974;
  --bs-btn-disabled-bg: #0099a8;
  --bs-btn-disabled-border-color: #0099a8;
  --bs-btn-focus-shadow-rgb: 0, 153, 168;
}

.btn-outline-primary {
  --bs-btn-color: #00707c;
  --bs-btn-border-color: #0099a8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0099a8;
  --bs-btn-hover-border-color: #0099a8;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #007e8b;
  --bs-btn-active-border-color: #007e8b;
  --bs-btn-focus-shadow-rgb: 0, 153, 168;
}

.btn-danger {
  --bs-btn-bg: #860823;
  --bs-btn-border-color: #860823;
  --bs-btn-hover-bg: #6d061c;
  --bs-btn-hover-border-color: #64051a;
  --bs-btn-active-bg: #5a0518;
  --bs-btn-focus-shadow-rgb: 134, 8, 35;
}

/* Ljus knapp mot mörk teal-botten */
.btn-light {
  --bs-btn-color: #04333a;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-hover-color: #04333a;
  --bs-btn-hover-bg: #e9f4f5;
  --bs-btn-hover-border-color: #e9f4f5;
  --bs-btn-active-bg: #d8ecee;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.btn-outline-light {
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: rgba(255, 255, 255, .35);
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

/* =========================================================
   Komponentvariabler
   ========================================================= */
.card {
  /* Ett ljusare lager ovanpå sidans varma botten. Blir helvitt vid hover
     (custom.css). Kort på mörk botten får .bg-white i markup. */
  --bs-card-bg: rgba(255, 255, 255, .6);
  --bs-card-border-color: #e6e2dd;
  --bs-card-border-radius: .375rem;
  --bs-card-spacer-x: 1.75rem;
  --bs-card-spacer-y: 1.75rem;
  --bs-card-cap-bg: transparent;
}

.accordion {
  /* Vit, som korten — annars ärver den sidans beige och syns inte som
     en egen yta på en vit sektion. */
  --bs-accordion-bg: #fff;
  --bs-accordion-border-color: #e6e2dd;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(0, 153, 168, .2);
  --bs-accordion-active-color: #04333a;
  --bs-accordion-active-bg: #e6f5f6;
  --bs-accordion-btn-padding-y: 1.125rem;
  --bs-accordion-body-padding-y: 1.5rem;
}

.breadcrumb {
  --bs-breadcrumb-divider: "›";
  --bs-breadcrumb-item-padding-x: .625rem;
  --bs-breadcrumb-font-size: .875rem;
}

.navbar {
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-toggler-focus-width: .2rem;
  --bs-navbar-nav-link-padding-x: .6rem;
}
.navbar .nav-link {
  font-family: var(--bs-headings-font-family);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .9375rem;
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-border-color: #e6e2dd;
  --bs-dropdown-link-hover-bg: #e6f5f6;
  --bs-dropdown-padding-y: .5rem;
  --bs-dropdown-item-padding-y: .5rem;
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-min-width: 15.5rem;
  --bs-dropdown-border-radius: .375rem;
  --bs-dropdown-link-color: #04333a;
  --bs-dropdown-link-hover-color: #04333a;
}

.offcanvas {
  --bs-offcanvas-width: 26rem;
  --bs-offcanvas-padding-x: 1.75rem;
  --bs-offcanvas-padding-y: 1.75rem;
}

.form-control, .form-select {
  --bs-border-color: #cfd8d7;
  min-height: 3rem;
}
.form-control:focus, .form-select:focus {
  border-color: #66c2cb;
  box-shadow: 0 0 0 .25rem rgba(0, 153, 168, .18);
}