/*
 Theme Name:   Dackebackens musikförskola
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to start building your own theme.
 Author:       Gullström & CO
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.2
 Text Domain:  bricks
*/

/* Barlow — body */
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/barlow-v13-latin-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/barlow-v13-latin-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/barlow-v13-latin-500.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/barlow-v13-latin-500italic.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/barlow-v13-latin-700.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/barlow-v13-latin-700italic.woff2") format("woff2");
}

/* Barlow Condensed — rubriker + ingress */
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/barlow-condensed-v13-latin-500.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/barlow-condensed-v13-latin-700.woff2") format("woff2");
}
@font-face {
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/barlow-condensed-v13-latin-700italic.woff2") format("woff2");
}

/* ============================================
   Fluid typography — matchar Medborgarskolans storlekar.
   H1 skalar 44→64px mellan mobil och desktop. H2-H4 håller
   källans värden upp till 1440px, växer sedan på ultrawide.
   ============================================ */

html {
    font-size: 62.5%; /* 1rem = 10px, förutsatt att Bricks inte skriver över */
}

:root {
    /* Rubriker */
    --fs-h1: clamp(
        4.4rem,
        3.83rem + 1.79vw,
        6.4rem
    ); /* 44→64px (hero/page title) */
    --fs-display: var(--fs-h1); /* alias för hero */
    --fs-h2: clamp(2.8rem, 1.6rem + 0.83vw, 3.2rem); /* 28→32px */
    --fs-h3: clamp(2.4rem, 1.2rem + 0.83vw, 2.8rem); /* 24→28px */
    --fs-h4: clamp(2.2rem, 1rem + 0.83vw, 2.6rem); /* 22→26px */
    --fs-h5: 1.8rem; /* 18px */
    --fs-h6: 1.6rem; /* 16px */

    /* Brödtext */
    --fs-body: 1.8rem; /* 18px — artikel-brödtext som på källan */
    --fs-lead: 2rem; /* 20px — ingresser */
    --fs-ui: 1.6rem; /* 16px — menyer, knappar, footer-länkar */
    --fs-small: 1.4rem; /* 14px — meta, captions */
    --fs-tiny: 1.2rem; /* 12px — labels, breadcrumbs */

    /* Line-heights */
    --lh-tight: 1.1;
    --lh-heading: 1.24;
    --lh-body: 1.5;
    --lh-snug: 1.3;
}

/* Body defaults */
body {
    font-family: "Barlow", sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    line-height: var(--lh-heading);
    margin: 0 0 1.6rem;
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
}
h2 {
    font-size: var(--fs-h2);
}
h3 {
    font-size: var(--fs-h3);
}
h4 {
    font-size: var(--fs-h4);
}
h5 {
    font-size: var(--fs-h5);
}
h6 {
    font-size: var(--fs-h6);
}

/* Body paragraphs */
p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin: 0 0 1.6rem;
}

/* Ingress / lead paragraph — matchar Medborgarskolans Preamble-stil
   (Barlow Condensed 500, 28px, line-height 1.5). Skalar 22→28px mobil→desktop.
   .lead p täcker Bricks Text-element där innehållet wrap:as i <p>. */
.lead,
.lead p,
p.lead,
.is-style-lead,
.is-style-lead p,
.intro p:first-of-type {
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(2.2rem, 1.99rem + 0.56vw, 2.8rem);
    font-weight: 500;
    line-height: 1.5;
    color: #262626;
    margin: 1.5rem 0;
}

.is-style-pullquote {
    border-left: 4px solid #211b83;
    padding-left: 1.5rem;
    font-style: italic;
}

.is-style-highlight {
    background: #fff8e0;
    padding: 20px;
    border-radius: 4px;
}

/* Meta / captions */
.small,
small,
figcaption {
    font-size: var(--fs-small);
    line-height: 1.5;
}

/* Breadcrumbs, labels, tags */
.tiny,
.tag,
.breadcrumbs {
    font-size: var(--fs-tiny);
    line-height: 1.33;
}

/* Links */
a {
    color: #211b83;
    transition: color 0.2s;
}
p a {
    text-decoration: underline;
}

a:hover {
    color: #17135c;
}

/* UI-element som behåller 16px trots att brödtext är 18px */

/* Buttons */
.btn,
button,
.bricks-button {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-size: var(--fs-ui);
}

/* Annat */
html {
    scroll-behavior: smooth;
}

#skicka-meddelande {
    scroll-margin-top: 80px;
}

@media (min-width: 768px) {
    #skicka-meddelande {
        scroll-margin-top: 120px;
    }
}

/* ============================================
   Desktop header nav — matchar Medborgarskolans stil:
   Barlow 16px svart utan underline, 16px horisontell padding,
   och en 5px blå bar som fade:ar in på hover (via ::after).
   ============================================ */
.bricks-nav-menu-wrapper .bricks-nav-menu > li {
    margin: 0;
}

.bricks-nav-menu-wrapper .bricks-nav-menu > li > a,
.bricks-nav-menu-wrapper .bricks-nav-menu > li > .brx-submenu-toggle > a {
    font-family: "Barlow", sans-serif;
    font-size: var(--fs-ui);
    font-weight: 400;
    color: #262626;
    text-decoration: none;
    padding: 13px 16px;
    position: relative;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.bricks-nav-menu-wrapper .bricks-nav-menu > li > a::after,
.bricks-nav-menu-wrapper
    .bricks-nav-menu
    > li
    > .brx-submenu-toggle
    > a::after {
    content: "";
    position: absolute;
    /* Sticks 31px under länken så baren hamnar mot headerns botten.
       Värdet är kopplat till nuvarande section/container-padding i Bricks.
       Om du ändrar header-höjd eller -padding kan detta behöva justeras. */
    bottom: -31px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #211b83;
    opacity: 0;
    transition: opacity 0.2s;
}

.bricks-nav-menu-wrapper .bricks-nav-menu > li > a:hover::after,
.bricks-nav-menu-wrapper
    .bricks-nav-menu
    > li
    > .brx-submenu-toggle
    > a:hover::after,
.bricks-nav-menu-wrapper .bricks-nav-menu > li.current-menu-item > a::after,
.bricks-nav-menu-wrapper
    .bricks-nav-menu
    > li.current-menu-item
    > .brx-submenu-toggle
    > a::after,
.bricks-nav-menu-wrapper .bricks-nav-menu > li.current-menu-parent > a::after,
.bricks-nav-menu-wrapper
    .bricks-nav-menu
    > li.current-menu-parent
    > .brx-submenu-toggle
    > a::after {
    opacity: 1;
}

/* Submenu items — samma typografi som top-level, utan blå bar. */
.bricks-nav-menu-wrapper .bricks-nav-menu .sub-menu > li > a {
    font-family: "Barlow", sans-serif;
    font-size: var(--fs-ui);
    font-weight: 400;
    color: #262626;
    text-decoration: none;
    padding: 13px 16px;
    white-space: nowrap;
    transition: opacity 0.15s;
}

/* ============================================
   Mobile menu — matchar Bricks inbyggda Nav Menu (mobile-mode)
   samt .mobile-menu om man byter till Offcanvas-element senare.
   ============================================ */
.bricks-mobile-menu-wrapper a,
.bricks-mobile-menu a,
.mobile-menu a,
.mobile-menu .brxe-nav-menu a,
.mobile-menu nav a {
    font-family: "Barlow Condensed", sans-serif;
    font-size: var(--fs-h4);
    font-weight: 700;
    text-decoration: none;
    transition: text-decoration 0.2s;
}

.bricks-mobile-menu-wrapper a:hover,
.bricks-mobile-menu a:hover,
.mobile-menu a:hover,
.mobile-menu .brxe-nav-menu a:hover,
.mobile-menu nav a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

main,
#brx-content {
    padding-top: var(--header-height);
}

html {
    scroll-padding-top: var(--header-height);
}

/* Post navigation (prev/next) — låt länkarna inte brytas på flera rader */
.brxe-post-navigation,
.brxe-post-navigation a {
    flex-wrap: nowrap;
}

/* ============================================
   Bricks Accordion — anpassad + / – ikon i cirkel
   Stilen återskapar Medborgarskolans FAQ-utseende.
   Selector: .brxe-accordion träffar alla Bricks-accordions.
   Byt till #brxe-XXXXXX för att begränsa till en specifik.
   ============================================ */

/* göm Bricks default-pilarna */
.brxe-accordion .accordion-title .icon {
    display: none !important;
}

/* varje accordion-item */
.brxe-accordion .accordion-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: background 0.25s ease;
}

.brxe-accordion .accordion-item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* klickbar header */
.brxe-accordion .accordion-title-wrapper {
    padding: 2.4rem 0;
    cursor: pointer;
    transition: padding 0.25s ease;
}

.brxe-accordion .accordion-title-wrapper:hover .title {
    opacity: 0.7;
}

/* flex-rad: rubrik vänster, ikon höger */
.brxe-accordion .accordion-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
}

/* rubriken — använder theme-fonten Barlow Condensed */
.brxe-accordion .accordion-title .title {
    margin: 0;
    transition: opacity 0.2s ease;
}

/* + / – cirkelikon (byggd som ::after på title) */
.brxe-accordion .accordion-title::after {
    content: "";
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border: 2px solid var(--darkblue);
    border-radius: 50%;
    background:
        linear-gradient(var(--darkblue), var(--darkblue)) center / 1.4rem 2px
            no-repeat,
        linear-gradient(var(--darkblue), var(--darkblue)) center / 2px 1.4rem
            no-repeat;
    transition:
        transform 0.35s ease,
        background-size 0.35s ease;
}

/* öppet state: vertikala linjen försvinner = blir minus */
.brxe-accordion
    .accordion-title-wrapper[aria-expanded="true"]
    .accordion-title::after {
    background-size:
        1.4rem 2px,
        0 2px;
    transform: rotate(180deg);
}

/* content-padding när öppet */
.brxe-accordion .accordion-content-wrapper {
    padding-bottom: 0.8rem;
}

.brxe-accordion .accordion-content-wrapper p {
    line-height: 1.65;
    color: rgba(0, 0, 0, 0.75);
}

.brxe-accordion .accordion-content-wrapper p:last-child {
    margin-bottom: 1.6rem;
}

/* hover-scale på ikonen */
.brxe-accordion
    .accordion-item:has(.accordion-title-wrapper:hover)
    .accordion-title::after {
    transform: scale(1.05);
}

.brxe-accordion
    .accordion-item:has(.accordion-title-wrapper[aria-expanded="true"]:hover)
    .accordion-title::after {
    transform: rotate(180deg) scale(1.05);
}

/* ============================================
   Contact Form 7 — Glädjekällans kontaktformulär
   Matchar Medborgarskolans look: floating labels INNE i fälten,
   1px #9e9e9e ram, 8px radie, 56px höjd, pill-formad submit.

   Kräver att CF7-shortcoden använder placeholder " " på text/email/tel/
   textarea, och first_as_label på select. Se shortcode-mall i README.
   ============================================ */

.cf7-form-wrapper {
    color: #262626;
    max-width: 64rem;
}

/* Varje fält wrap:as i <p> — vi använder den som container för
   den absolut-positionerade labeln. */
.cf7-form-wrapper p {
    position: relative;
    margin: 0 0 1.6rem;
}

/* Göm <br>-elementen som CF7 lägger in mellan label och input */
.cf7-form-wrapper p > br {
    display: none;
}

/* Inputs, select, textarea — top padding gör plats för flytande label */
.cf7-form-wrapper .cf7-input,
.cf7-form-wrapper .cf7-select,
.cf7-form-wrapper .cf7-textarea {
    width: 100%;
    height: 5.6rem;
    padding: 2.2rem 1.6rem 0.6rem;
    font-family: "Barlow", sans-serif;
    font-size: var(--fs-ui);
    line-height: 1.4;
    color: #000;
    background-color: #fff;
    border: 1px solid #9e9e9e;
    border-radius: 0.8rem;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Göm placeholder visuellt — den används bara som flagga
   för :placeholder-shown så vi vet om fältet är ifyllt */
.cf7-form-wrapper .cf7-input::placeholder,
.cf7-form-wrapper .cf7-textarea::placeholder {
    color: transparent;
    opacity: 1;
}

/* Select-chevron */
.cf7-form-wrapper .cf7-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3e%3cpath d='M1 1.5L8 8.5L15 1.5' stroke='%23262626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1.6rem center;
    background-size: 1.4rem;
    padding-right: 4.4rem;
    cursor: pointer;
}

/* När första (tomma) option är vald: göm value-texten så att bara
   den flytande labeln syns */
.cf7-form-wrapper .cf7-select:has(option:checked[value=""]) {
    color: transparent;
}

.cf7-form-wrapper .cf7-textarea {
    height: auto;
    min-height: 14rem;
    padding: 2.4rem 1.6rem 1.2rem;
    line-height: 1.5;
    resize: vertical;
}

/* Floating label — default-position centrerat inne i fältet */
.cf7-form-wrapper p > label {
    position: absolute;
    top: 50%;
    left: 1.6rem;
    z-index: 1;
    transform: translateY(-50%);
    font-family: "Barlow", sans-serif;
    font-size: var(--fs-ui);
    font-weight: 400;
    color: #616161;
    line-height: 1;
    pointer-events: none;
    margin: 0;
    transition:
        top 0.15s ease,
        transform 0.15s ease;
    transform-origin: left top;
    background: transparent;
}

.cf7-form-wrapper p > label span[aria-label="obligatoriskt"] {
    color: #616161;
}

/* I textarea-fält ska labeln sitta mot toppen, inte centrerat */
.cf7-form-wrapper p:has(textarea) > label {
    top: 1.8rem;
    transform: none;
}

/* Float labeln upp vid fokus eller när fältet är ifyllt.
   - input/textarea: matchar via :placeholder-shown (kräver placeholder=" ")
   - select: matchar när vald option har icke-tom value
     (kräver first_as_label så första option har value="") */
.cf7-form-wrapper p:focus-within > label,
.cf7-form-wrapper p:has(input:not(:placeholder-shown)) > label,
.cf7-form-wrapper p:has(textarea:not(:placeholder-shown)) > label,
.cf7-form-wrapper p:has(select option:checked:not([value=""])) > label {
    top: 0.6rem;
    transform: scale(0.78);
}

/* Helptext under formulärfält */
.cf7-helptext {
    font-size: var(--fs-small);
    color: #616161;
    line-height: 1.4;
    margin: 0.6rem 0 0 !important;
}

.cf7-form-wrapper .cf7-input:focus,
.cf7-form-wrapper .cf7-select:focus,
.cf7-form-wrapper .cf7-textarea:focus {
    outline: none;
    border-color: var(--darkblue);
    box-shadow: 0 0 0 3px rgba(33, 27, 131, 0.15);
}

/* GDPR-checkbox */
.cf7-form-wrapper .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.cf7-form-wrapper .wpcf7-acceptance .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: #262626;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}

.cf7-form-wrapper .wpcf7-list-item-label {
    flex: 1;
}

.cf7-form-wrapper input[type="checkbox"] {
    width: 2rem;
    height: 2rem;
    margin-top: 0.2rem;
    accent-color: var(--darkblue);
    cursor: pointer;
    flex-shrink: 0;
}

.cf7-form-wrapper .wpcf7-list-item-label a {
    color: var(--darkblue);
    text-decoration: underline;
}

.cf7-form-wrapper .wpcf7-list-item-label a:hover {
    text-decoration: none;
}

/* Turnstile */
.cf7-turnstile {
    margin: 2rem 0;
}

.cf7-turnstile:empty {
    margin: 0;
}

/* Submit-knapp — pill-formad som Medborgarskolan (radius 100px) */
.cf7-form-wrapper .cf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--darkblue);
    color: #fff;
    font-family: "Barlow", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 1.5rem 3.2rem;
    border: 2px solid var(--darkblue);
    border-radius: 10rem;
    cursor: pointer;
    min-height: 5.6rem;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.1s ease;
}

.cf7-form-wrapper .cf7-submit:hover:not(:disabled) {
    background-color: #17135c;
    border-color: #17135c;
}

.cf7-form-wrapper .cf7-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 27, 131, 0.3);
}

.cf7-form-wrapper .cf7-submit:active:not(:disabled) {
    transform: translateY(1px);
}

.cf7-form-wrapper .cf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Validering */
.cf7-form-wrapper .wpcf7-not-valid-tip {
    color: #d32f2f;
    font-size: var(--fs-small);
    margin-top: 0.4rem;
}

.cf7-form-wrapper .wpcf7-not-valid {
    border-color: #d32f2f !important;
}

.cf7-form-wrapper .wpcf7-response-output {
    border: 2px solid var(--darkblue);
    border-radius: 0.8rem;
    padding: 1.2rem 1.6rem;
    margin-top: 2rem;
    font-size: var(--fs-small);
}

/* Mobil — full bredd på knapp */
@media (max-width: 478px) {
    .cf7-form-wrapper .cf7-submit {
        width: 100%;
    }
}