/*
 * AP2 Site Customizations — global CSS.
 *
 * This stylesheet is enqueued with priority 999 so it loads AFTER
 * Breakdance's generated CSS. Anything you put here will win over
 * Breakdance and theme defaults without needing `!important` (use it
 * sparingly, only when a third-party rule has higher specificity).
 *
 * Conventions:
 * - Group rules under a labelled comment block so it's easy to find them.
 * - Prefer CSS variables for repeated colors / spacing.
 * - Mobile-first: write the base rule, then layer breakpoints on top.
 * - Cache busting is automatic (file mtime), so save and reload.
 */

/* -------------------------------------------------------------------------
 * Tokens (override or extend Breakdance globals as needed)
 * ------------------------------------------------------------------------- */

:root {
   /* Example token. Remove or replace with real site tokens. */
   --ap2-focus-ring: #0F766E;
}

/* -------------------------------------------------------------------------
 * Global accessibility
 * ------------------------------------------------------------------------- */

/* Visible focus on any focusable element that doesn't already define one. */
:focus-visible {
   outline: 2px solid var(--ap2-focus-ring);
   outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Site-specific overrides
 * ------------------------------------------------------------------------- */

/* Add new rules here. */

/* Global element styles */
#bde-main .bde-rich-text ul {
   display: flex;
   flex-direction: column;
   gap: .5rem;
}

#bde-main .breadcrumbs {
   display: flex;
   gap: .5rem;
}

#bde-main .breadcrumbs a {
   transition: transform 0.5s ease;
}

#bde-main .breadcrumbs a:hover {
   transform: scale(1.04);
}

/* Header scroll style. */
.bde-header-builder {
   transition: background-color 0.3s ease, color 0.3s ease;
}

/* When the header is scrolled up */
.bde-header-builder.header-scrolled-up {
   background-color: #ffffffd9 !important;
   backdrop-filter: blur(10px) !important;
}

.bde-header-builder.header-scrolled-up a {
   color: #00344db3;
}

.bde-header-builder.header-scrolled-up a:hover {
   color: #00344d;
}

.bde-header-builder.header-scrolled-up .breakdance-menu-link-arrow:after {
   background-color: #00344db3;
}



.breakdance .bde-header-builder.header-scrolled-up .bde-ap2-language-selector__lang {
   color: #00334de6 !important;
}

.breakdance .bde-header-builder.header-scrolled-up .bde-ap2-language-selector .bde-ap2-language-selector__sep {
   color: #00334de6 !important;
}

.breakdance .bde-header-builder.header-scrolled-up .bde-ap2-language-selector__item:not(.bde-ap2-language-selector__item--current) .bde-ap2-language-selector__lang {
   color: #00334de6 !important;
}




/* The mega-menu plugin pins its top-link color to white via `!important`
 * (so the labels stay legible on the dark hero when the panel is shut).
 * When the header is in its scrolled-up state the background turns
 * light, so we need a different color — and rather than fight the
 * plugin's `!important` rule with even higher specificity, we just
 * redefine the underlying CSS custom property at the `.ap2-mega-menu`
 * scope. The plugin's `color: var(--ap2mm-color-top-link) !important`
 * rule then resolves to the new value automatically. The hover/focus
 * variant already lives on `--ap2mm-color-link-hover` which is already
 * the full brand color, so no extra rule is needed for that. */
.bde-header-builder.header-scrolled-up .ap2-mega-menu {
   --ap2mm-color-top-link: #00344db3;
}

.bde-header-builder.header-scrolled-up .ms-search__trigger[data-ms-search-trigger] .ms-search__icon svg {
   stroke: #000 !important;
}

/* Logo swap on scroll-up.
 *
 * The header contains two logos:
 *   - `.site-logo`               → default (transparent-friendly) variant
 *   - `.site-logo.scroll-logo`   → variant used when the header background
 *                                  turns light (scrolled-up state)
 *
 * Default state: hide the scroll variant.
 * Scrolled-up state: hide the default variant, show the scroll variant.
 */
.bde-header-builder .scroll-logo {
   display: none;
}

.bde-header-builder.header-scrolled-up .site-logo:not(.scroll-logo) {
   display: none;
}

.bde-header-builder.header-scrolled-up .scroll-logo {
   display: block;
}

/* When the AP2 mega-menu is open: invert the logo and darken the search
 * trigger icon so they stay legible against the white panel that drops
 * down behind the header. The `ap2-mega-menu-is-open` class is added to
 * <body> by the ap2-mega-menu plugin while any panel is active. */
body.ap2-mega-menu-is-open .site-logo {
   filter: invert(1) !important;
}

body.ap2-mega-menu-is-open .ms-search__trigger[data-ms-search-trigger] .ms-search__icon svg {
   stroke: #000 !important;
}

/* Språkväljaren har vit text som standard (mot mörka hero-bakgrunden).
 * När mega-menyns vita panel fälls ut bakom headern blir texten
 * osynlig — mörka den på samma sätt som i "scrolled up"-läget.
 *
 * Breakdance kompilerar sina egna kontrollstyrda färger med en per-
 * element-klass prefixad med `.breakdance` (t.ex. `.breakdance
 * .bde-ap2-language-selector-14-184 .bde-ap2-language-selector__item:
 * not(--current) .bde-ap2-language-selector__lang`) — vilket ger
 * 5 klasser (0,5,0) plus `!important`. För att alltid vinna dubblerar
 * vi `.ap2-mega-menu-is-open` på body — den upprepade klassen räknas
 * varje gång i specificiteten, så vi når (0,5,1) utan att hårdkoda
 * Breakdance's genererade element-id-klass. */
body.ap2-mega-menu-is-open.ap2-mega-menu-is-open.ap2-mega-menu-is-open .bde-ap2-language-selector__lang,
body.ap2-mega-menu-is-open.ap2-mega-menu-is-open.ap2-mega-menu-is-open .bde-ap2-language-selector .bde-ap2-language-selector__sep,
body.ap2-mega-menu-is-open.ap2-mega-menu-is-open.ap2-mega-menu-is-open .bde-ap2-language-selector__item:not(.bde-ap2-language-selector__item--current) .bde-ap2-language-selector__lang {
   color: #00334de6 !important;
}


/* Fix animation behaviour during screenreaders or WCAG controls.
 *
 */

@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      animation: none !important;
      transition: none !important;
   }

   [data-bd-animation],
   .breakdance [class*="animate"] {
      opacity: 1 !important;
      transform: none !important;
   }
}


/* Fix line-height in older gutenberg posts and BD wysiwyg for WCAG (<br>).
  *
  */

.entry-content p,
.wp-block-paragraph {
   line-height: 1.6;
}

.wp-block-paragraph a {
   display: inline-block;
   padding-block: 2px;
}

.breakdance-rich-text-styles {
   line-height: 1.6;
}

.breakdance-rich-text-styles a {
   display: inline-block;
   padding-block: 2px;
}