/* ==========================================================================
   JESPER.CSS — Stadsgårdsterminalen / Kollektivet Livet
   Sidspecifika stilar och komponentoverrides.
   Globala bastilar finns i frontend.css.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLER (synkade med frontend.css och gutenberg.css)
   ========================================================================== */

:root {
	--wp--style--global--wide-size: 100%;
	/* --content-width är redan definierad i frontend.css som 140rem */
}


/* ==========================================================================
   2. TYPOGRAFI & LÄNKOVERRIDES
   ========================================================================== */

a {
	text-decoration: none !important;
}

a:hover {
	text-decoration: underline !important;
}

a.button:hover,
.button:hover,
.faux-button:hover,
.wp-block-button__link:hover,
.wp-block-button:hover,
.buttons a:hover,
a.wp-element-button:hover {
	text-decoration: none !important;
}

/* Rubriker med bakgrundsfärg får padding */
h1.has-background, h2.has-background, h3.has-background,
h4.has-background, h5.has-background, h6.has-background {
	padding: 1em 0;
}

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h5, .entry-content h6, .entry-content cite,
.entry-content figcaption, .entry-content table,
.entry-content address, .entry-content .wp-caption-text,
.entry-content .wp-block-file {
	font-family: var(--heading-font) !important;
}

h4 {
	font-family: var(--special-font) !important;
	margin:      0 0 3rem !important;
}

input, textarea {
	font-family: var(--body-font) !important;
}

button, .button, .faux-button, .faux-button.more-link,
.wp-block-button__link, .wp-block-file__button,
.wp-block-button, .buttons a, a.wp-element-button {
	font-family: var(--bold-font) !important;
}

a.button {
	line-height: 3rem;
}

@media (min-width: 700px) {
	.entry-content .wp-block-columns h1, .entry-content .wp-block-columns h2,
	.entry-content .wp-block-columns h3, .entry-content .wp-block-columns h4,
	.entry-content .wp-block-columns h5, .entry-content .wp-block-columns h6 {
		margin: 1em 0 0 !important;
	}
}

@media (min-width: 700px) {
	h2, .heading-size-2 {
		font-size: 2.8rem;
	}
}


/* ==========================================================================
   3. HEADER-SPECIFIKT
   ========================================================================== */

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

/* Linje under h1 i header-wrapper */
.header-wrapper-inner {
	position: relative;
}

.header-wrapper-inner h1:after {
	content:    '';
	height:     2px;
	width:      calc(100% - 20px);
	background: #ccc;
	position:   absolute;
	left:       0;
	bottom:     0;
	margin:     0 10px;
}


/* ==========================================================================
   4. STARTSIDAN — HERO & INNEHÅLL
   ========================================================================== */

/* Slider-blocket på startsidan (Getwid):
   Sätter bredbild-bakgrunden till 100vw */
.wp-block-cover .wp-block-cover__image-background,
.wp-block-cover video.wp-block-cover__video-background,
.wp-block-cover-image .wp-block-cover__image-background,
.wp-block-cover-image video.wp-block-cover__video-background {
	width:  100vw;
	height: 100%;
}

/* Cover-block: inre bredd skalas mjukt */
.home.page .wp-block-cover__inner-container,
.home.page .wp-block-cover-image__inner-container {
	margin-left:  auto !important;
	margin-right: auto !important;
	width:        92% !important;
	max-width:    none !important;
}

.home.page .wp-block-cover-image .wp-block-cover__inner-container,
.home.page .wp-block-cover .wp-block-cover__inner-container {
	padding: 6rem 0;
}

/* Getwid post-slider: ingen extra marginal nedanför */
.home.page .wp-block-getwid-post-slider {
	margin-bottom: 0;
}

/* Bar & Scen-sektionen ska INTE flyga upp på startsidan */
body.home .bar-scen,
body.home .bar-scen .wp-block-columns:first-of-type {
	margin-top: 4rem !important;
	position:   relative !important;
	top:        0 !important;
}

/* Mobilanpassning av Getwid-slider */
@media (max-width: 700px) {
	.wp-block-getwid-content-slider .wp-block-heading,
	.wp-block-getwid-content-slider .wp-block-getwid-button-group {
		text-align: center;
		margin-top: 0;
	}

	.wp-block-getwid-content-slider .wp-block-getwid-button-group .wp-block-button {
		margin: 0 auto;
	}
}


/* ==========================================================================
   5. STAGE-SIDOR (Stora Scen, Lilla Scen etc.)
   ========================================================================== */

.template-stage p {
	font-size: 20px;
}

.template-stage footer p {
	font-size: inherit;
}

.template-stage .evnts {
	margin-bottom: 0 !important;
}

.template-stage .evnts h4 {
	font-family: var(--body-font) !important;
}

/* Roterade artistnamns-listor */
.template-stage .wp-block-media-text__content a {
	font-family:      var(--special-font);
	font-size:        3.4rem;
	display:          block;
	line-height:      1rem;
	transition:       transform 250ms;
	transform-origin: center left;
}

.template-stage .wp-block-media-text__content a:nth-of-type(1) { transform: rotate(-7deg); }
.template-stage .wp-block-media-text__content a:nth-of-type(2) { transform: rotate(0deg); }
.template-stage .wp-block-media-text__content a:nth-of-type(3) { transform: rotate(10deg); }
.template-stage .wp-block-media-text__content a:nth-of-type(4) { transform: rotate(15deg); }

/* Stage media-text: centrerat */
.template-stage .wp-block-media-text {
	margin-left: calc(50% - 5rem) !important;
	transform:   translateX(-50%);
}

/* Bubble-cover på stage-sidor */
.wp-block-cover.bubble > .wp-block-cover__inner-container {
	padding: 220px 0 130px 0;
}

.wp-block-cover.bubble img {
	object-fit: contain;
}

@media (max-width: 699px) {
	.template-stage .wp-block-columns.has-background,
	.artcollection .alignfull:not(.has-background) .wp-block-columns {
		padding: 1em 0;
	}

	.artcollection .alignfull:not(.has-background) .wp-block-columns:nth-of-type(1) {
		padding-top: 0;
		margin-top:  0;
	}

	.template-stage .wp-block-media-text {
		margin-left:   50% !important;
		margin-top:    5rem;
		margin-bottom: 5rem;
	}

	.template-stage figure {
		width: 100%;
	}
}


/* ==========================================================================
   6. BAR & SCEN — Överlappande sektion (undersidor)
   ========================================================================== */

.bar-scen {
	font-family: var(--body-font);
	font-size:   20px;
	font-weight: 600;
}

@media (max-width: 1200px) {
	.entry-content > .wp-block-group.alignfull.has-background.bar-scen {
		padding-top: 0 !important;
	}
}

/* På desktop: första kolumnen överlappar bilden ovanför (BARA på undersidor) */
@media (min-width: 1200px) {
	body:not(.home) .bar-scen > .wp-block-columns:first-of-type,
	body:not(.home) .bar-scen > div[class*="wp-container"]:first-of-type {
		display:               flex !important;
		width:                 92% !important;
		max-width:             none !important;
		margin-left:           auto !important;
		margin-right:          auto !important;
		margin-top:            -18rem !important;
		border-top-left-radius:  1.6rem;
		border-top-right-radius: 1.6rem;
		padding-top:           0;
		float:                 none !important;
	}

	/* Övriga rader i Bar & Scen: normal bredd, inget överlapp */
	.bar-scen .wp-block-columns:not(:first-of-type),
	.bar-scen .wp-block-heading {
		width:        92% !important;
		max-width:    none !important;
		margin-left:  auto !important;
		margin-right: auto !important;
		margin-top:   4rem !important;
	}
}


/* ==========================================================================
   7. KONST / ARTCOLLECTION
   ========================================================================== */

.artcollection {
	position: relative;
}

.artcollection section {
	margin-top:  0;
	padding-top: 0;
}

.artcollection .header-wrapper {
	top:    -11rem;
	bottom: auto;
}

.artcollection .header-wrapper .tab {
	background-color: #FFF75A;
	max-width:        700px;
	text-align:       center;
	margin-top:       -60px;
	width:            100vw;
	margin-left:      -20px;
	margin-right:     -20px;
}

@media (min-width: 700px) {
	.artcollection .header-wrapper .tab {
		margin-top:   60px;
		width:        100%;
		margin-left:  auto;
		margin-right: auto;
	}
}

/* Puff med bakgrundsbild */
.vector-blurb {
	background-size: 100% 100% !important;
	padding:         1.5rem 2rem !important;
	text-align:      center;
}

.vector-blurb p {
	margin: 3rem 1rem !important;
}


/* ==========================================================================
   8. EVENT — HORISONTELL SCROLL ("Se även")
   ========================================================================== */

.event-view {
	max-width: 100% !important;
}

.event-footer {
	border-top-left-radius:  1.5rem;
	border-top-right-radius: 1.5rem;
}

.horizontview {
	overflow:      auto;
	scrollbar-width: none;
}

.horizontview .event-list {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	white-space:           nowrap;
	width:                 max-content;
	gap:                   2rem;
	display:               grid;
}

.horizontview .event-list .event {
	width: 350px;
}

/* Äldre events: gråton-filter */
.page-id-763 .event a img {
	filter: grayscale(100%);
}

.page-id-763 .event a:hover img {
	filter: grayscale(0%);
}


/* ==========================================================================
   9. SINGLE EVENT — DETALJSIDA
   ========================================================================== */

body.single-event .entry-header {
	padding: 0;
}

/* Event-info tabell */
.info-box-event table.event-info td {
	font-size: 1.5rem;
}

.info-box-event table.event-info,
.info-box-event table.event-info td {
	border:  0;
	padding: 5px 0;
}

.info-box-event table.event-info {
	border-top: 1px solid #ccc;
	margin:     0 0 3rem;
}

.info-box-event table.event-info tr td:nth-of-type(1) {
	border-right:   1px solid #ccc;
	padding-right:  1rem;
}

.info-box-event table.event-info tr td:nth-of-type(2) {
	padding-left: 1rem;
}

.ewd-ufaq-faq-category-inner h4 {
	font-family: var(--heading-font) !important;
}

@media (min-width: 576px) {
	.info-box-event table.event-info {
		font-size: 18px;
		margin:    1rem 0;
	}

	.wp-block-group.event-footer {
		padding: 4rem 6rem;
	}
}

@media (min-width: 700px) {
	.post-inner {
		padding-top: 0;
	}

	.single-event h3 {
		margin: 1rem auto;
	}

	.single-event .buttons {
		margin-bottom: 0;
	}

	div.single-event div.content {
		margin: 0 25rem 3rem;
	}
}


/* ==========================================================================
   10. FOOTER — AVRUNDNING & LOGOTYP
   ========================================================================== */


.home.page footer#site-footer {
	border-top-right-radius: 0;
	border-top-left-radius:  0;
}

/* Footer-logotyp: custom-logo-storlek (basen finns i frontend.css) */
.footer-logos .custom-logo {
	max-height: 80px !important;
	width:      auto !important;
	height:     auto !important;
}


/* ==========================================================================
   11. BILDER — HJÄLPKLASSER
   ========================================================================== */

.img-full {
	width:     100%;
	height:    auto;
	max-width: none;
}


/* ==========================================================================
   12. SPACING-HJÄLPKLASSER
   ========================================================================== */

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

.my-2 {
	margin-top:    2rem !important;
	margin-bottom: 2rem !important;
}


/* ==========================================================================
   13. MOBIL — GENERELLA OVERRIDES
   ========================================================================== */

@media (max-width: 699px) {
	.singular .featured-media {
		margin-top: -100px;
	}

	body figure.featured-media {
		position: relative;
	}

	figure.featured-media img {
		min-height: 50vh;
	}

	header.manual-height figure.featured-media img {
		min-height: 100%;
	}

	.logo-nav-outer {
		background-color: transparent;
	}

	.post-inner {
		padding-top: 0;
	}
}