/* Aalesund Gospelkor. Fargene kommer fra theme.json som CSS-variabler; «Lys og ren» bytter bare variablene. */

/* ---------- Lys og ren ---------- */
body.stil-lys {
	--wp--preset--color--base: #ffffff;
	--wp--preset--color--surface: #f3f3ef;
	--wp--preset--color--contrast: #141414;
	--wp--preset--color--muted: #5d5d5d;
	--wp--preset--color--primary: #179350;
	--wp--preset--color--on-primary: #ffffff;
	--wp--custom--line: rgba(20, 20, 20, 0.12);
}

/* ---------- Logofarger ---------- */
/* Fra korets logo (Synnøve 13. okt): bunnen, grønn bryter, blågrønt hjerte, lilla play-knapp. Bunnen er den samme
   som i logofilene, så logoen kan stå rett på siden uten at kanten synes. Tekst på grønt er mørk (6:1). */
body.stil-logo {
	--wp--preset--color--base: #231f20;
	--wp--preset--color--surface: #2e292a;
	--wp--preset--color--contrast: #ffffff;
	--wp--preset--color--muted: #b9b3b5;
	--wp--preset--color--primary: #27b458;
	--wp--preset--color--on-primary: #231f20;
	--wp--preset--color--gold: #27b458;
	--aagk-teal: #38889f;
	--aagk-purple: #864fa0;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.screen-reader-text:focus { clip: auto; }

/* ---------- Topp ---------- */
/* Det klebrige elementet må være malpartiet rundt toppen. Selve .aagk-header er like høy som sin
   forelder og har derfor ingenting å klebe seg innenfor. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.aagk-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--wp--custom--line);
}
.aagk-header .wp-block-navigation { font-weight: 600; font-size: 0.95rem; }
.aagk-header .wp-block-navigation a:hover { color: var(--wp--preset--color--primary); }
.aagk-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.aagk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { font-size: 1.5rem; gap: 1.25rem; }

.aagk-wordmark { margin: 0; line-height: 1; font-family: var(--wp--preset--font-family--montserrat); font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.aagk-wordmark a { text-decoration: none; color: inherit; display: inline-flex; gap: 0.35em; align-items: baseline; }
.aagk-wordmark .w-thin { font-weight: 400; }
.aagk-wordmark .w-bold { font-weight: 900; color: var(--wp--preset--color--gold); }
body.stil-lys .aagk-wordmark .w-bold { color: var(--wp--preset--color--primary); }
.aagk-book-btn .wp-block-button__link { padding: 0.55rem 1.1rem; font-size: 0.9rem; white-space: nowrap; }
/* WordPress sin .wp-block-buttons.is-layout-flex vinner over en enkel klasse, derfor dobbel klasse. */
@media (max-width: 781px) { .wp-block-buttons.aagk-book-btn { display: none; } }
@media (max-width: 380px) { .aagk-wordmark { font-size: 0.9rem; letter-spacing: 0.1em; } }

/* ---------- Hero ---------- */
.aagk-hero.wp-block-cover { min-height: min(86vh, 820px); padding-block: var(--wp--preset--spacing--60); align-items: flex-end; }
.aagk-hero .wp-block-cover__image-background { object-position: 50% 30%; }
/* Fargetoningen ligger over bildet men under teksten. WordPress låser tekstbeholderen til z-index 1, så
   toningen får 0: den kommer etter bildet (også 0) i rekkefølgen og legger seg over det, men under teksten. */
.wp-block-cover.aagk-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(12,12,15,0.15) 0%, rgba(12,12,15,0.55) 55%, rgba(12,12,15,0.94) 100%);
}
/* Teksten følger samme bredde som toppen og innholdet (1200 px), ikke kanten av skjermen. */
.wp-block-cover.aagk-hero > .wp-block-cover__inner-container {
	position: relative; color: #f6f3ec;
	width: 100% !important; max-width: 1200px; margin-inline: auto !important;
}
/* Innholdet står venstrejustert; den smale ingressen skal ikke sentreres i beholderen. */
.wp-block-cover.aagk-hero > .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: 0 !important; }
.aagk-hero h1 { margin: 0; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; }
.aagk-hero h1 .gold { color: var(--wp--preset--color--gold); display: block; }
.aagk-hero .aagk-lead { font-size: var(--wp--preset--font-size--large); font-weight: 500; max-width: 34ch; margin-top: 1.25rem; }
.aagk-hero .wp-block-button.is-style-outline .wp-block-button__link { color: #f6f3ec; }

body.stil-lys .wp-block-cover.aagk-hero::after {
	background: linear-gradient(90deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 38%, rgba(255,255,255,0.15) 72%, rgba(255,255,255,0) 100%);
}
body.stil-lys .wp-block-cover.aagk-hero > .wp-block-cover__inner-container { color: #141414; }
body.stil-lys .aagk-hero h1 .gold { color: var(--wp--preset--color--primary); }
body.stil-lys .aagk-hero .wp-block-button.is-style-outline .wp-block-button__link { color: #141414; }
@media (max-width: 781px) {
	body.stil-lys .wp-block-cover.aagk-hero::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 45%, rgba(255,255,255,0.97) 75%); }
}
/* Toningen ender i logobunnen, ellers blir det en kant mot neste seksjon. */
body.stil-logo .wp-block-cover.aagk-hero::after {
	background: linear-gradient(180deg, rgba(35,31,32,0.15) 0%, rgba(35,31,32,0.55) 55%, rgba(35,31,32,0.97) 100%);
}

/* Merkelapp på plassholdervideoen (bare i utkastet). */
.aagk-hero-note { position: absolute; right: 1rem; top: 1rem; z-index: 2; font: 600 0.8rem/1 Montserrat, system-ui, sans-serif;
	letter-spacing: 0.02em; color: #fff; background: rgba(0,0,0,0.55); padding: 0.45rem 0.75rem; border-radius: 999px; }

/* ---------- Seksjoner ---------- */
/* Menyen lenker til #om-oss og #kontakt; uten dette havner overskriften under den klebrige toppen. */
[id] { scroll-margin-top: 90px; }
.aagk-section { padding-block: var(--wp--preset--spacing--60); }
.aagk-section.is-surface { background: var(--wp--preset--color--surface); }
.aagk-muted, .aagk-muted a { color: var(--wp--preset--color--muted); }

/* Kort og bokser: padding inngår i bredden, ellers stikker de utenfor tekstkolonnen. */
.aagk-event, .aagk-note { box-sizing: border-box; }

/* ---------- Konserter ---------- */
article.aagk-event + .wp-block-heading, .aagk-kommende + .wp-block-heading { margin-top: var(--wp--preset--spacing--60); }
.aagk-event { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 3vw, 2rem); align-items: center;
	background: var(--wp--preset--color--surface); border-radius: var(--wp--custom--radius); padding: clamp(1.1rem, 3vw, 1.75rem); border: 1px solid var(--wp--custom--line); }
.aagk-event + .aagk-event { margin-top: 1rem; }
.aagk-event__date { text-align: center; min-width: 4.5rem; line-height: 1; }
.aagk-event__day { display: block; font-size: 2.6rem; font-weight: 900; color: var(--wp--preset--color--primary); }
.aagk-event__month { display: block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; margin-top: 0.3rem; }
.aagk-event__year { display: block; font-size: 0.75rem; color: var(--wp--preset--color--muted); margin-top: 0.2rem; }
.aagk-event__title { margin: 0; font-size: var(--wp--preset--font-size--large); }
.aagk-event__title a { text-decoration: none; }
.aagk-event__meta { margin: 0.35rem 0 0; color: var(--wp--preset--color--muted); font-size: 0.95rem; }
.aagk-event__tbd { display: inline-block; margin-top: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px dashed var(--wp--preset--color--muted); color: var(--wp--preset--color--muted); }
.aagk-event .wp-block-button__link { white-space: nowrap; }
@media (max-width: 640px) {
	.aagk-event { grid-template-columns: auto 1fr; }
	.aagk-event__cta { grid-column: 1 / -1; }
}
.aagk-empty { color: var(--wp--preset--color--muted); }

/* ---------- Filmene ---------- */
/* Stående filmer (9:16) i en rad man sveiper gjennom. På mobil stikker neste film fram i kanten, så man ser
   at det er flere. Raden ruller inni seg selv; siden får ingen sidelengs rulling. */
.aagk-films { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 0.5rem; scrollbar-width: thin; }
.aagk-films > .wp-block-video { flex: 0 0 min(72vw, 320px); margin: 0; scroll-snap-align: start; }
.aagk-films video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--wp--custom--radius); background: #000; }

/* ---------- Glimt ---------- */
.aagk-year { font-size: clamp(3rem, 9vw, 6rem); font-weight: 900; line-height: 1; color: var(--wp--preset--color--primary);
	margin-top: var(--wp--preset--spacing--60) !important; }
.wp-block-gallery.aagk-gallery .wp-block-image img { border-radius: 10px; }
.wp-block-post-content > p { max-width: 72ch; }
.aagk-credit { font-size: 0.85rem; color: var(--wp--preset--color--muted); }

/* ---------- Kontakt oss ---------- */
.aagk-book { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
.aagk-book a:not(.wp-block-button__link) { color: inherit; }
.aagk-book .wp-block-button__link { background: var(--wp--preset--color--on-primary); color: var(--wp--preset--color--primary); }
.aagk-book .wp-block-button__link:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
/* Logofarger: kontaktfeltet får den lilla fra play-knappen, så alle tre logofargene er i bruk (hvit på lilla 5,8:1). */
body.stil-logo .aagk-book { background: var(--aagk-purple); color: #fff; }
body.stil-logo .aagk-book .wp-block-button__link { background: #fff; color: var(--aagk-purple); }
body.stil-logo .aagk-header .wp-block-navigation a:hover,
body.stil-logo .aagk-footer a:hover { color: var(--aagk-teal); }

/* ---------- Bunn ---------- */
.aagk-footer { border-top: 1px solid var(--wp--custom--line); font-size: 0.95rem; }
.aagk-footer a { text-decoration: none; }
.aagk-footer a:hover { text-decoration: underline; }
.aagk-footer h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--wp--preset--color--muted); margin-bottom: 0.5rem; }

/* ---------- Utkastlinje (bare mens styret vurderer) ---------- */
.aagk-draftbar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 100; display: flex; gap: 0.25rem; align-items: center;
	background: #111; color: #fff; padding: 0.35rem 0.4rem 0.35rem 0.9rem; border-radius: 999px; font: 600 0.8rem/1 Montserrat, system-ui, sans-serif;
	box-shadow: 0 10px 30px rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.15); white-space: nowrap; }
.aagk-draftbar span { margin-right: 0.4rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.aagk-draftbar a { color: #fff; text-decoration: none; padding: 0.45rem 0.8rem; border-radius: 999px; white-space: nowrap; }
/* Med tre valg blir linja bredere enn en smal telefon; merkelappen viker (navnet står i aria-label). */
@media (max-width: 600px) {
	.aagk-draftbar { font-size: 0.75rem; padding-left: 0.4rem; white-space: nowrap; }
	.aagk-draftbar a { padding: 0.4rem 0.6rem; }
	.aagk-draftbar span { display: none; }
}
.aagk-draftbar a.is-active { background: #f4c404; color: #111; }
body.stil-lys .aagk-draftbar a.is-active { background: #179350; color: #fff; }
body.stil-logo .aagk-draftbar a.is-active { background: #27b458; color: #231f20; }
.aagk-note { font-size: 0.8rem; font-weight: 600; color: var(--wp--preset--color--muted); border: 1px dashed var(--wp--custom--line); border-radius: 8px; padding: 0.5rem 0.75rem; }