/* VBA – Västerås Brass Academy. Kompletterar theme.json med sektionsstilar. */

:root {
  --vba-radius: 20px;
  --vba-radius-sm: 12px;
  --vba-shadow: 0 10px 30px rgba(17, 20, 24, .08);
  --vba-shadow-lg: 0 24px 60px rgba(17, 20, 24, .16);
  --vba-header-h: 80px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { height: auto; }

/* ---------- Knappar ---------- */
.wp-block-button__link {
  display: inline-flex; align-items: center; gap: .5rem; line-height: 1;
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--vba-shadow); }
.wp-block-button.is-style-vba-dark .wp-block-button__link { background: var(--wp--preset--color--ink); color: #fff; }
.wp-block-button.is-style-vba-dark .wp-block-button__link:hover { background: var(--wp--preset--color--ink-2); }
.wp-block-button.is-style-vba-outline-light .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.wp-block-button.is-style-vba-outline-light .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; }

/* ---------- Eyebrow / etikett ---------- */
.is-style-vba-eyebrow, .vba-eyebrow {
  display: flex !important; align-items: center; gap: .5rem;
  font-family: var(--wp--preset--font-family--outfit); font-weight: 600;
  font-size: .85rem !important; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--brass-dark); margin-bottom: .5rem;
}
.is-style-vba-eyebrow::before, .vba-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--wp--preset--color--brass); }
.has-ink-background-color .is-style-vba-eyebrow, .has-ink-background-color .vba-eyebrow,
.has-ink-2-background-color .is-style-vba-eyebrow { color: var(--wp--preset--color--brass); }
.vba-eyebrow-center { justify-content: center; }

.vba-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); max-width: 62ch; }
.has-ink-background-color .vba-lead { color: rgba(255, 255, 255, .75); }

/* ---------- Sidhuvud ---------- */
.vba-header {
  position: sticky; top: 0; z-index: 50; min-height: var(--vba-header-h);
  background: rgba(247, 245, 240, .92);
  box-shadow: 0 1px 0 var(--wp--preset--color--line);
  transition: background .25s, box-shadow .25s, color .25s;
}
/* Oskärpan ligger på ett pseudo-element: backdrop-filter direkt på sidhuvudet skulle låsa in mobilmenyns fixed-överlägg. */
.vba-header::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none; }
body.vba-has-hero .vba-header:not(.is-scrolled)::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
.vba-header > .wp-block-group { min-height: var(--vba-header-h); }
.vba-header .wp-block-site-logo img { width: 52px; height: 52px; border-radius: 50%; background: #fff; padding: 2px; }
.vba-header .wp-block-site-title { line-height: 1.05; margin: 0; }
.vba-header .wp-block-site-title a { text-decoration: none; }
.vba-header .wp-block-site-tagline { font-family: var(--wp--preset--font-family--outfit); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin: 0; }
.vba-header .wp-block-navigation a { text-decoration: none; }
.vba-header .wp-block-navigation a:hover { color: var(--wp--preset--color--brass-dark); }
.vba-header .wp-block-button__link { padding: .7rem 1.2rem; }

/* Transparent sidhuvud över hero på startsidan */
body.vba-has-hero .vba-header:not(.is-scrolled) { background: transparent; box-shadow: none; color: #fff; }
body.vba-has-hero .vba-header:not(.is-scrolled) a,
body.vba-has-hero .vba-header:not(.is-scrolled) .wp-block-site-tagline,
body.vba-has-hero .vba-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open { color: #fff; }
body.vba-has-hero .vba-header:not(.is-scrolled) .wp-block-navigation a:hover { color: var(--wp--preset--color--brass); }
body.vba-has-hero .vba-header:not(.is-scrolled) .wp-block-button__link { color: var(--wp--preset--color--ink); }
body.vba-has-hero .vba-header { position: fixed; left: 0; right: 0; top: 0; }

/* Mobilmeny */
.vba-header .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--ink) !important; color: #fff; padding: 5rem 2rem 2rem; }
.vba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; }
.vba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.vba-header .wp-block-navigation__responsive-container.is-menu-open a { color: #fff; font-size: 1.5rem; font-family: var(--wp--preset--font-family--outfit); font-weight: 600; }
.vba-header .wp-block-navigation__responsive-container-close { color: #fff; top: 1.25rem; right: 1.25rem; }
.vba-lang .wp-block-navigation-item__label, .lang-item a { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Hero (delad: text + foto) ---------- */
.vba-hero { position: relative; overflow: hidden; padding-top: calc(var(--vba-header-h) + clamp(2rem, 5vw, 4rem)); padding-bottom: clamp(3rem, 7vw, 6rem); }
.vba-hero::before { content: ""; position: absolute; left: -160px; bottom: -220px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 39, .28), transparent 65%); pointer-events: none; }
.vba-hero::after { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .07), transparent 65%); pointer-events: none; }
.vba-hero > * { position: relative; }
.vba-hero h1 { max-width: 12ch; }
.vba-hero h1 em { font-style: normal; color: var(--wp--preset--color--brass); }
.vba-hero p { max-width: 46ch; color: rgba(255, 255, 255, .88); }
.vba-hero__img img { border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); width: 100%; height: auto; }
.vba-hero__img { margin: 0; }
@media (max-width: 781px) {
  .vba-hero__cols { flex-direction: column-reverse !important; }
  .vba-hero__cols .wp-block-column { flex-basis: auto !important; }
  .vba-hero { padding-top: calc(var(--vba-header-h) + 1rem); }
}
.vba-badge {
  display: inline-flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px); border-radius: 999px; padding: .45rem 1rem .45rem .5rem;
  font-size: .85rem !important; font-weight: 500; margin-bottom: 1.5rem;
}
.vba-badge strong {
  background: var(--wp--preset--color--brass); color: var(--wp--preset--color--ink);
  border-radius: 999px; padding: .2rem .6rem; font-size: .75rem;
  font-family: var(--wp--preset--font-family--outfit); letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Kort ---------- */
.wp-block-group.is-style-vba-card, .vba-card {
  background: #fff; border-radius: var(--vba-radius); padding: 1.75rem;
  box-shadow: var(--vba-shadow); border: 1px solid var(--wp--preset--color--line);
}
.wp-block-group.is-style-vba-card-dark {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--vba-radius-sm); padding: 1.25rem; transition: background .2s;
}
.wp-block-group.is-style-vba-card-dark:hover { background: rgba(255, 255, 255, .09); }
.vba-card-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--wp--preset--color--brass-soft);
  display: grid; place-items: center; margin-bottom: 1.1rem; color: var(--wp--preset--color--brass-dark); font-size: 1.5rem;
}
.vba-card p { color: var(--wp--preset--color--muted); }
.vba-card .vba-step-num { color: var(--wp--preset--color--brass-dark); }
.vba-card .vba-more, .vba-more a { font-family: var(--wp--preset--font-family--outfit); font-weight: 600; text-decoration: none; color: var(--wp--preset--color--ink); }
.vba-more a:hover { color: var(--wp--preset--color--brass-dark); }

/* Snabbkort som överlappar hero */
.vba-quick { position: relative; z-index: 2; margin-top: -80px !important; }
@media (max-width: 900px) { .vba-quick { margin-top: -40px !important; } }

/* ---------- Om oss / bildram ---------- */
.vba-photo { position: relative; }
.vba-photo .wp-block-image { margin: 0; }
.vba-photo-note {
  position: absolute; left: -16px; bottom: 28px; z-index: 2; max-width: 240px;
  background: var(--wp--preset--color--ink); color: #fff; border-radius: 14px; padding: .9rem 1.1rem;
  box-shadow: var(--vba-shadow-lg); font-family: var(--wp--preset--font-family--outfit); font-size: 1rem !important; line-height: 1.35;
}
.vba-photo-note strong { display: block; color: var(--wp--preset--color--brass); font-size: 1.6rem; font-weight: 800; line-height: 1; margin-bottom: .2rem; }
@media (max-width: 781px) { .vba-photo-note { left: 8px; } }
.wp-block-image.is-style-vba-frame { position: relative; }
.wp-block-image.is-style-vba-frame img { border-radius: var(--vba-radius); box-shadow: var(--vba-shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.vba-stats { display: flex; gap: 2rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--line); }
.vba-stats strong { display: block; font-family: var(--wp--preset--font-family--outfit); font-size: 2rem; font-weight: 800; line-height: 1; }
.vba-stats span { font-size: .85rem; color: var(--wp--preset--color--muted); }

/* ---------- Stegprogram ---------- */
.vba-steps { position: relative; overflow: hidden; }
.vba-steps::before { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 39, .35), transparent 65%); pointer-events: none; }
.vba-step-num { font-family: var(--wp--preset--font-family--outfit); font-weight: 800; font-size: 2.4rem !important; color: var(--wp--preset--color--brass); line-height: 1; margin: 0; }
.vba-step-prize { display: inline-block; margin-top: .5rem; font-size: .75rem !important; background: rgba(201, 162, 39, .15); color: var(--wp--preset--color--brass); border-radius: 6px; padding: .2rem .5rem; font-weight: 600; }
.has-ink-background-color .wp-block-group.is-style-vba-card-dark p:not(.vba-step-num):not(.vba-step-prize) { color: rgba(255, 255, 255, .65); font-size: .9rem; }

/* ---------- Instrument ---------- */
.vba-inst { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--vba-radius-sm); padding: 1.2rem 1rem; text-align: center; font-family: var(--wp--preset--font-family--outfit); font-weight: 600; transition: transform .15s, box-shadow .15s; }
.vba-inst:hover { transform: translateY(-3px); box-shadow: var(--vba-shadow); }
.vba-inst .vba-inst-icon { font-size: 2rem; display: block; margin-bottom: .4rem; }

/* ---------- CTA ---------- */
.vba-cta { border-radius: 28px; box-shadow: var(--vba-shadow-lg); position: relative; overflow: hidden; }
.vba-cta::after { content: "♪"; position: absolute; right: -10px; bottom: -60px; font-size: 20rem; font-family: var(--wp--preset--font-family--outfit); opacity: .08; line-height: 1; pointer-events: none; }

/* ---------- Sponsorer ---------- */
.vba-sponsors img { height: 52px; width: auto; filter: grayscale(1); opacity: .65; transition: filter .2s, opacity .2s; }
.vba-sponsors img:hover { filter: none; opacity: 1; }
.vba-sponsors .wp-block-image { margin: 0; }

/* ---------- Evenemang (The Events Calendar) ---------- */
.vba-events .tribe-events-widget-events-list__event, .vba-events .tribe-events-calendar-list__event-row { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--vba-radius); padding: 1.25rem; }
.vba-events .tribe-events-widget-events-list__event-title a, .vba-events .tribe-events-calendar-list__event-title a { font-family: var(--wp--preset--font-family--outfit); text-decoration: none; }
.vba-events .tribe-events-c-ical__link, .tribe-events .tribe-events-c-subscribe-dropdown__button { border-radius: 999px !important; font-family: var(--wp--preset--font-family--outfit); font-weight: 600; }
.tribe-common .tribe-common-c-btn, .tribe-events .tribe-events-c-subscribe-dropdown__button { background: var(--wp--preset--color--ink) !important; color: #fff !important; border-radius: 999px !important; }
.tribe-events-calendar-list__event-date-tag-daynum, .tribe-events-widget-events-list__event-date-tag-daynum { font-family: var(--wp--preset--font-family--outfit); font-weight: 800; color: var(--wp--preset--color--brass); }
.tribe-events-widget-events-list__event-date-tag-datetime, .tribe-events-calendar-list__event-date-tag-datetime { background: var(--wp--preset--color--ink); color: #fff; border-radius: 14px; padding: .5rem .2rem; }

/* ---------- Instagram (Smash Balloon) ---------- */
.vba-instagram #sb_instagram .sbi_item { border-radius: var(--vba-radius-sm); overflow: hidden; }
.vba-instagram #sb_instagram .sbi_photo { transition: transform .4s; }
.vba-instagram #sb_instagram .sbi_item:hover .sbi_photo { transform: scale(1.05); }
.vba-instagram #sb_instagram .sbi_follow_btn a { background: var(--wp--preset--color--ink) !important; color: #fff !important; border-radius: 999px !important; font-family: var(--wp--preset--font-family--outfit); }
.vba-insta-placeholder .wp-block-image img { aspect-ratio: 1; object-fit: cover; border-radius: var(--vba-radius-sm); }

/* ---------- Sidfot ---------- */
.vba-footer { font-size: .93rem; }
.vba-footer a { text-decoration: none; }
.vba-footer a:hover { color: var(--wp--preset--color--brass); }
.vba-footer h4 { font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.vba-footer .wp-block-navigation { flex-direction: column; gap: .45rem; }
.vba-footer .wp-block-site-logo img { width: 52px; height: 52px; border-radius: 50%; background: #fff; padding: 2px; }
.vba-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1.25rem; font-size: .82rem; opacity: .7; }
.vba-social .wp-block-social-links { gap: .6rem; }
.vba-social .wp-social-link { border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; }

/* ---------- Sidhuvud för undersidor ---------- */
.vba-page-header { padding-top: calc(var(--vba-header-h) + 2rem); }
.vba-page-header .wp-block-post-title { text-wrap: balance; }

/* ---------- Inlägg / nyheter ---------- */
.vba-post-card .wp-block-post-featured-image img { border-radius: var(--vba-radius-sm); aspect-ratio: 16 / 10; object-fit: cover; }
.vba-post-card .wp-block-post-title { font-size: 1.25rem; margin: .75rem 0 .25rem; }
.vba-post-card .wp-block-post-title a { text-decoration: none; }
.vba-post-card .wp-block-post-date { font-size: .85rem; color: var(--wp--preset--color--muted); }

/* ---------- Formulär (SureForms) ---------- */
.srfm-form-container { --srfm-color-scheme-primary: var(--wp--preset--color--brass) !important; }
.srfm-form-container .srfm-button { border-radius: 999px !important; background: var(--wp--preset--color--ink) !important; font-family: var(--wp--preset--font-family--outfit) !important; }

/* ---------- Diverse ---------- */
.vba-checklist, .is-style-vba-checklist { list-style: none; padding-left: 0; }
.vba-checklist li, .is-style-vba-checklist li { padding-left: 1.8rem; position: relative; margin-bottom: .5rem; }
.vba-checklist li::before, .is-style-vba-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--brass-dark); font-weight: 700; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--wp--preset--color--brass); outline-offset: 2px; }

/* ---------- Tillägg ---------- */
.vba-footer-links a { display: block; margin-bottom: .45rem; }
@media (max-width: 600px) { .vba-header-cta { display: none; } }
.vba-form-placeholder { background: #FFF1C2; color: #7A5B00; border-radius: 12px; padding: 1rem; font-weight: 600; }

/* ---------- Block: Kommande evenemang ---------- */
.vba-upcoming__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.vba-upcoming__card {
  display: flex; gap: 1.25rem; align-items: flex-start; text-decoration: none; color: inherit;
  background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--vba-radius); padding: 1.5rem; transition: transform .15s, box-shadow .15s;
}
.vba-upcoming__card:hover { transform: translateY(-3px); box-shadow: var(--vba-shadow); color: inherit; }
.vba-upcoming__date { flex: 0 0 66px; background: var(--wp--preset--color--ink); color: #fff; border-radius: 14px; text-align: center; padding: .6rem 0; font-family: var(--wp--preset--font-family--outfit); line-height: 1; }
.vba-upcoming__date b { display: block; font-size: 1.7rem; font-weight: 800; color: var(--wp--preset--color--brass); }
.vba-upcoming__date span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.vba-upcoming__title { display: block; font-family: var(--wp--preset--font-family--outfit); font-weight: 600; font-size: 1.15rem; line-height: 1.2; margin: .1rem 0 .4rem; }
.vba-upcoming__meta { display: flex; flex-direction: column; gap: .15rem; color: var(--wp--preset--color--muted); font-size: .9rem; }
.vba-upcoming__empty { color: var(--wp--preset--color--muted); }

body.admin-bar .vba-header { top: var(--wp-admin--admin-bar--height, 32px); }
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0 !important; }

/* ---------- Mobiljusteringar ---------- */
.vba-footer a:not(.wp-element-button) { color: rgba(255, 255, 255, .85); }
.vba-footer a:not(.wp-element-button):hover { color: var(--wp--preset--color--brass); }
@media (max-width: 782px) {
  .vba-header .vba-header-cta { display: none !important; }
  .vba-header .wp-block-site-tagline { display: none; }
  .vba-header .wp-block-site-title { font-size: 1rem; }
  .vba-header .wp-block-site-logo img { width: 44px; height: 44px; }
}

/* Lika höga kort i kolumner + vänsterställd ingress */
.wp-block-column:has(> .is-style-vba-card) { display: flex; flex-direction: column; }
.wp-block-column > .is-style-vba-card { flex: 1 1 auto; }


/* I WordPress centrerade layout (constrained) ska våra element fylla spaltbredden,
   annars centreras de som egna smala block och ser "slumpmässigt" placerade ut. */
.is-layout-constrained > .vba-lead { max-width: var(--wp--style--global--content-size); }
.is-layout-constrained > .vba-lead.alignwide { max-width: var(--wp--style--global--wide-size); }
.vba-eyebrow-center { justify-content: center; }
/* Porträtt i kort */
.vba-portrait { margin: 0 0 1rem; }
.vba-portrait img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center top; border: 3px solid var(--wp--preset--color--brass-soft); }
.vba-rehearsal-note { margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--wp--preset--color--brass-soft); border-radius: var(--vba-radius-sm); }
.vba-btn-small .wp-block-button__link { padding: .45rem .9rem; font-size: .8rem; }
.vba-footer-admin .wp-block-buttons { gap: .5rem; }