/* Annie-tillegg: hand-written CSS for behaviour the generated design.css doesn't cover. */

[hidden] { display: none !important; }

/* the design is built on 16px rem; Astra sets the root to 93.75% (15px) */
html { font-size: 100%; }
body { background-color: var(--at-ground); }

/* sticky header (see annie-tillegg.php); below the admin bar when logged in */
.annie-site-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 10; }

/* the design's `a { color: inherit }`: Astra colours every link; menu links come from WordPress without classes */
body .elementor a { color: inherit; }

/* FAQ items: Elementor has no <details>; the JS toggles [open] on .at-x-details */
body .elementor .at-x-details:not([open]) > :not(.at-x-summary) { display: none; }
body .elementor .at-x-summary { cursor: pointer; }
body .elementor .at-x-faq-plus { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
body .elementor .at-x-details[open] .at-x-faq-plus { transform: rotate(45deg); }

/* chips and options carry their state in aria-pressed (set by the JS) */
body .elementor .at-chip[aria-pressed="true"] { background-color: var(--at-ink); color: var(--at-on-dark); }

/* links inside text inherit the text's colour unless the design colours them */
body .elementor .e-paragraph-base a:not([class]) { text-decoration: underline; text-underline-offset: 0.15em; }

/* placeholder tag used inside text (forms, FAQ answers) */
body .elementor .at-placeholder-tag { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; background-color: var(--at-blush); color: var(--at-wine); font-size: 0.8125rem; font-weight: 700; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  body .elementor *, body .elementor *::before { animation: none !important; transition-duration: 0.01ms !important; }
}