/* ==========================================================================
   Fysfabriken – global.css
   Endast det Bricks native-inställningar INTE kan uttrycka:
   hover, transitions, alpha-skuggor, transform, accent i rubriktext.
   Allt annat (typografi, färg, spacing, layout, ramar, radie) ligger som
   native settings på ff-klasserna i Bricks.
   ========================================================================== */

/* ---- Grund ------------------------------------------------------------------ */
/* clip i stället för hidden – hidden gör body till scrollbehållare och dödar sticky (KB 12). */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
::selection      { background:#15BABA; color:#1A1A1B; }
::-moz-selection { background:#15BABA; color:#1A1A1B; }

/* ---- Header: klistrad ------------------------------------------------------- */
#brx-header { position: sticky; top: 0; z-index: 100; }
.ff-nav-link { transition: color .15s ease; }
.ff-nav-link:hover,
.ff-nav-link[aria-current="page"] { color:#015B5B; }

/* Megamenyn (Utbud): panelens yta. Layouten ligger på .ff-mega inuti, inte på Bricks delelement. */
.ff-dropdown .brx-dropdown-content {
  background:#FFFFFF;
  border-top:1px solid #DCEEEE;
  border-bottom:1px solid #DCEEEE;
  box-shadow: 0 18px 40px rgba(1,91,91,0.10);
}
.ff-dropdown > .brx-submenu-toggle { border-radius: 999px; transition: background .15s ease; }
.ff-dropdown.open > .brx-submenu-toggle,
.ff-dropdown:hover > .brx-submenu-toggle { background:#EDF8F8; }
.ff-mega-tile, .ff-mega-tile-teal { transition: transform .2s ease, box-shadow .2s ease; }
.ff-mega-tile:hover, .ff-mega-tile-teal:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(1,91,91,0.12); }

/* Mobilmenyn: kolumnen får aldrig brytas till en andra kolumn (KB 09). */
.ff-drawer .brx-offcanvas-inner { flex-wrap: nowrap; overflow-y: auto; }
.ff-drawer .brx-offcanvas-inner > * { flex-shrink: 0; }
.ff-drawer .brx-offcanvas-inner { transition: transform .3s ease; }
.ff-drawer .brx-offcanvas-backdrop { background: rgba(1,91,91,0.45); }

/* ---- Rubrik: "go!" i turkos med handritad linje under ------------------------ */
.ff-accent { color:#15BABA; position: relative; white-space: nowrap; }
.ff-accent::after {
  content:""; position:absolute; left:0; right:0; bottom:-.18em; height:.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 14 C 50 4, 120 4, 196 10' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ---- Hero och bildkollage: djup ---------------------------------------------- */
.ff-media-main, .ff-collage-main { box-shadow: 0 30px 60px rgba(0,0,0,0.25); }
.ff-collage-main { box-shadow: 0 24px 50px rgba(1,91,91,0.18); }
.ff-media-circle { box-shadow: 0 18px 40px rgba(0,0,0,0.20); }
.ff-media-badge, .ff-collage-badge { box-shadow: 0 18px 40px rgba(1,91,91,0.18); }
.ff-media-note { transform: rotate(-6deg); transform-origin: left top; }
.ff-pill { box-shadow: 0 6px 18px rgba(1,91,91,0.10); }

/* ---- Kort: mjukt lyft ------------------------------------------------------- */
.ff-pass-card, .ff-promo-big, .ff-promo-kurs, .ff-promo-merch {
  transition: transform .3s ease, box-shadow .3s ease;
}
.ff-pass-card:hover, .ff-promo-big:hover, .ff-promo-kurs:hover, .ff-promo-merch:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(1,91,91,0.16);
}
.ff-pass-card .ff-pass-img { transition: transform .6s ease; }
.ff-pass-card:hover .ff-pass-img { transform: scale(1.05); }
.ff-merch-img, .ff-merch-img-low { box-shadow: 0 16px 36px rgba(1,91,91,0.10); }

/* Pilen i "Läs mer" glider vid hover. */
.ff-more, .ff-more-mustard, .ff-more-light { transition: gap .15s ease; }
.ff-more:hover, .ff-more-mustard:hover, .ff-more-light:hover { gap: 12px; }

/* ---- Karusellen: luft i spåret så att korten inte kapas när de lyfts vid hover - */
.ff-carousel .splide__track { padding-top: 10px; padding-bottom: 28px; margin-top: -10px; }

/* ---- Karusellen: runda pilar ------------------------------------------------- */
.ff-carousel > .splide__arrows > .splide__arrow { border-radius: 999px; transition: filter .15s ease; }
.ff-carousel > .splide__arrows > .splide__arrow:hover { filter: brightness(.95); }

/* ---- Knappar (theme style-varianter): mjuk hover ----------------------------- */
.bricks-button { transition: transform .2s ease, box-shadow .2s ease; }
.bricks-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(1,91,91,0.22); }

/* ---- Undersidor ------------------------------------------------------------- */
/* Brödsmulor: länkar inuti text ärver inte färg (KB 12). */
.ff-crumbs a { color:#9FE3E3; text-decoration: none; }
.ff-crumbs a:hover { color:#FFFFFF; }
.ff-hero-img { box-shadow: 0 30px 60px rgba(0,0,0,0.25); }
.ff-card-white { box-shadow: 0 24px 50px rgba(0,0,0,0.18); }
.ff-plan-card, .ff-plan-card-featured { box-shadow: 0 24px 50px rgba(1,91,91,0.14); }
.ff-accent-mustard { color:#F2D27A; }
.ff-plan-badge { box-shadow: 0 6px 18px rgba(1,91,91,0.18); }

/* Medlemskapskorten: alla kort delar rader (subgrid), så att rubrik, pris, text,
   punktlista och knapp linjerar oavsett textlängd. Badgen är absolut och tar ingen rad.
   Dubblerad klass ger högre specificitet än Bricks .ff-plan-card.brxe-div (KB 12). */
.ff-plan-grid > .ff-plan-card.ff-plan-card,
.ff-plan-grid > .ff-plan-card-featured.ff-plan-card-featured {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 14px;
  align-content: start;
}
.ff-plan-grid .ff-price-sm { align-self: end; }
.ff-plan-grid .bricks-button { align-self: end; }

/* Kort som länkar: mjukt lyft */
.ff-related-card, .ff-kurs-card, .ff-period-btn, .ff-promo-band, .ff-card-teal, .ff-card-mint {
  transition: transform .25s ease, box-shadow .25s ease;
}
a.ff-related-card:hover, .ff-kurs-card:hover, .ff-period-btn:hover, a.ff-promo-band:hover, a.ff-card-mint:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(1,91,91,0.14);
}
.ff-pill-btn, .ff-btn-mustard { transition: transform .2s ease, box-shadow .2s ease; }
.ff-pill-btn:hover, .ff-btn-mustard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(1,91,91,0.18); }

/* Brödtext från redigeraren (post_content) – går inte med native settings (KB 05). */
.ff-prose h2 { font-family:'Viga',sans-serif; font-weight:400; font-size:28px; line-height:1.2; color:#1A1A1B; margin:40px 0 12px; }
.ff-prose h3 { font-family:'Viga',sans-serif; font-weight:400; font-size:21px; line-height:1.25; color:#1A1A1B; margin:28px 0 8px; }
.ff-prose p { margin:0 0 16px; }
.ff-prose ul, .ff-prose ol { margin:0 0 16px; padding-left:22px; }
.ff-prose li { margin-bottom:8px; }
.ff-prose strong { color:#1A1A1B; }
.ff-prose a { color:#015B5B; font-weight:700; }
.ff-prose img { border-radius: 24px; height: auto; }
.ff-prose > *:first-child { margin-top: 0; }

/* FAQ (dragspel): öppen fråga får mint, plus blir minus (KB 12). */
.ff-faq-item { transition: background .2s ease; }
.ff-faq-item.brx-open { background:#EDF8F8; }
.ff-faq .accordion-title-wrapper { flex-wrap: nowrap; cursor: pointer; }
.ff-faq .accordion-title-wrapper > :first-child { flex: 1 1 auto; min-width: 0; }
.ff-faq .accordion-title-wrapper .brxe-icon { transform: none; display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex-shrink:0; border-radius:999px; background:#FFFFFF; color:#015B5B; transition: background .2s ease, color .2s ease; }
.ff-faq .brx-open .accordion-title-wrapper .brxe-icon { background:#015B5B; color:#FFFFFF; }
.ff-faq .brx-open .ti-plus:before { content:"\e622"; }

/* Filterknappar på Events & kurser: form och luft saknar kontroller (KB 05). */
.ff-filter ul.brx-filter-options { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none; }
.ff-filter .bricks-button { min-height:46px; padding:0 22px; border-radius:999px; font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:15px; }

/* Wondr-widgeten: ärv sajtens typsnitt. */
.ff-wondr-box, .ff-wondr-box-mustard { font-family:'Nunito Sans',sans-serif; }

/* Enkätformulär (KB 13: etiketter är versaler som standard, radio som chips, 50 % för smalt på mobil). */
.ff-form { row-gap: 22px; }
.ff-form label, .ff-form .label { text-transform: none; letter-spacing: 0; font-family:'Nunito Sans',sans-serif; font-size:16px; font-weight:800; color:#1A1A1B; line-height:1.4; margin-bottom:8px; }
.ff-form input[type=text], .ff-form input[type=email], .ff-form textarea {
  background:#FFFFFF; border:1px solid #CDE6E6; border-radius:16px; padding:14px 16px; font-family:'Nunito Sans',sans-serif; font-size:16px; color:#1A1A1B;
}
.ff-form input:focus, .ff-form textarea:focus { outline:none; border-color:#15BABA; box-shadow:0 0 0 3px rgba(21,186,186,0.25); }
.ff-form .options-wrapper { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none; }
.ff-form .options-wrapper li { margin:0; }
.ff-form input[type=radio] { position:absolute; opacity:0; width:1px; height:1px; }
.ff-form input[type=radio] + label { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; margin:0; border-radius:999px; background:#FFFFFF; border:1px solid #CDE6E6; font-weight:700; font-size:15px; cursor:pointer; transition: background .15s ease, border-color .15s ease; }
.ff-form input[type=radio] + label:hover { border-color:#15BABA; }
.ff-form input[type=radio]:checked + label { background:#15BABA; border-color:#15BABA; color:#1A1A1B; }
.ff-form input[type=radio]:focus-visible + label { box-shadow:0 0 0 3px rgba(21,186,186,0.35); }
.ff-form .submit-button-wrapper .bricks-button { min-height:54px; padding:0 32px; border-radius:999px; }
.ff-form .message.success { background:#EDF8F8; color:#015B5B; border-radius:16px; padding:16px 20px; font-weight:700; }
@media (max-width:600px) { .ff-form .form-group:not(.submit-button-wrapper) { width:100% !important; } }

/* Karta */
.ff-map .leaflet-container { border-radius: 36px; }

/* ---- Footer ----------------------------------------------------------------- */
.ff-footer-link { text-decoration: none; transition: color .15s ease; }
.ff-footer-link:hover { color:#15BABA; }
.ff-social { transition: filter .15s ease; }
.ff-social:hover { filter: brightness(1.1); }