/* ==========================================================================
   FRONTEND.CSS — Stadsgårdsterminalen / Kollektivet Livet
   Global layout, header, navigation, events, footer, utilities.
   Sidspecifika stilar (stage, art, startpage-hero) finns i jesper.css
   ========================================================================== */


/* ==========================================================================
   1. CSS-VARIABLER
   ========================================================================== */

:root {
	--special-font:    "JetBrains Mono", monospace;
	--heading-font:    "JetBrains Mono", monospace;
	--bold-font:       "JetBrains Mono", monospace;
	--body-font:       "JetBrains Mono", monospace;
	--body-font-size:  20px;
	--subheading-size: 2.5rem;
	--side-padding:    4vw;    /* Sidmarginaler: 4% av fönsterbredden, skalas oändligt */
	--full-height:     100vh;

	/* Sätt Gutenberg/TwentyTwentys egna breddbegränsnings-variabler till 100%
	   så de inte sätter ett eget tak ovanpå vår layout. */
	--content-width:                   none;
	--global--width-content:           100%;
	--responsive--aligndefault-width:  100%;
	--responsive--alignwide-width:     100%;
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size:    100%;
}

body.admin-bar {
	--full-height: calc(100vh - 32px);
}


/* ==========================================================================
   2. GLOBAL BREDDKONTROLL — FULLT FLYTANDE, INGET ÖVRE TAK
   
   Innehållscontainrar har width: 92% och INGET max-width.
   Det innebär att layouten skalar proportionellt i alla skärmstorlekar:
   16" → 32" → ultrawide → exakt samma sidmarginaler i procent.
   
   Full-bleed-element (hero, bakgrundssektioner) ska vara width: 100vw.
   ========================================================================== */

/* Åsidosätt TwentyTwenty + Gutenberg – alla breddrestriktioner bort */
.is-layout-constrained,
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	--wp--style--global--content-size: 100% !important;
	max-width: none !important;
}

/* Alla huvud-containrar: 92% bredd, ingen max-width, centrerat */
.logo-nav-wrapper,
.header-wrapper-inner,
div.info-box-outer,
.footer-widgets-wrapper {
	width:        92% !important;
	max-width:    none !important;
	margin-left:  auto !important;
	margin-right: auto !important;
	float:        none !important;
}

/* section-inner används globalt av TwentyTwenty MEN också inuti footer
   där vi behöver annan bredd. Sätt bara centrering här, inte width. */
.section-inner {
	max-width:    none !important;
	margin-left:  auto;
	margin-right: auto;
}

/* post-inner och entry-content: full bredd, inget TwentyTwenty-tak */
.post-inner,
.entry-content {
	max-width: none !important;
	width:     100% !important;
	padding:   0 !important;
}

/* Gutenberg block-containrar inuti entry-content: 92% bredd, ingen max */
.entry-content > *,
.post-inner .entry-content > * {
	width:        92% !important;
	max-width:    none !important;
	margin-left:  auto !important;
	margin-right: auto !important;
}

/* Full-bleed element — ALLTID 100% bredd */
.alignfull,
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-image.alignfull,
.in-header,
.wp-block-getwid-content-slider {
	width:     100% !important;
	max-width: none !important;
	margin-left:  0 !important;
	margin-right: 0 !important;
}

/* section-inner.medium (entry-header i TwentyTwenty): ta bort hårt tak */
.section-inner.medium {
	max-width: none !important;
	width:     92% !important;
}

/* info-box-outer är flex */
div.info-box-outer {
	display: flex !important;
}


/* ==========================================================================
   3. BAS / BODY
   ========================================================================== */

html body {
	color:       white;
	background:  black;
	font-family: var(--body-font);
	font-size:   20px;
	overflow-x:  hidden;
}

body {
	position: relative;
}

/* Global brödtext: 20px desktop */
p, li, td, label, input, textarea, select {
	font-size: 20px;
}

body .entry-content {
	font-family: var(--body-font);
	font-size:   20px;
}

/* Rubriker: alltid versaler, tydliga storlekar */
h1, h2, h3, h4,
body .entry-content h1,
body .entry-content h2,
body .entry-content h3,
body .entry-content h4 {
	font-family:    var(--heading-font);
	text-transform: uppercase;
}

h1, .heading-size-1 {
	font-size:  75px;
	font-style: italic;
	line-height: 1.05;
}

h2, .heading-size-2 {
	font-size:   50px;
	line-height: 1.1;
}

h3, .heading-size-3 {
	font-size:   32px;
	line-height: 1.15;
}

h4, .heading-size-4 {
	font-size: 22px;
}

body a {
	color:           inherit;
	text-decoration: underline;
}

#site-content,
.post-inner,
.wp-block-group {
	background-color: black !important;
	color:            white;
}

.post-meta-wrapper {
	display: none;
}


/* ==========================================================================
   4. HEADER — STRUKTUR
   ========================================================================== */

/* Alla header-varianter delar svart bakgrund som default */
#site-header {
	background: black;
}

/* Startsidan: header flyter transparently ovanpå hero-slidern.
   WordPress lägger INTE till body.template-startpage — korrekt klass är body.home */
body.home #site-header {
	position:         absolute;
	top:              0;
	left:             0;
	right:            0;
	width:            100%;
	z-index:          100;
	background:       transparent !important;
	background-image: none !important;
	box-shadow:       none !important;
	border:           none !important;
}

/* Getwid-slidern får aldrig ligga ovanpå logo/nav
   Slick sätter z-index dynamiskt via JS — override här */
.in-header,
.in-header .slick-slider,
.in-header .slick-list,
.in-header .slick-track,
.wp-block-getwid-content-slider,
.wp-block-getwid-content-slider .slick-slider {
	z-index: 1 !important;
}

/* ================================================================
   NAVBAR: smart scroll-beteende (styrs via JS som lägger
   .nav-visible / .nav-hidden på body)
/* ================================================================
   NAVBAR: transparent vid start på ALLA sidor.
   Svart solid när .scrolled (JS-klass vid scroll).
   ================================================================ */

.logo-nav-outer {
	position:   fixed !important;
	top:        0 !important;
	left:       0 !important;
	right:      0 !important;
	z-index:    200 !important;
	background: transparent !important;
	transition: transform 0.3s ease, background 0.15s ease;
}

/* Svart solid bakgrund vid scroll — JS lägger .scrolled på body */
body.scrolled .logo-nav-outer {
	background: black !important;
}

/* Dölj nav när man scrollar ned — JS lägger till .nav-hidden */
body.nav-hidden .logo-nav-outer {
	transform: translateY(-100%);
}

/* Nav-toggle: absolut förankrad uppe till höger, bold */
button.nav-toggle {
	background:     transparent !important;
	border:         none !important;
	color:          white !important;
	font-family:    var(--bold-font) !important;
	font-size:      16px !important;
	font-weight:    700 !important;
	letter-spacing: 0.15em !important;
	padding:        0 !important;
	cursor:         pointer !important;
	white-space:    nowrap !important;
	line-height:    1 !important;
	position:       absolute !important;
	top:            50% !important;
	right:          4vw !important;
	transform:      translateY(-50%) !important;
	z-index:        201 !important;
}

button.nav-toggle .toggle-icon,
button.nav-toggle .toggle-inner,
button.nav-toggle svg,
button.nav-toggle img {
	display: none !important;
}

/* Text via data-label (sätts av JS) */
button.nav-toggle::after {
	content:        attr(data-label);
	display:        inline !important;
	font-family:    var(--bold-font);
	font-size:      16px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space:    nowrap;
}

/* ---- DESKTOP SÖK i primary-nav ---- */

/* li-elementet i navbaren */
li.nav-search-item {
	display:     flex !important;
	align-items: center !important;
	padding:     0 !important;
	margin:      0 !important;
	border:      none !important;
}

.nav-search-form {
	display:     flex !important;
	align-items: center !important;
	padding:     0 0 0 20px;
}

.nav-search-form input[type="search"] {
	background:    transparent !important;
	border:        none !important;
	border-bottom: 1px solid rgba(255,255,255,0.6) !important;
	color:         white !important;
	font-family:   var(--bold-font) !important;
	font-size:     18px !important;
	padding:       6px 6px 6px 32px !important;
	width:         180px !important;
	outline:       none !important;
	border-radius: 0 !important;
	-webkit-appearance: none !important;
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
	background-repeat:   no-repeat !important;
	background-position: 4px center !important;
	background-size:     20px !important;
	transition:          width 0.3s ease, border-color 0.2s ease;
}

.nav-search-form input[type="search"]:focus {
	border-bottom-color: white !important;
	width:               240px !important;
}

.nav-search-form input[type="search"]::placeholder {
	color:     rgba(255,255,255,0.45) !important;
	font-size: 15px;
}

.nav-search-form button[type="submit"] {
	display: none !important;
}

/* ---- MODAL TOP BAR: logga till vänster + STÄNG till höger ---- */
.menu-top-bar {
	display:         flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	width:           100% !important;
	padding:         16px 0 24px !important;
}

.menu-modal-logo img {
	height:  50px !important;
	width:   auto !important;
	display: block !important;
}

/* STÄNG-knappen i modalen — sitter i .menu-top-bar flex-rad, ingen absolute */
button.close-nav-toggle {
	background:     transparent !important;
	border:         none !important;
	color:          white !important;
	font-family:    var(--bold-font) !important;
	font-size:      16px !important;
	font-weight:    700 !important;
	letter-spacing: 0.15em !important;
	padding:        0 !important;
	cursor:         pointer !important;
	white-space:    nowrap !important;
	line-height:    1 !important;
	margin-left:    auto !important;   /* Trycker knappen till höger i flex-raden */
	position:       static !important; /* Inte absolute — flexbox hanterar positionen */
	z-index:        251 !important;
}

button.close-nav-toggle img,
button.close-nav-toggle svg {
	display: none !important;
}

.close-text {
	font-family:     var(--bold-font) !important;
	font-size:       16px !important;
	letter-spacing:  0.15em !important;
	text-transform:  uppercase !important;
	color:           white !important;
	text-decoration: none !important;
}

/* ---- MOBILSÖK i modalmenyn ---- */
.menu-search {
	margin:        24px 0 8px !important;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	padding-bottom: 24px;
	position:      relative !important;
	z-index:       260 !important;
}

.menu-search form {
	display:     flex !important;
	align-items: stretch !important;
	gap:         0 !important;
	position:    relative !important;
	z-index:     260 !important;
}

/* Label omsluter inputen — göm bara span-texten inuti, INTE label själv */
.menu-search label {
	display: block !important;   /* Måste vara synlig — inputen är ett barn */
	flex:    1 !important;
}

.menu-search label .screen-reader-text {
	display: none !important;
}

.menu-search input[type="search"],
.menu-search .search-field {
	background:         white !important;
	border:             none !important;
	color:              black !important;
	font-family:        var(--bold-font) !important;
	font-size:          16px !important;
	padding:            12px 16px !important;
	width:              100% !important;
	display:            block !important;
	outline:            none !important;
	border-radius:      0 !important;
	-webkit-appearance: none !important;
	-moz-appearance:    none !important;
	appearance:         none !important;
	position:           relative !important;
	z-index:            261 !important;
	pointer-events:     auto !important;
	cursor:             text !important;
	box-sizing:         border-box !important;
}

.menu-search input[type="search"]::placeholder {
	color:     rgba(0,0,0,0.4) !important;
	font-size: 16px;
}

/* Submit är en <input type="submit">, inte en <button> */
.menu-search input[type="submit"],
.menu-search .search-submit {
	display:        block !important;
	background:     black !important;
	color:          white !important;
	border:         none !important;
	font-family:    var(--bold-font) !important;
	font-size:      14px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	padding:        12px 20px !important;
	cursor:         pointer !important;
	white-space:    nowrap !important;
	border-radius:  0 !important;
	position:       relative !important;
	z-index:        261 !important;
	pointer-events: auto !important;
	-webkit-appearance: none !important;
}

.menu-search button[type="submit"] {
	display: none !important;
}

/* ---- MENY-MODAL ANIMATION ----
   TwentyTwenty sätter display:none som default — vi override:ar
   till visibility + opacity + transform för att kunna animera. */

.menu-modal {
	display:        block !important;    /* Överskrid display:none */
	visibility:     hidden;
	opacity:        0;
	pointer-events: none;
	transform:      translateY(-24px);
	transition:     opacity 0.3s ease,
	                visibility 0.3s ease,
	                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index:        250 !important;     /* Ovanpå logo-nav-outer */
}

.menu-modal.active {
	visibility:     visible !important;
	opacity:        1 !important;
	pointer-events: auto !important;
	transform:      translateY(0) !important;
	z-index:        250 !important;
}

/* Säkerställ att toggle-active inte ger svart bakgrund */
#site-header .toggle.active {
	background-color: transparent !important;
}

/* Undersidor: header är fast, main får padding så innehållet inte gömmer sig */
body:not(.home) #site-header {
	background-color: black !important;
}

body:not(.home) main#site-content {
	padding-top: 115px;
}

/* Söksida: headern finns men har ingen hero-bild, 115px räcker gott */
body.search-results main#site-content {
	padding-top: 20px !important;
}

/* Söksida: headern ska bara vara lika hög som navbaren */
body.search-results header#site-header {
	height: auto !important;
	min-height: 0 !important;
}

/* Söksida: rubriken och resultat centreras */
body.search-results .section-inner {
	width:   92% !important;
	margin:  0 auto !important;
	padding: 40px 0 !important;
}

/* Sökresultat: visa som eventkort */
body.search-results .event,
body.search-results article.event {
	display: block !important;
}

/* Sökresultat: vit text på alla element */
body.search-results,
body.search-results h1,
body.search-results h2,
body.search-results h3,
body.search-results p,
body.search-results a,
body.search-results li,
body.search-results span,
body.search-results .entry-title,
body.search-results .entry-title a,
body.search-results .entry-summary,
body.search-results .entry-summary p,
body.search-results .entry-content,
body.search-results .entry-content p,
body.search-results article,
body.search-results article * {
	color: white !important;
}

body.search-results a:not(.wp-block-button__link):hover {
	color: rgba(255,255,255,0.7) !important;
}

/* Sök-rubrik ("Din sökning gav X resultat") */
body.search-results .search-title,
body.search-results .page-title {
	color: white !important;
}

/* HERO-FIX: På startsidan är headern position:absolute (ur normalflödet).
   main#site-content startar då på y=0 och eventlistan hamnar bakom slidern.
   padding-top: 100vh skjuter innehållet nedanför herobilden. */
body.home main#site-content {
	padding-top: var(--full-height);
}

/* Art-sida: gul bakgrund */
.page-template-templates-template-art-php #site-header {
	background-color: #fff75a;
}

/* Dölj h1 på templates som hanterar rubriken själva */
body.hide-h1 .header-wrapper {
	display: none;
}


/* ==========================================================================
   5. LOGO & NAVIGATION (desktop)
   ========================================================================== */

.logo-nav-outer {
	position:   relative;
	z-index:    15;
	background: black;
}

.logo-nav-wrapper {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	height:          auto;
	position:        relative;  /* Ankare för absolut MENY-knapp */
}

header .logo-wrapper {
	display:         flex;
	flex-direction:  row;      /* Tillbaka till rad — logga + widget sida vid sida */
	z-index:         10;
	margin-bottom:   0;
	width:           auto;
	align-items:     center;
}

/* ==========================================================================
   NEXT EVENT WIDGET — till höger om loggan, mellan logo och nav
   ========================================================================== */
a.next-event-widget {
	display:          block;
	margin:           0 30px 0 10px;
	border:           1px solid rgba(255,255,255,0.35);
	color:            white !important;
	text-decoration:  none !important;
	padding:          0;
	min-width:        220px;
	max-width:        280px;
	position:         relative;
	transition:       border-color 0.2s ease, background 0.2s ease;
	padding-left:     0 !important;
	background:       transparent;
}

a.next-event-widget:hover {
	border-color:    white;
	background:      black;
	padding-left:    0 !important;
	text-decoration: none !important;
}

.next-event-label {
	display:        block;
	font-family:    var(--bold-font);
	font-size:      9px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	padding:        6px 10px 5px;
	border-bottom:  1px solid rgba(255,255,255,0.35);
	opacity:        1;
}

.next-event-date {
	display:        block;
	font-family:    var(--bold-font);
	font-size:      10px;
	letter-spacing: 0.1em;
	padding:        7px 10px 2px;
	opacity:        0.75;
	text-transform: uppercase;
}

.next-event-title {
	display:        block;
	font-family:    var(--bold-font);
	font-size:      12px;
	letter-spacing: 0.05em;
	padding:        2px 28px 8px 10px;
	text-transform: uppercase;
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
}

.next-event-arrow {
	position:    absolute;
	right:       8px;
	bottom:      8px;
	font-size:   16px;
	line-height: 1;
	opacity:     0.6;
	transition:  transform 0.2s ease, opacity 0.2s ease;
}

a.next-event-widget:hover .next-event-arrow {
	transform: translateX(3px);
	opacity:   1;
}

/* Mobil: göm widgeten */
@media (max-width: 699px) {
	a.next-event-widget {
		display: none;
	}
}

header a.custom-logo-link {
	margin: 15px 20px;
}

img.custom-logo {
	height:     105px;
	transition: all 0.4s ease-in-out 0s, visibility 0s;
}

img.custom-logo:hover,
img.expand:hover {
	transform: scale(1.05);
}

/* Rubrik i header */
.header-wrapper-inner {
	max-width: none;
	margin:    auto;
	display:   flex;
}

.header-wrapper-inner h1,
.header-wrapper-inner h2 {
	padding:    0;
	background: black;
	font-size:  2rem;
	z-index:    5;
	width:      100%;
	margin-top: -20px;
}

.entry-title.right-title {
	display: none;
}

.translation {
	color:        white;
	white-space:  nowrap;
	font-weight:  bold;
	opacity:      0.5;
}

/* Primär meny */
html body:not(.overlay-header) .primary-menu > li > a {
	color: white;
}

nav ul.primary-menu {
	justify-content: center;
	letter-spacing:  0.08em;
	width:           auto;
	margin:          0;
}

nav ul.primary-menu a {
	font-size:      16px;
	text-transform: uppercase;
	font-weight:    bold;
	display:        block;
	font-family:    var(--bold-font);
}

nav ul.primary-menu > li > a,
ul.primary-menu > li.menu-item-has-children > a {
	padding: 10px 16px;
}

nav ul.primary-menu ul li {
	width: 100%;
	display: block;
}

nav ul.primary-menu ul li a {
	padding:    8px 16px;
	font-size:  14px;
	text-align: center;
	display:    block;
	width:      100%;
	box-sizing: border-box;
}

nav ul.primary-menu > li {
	border-radius: 0;
	margin:        0;
	position:      relative;  /* Ankare för absolut dropdown */
}

nav ul.primary-menu > li.menu-item-has-children:hover {
	background: black;  /* Bakgrund på li — täcker exakt samma bredd som dropdown */
}

/* Hover på länken — transparent, li-bakgrunden räcker */
nav ul.primary-menu > li > a:hover {
	background: transparent;
}

nav ul.primary-menu > li:hover > a {
	background: transparent;
}

/* Sök-item: aldrig svart hover-bakgrund */
nav ul.primary-menu > li.nav-search-item:hover {
	background: transparent !important;
}

/* Ta bort ::after-hack som skapade ett svart block under länken */
.primary-menu > li.menu-item-has-children::after,
.primary-menu > li.menu-item-has-children:hover::after {
	display: none !important;
}

nav ul.primary-menu > li.menu-item-has-children:hover {
	border-radius: 0;
}

.primary-menu li {
	text-align:  center;
	white-space: nowrap;
}

ul.primary-menu {
	align-items: flex-start;
}


ul.primary-menu ul {
	/* Dold som standard */
	display:        block !important;
	opacity:        0;
	visibility:     hidden;
	pointer-events: none;
	transition:     opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
	transform:      translateY(-14px);

	/* Vänsterflush mot li — li och dropdown delar samma width */
	position:   absolute;
	top:        100%;
	left:       0;
	right:      auto !important;
	width:      max-content;
	min-width:  100%;       /* Aldrig smalare än li */
	margin-top: 0;
	padding:    4px 0;

	/* Utseende */
	background:    black;
	border-radius: 0 !important;
	z-index:       100;
	box-shadow:    none;
}

/* Visa på hover */
ul.primary-menu > li:hover > ul {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
	transform:      translateY(0);
}

/* Li är positionsankare + tar same width som dropdown */
ul.primary-menu > li {
	position:  relative;
	width:     max-content;
}

/* Centrera texten i parent-li */
nav ul.primary-menu > li.menu-item-has-children {
	text-align: center;
}

ul.primary-menu ul::before,
ul.primary-menu ul::after {
	display: none;
}

ul.primary-menu .icon {
	display: none;
}

nav ul.primary-menu .current_page_item > a {
	background:      black;
	color:           white;
	border-radius:   0;
	text-decoration: none;
}

nav ul.primary-menu .current_page_item > a:hover {
	text-decoration: underline;
}

/* Sticky navigation */
body.show-navigation .logo-nav-outer {
	background: black;
	position:   fixed;
	min-height: 40px;
	z-index:    20;
	/* Spänner hela bredden när fixed – annars kollapsar den */
	left:       0;
	right:      0;
	top:        0;
}

/* Innehållet i fixed nav centreras via flex */
body.show-navigation .logo-nav-wrapper {
	width:        92% !important;
	max-width:    none !important;
	margin-left:  auto !important;
	margin-right: auto !important;
}

body.show-navigation nav ul.primary-menu > li.menu-item-has-children:hover {
	border-bottom: none;
}


/* ==========================================================================
   6. MOBIL NAVIGATION & MODAL
   ========================================================================== */

button.nav-toggle .toggle-inner {
	padding-top: 0;
}

button.nav-toggle .toggle-icon {
	height: auto;
	width:  auto;
}

span.toggle-inner {
	height: auto;
}

div.menu-modal-inner {
	background: black;
}

ul.modal-menu a {
	color: white;
}

ul.modal-menu li,
.menu-modal nav * {
	border-color: transparent;
}

.menu-modal.active {
	z-index: 10;
}

.menu-modal button.toggle,
.menu-modal button.toggle:focus,
.menu-modal button.toggle:hover,
.menu-modal button.toggle:active {
	border:  none;
	outline: none !important;
}

button.sub-menu-toggle svg {
	filter: invert(1);
}

.menu-wrapper .active {
	color: white;
}

.social-icons a {
	background-color: transparent !important;
}

.social-icons a:hover,
.social-menu a:hover {
	text-decoration: none !important;
}

.footer-social a::before,
.social-menu a:before {
	font-size: var(--subheading-size);
}

.social-icons svg,
.footer-social svg {
	display: none;
}

.fill-children-current-color,
.fill-children-current-color * {
	fill: #000;
}


/* ==========================================================================
   7. FEATURED IMAGE & HERO
   ========================================================================== */

figure.featured-media {
	position: absolute;
	z-index:  -1;
	height:   100%;
	width:    100%;
}

figure.featured-media img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

body.singular .featured-media::before {
	display: none;
}

/* Klassen .in-header används på Getwid-slider-blocket i Gutenberg.
   HERO-FIX: containern måste ha explicit höjd. 
   Den är i <main> på startsidan – position:absolute FÅR INTE sättas här,
   det lyfter ur flödet och nästa sektion hamnar ovanpå. */
.in-header {
	margin:     0 !important;
	padding:    0;
	min-height: var(--full-height);
}

/* Slick-slides: full höjd */
.in-header .slick-slide {
	height:          var(--full-height);
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.in-header .slick-initialized .slick-slide {
	display: flex;
}

.in-header .wp-block-getwid-content-slider-slide > .wp-block-getwid-content-slider-slide__wrapper > * {
	width:  100vw;
	height: var(--full-height);
}

.in-header .slick-dots li button::before {
	background:    white;
	border-radius: 50%;
	border:        2px solid white;
	content:       '';
}

.in-header .slick-dots li.slick-active button::before {
	background: black;
}

.wp-block-getwid-content-slider .wp-block-heading {
	text-transform: uppercase;
}


/* ==========================================================================
   8. INFO-BOX (startsidan)
   ========================================================================== */

div.info-box {
	background: white;
	padding:    30px;
	bottom:     80px;
}

/* Eventsidans inforuta ska vara svart, inte vit */
div.info-box.info-box-event {
	background:    black !important;
	color:         white !important;
	border-radius: 0 !important;   /* Inga rundade hörn */
	width:         33vw !important;
	min-width:     320px !important;
	bottom:        0 !important;   /* Sitter i botten av header, rör nästa sektion */
	white-space:   normal !important;
}

div.info-box h2 {
	font-size: 3rem;
}

div.info-box .button {
	color:        black;
	margin-right: 10px;
}

div.info-box .social-icons a {
	background: transparent;
}

div.info-box .social-icons svg {
	width:  100%;
	height: 100%;
}

div.info-box p:last-of-type {
	margin-bottom: 0;
}


/* ==========================================================================
   9. KNAPPAR
   ========================================================================== */

.buttons a,
a.button,
a.wp-element-button {
	background:           white;
	color:                black;
	transition-duration:  0.4s;
	transition-property:  color, background;
	border-radius:        25px;
	padding:              4px 20px;
	border:               2px solid black;
}

.buttons a:hover,
a.button:hover,
a.wp-element-button:hover {
	background: black;
	color:      white;
}

.buttons {
	justify-items: center;
}

/* Knappar i header-sektionen */
#site-header .buttons a,
#site-header a.wp-element-button {
	background:          transparent;
	color:               #fff;
	transition:          color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
	border-radius:       0;
	padding:             8px 20px;
	border:              2px solid #fff;
	font-size:           20px;
	line-height:         1.5;
	overflow:            hidden;
	position:            relative;
}

#site-header a.wp-element-button::after {
	content:    " →";
	opacity:    0;
	transform:  translateX(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	display:    inline-block;
}

#site-header a.wp-element-button:hover {
	background:      black;
	padding-left:    28px !important;
	text-decoration: none !important;
}

#site-header a.wp-element-button:hover::after {
	opacity:   1;
	transform: translateX(4px);
}

#site-header .buttons a:hover {
	background:      black;
	text-decoration: none !important;
}

#site-header .buttons.buttons-outline a {
	background: #fff;
	color:      #000;
	border:     1px solid #000;
}

body input[type=submit],
body button[type=submit] {
	border-radius: 10px;
	background:    black;
}

button[type=submit]:hover {
	text-decoration: underline;
}


/* ==========================================================================
   10. EVENT-LISTA (programsida)
   ========================================================================== */

/* Event-lista container: 10px gap i alla riktningar */
.event-list,
.events,
ul.event-list,
div.event-list {
	gap:             10px !important;
	column-gap:      10px !important;
	row-gap:         10px !important;
	grid-gap:        10px !important;  /* legacy */
	margin:          0 !important;
	padding-left:    0 !important;
	padding-right:   0 !important;
}

.event,
.event-list .event {
	border-radius: 0 !important;
	height:        auto !important;
	overflow:      hidden !important;
	background:    transparent !important;
	margin-bottom: 0 !important;   /* Gap hanteras av grid/flex på förälder */
	margin-right:  0 !important;
}

/* Padding ovanför eventlistan på startsidan */
body.home .event-list,
body.home .events,
body.home section:has(.event) {
	padding-top: 40px;
}

.event img,
.event-list .event a img {
	border-radius: 0 !important;
	display:       block;
	width:         100%;
	transition:    transform 0.4s ease;
}

/* Zoom-effekt: hela kortet som hover-yta, bara bilden zoomas */
.event:hover img,
.event-list .event:hover a img {
	transform: scale(1.05);
}

/* Vit info-ruta under evenemangsbilden */
.event .content {
	background-color: white !important;
	color:            black !important;
	margin-top:       10px !important;
	padding:          10px 15px 15px !important;
	border-radius:    0 !important;
	display:          flex;
	flex-direction:   column;
}

.event .content h3 {
	margin: 10px 0 15px !important;
	height: auto !important;
}

.event .content h3 a {
	color:            black !important;
	text-decoration:  none;
	font-family:      var(--heading-font);
	font-size:        2.5rem !important;
	line-height:      1.1 !important;
	display:          block;
	text-transform:   uppercase;
	white-space:      nowrap;
	overflow:         hidden;
	text-overflow:    ellipsis;
}

/* Datum och plats */
.event .content .time-location time {
	background-color: black;
	color:            white !important;
	padding:          2px 6px;
	font-family:      var(--bold-font);
	text-transform:   uppercase;
	display:          inline-block;
	margin-right:     5px;
	font-size:        1.2rem;
}

.event .content .time-location .location {
	display:        inline-block;
	color:          black !important;
	font-family:    var(--bold-font);
	font-weight:    800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size:      1.2rem;
}

/* Knappar i event-kort */
.event .content .buttons {
	display:         flex !important;
	flex-direction:  row-reverse !important;
	justify-content: space-between !important;
	gap:             10px;
	margin-top:      auto !important;
	margin-bottom:   0 !important;
	padding:         0 !important;
	background:      transparent !important;
	width:           100% !important;
}

/* ==========================================================================
   HOVER-ANIMATION: text glider åt höger, pil visas i köp-biljett
   Tekniken: overflow:hidden på knappen, translateX på ::before (pilen)
   och padding-left transition på texten via en pseudo-wrapper.
   Enklast: använda letter-spacing + padding-left på :hover.
   ========================================================================== */

/* Alla interna länk-knappar: klipp innehåll, förbered textrörelse */
.event .content .buttons a,
body.single-event .inner-wrap .buttons a,
div.single-event .buttons a {
	overflow:    hidden;
	position:    relative;
}

/* Textrörelse höger vid hover — gäller alla knapp-varianter */
.event .content .buttons a:hover,
body.single-event .inner-wrap .buttons a:hover {
	padding-left: 12px !important;
}

/* Köp biljett: pil visas via ::after */
.event .content a.buy-ticket::after,
body.single-event .inner-wrap a.buy-ticket::after {
	content:    " →";
	opacity:    0;
	transform:  translateX(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	display:    inline-block;
}

.event .content a.buy-ticket:hover::after,
body.single-event .inner-wrap a.buy-ticket:hover::after {
	opacity:   1;
	transform: translateX(4px);
}

.event .content .buttons a {
	flex:            1 !important;
	text-align:      center !important;
	padding:         12px 0 !important;
	font-size:       1.3rem !important;
	line-height:     1 !important;
	border-radius:   0 !important;
	font-family:     var(--bold-font) !important;
	text-transform:  uppercase !important;
	transition:      background 0.2s ease, color 0.2s ease, padding 0.2s ease;
	text-decoration: none !important;
}

.event .content a.buy-ticket {
	background-color: black !important;
	color:            white !important;
	border:           2px solid black !important;
}

.event .content a.buy-ticket:hover {
	background-color: #222 !important;
	border-color:     #222 !important;
}

.event .content a.read-more {
	background-color: white !important;
	color:            black !important;
	border:           2px solid black !important;
}

.event .content a.read-more:hover {
	background-color: black !important;
	color:            white !important;
}

/* "Läs mer här"-länk: hanteras av globalt hover-system ovan */

.event-list .buttons a,
#site-header .buttons.buttons-outline a,
div.single-event .buttons a {
	width: 100%;
}


/* ==========================================================================
   11. SINGLE EVENT (enskild evenemangs-sida)
   ========================================================================== */

/* Svart bakgrund och vit text i hela innehållsytan */
body.single-event .inner-wrap,
body.single-event .inner-wrap .content {
	background-color: black !important;
	color:            white !important;
	border:           none !important;
}

body.single-event .inner-wrap .content p,
body.single-event .inner-wrap .content strong,
body.single-event .inner-wrap .content li,
body.single-event .inner-wrap .content ul {
	color: white !important;
}

body.single-event .inner-wrap hr {
	border:        0;
	border-top:    1px solid #333 !important;
	margin:        20px 0;
}

/* Knappar på enskild evenemangs-sida */
div.single-event .buttons {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   15px;
	margin-bottom:         15px;
}

body.single-event .inner-wrap .buttons {
	display:    flex !important;
	gap:        15px;
	margin-top: 30px !important;
}

body.single-event .inner-wrap .buttons a,
div.single-event .buttons a {
	border-radius:   0 !important;
	text-transform:  uppercase;
	font-family:     var(--bold-font);
	padding:         12px 24px !important;
	text-decoration: none !important;
	font-size:       1.3rem !important;
}

body.single-event .inner-wrap a.buy-ticket {
	background-color: black !important;
	color:            white !important;
	border:           2px solid white !important;
}

body.single-event .inner-wrap a.read-more {
	background-color: white !important;
	color:            black !important;
	border:           2px solid white !important;
}

/* Eventtitel inuti inforutan (injicerad via info-box-event.php) */
.info-box-event h1.event-info-title {
	font-family:    var(--heading-font) !important;
	font-size:      clamp(1.1rem, 2vw, 1.8rem) !important;
	text-transform: uppercase !important;
	color:          white !important;
	margin:         0 0 8px 0 !important;
	line-height:    1.2 !important;
	font-style:     normal !important;
	padding:        0 !important;
	border:         none !important;
	white-space:    normal !important;  /* Tillåt radbrytning */
	word-break:     break-word;
}

/* Dölj hela header-wrapper på eventsidor — titel visas nu i inforutan.
   Detta tar bort den svarta fyrkanten, linjen och den gamla titeln. */
.single-event .header-wrapper {
	display: none !important;
}

.single-event .entry-content,
.single-event .entry-content p,
.single-event .entry-content li,
.single-event .post-inner {
	color: white !important;
}

/* ==========================================================================
   SINGLE EVENT: Tvåkolumnslayout — sticky inforuta vänster, text höger
   ========================================================================== */

/* Dölj inforutan i headern på eventsidor — den renderas nu i content-event.php */
/* Desktop single event: info-box absolut positionerad i botten av header,
   JS gör den fixed vid scroll */
body.single-event header#site-header {
	position: relative !important;
}

body.single-event .info-box-outer {
	display:  block !important;
	position: absolute !important;
	bottom:   0 !important;
	left:     4vw !important;
	width:    auto !important;
	z-index:  10 !important;
}

/* Göm kopian i main på desktop */
body.single-event .event-sidebar {
	display: none !important;
}

/* event-two-col: block istället för flex */
.entry-content > .event-two-col {
	width:      100% !important;
	max-width:  none !important;
	margin:     0 !important;
	padding:    0 !important;
	display:    block !important;
}

/* Beskrivningstext: placerad till höger om info-rutan */
.event-description {
	width:       auto !important;
	max-width:   800px;
	padding:     20px 60px 60px 40px;
	margin-left: 580px;   /* info-ruta ~560px från vänster + luft */
}

.event-description .inner-wrap,
.event-description .inner-wrap .content {
	background: transparent !important;
	border:     none !important;
	width:      100% !important;
	max-width:  none !important;
}

.event-description p.evdesc {
	color:       white !important;
	font-size:   1.1rem;
	line-height: 1.7;
	width:       auto !important;
}

/* Mobil: stapla */
@media (max-width: 699px) {
	.event-two-col {
		flex-direction: column !important;
		padding-top:    20px;
	}
	.event-sidebar {
		position: relative !important;
		top:      auto;
		width:    100% !important;
		flex:     none;
		padding:  20px;
	}
	/* Visa info-box i header på mobil */
	body.single-event .info-box-outer {
		display: block !important;
	}
	.event-sidebar {
		display: none !important;
	}
	.event-description {
		padding:   20px !important;
		max-width: 100%;
	}
}

.single-event .event-details,
.single-event .time-location {
	color: white !important;
}

.single-event .entry-content a {
	color:           white !important;
	text-decoration: underline;
}


/* ==========================================================================
   12. LOKALER (Venues)
   ========================================================================== */

section.venue-list {
	background: #f5f3ee;
}

.venues img {
	position:   absolute;
	top:        0;
	left:       0;
	height:     100%;
	width:      100%;
	object-fit: cover;
}

.venues a:hover img {
	opacity: 0.85;
}

.venues a {
	display:         flex;
	position:        relative;
	color:           white;
	min-height:      220px;
	flex-direction:  column;
	text-decoration: none;
	justify-content: end;
	padding:         20px;
	font-size:       18px;
}

.venues a span {
	position: relative;
	z-index:  5;
	display:  block;
}

.venues a span.name {
	font-family: var(--heading-font);
	font-size:   var(--subheading-size);
}

.venues a span.data {
	font-size:   16px;
	font-weight: 300;
}

.venues a:hover {
	text-decoration: none !important;
}

.fact-box {
	background:    #f5f3ee;
	border-bottom: 1px solid #f5f3ee;
}

.fact-box h3 {
	background:     #555555;
	padding:        20px;
	text-transform: uppercase;
	color:          white;
}

.fact-box p {
	margin:    20px;
	font-size: 16px;
}

.has-booking-button {
	display:     flex;
	align-items: center;
}

a.button.booking {
	background: white;
	color:      black;
	border:     1px solid black;
}

a.button.booking:hover {
	background: black;
	color:      white;
}


/* ==========================================================================
   13. KONST / ART
   ========================================================================== */

section.art-list {
	background: #fff75a;
}

.art a {
	display:         block;
	color:           black;
	text-decoration: none;
	outline:         6px solid transparent;
	padding:         6px;
	font-size:       1.1em;
	line-height:     1.5em;
}

#site-content h2.art-list-heading {
	background:    #fff75a;
	max-width:     800px;
	border-radius: 20px 20px 0 0;
	text-align:    center;
	font-size:     30px;
	font-style:    italic;
	padding:       10px;
}

.art a:hover {
	outline-color: black;
}

.art img {
	height:     230px;
	width:      100%;
	object-fit: cover;
}

.art.stair img {
	height: 420px;
}

.art span.name {
	font-weight: 600;
}

.art span.venue {
	font-style:  italic;
	font-weight: 300;
}


/* ==========================================================================
   14. FAQ
   ========================================================================== */

.ewd-ufaq-faqs {
	position: relative;
}

.ewd-ufaq-faq-category {
	border-top: 2px solid white;
}

.ewd-ufaq-faq-div {
	background:    #ffffff;
	border-bottom: 1px solid #555555;
}

div.ewd-ufaq-faq-body {
	padding: 6px 15px;
}

body div.ewd-ufaq-faq-title div.ewd-ufaq-post-margin-symbol {
	float:      right;
	margin-top: 6px;
}

.ewd-ufaq-faqs a {
	color: #555555;
}

.ewd-ufaq-faqs h3 {
	color:     #555555;
	font-size: 40px;
}

.ewd-ufaq-faqs h4 {
	padding:   6px 10px;
	font-size: 18px;
}


/* ==========================================================================
   15. KOLUMNER & CONTENT-BLOCK
   ========================================================================== */

section.dark,
.modal.dark {
	background: black;
	color:      white;
}

section.bright {
	background: white;
	color:      black;
}

body.dark main {
	background: black;
	color:      white;
}

#site-content .wp-block-columns.sleak {
	height:        600px;
	gap:           0;
	margin-top:    0;
	margin-bottom: 0;
}

#site-content .wp-block-columns.sleak.allow-grow {
	min-height: 600px;
	height:     auto;
}

.wp-block-columns.sleak.text-left > .wp-block-column:first-child {
	padding: 40px 0;
}

.wp-block-columns.sleak.text-left > .wp-block-column:first-child > * {
	margin-right: 40px;
}

.wp-block-columns.sleak.text-right > .wp-block-column:nth-child(2) {
	padding: 40px 0;
}

.wp-block-columns.sleak.text-right > .wp-block-column:nth-child(2) > * {
	margin-left: 40px;
}

#site-content .wp-block-columns.sleak figure {
	height: 100%;
	margin: 0;
}

.wp-block-columns.sleak img,
.wp-block-columns.sleak video {
	max-height: 100%;
	height:     100%;
	width:      100%;
	object-fit: cover;
}

figure.crop-circle video,
figure.crop-circle img {
	max-height: 800px;
	object-fit: cover;
	clip-path:  circle(36% at 50% 50%);
}

figure.rotate {
	transform:       rotate(-38deg);
	text-align:      center;
	display:         flex;
	justify-content: center;
}

figure.tilt img {
	border:        2px solid white;
	border-radius: 25px;
}

figure.tilt.left img {
	transform: rotate(-4deg);
}

figure.tilt.right img {
	transform: rotate(4deg);
}

section.white-black {
	background:      url('../gfx/white-black.png') repeat-y center;
	background-size: 100% auto;
}


/* ==========================================================================
   16. FOOTER
   
   HTML-struktur:
   footer#site-footer.header-footer-group
   ├── div.section-inner  (1: newsletter i wp-block-column.newsletter)
   ├── div.section-inner  (2: nav.footer-menu-wrapper)
   └── div.footer-widgets-group
       └── div.section-inner
           ├── nav.footer-social-wrapper  (döljs)
           └── div.section-inner
               └── div.wp-block-columns
                   ├── div.wp-block-column[style=flex-basis:99%]  (logga)
                   └── div.wp-block-column.footer-text-center     (stöd + policy)
   ========================================================================== */

footer#site-footer,
.header-footer-group,
.footer-widgets-group,
.footer-widgets-group .section-inner,
#site-footer {
	background-color: black !important;
	color:            white !important;
	border-radius:    0 !important;
}

/* ================================================================
   TOPPDEL: de två section-inner-blocken sida vid sida
   Meny (HTML-barn 2) visas till vänster via order.
   Newsletter (HTML-barn 1) visas till höger.
   ================================================================ */

footer#site-footer {
	display:    flex;
	flex-wrap:  wrap;
	padding:    60px 4vw 0;
	box-sizing: border-box;
}

/* Båda section-inner är direkta barn till footer → 50% vardera */
footer#site-footer > .section-inner {
	width:       50% !important;
	max-width:   none !important;
	margin:      0 !important;
	padding-top: 0;          /* Rubrikerna ska linjera exakt */
	padding-bottom: 60px;
	box-sizing:  border-box;
}

/* Dölj hr som Markethype/WP lägger efter formuläret */
footer#site-footer hr,
footer .section-inner hr {
	display: none !important;
}

/* Newsletter (1:a) → höger */
footer#site-footer > .section-inner:first-child {
	order:        2;
	padding-left: 60px;
}

/* Nollställ all toppmarginal på allt inuti newsletter-kolumnen */
footer#site-footer > .section-inner:first-child > *:first-child,
footer#site-footer > .section-inner:first-child .wp-block-columns,
footer#site-footer > .section-inner:first-child .wp-block-column,
footer#site-footer > .section-inner:first-child .mhForm,
footer .wp-block-column.newsletter {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Markethype injicerar ibland en tom div överst — nollställ */
footer .mhForm > *:first-child {
	margin-top: 0 !important;
}

/* Meny (2:a) → vänster */
footer#site-footer > .section-inner:nth-child(2) {
	order:         1;
	padding-right: 60px;
}

/* footer-widgets-group → full bredd längst ned */
footer#site-footer > .footer-widgets-group {
	order:      3;
	width:      100% !important;
	padding:    40px 0;
	border-top: none;
	box-sizing: border-box;
}

/* ---- SITEMAP/MENY ---- */

nav.footer-menu-wrapper {
	display: block;
	width:   100%;
	margin:  0;
}

ul.footer-menu {
	display:        flex;
	flex-direction: column;
	list-style:     none;
	padding:        0;
	margin:         0;
}

ul.footer-menu > li {
	padding: 3px 0;
	margin:  0;
}

ul.footer-menu a {
	color:           white;
	text-decoration: none;
	font-weight:     700;
	text-transform:  uppercase;
	letter-spacing:  0.05em;
	font-size:       20px;
}

ul.footer-menu a:hover {
	text-decoration: underline !important;
}

/* Sub-meny: staplade vertikalt med indrag */
ul.footer-menu ul.sub-menu {
	display:        flex;
	flex-direction: column;
	gap:            0;
	margin-top:     2px;
	padding:        0 0 4px 20px;
	list-style:     none;
}

ul.footer-menu ul.sub-menu li {
	padding: 1px 0;
}

ul.footer-menu ul.sub-menu a {
	font-size:      16px;
	font-weight:    400;
	text-transform: none;
	letter-spacing: normal;
	opacity:        0.75;
}

ul.footer-menu ul.sub-menu a:hover {
	opacity: 1;
}

/* ---- NYHETSBREV ---- */

/* h3 inuti newsletter-kolumnen */
footer .wp-block-column.newsletter h3,
footer h3#newsletter-footer {
	font-size:      20px !important;
	text-transform: uppercase;
	margin:         0 0 30px !important;
	font-weight:    700;
	line-height:    1.1;
}

/* Dölj tom spacer-kolumn och tom content-kolumn */
footer .wp-block-column.spacer,
footer .wp-block-column.content:not(.newsletter) {
	display: none !important;
}

/* newsletter-kolumnen tar full bredd inuti sin section-inner */
footer .wp-block-column.newsletter {
	flex-basis: 100% !important;
	width:      100% !important;
	max-width:  none !important;
}

/* Markethype-formulär */
/* Sätt JetBrains Mono på hela formuläret */
footer .mhForm,
footer .mhForm * {
	font-family: var(--body-font) !important;
}

.mhForm__label,
.mhForm__checkboxLabel,
.mhForm__checkboxLabel span,
.mhForm__checkboxLabel a {
	color:     white !important;
	font-size: 20px !important;
}

/* Kryssrute-texten "Jag vill få e-postutskick" — mindre än brödtext */
.mhForm__checkboxLabel span,
.mhForm__checkboxLabel {
	font-size: 13px !important;
	opacity:   0.75;
}

.mhForm__input--text,
.mhForm__input--email {
	color:            white !important;
	background-color: transparent !important;
	border:           none !important;
	border-bottom:    1px solid rgba(255,255,255,0.4) !important;
	border-radius:    0 !important;
	padding:          4px 0 4px 0 !important;   /* Tightare fält */
	font-family:      var(--body-font) !important;
	font-size:        20px !important;
	width:            100% !important;
}

/* ---- FLOATING LABEL — CSS-only ----
   Labeln läggs ovanpå inputfältets linje.
   Vid focus eller ifyllt innehåll glider den upp och blir liten.
   Kräver att .mhForm__control är position: relative. */

.mhForm__control--text,
.mhForm__control--email {
	position:    relative;
	padding-top: 20px !important;   /* Plats för label när den är uppe */
	margin-bottom: 8px !important;  /* Tighter gap mellan fält */
}

.mhForm__label--text,
.mhForm__label--email {
	position:   absolute !important;
	top:        24px !important;     /* Samma höjd som inputtexten */
	left:       0 !important;
	font-size:  20px !important;
	color:      rgba(255,255,255,0.5) !important;
	pointer-events: none;
	transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
	margin:     0 !important;
}

/* Flytta upp labeln vid focus */
.mhForm__control--text:focus-within .mhForm__label--text,
.mhForm__control--email:focus-within .mhForm__label--email {
	top:       0 !important;
	font-size: 11px !important;
	color:     rgba(255,255,255,0.4) !important;
}

.mhForm__button {
	background-color: white !important;
	color:            black !important;
	border-radius:    0 !important;
	font-family:      var(--bold-font) !important;
	text-transform:   uppercase !important;
	padding:          10px 20px !important;
	margin-top:       10px;
	cursor:           pointer;
}

.mhForm__button:hover {
	background-color: black !important;
	color:            white !important;
	outline:          1px solid white;
}

#newsletter-footer,
.footer-menu a,
.footer-menu .sub-menu a {
	color: black !important;
	text-decoration: none;
}

#site-footer form,
#site-footer label,
#site-footer span,
#site-footer p {
	color: white !important;
	background: black;
}

#site-footer input[type="text"],
#site-footer input[type="email"] {
	color:         black !important;
	border-bottom: 1px solid rgba(255,255,255,0.4) !important;
}

#site-footer input::placeholder {
	color: rgba(255,255,255,0.4) !important;
}

/* ---- FOOTER-BOTTEN: logga centrerad + copyright under ---- */

/* Dölj social-wrapper (länkarna finns i menyn) */
nav.footer-social-wrapper {
	display: none !important;
}

/* Yttre section-inner i footer-widgets-group */
.footer-widgets-group > .section-inner {
	width:      100% !important;
	max-width:  none !important;
	margin:     0 !important;
	padding:    0;
	display:    block !important;
}

/* wp-block-columns i footer-botten → stapla vertikalt, centrera */
.footer-widgets-group .wp-block-columns {
	display:        flex !important;
	flex-direction: column !important;
	align-items:    center !important;
	gap:            8px !important;
	width:          100% !important;
}

/* Åsidosätt inline flex-basis:99% på logo-kolumnen och footer-text-center */
.footer-widgets-group .wp-block-column {
	flex-basis:      auto !important;
	width:           100% !important;
	max-width:       none !important;
	display:         flex !important;
	justify-content: center !important;
	align-items:     center !important;
	min-height:      0 !important;
}

/* ---- LOGGA ---- */
.footer-logos {
	display:         flex !important;
	flex-direction:  column;
	justify-content: center !important;
	align-items:     center !important;
	width:           100% !important;
	gap:             10px;
}

/* Copyright 2026 injiceras via CSS utan PHP-ändring */
.footer-logos::after {
	content:        "Copyright 2026";
	display:        block;
	font-family:    var(--body-font);
	font-size:      14px;
	color:          rgba(255,255,255,0.5);
	text-align:     center;
	letter-spacing: 0.05em;
}

/* Länken runt loggan */
.footer-logos .custom-logo-link,
.footer-logos a {
	display: block !important;
	line-height: 0;
}

/* Logotypen */
.footer-logos img,
.footer-logos img.custom-logo,
footer .footer-logos .custom-logo {
	height:          90px !important;
	width:           auto !important;
	max-width:       300px !important;
	min-height:      0 !important;
	object-fit:      contain;
	display:         block !important;
	visibility:      visible !important;
	opacity:         1 !important;
}

/* Copyright-rad */
footer p.copyright {
	font-size:  16px;
	text-align: center;
	margin:     0;
	color:      white !important;
}

/* Sociala medie-ikoner i footern */
nav.footer-social-icons {
	display:         flex;
	justify-content: center;
	gap:             28px;
	margin-bottom:   24px;
}

nav.footer-social-icons a {
	color:       white;
	opacity:     0.7;
	transition:  opacity 0.2s ease, transform 0.2s ease;
	line-height: 0;
	padding:     0 !important;
}

nav.footer-social-icons a:hover {
	opacity:         1;
	transform:       translateY(-3px);
	padding-left:    0 !important;
	text-decoration: none !important;
}

/* footer-text-center: stöd + policy tätt ihop */
.wp-block-column.footer-text-center {
	flex-direction: column !important;
	gap:            0 !important;
	text-align:     center !important;
}

footer p.support-by,
footer p.privacy-policy {
	position:     static !important;
	font-size:    13px !important;
	margin:       0 !important;
	line-height:  1.6 !important;
	text-align:   center !important;
	opacity:      1 !important;
	color:        white !important;
}

/* Footer: minimal luft mot sidans nederkant */
footer#site-footer > .footer-widgets-group {
	padding-bottom: 12px !important;
}

.footer-widgets-group .wp-block-columns {
	display:        flex !important;
	flex-direction: column !important;
	align-items:    center !important;
	gap:            8px !important;
	width:          100% !important;
}

a.privacy-policy-link {
	color:           white !important;
	text-decoration: underline;
	opacity:         1 !important;
}

.footer-widgets-group a,
footer .footer-widgets a:where(:not(.wp-block-button__link)) {
	color: inherit;
}


/* ==========================================================================
   17. DIVERSE UTILITY-KLASSER
   ========================================================================== */

/* ==========================================================================
   GLOBAL HOVER-ANIMATION — TEXT GLIDER HÖGER + PIL FADEAR IN
   
   Gäller alla interna textlänkar och knappar.
   Undantagen: logga, sociala ikoner, bilder, externa nav-knappar.
   Teknik: padding-left transition på :hover. Pill-knappar (::after) får →.
   ========================================================================== */

/* --- Alla interna textlänkar: glid höger --- */
a:not([href^="http"]):not([href^="mailto"]):not([href^="tel"]):not(.custom-logo-link):not(.wp-block-button__link):not(.social-icons a):not(.footer-logos a),
ul.footer-menu a,
ul.footer-menu ul.sub-menu a {
	transition: padding-left 0.2s ease, opacity 0.2s ease !important;
}

.grayscale-events a:not([href^="http"]):not([href^="mailto"]):not([href^="tel"]):not(.custom-logo-link):not(.wp-block-button__link):not(.nav-toggle):not(.close-nav-toggle):not(.footer-logos a):hover,
.page-slug-aldreevenemang a:not([href^="http"]):not([href^="mailto"]):not([href^="tel"]):not(.custom-logo-link):not(.wp-block-button__link):not(.nav-toggle):not(.close-nav-toggle):not(.footer-logos a):hover,
[class*="aldreevenemang"] a:not([href^="http"]):not([href^="mailto"]):not([href^="tel"]):not(.custom-logo-link):not(.wp-block-button__link):not(.nav-toggle):not(.close-nav-toggle):not(.footer-logos a):hover {
	padding-left:    0 !important;
	text-decoration: none !important;
}

a:not([href^="http"]):not([href^="mailto"]):not([href^="tel"]):not(.custom-logo-link):not(.wp-block-button__link):not(.nav-toggle):not(.close-nav-toggle):not(.footer-logos a):hover,
ul.footer-menu a:hover,
ul.footer-menu ul.sub-menu a:hover {
	padding-left: 8px !important;
	text-decoration: underline !important;
}

/* Footer sub-meny: lite subtilare förskjutning */
ul.footer-menu ul.sub-menu a:hover {
	padding-left: 12px !important;
}

/* --- Knappar med svart/vit bakgrund: glid + pil --- */
.event .content a.buy-ticket,
body.single-event .inner-wrap a.buy-ticket,
.event .content a.read-more,
body.single-event .inner-wrap a.read-more,
a.wp-element-button,
#site-header .buttons a {
	overflow:   hidden;
	position:   relative;
	transition: padding-left 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}

.event .content a.buy-ticket:hover,
body.single-event .inner-wrap a.buy-ticket:hover,
.event .content a.read-more:hover,
body.single-event .inner-wrap a.read-more:hover,
a.wp-element-button:hover,
#site-header .buttons a:hover {
	padding-left: 16px !important;
}

/* Pil på köp-biljett-knappar */
.event .content a.buy-ticket::after,
body.single-event .inner-wrap a.buy-ticket::after {
	content:        " →";
	opacity:        0;
	display:        inline-block;
	transform:      translateX(-6px);
	transition:     opacity 0.2s ease, transform 0.2s ease;
}

.event .content a.buy-ticket:hover::after,
body.single-event .inner-wrap a.buy-ticket:hover::after {
	opacity:   1;
	transform: translateX(2px);
}

/* Stor "ALLA EVENEMANG →"-länk */
a[href*="evenemang"],
a[href*="program"] {
	transition: padding-left 0.2s ease !important;
}

a[href*="evenemang"]:hover,
a[href*="program"]:hover {
	padding-left: 10px !important;
}

/* Nav-meny-länkar: ALDRIG padding-förskjutning, oavsett globala regler */
nav ul.primary-menu a,
nav ul.primary-menu a:hover,
nav ul.primary-menu li a,
nav ul.primary-menu li a:hover,
ul.modal-menu a,
ul.modal-menu a:hover,
ul.modal-menu li a,
ul.modal-menu li a:hover,
button.nav-toggle,
button.close-nav-toggle {
	padding-left: 10px !important;  /* Återställ till originalvärdet */
	transition:   background 0.2s ease, color 0.2s ease !important;
}

nav ul.primary-menu > li > a,
nav ul.primary-menu > li > a:hover {
	padding: 10px 16px !important;
}

nav ul.primary-menu ul li a,
nav ul.primary-menu ul li a:hover {
	padding:    8px 16px !important;
	text-align: left !important;
}

/* Äldre evenemang: lägg klassen "grayscale-events" på sidan i Gutenberg → Avancerat */
.grayscale-events .event img,
.grayscale-events .event a img {
	filter:     grayscale(100%);
	transition: none !important;
}

/* Inga hover-effekter — varken färg, zoom eller textrörelse */
.grayscale-events .event:hover img,
.grayscale-events .event-list .event:hover a img {
	filter:    grayscale(100%) !important;
	transform: none !important;
}

.grayscale-events .event .content .buttons a:hover,
.grayscale-events .event .content h3 a:hover,
.grayscale-events .event .content a:hover {
	padding-left:    0 !important;
	letter-spacing:  inherit !important;
	transform:       none !important;
}

.grayscale-events .event .content .buttons a::before,
.grayscale-events .event .content h3 a::before,
.grayscale-events .event .content a::before {
	display: none !important;
}

/* Slug-baserade selektorer (fallback) */
.page-slug-aldreevenemang .event img,
[class*="aldreevenemang"] .event img {
	filter:     grayscale(100%);
	transition: none !important;
}

.page-slug-aldreevenemang .event:hover img,
[class*="aldreevenemang"] .event:hover img {
	filter:    grayscale(100%) !important;
	transform: none !important;
}

.page-slug-aldreevenemang .event .content .buttons a:hover,
.page-slug-aldreevenemang .event .content h3 a:hover,
[class*="aldreevenemang"] .event .content .buttons a:hover,
[class*="aldreevenemang"] .event .content h3 a:hover {
	padding-left:   0 !important;
	letter-spacing: inherit !important;
	transform:      none !important;
}

.page-slug-aldreevenemang .event .content .buttons a::before,
.page-slug-aldreevenemang .event .content h3 a::before,
[class*="aldreevenemang"] .event .content .buttons a::before,
[class*="aldreevenemang"] .event .content h3 a::before {
	display: none !important;
}

.filter-invert {
	filter: invert(1);
}

.flex, .d-flex {
	display: flex;
}

.justify-content-between {
	justify-content: space-between;
}

.flex-grow-1 {
	flex: 1;
}

p.align-center {
	text-align: center;
}

.m-0 {
	margin: 0;
}

.mt-0 {
	margin-top: 0;
}

.mt-1 {
	margin-top: 1rem !important;
}

/* Scroll-reveal (clip-path animation) */
.scroll-reveal {
	transition-duration: 1.5s;
	clip-path:           circle(0% at 50% 50%);
}

.scroll-reveal.active {
	clip-path: circle(100% at 50% 50%);
}

/* Admin redigera-knapp */
a.edit-page.button {
	position:    absolute;
	bottom:      10px;
	right:       10px;
	border:      1px solid white;
	font-size:   12px;
	padding:     0 10px;
	font-weight: 400;
	opacity:     0.5;
}

a.edit-page.button:hover {
	opacity: 1;
}


/* ==========================================================================
   18. MEDIA QUERIES
   ========================================================================== */

/* --- Tablet och uppåt (700px+) --- */
@media (min-width: 700px) {

	img.custom-logo {
		height: 105px !important;
	}

	/* .in-header inuti <header>-elementet (inte startsidans slider i <main>):
	   absolut positionerad så featured-image kan synas bakom */
	header .in-header {
		position: absolute;
		z-index:  0;
		left:     0;
		right:    0;
	}

	/* Startsidan: headern ska täcka hela viewport */
	body.home header#site-header {
		height: var(--full-height);
	}

	header#site-header {
		height: 550px;
	}

	.single-event header#site-header {
		height: 765px;
	}

	.template-artist header#site-header {
		height: 300px;
	}

	.template-art header#site-header {
		height: 250px;
	}

	.venues a {
		min-height: 430px;
	}

	div.info-box {
		position:   absolute;
		z-index:    15;
		min-width:  350px;
	}

	body .footer-widgets {
		width: 100%;
	}

	body.singular .entry-header {
		padding: 0;
	}

	body h3, .heading-size-3 {
		font-size: 2rem;
	}

	body.show-navigation .logo-nav-outer {
		min-height: 120px;
	}

	.footer-logos {
		flex-wrap: nowrap;
	}
}

/* --- Desktop (1000px+) --- */
@media (min-width: 1000px) {

	.header-wrapper {
		position: absolute;
		bottom:   0;
		left:     0;
		right:    0;
	}

	.header-wrapper-inner h1.entry-title,
	h2.entry-title.right-title {
		display:   block;
		width:     100%;
		float:     left;
		font-size: var(--subheading-size);
		text-align: center;
	}

	h2.entry-title.right-title {
		float:      right;
		background: #000;
	}

	h2.entry-title.right-title a {
		color: #fff;
	}

	.single-event .header-wrapper-inner h1 {
		width:      100%;
		font-size:  var(--subheading-size);
		text-align: center;
	}

	header .logo-wrapper {
		position:        relative;
		justify-content: flex-start;
	}

	.logo-nav-outer {
		background: transparent;
		min-height: 160px;
	}

	.logo-nav-wrapper {
		height: auto;
	}

	#site-content h2.art-list-heading {
		margin: -137px auto 20px auto;
	}
}

/* --- Stor skärm (1220px+) --- */
@media (min-width: 1220px) {

	body h1, body .heading-size-1 {
		font-size: 4.5rem;
	}
}

/* --- Mobil (max 699px) --- */
@media (max-width: 699px) {

	/* Rubriker mobil: 30px */
	h1, .heading-size-1 {
		font-size:  30px !important;
		line-height: 1.1 !important;
	}

	h2, .heading-size-2 {
		font-size:  26px !important;
		line-height: 1.15 !important;
	}

	h3, .heading-size-3 {
		font-size:  22px !important;
		line-height: 1.2 !important;
	}

	/* Brödtext mobil: 14px */
	p, li, td, label {
		font-size:   14px !important;
		line-height: 1.6 !important;
	}

	.entry-content p,
	.entry-content li,
	.post-inner p,
	body .entry-content {
		font-size:   14px !important;
		line-height: 1.6 !important;
	}

	body header {
		display:        flex;
		flex-direction: column;
	}

	body figure.featured-media {
		position: static;
		order:    8;
		z-index:  5;
	}

	body div.header-wrapper {
		order: 16;
	}

	body div.info-box {
		order: 24;
	}

	div.info-box-outer {
		display: contents;
	}

	.header-wrapper-inner h1,
	.header-wrapper-inner h2 {
		font-size:  1.2rem !important;
		margin-top: 0;
	}

	/* Footer: enkelpanna mobil */
	footer#site-footer {
		display:  block;
		padding:  40px 4vw 0;
	}

	/* ---- MOBIL: SINGLE EVENT ---- */

	/* Logo mycket mindre på mobil */
	img.custom-logo {
		height: 50px !important;
	}

	/* Startsidan mobil: logo-nav-outer fixad högst upp, alltid synlig */
	/* Header på eventsida: flex-kolumn så bild + inforuta staplas rätt */
	body.single-event header#site-header {
		display:        flex !important;
		flex-direction: column !important;
		position:       relative !important;
		height:         auto !important;
		overflow:       visible !important;
	}

	/* Bild: exakt höjd, overflow hidden klipper bilden vid 55vw */
	body.single-event figure.featured-media {
		position:   relative !important;
		order:      1 !important;
		height:     55vw !important;
		max-height: 55vw !important;
		min-height: 200px !important;
		width:      100% !important;
		flex-shrink: 0 !important;
		overflow:   hidden !important;
	}

	/* Bilden inuti figuren: fyll hela figuren */
	body.single-event figure.featured-media img {
		position:   absolute !important;
		top:        0 !important;
		left:       0 !important;
		width:      100% !important;
		height:     100% !important;
		object-fit: cover !important;
	}

	/* Inforutan: visas direkt efter bilden i normalflödet */
	body.single-event div.info-box-outer {
		display:  block !important;
		order:    2 !important;
		width:    100% !important;
		position: relative !important;
		z-index:  5 !important;
	}

	body.single-event div.info-box.info-box-event {
		position: relative !important;
		width:    auto !important;
		left:     auto !important;
		right:    auto !important;
		bottom:   auto !important;
		top:      auto !important;
		margin:   0 !important;
		padding:  20px !important;
	}

	/* Tabell: ge table full bredd, key-kolumn fixad */
	.info-box-event table.event-info {
		width:          100% !important;
		table-layout:   auto !important;
		border-collapse: collapse;
	}

	/* Nyckelkolumnen (Dörrar, Pris etc) — aldrig radbrytning, krymper till innehållet */
	.info-box-event table.event-info td.key {
		white-space:    nowrap !important;
		width:          1% !important;       /* Shrink-wrap trick: ta minsta möjliga bredd */
		vertical-align: top !important;
		padding-right:  16px !important;
		padding-top:    8px !important;
		padding-bottom: 8px !important;
		font-size:      14px !important;
		opacity:        0.7;
	}

	.info-box-event table.event-info td.value {
		white-space: normal !important;
		font-size:   14px !important;
		font-weight: 600;
		padding-top:    8px !important;
		padding-bottom: 8px !important;
	}

	/* Titel i inforutan: tydlig och stor */
	.info-box-event h1.event-info-title {
		font-size:   22px !important;
		margin:      0 0 8px 0 !important;
		line-height: 1.2 !important;
	}

	/* Datum h3 */
	.info-box-event h3 {
		font-size: 18px !important;
	}

	/* Knappar: full bredd staplade */
	body.single-event .info-box-event .buttons.buttons-outline {
		display:        flex !important;
		flex-direction: column !important;
		gap:            10px !important;
		width:          100% !important;
		margin-top:     16px !important;
	}

	body.single-event .info-box-event .buttons.buttons-outline a {
		width:      100% !important;
		text-align: center !important;
		padding:    14px 0 !important;
		font-size:  16px !important;
	}

	footer#site-footer > .section-inner {
		width:        100% !important;
		padding:      0 0 40px !important;
		border-right: none !important;
	}

	.footer-widgets-group .wp-block-columns {
		gap: 24px !important;
	}

	.footer-logos .custom-logo,
	.footer-logos img {
		height: 60px !important;
	}

	/* Evenemangskort på mobil: 10px mellanrum */
	.event-list,
	.events,
	ul.event-list,
	div.event-list {
		gap:        10px !important;
		row-gap:    10px !important;
		column-gap: 10px !important;
	}

	.event,
	.event-list .event {
		margin-bottom: 0 !important;
	}
}

/* ==========================================================================
   PLANRITNING (floorplan lightbox)
   JS: scripts/floorplan.js — enqueue i functions.php
   ========================================================================== */

.kl-fp-thumb {
	position: relative;
	display:  block;
	cursor:   pointer;
	overflow: hidden;
	margin:   20px 0;
}

.kl-fp-thumb img {
	display:    block;
	width:      100%;
	height:     auto;
	pointer-events: none;
	transition: transform 0.3s ease;
}

/* Kompakt thumbnail-höjd — åsidosätt per sida med inline style om annat önskas */
.kl-fp-thumb.kl-fp-thumb--compact img {
	max-height: 220px;
	object-fit: contain;
	object-position: center;
}

.kl-fp-thumb:hover img { transform: scale(1.02); }

.kl-fp-thumb-overlay {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	background:      rgba(0,0,0,0.45);
	color:           white;
	font-family:     var(--bold-font);
	font-size:       11px;
	letter-spacing:  0.2em;
	opacity:         0;
	transition:      opacity 0.2s ease;
}

.kl-fp-thumb:hover  .kl-fp-thumb-overlay,
.kl-fp-thumb:focus  .kl-fp-thumb-overlay { opacity: 1; }

.kl-fp-backdrop {
	display:    none;
	position:   fixed;
	inset:      0;
	background: rgba(0,0,0,0.85);
	z-index:    9998;
}

.kl-fp-backdrop.open { display: block; }

.kl-fp-modal {
	display:        none;
	position:       fixed;
	top:            50%;
	left:           50%;
	transform:      translate(-50%, -50%);
	width:          90vw;
	height:         85vh;
	background:     #0a0a0a;
	border:         1px solid rgba(255,255,255,0.15);
	z-index:        9999;
	flex-direction: column;
}

.kl-fp-modal.open { display: flex; }

.kl-fp-modal-bar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         8px 14px;
	border-bottom:   1px solid rgba(255,255,255,0.1);
	flex-shrink:     0;
}

.kl-fp-modal-title {
	font-family:    var(--bold-font);
	font-size:      10px;
	letter-spacing: 0.2em;
	color:          rgba(255,255,255,0.45);
}

.kl-fp-modal-controls {
	display:     flex;
	gap:         6px;
	align-items: center;
}

.kl-fp-btn {
	background: transparent;
	border:     1px solid rgba(255,255,255,0.25);
	color:      white;
	width:      32px;
	height:     32px;
	cursor:     pointer;
	display:    flex;
	align-items:     center;
	justify-content: center;
	transition: border-color 0.15s, background 0.15s;
	padding:    0;
}

.kl-fp-btn:hover { border-color: white; background: rgba(255,255,255,0.1); }

.kl-fp-close { margin-left: 8px; border-color: rgba(255,255,255,0.4); }

.kl-fp-stage {
	flex:     1;
	position: relative;
	overflow: hidden;
	cursor:   grab;
}

.kl-fp-stage.dragging { cursor: grabbing; }

.kl-fp-inner {
	position:        absolute;
	top:             0;
	left:            0;
	transform-origin: 0 0;
	will-change:     transform;
}

.kl-fp-img {
	display:    block;
	max-width:  none;
	height:     auto;
	pointer-events: none;
}

.kl-fp-hint {
	padding:        6px 14px;
	font-family:    var(--bold-font);
	font-size:      9px;
	letter-spacing: 0.12em;
	color:          rgba(255,255,255,0.2);
	flex-shrink:    0;
	border-top:     1px solid rgba(255,255,255,0.07);
}

/* ==========================================================================
   SE ÄVEN — karusellknappar (slick) under evenemangskort
   ========================================================================== */

/* Wrapper: centrera knapparna */
.single-event .slick-dots,
.single-event .wp-block-getwid-content-slider .slick-dots {
	display:         flex !important;
	justify-content: center;
	gap:             10px;
	list-style:      none;
	padding:         16px 0 0;
	margin:          0;
}

/* Varje dot-knapp: transparent, ingen vit fyllning */
.single-event .slick-dots li button {
	width:      36px;
	height:     36px;
	background: transparent !important;
	border:     1px solid rgba(255,255,255,0.3) !important;
	border-radius: 0 !important;
	color:      transparent;
	cursor:     pointer;
	padding:    0;
	font-size:  0;
	position:   relative;
	transition: border-color 0.15s;
}

.single-event .slick-dots li button::before {
	display: none !important;
}

/* Aktiv dot */
.single-event .slick-dots li.slick-active button {
	border-color: white !important;
	background:   white !important;
}

/* Pil-knappar (prev/next) */
.single-event .slick-prev,
.single-event .slick-next {
	width:      36px;
	height:     36px;
	background: transparent !important;
	border:     1px solid rgba(255,255,255,0.3) !important;
	color:      white !important;
	z-index:    10;
}

.single-event .slick-prev::before,
.single-event .slick-next::before {
	color:     white !important;
	font-size: 16px;
	opacity:   1;
}

.single-event .slick-prev:hover,
.single-event .slick-next:hover {
	border-color: white !important;
	background:   rgba(255,255,255,0.1) !important;
}

/* ==========================================================================
   SE ÄVEN — horizon prev/next navigeringsknappar
   ========================================================================== */

/* Tvinga hela knapp-raden att ta full bredd så centrering fungerar */
.wp-block-buttons:has(.horizon-prev) {
	width:           100% !important;
	justify-content: center !important;
}

.wp-block-button.horizon-prev .wp-block-button__link,
.wp-block-button.horizon-next .wp-block-button__link {
	background:     transparent !important;
	border:         1px solid rgba(255,255,255,0.3) !important;
	color:          white !important;
	padding:        10px 18px !important;
	font-size:      18px !important;
	line-height:    1 !important;
	transition:     border-color 0.15s, background 0.15s !important;
}

.wp-block-button.horizon-prev .wp-block-button__link:hover,
.wp-block-button.horizon-next .wp-block-button__link:hover {
	background:   rgba(255,255,255,0.1) !important;
	border-color: white !important;
}

/* Söksida: "Se äldre"-knappen och liknande load-more knappar */
body.search-results .wp-block-button__link,
body.search-results a.wp-block-button__link,
body.search-results .wp-element-button {
	background: transparent !important;
	border:     1px solid rgba(255,255,255,0.4) !important;
	color:      white !important;
}

body.search-results .wp-block-button__link:hover,
body.search-results a.wp-block-button__link:hover,
body.search-results .wp-element-button:hover {
	background:   rgba(255,255,255,0.1) !important;
	border-color: white !important;
	color:        white !important;
}

/* Sökfältet på söksidan */
body.search-results input[type="search"] {
	background: white !important;
	color:      black !important;
}