/* ============================================================
   custom.css — Höganäsveterinären
   Laddas EFTER bootstrap.min.css och theme.css.

   REGEL: Bootstrap först. Egen CSS bara till sådant Bootstrap
   inte har. Allt annat är utility-klasser i markupen, så att
   Pinegrows paneler kan läsa och skriva det.

   Därför finns bara två klasser här — och båda sätter i princip
   bara variabler.
   ============================================================ */
/* --- Bokningsknappen ----------------------------------------
   Kundens viktigaste element, upprepat i två mail: den ska vara
   omöjlig att missa. Egen variant för att den inte ska förändras
   när övriga knappar justeras. Sätter enbart Bootstraps egna
   knappvariabler — ingen vanlig CSS-deklaration.
   Används som: class="btn btn-boka"  /  class="btn btn-boka btn-lg"
   ------------------------------------------------------------ */
.btn-boka {
    --bs-btn-color: #fff;
    --bs-btn-bg: #005497;
    --bs-btn-border-color: #005497;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #003C6D;
    --bs-btn-hover-border-color: #003C6D;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #002E54;
    --bs-btn-active-border-color: #002E54;
    --bs-btn-focus-shadow-rgb: 0, 84, 151;
    --bs-btn-font-weight: 700;
}

/* Variant för mörk botten — vit knapp med blå text */
.btn-boka-light {
    --bs-btn-color: #003C6D;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #002E54;
    --bs-btn-hover-bg: #EFF2F5;
    --bs-btn-hover-border-color: #EFF2F5;
    --bs-btn-active-color: #002E54;
    --bs-btn-active-bg: #DCE3EA;
    --bs-btn-active-border-color: #DCE3EA;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
    --bs-btn-font-weight: 700;
}

/* --- Prislappen — sajtens signatur ---------------------------
   Allt som är grönt på den här sajten är ett pris. Inget annat.
   Byggd på Bootstraps .badge, så storlek styrs med .fs-*.
   Används som: class="badge price fs-6"
   ------------------------------------------------------------ */
.price {
    --bs-badge-color: #1F5B45;
    --bs-badge-font-weight: 700;
    --bs-badge-padding-x: .55rem;
    --bs-badge-padding-y: .3rem;
    background-color: #E7F0EB;
    font-variant-numeric: tabular-nums;
}

/* På mörkblå botten behöver lappen en egen bakgrund */
.text-bg-primary .price {
    --bs-badge-color: #DCEFE3;
    background-color: rgba(255, 255, 255, .14);
}

/* ============================================================
   Rörelse och interaktion
   Allt nedan är sådant Bootstrap inte har. Inget här duplicerar
   en utility — kolla beslutstrappan innan något läggs till.
   Samtliga effekter tystnar vid prefers-reduced-motion.
   ============================================================ */
/* --- .bg-flow ------------------------------------------------
   Läggs PÅ en blå sektion: class="text-bg-primary bg-flow".
   Två lager med mörkare blå toner som driver långsamt i olika
   takt. Perioderna 47s och 61s har ingen gemensam delare, så
   mönstret upprepar sig först efter ~48 minuter — det är det som
   ger känslan av slump utan att något faktiskt är slumpmässigt.
   Justera tonerna med variablerna.
   ------------------------------------------------------------ */
.bg-flow {
    /* Tonerna ligger nära #005497 med flit. Skillnaden ska anas som djup,
     inte läsas som en gradient. Höj --iyp-flow-opacity för mer effekt. */
    --iyp-flow-1: #00477F;
    --iyp-flow-2: #003D70;
    --iyp-flow-opacity: .5;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.bg-flow > * {
    position: relative;
    z-index: 1;
}

.bg-flow::before,
.bg-flow::after {
    content: "";
    position: absolute;
    inset: -55%;
    z-index: 0;
    opacity: var(--iyp-flow-opacity);
    pointer-events: none;
    will-change: transform;
}

/* Stora, mjuka fält med gradvis avtoning — hårda stopp är det som får
   en gradient att se gammaldags ut. */
.bg-flow::before {
    background-image: radial-gradient(55% 60% at 25% 35%, var(--iyp-flow-1) 0%, var(--iyp-flow-1) 22%, transparent 78%),
    radial-gradient(50% 55% at 75% 70%, var(--iyp-flow-2) 0%, var(--iyp-flow-2) 18%, transparent 80%);
    animation: iyp-flow-a 71s ease-in-out infinite alternate;
}

.bg-flow::after {
    background-image: radial-gradient(48% 52% at 70% 25%, var(--iyp-flow-2) 0%, var(--iyp-flow-2) 20%, transparent 78%),
    radial-gradient(58% 46% at 28% 78%, var(--iyp-flow-1) 0%, var(--iyp-flow-1) 16%, transparent 82%);
    animation: iyp-flow-b 97s ease-in-out infinite alternate;
}

@keyframes iyp-flow-a {
    0% {
        transform: translate3d(-2%, -2%, 0) scale(1.04);
    }

    50% {
        transform: translate3d( 3%,  2%, 0) scale(1.09);
    }

    100% {
        transform: translate3d(-1%,  3%, 0) scale(1.05);
    }
}

@keyframes iyp-flow-b {
    0% {
        transform: translate3d( 2%,  3%, 0) scale(1.07);
    }

    50% {
        transform: translate3d(-3%, -1%, 0) scale(1.03);
    }

    100% {
        transform: translate3d( 2%, -3%, 0) scale(1.09);
    }
}

/* --- Ikonlinjering -------------------------------------------
   Iconify-ikoner sitter på textens baslinje och ser därför höga ut
   bredvid text. IYP:s boilerplate löser det med style="vertical-align:-2px"
   per ikon — här som en regel i stället, så inga inline-stilar behövs
   och Pinegrows Style-panel förblir användbar.
   ------------------------------------------------------------ */
iconify-icon {
    vertical-align: -.125em;
}

/* --- Hover: kort och knappar --------------------------------
   Skuggan byts genom Bootstraps egna skuggvariabler i stället för
   !important — .shadow-sm och .shadow läser var(--bs-box-shadow-*).
   ------------------------------------------------------------ */
.card,
.btn {
    transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              box-shadow .28s cubic-bezier(.2, .7, .3, 1);
}

.card:hover,
.card:focus-within {
    transform: translateY(-4px);
    --bs-box-shadow-sm: 0 .9rem 2.2rem -1rem rgba(0, 46, 84, .40);
    --bs-box-shadow: 0 .9rem 2.2rem -1rem rgba(0, 46, 84, .40);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* --- .hover-zoom: bilder ------------------------------------
   Sätts på <img>. Långsammare än korten — bilder tål mer tid.
   ------------------------------------------------------------ */
.hover-zoom {
    transition: transform .55s cubic-bezier(.2, .7, .3, 1),
              box-shadow .55s cubic-bezier(.2, .7, .3, 1);
}

.hover-zoom:hover {
    transform: scale(1.03);
    --bs-box-shadow: 0 1rem 2.4rem -1rem rgba(0, 46, 84, .45);
}

/* --- Textlänkar i nav och footer ----------------------------
   Understrykning som växer från vänster i stället för att bara
   tändas. Ritas som en bakgrundsgradient, så den påverkar inte
   radhöjden.

   Färgen ligger i --iyp-underline och är varumärkesblå som
   standard. På mörk botten sätts den om till currentColor —
   #005497 mot mörkblått syns inte, så där följer linjen textens
   egen ljusa färg. Navbarens hovertext byter också till blått,
   annars blir det en blå linje under grå text.
   ------------------------------------------------------------ */
.navbar {
    --bs-navbar-hover-color: var(--bs-primary);
}

.navbar-nav .nav-link,
footer a {
    --iyp-underline: var(--bs-primary);
    text-decoration: none;
    background-image: linear-gradient(var(--iyp-underline), var(--iyp-underline));
    background-repeat: no-repeat;
    background-position: 0 calc(100% - .1em);
    background-size: 0 1.5px;
    transition: background-size .32s cubic-bezier(.2, .7, .3, 1), color .2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.active,
footer a:hover,
footer a:focus-visible {
    background-size: 100% 1.5px;
}

/* Mörk botten: linjen följer textfärgen i stället för att vara blå */
footer a,
.text-bg-primary a {
    --iyp-underline: currentColor;
}

/* --- .btn-icon: kvadratisk ikonknapp -------------------------
   44x44 px är minsta rekommenderade tryckyta. Bootstrap har ingen
   utility för fasta pixelmått, och .btn-sm/.btn-lg styr padding,
   inte kvadratisk form.
   Används som: class="btn btn-boka btn-icon"
   ------------------------------------------------------------ */
.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- .toggler-bars: egen hamburgare -------------------------
   Ersätter .navbar-toggler-icon. Mittersta strecket är kortare —
   det gör knappen ritad snarare än standard. Öppet läge fälls
   ihop till ett kryss. Tillståndet läses ur aria-expanded, som
   Bootstrap håller uppdaterat, och inte ur .collapsed som saknas
   vid sidladdning.
   ------------------------------------------------------------ */
.toggler-bars {
    width: 46px;
    height: 46px;
    padding: 0;
    position: relative;
}

.toggler-bars span {
    position: absolute;
    left: 12px;
    height: 2px;
    width: 22px;
    border-radius: 2px;
    background: var(--bs-primary);
    transition: transform .38s cubic-bezier(.2, .7, .3, 1),
              width .38s cubic-bezier(.2, .7, .3, 1),
              opacity .18s ease;
}

.toggler-bars span:nth-child(1) {
    top: 16px;
}

.toggler-bars span:nth-child(2) {
    top: 22px;
    width: 14px;
}

.toggler-bars span:nth-child(3) {
    top: 28px;
}

.toggler-bars:hover span:nth-child(2) {
    width: 22px;
}

.toggler-bars[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.toggler-bars[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.toggler-bars[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- Skydd mot sidoscroll ------------------------------------
   Tredjepartsinbäddningar (EmbedSocial, kartor, sociala flöden)
   sätter ofta egna bredder. Ingen overflow-x:hidden på html/body —
   det skulle slå ut position:sticky på naven.
   ------------------------------------------------------------ */
iframe,
.embedsocial-album,
[class*="embedsocial"] {
    max-width: 100%;
}

/* --- Accordion: Bootstraps blå bytt mot temats -----------------
   Bootstraps default ger blå aktiv rubrik och blå fokus-glow som
   inte matchar paletten. Överstyrs med komponentens egna variabler
   — ingen ny klass, inga nya deklarationer.
   Ikonen är Bootstraps egen chevron med #005497 respektive #003C6D
   inbakad i SVG:n, eftersom currentColor inte når en background-image.
   ------------------------------------------------------------ */
.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-btn-color: var(--bs-primary);
    --bs-accordion-active-color: #003C6D;
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23005497'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003C6D'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* --- Brödsmulor ---------------------------------------------
   Bootstraps avdelare är "/". Byts mot "›" via komponentens egen
   variabel. inline-flex + align-items håller glyfen i linje med
   texten i stället för att den sitter på baslinjen och ser hög ut.
   ------------------------------------------------------------ */
.breadcrumb {
    --bs-breadcrumb-divider: '\203A';
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    transform: translateY(-.06em);
}

/* --- Sticky-utilities under den sticky navbaren --------------
   Bootstraps .sticky-*-top fastnar vid top:0, alltså bakom
   navbaren. Offseten sätts till samma 6rem som scroll-padding
   nedan, så sidnavigering och ankarhopp hamnar på samma linje.
   Override på Bootstraps egen utility — ingen ny klass.

   z-index: både navbaren (.sticky-top) och sidokolumnen
   (.sticky-lg-top) får 1020 av Bootstrap. Vid lika z-index vinner
   den som kommer sist i DOM:en — alltså sidokolumnen, som då
   glider ovanpå navbaren vid scroll. Ett steg ner löser det.
   ------------------------------------------------------------ */
@media (min-width: 992px) {
    .sticky-lg-top {
        top: 6rem;
        z-index: 1010;
    }
}

/* --- Ankarlänkar under den sticky navbaren -------------------
   Utan detta hamnar rubriken bakom navbaren när man klickar sig
   till ett avsnitt. Elementregel, ingen ny klass.
   ------------------------------------------------------------ */
html {
    scroll-padding-top: 6rem;
    scroll-behavior: smooth;
}

/* --- Footern en ton mörkare ----------------------------------
   CTA-sektionen sist på sidan är också blå. Utan skillnad flyter
   den och footern ihop till ett stort odifferentierat block.
   Footern får därför den mörkare tonen ur designriktningen —
   djup i stället för en avdelarlinje, och det gäller alla sidor
   på en gång, även de som byggs senare.

   Ren variabelöverstyrning, ingen ny klass och inget !important:
   .text-bg-primary renderar RGBA(var(--bs-primary-rgb), ...), så
   basfärgen byts genom variabeln. Flow-tonerna följer med ned i
   samma steg, så gradienten fortsätter att anas som djup i
   stället för att läsas som en gradient.
   ------------------------------------------------------------ */
footer.text-bg-primary {
    --bs-primary-rgb: 0, 60, 109;
}

/* #003C6D */
footer.bg-flow {
    --iyp-flow-1: #12548a;
    --iyp-flow-2: #064579;
}

/* --- .oh-kompakt: öppettidswidgeten i en trång rad -----------
   api.uppdatering.se/embed/oppettider.js kan skriva två rader i
   statusläget ("Stängt just nu" + "Idag: 09–14"). I topbaren och
   jour-bannern finns bara plats för en rad — mätt: utan detta blev
   topbaren 67px i stället för sina vanliga ~45px. I faktarutan och
   (sedan 2026-09-11) sidfoten finns plats för båda raderna, så
   klassen saknas där med flit — detaljraden är värd att visa när
   den får plats.
   ------------------------------------------------------------ */
.oh-kompakt .iyp-oh-status__detalj {
    display: none;
}

/* --- Jourtelefon: en delad accentfärg -------------------------
   Stark röd (#b40c09) är hårdkodad likadant i öppettidswidgeten
   (api.uppdatering.se/embed/oppettider.js, statusprickens jour-läge)
   och här — två separata kodbaser, ingen gemensam källa att styra
   från, så ändras den ena måste den andra ändras för hand. Beslutad
   2026-09-11 av Kalle som ersättning för den tidigare bärnstensfärgen
   — ska läsas som en tydlig larmsignal ("det är jouren, inte kliniken,
   som svarar"), inte som "stängt". Text ovanpå färgen ska alltid vara
   vit för kontrast.
   ------------------------------------------------------------ */
.badge-jour {
    background-color: #b40c09;
    color: #fff;
}

.btn-outline-primary.iyp-tel--jour {
    --bs-btn-color: #b40c09;
    --bs-btn-border-color: #b40c09;
    --bs-btn-hover-bg: #b40c09;
    --bs-btn-hover-border-color: #b40c09;
    --bs-btn-hover-color: #fff;
}

/* --- Öppettidswidgeten i sidfoten: mindre och ljusare ----------
   Samma innehåll som faktarutan (konstant sammanfattning + framåt-
   blickande detaljrad), men sidfoten är trängre och ska inte tävla
   med faktarutans fetstil. Widgetens eget stilblock läggs numera
   FÖRST i <head> (se stil() i oppettider.js) just för att den här
   sortens överstyrning ska vinna utan !important.
   ------------------------------------------------------------ */
footer .iyp-oh-status__lage {
    font-size: 1rem;
    font-weight: 400;
}

footer .iyp-oh-status__detalj {
    font-size: .875rem;
}

/* --- Respektera användarens inställning ---------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .bg-flow::before,
    .bg-flow::after {
        animation: none;
    }

    .card,
    .btn,
    .hover-zoom,
    .navbar-nav .nav-link,
    footer a,
    .toggler-bars span {
        transition-duration: .01ms;
    }

    .card:hover,
    .btn:hover,
    .hover-zoom:hover {
        transform: none;
    }
}