/*
Theme Name: Kramfors Stadshotell
Theme URI: https://www.kramforsstadshotell.se
Author: Forsman Media
Author URI: https://forsmanmedia.se
Description: Blocktema för Kramfors Stadshotell.
Requires at least: 6.6
Requires PHP: 7.4
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kramfors
*/

/*
 * Färger, typsnitt och storlekar ligger i theme.json. Här finns bara det som theme.json inte kan uttrycka.
 * Brytpunkterna 600 px (Navigation-blockets mobilmeny) och 782 px (Columns-blockets staplade spalter) följer core.
 */

:root {
	--kramfors-massing: rgb(152 96 35 / 0.45); /* malm med genomskinlighet, för tunna linjer */
	--kramfors-linje-ljus: rgb(244 241 234 / 0.22); /* kalk med genomskinlighet, linjer på mörk botten */
}

/* Inga mellanrum mellan sidhuvud, innehåll och sidfot; sektionerna har egna bakgrunder. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------- Fokus, rörelse, radbrytning ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--alv);
	outline-offset: 3px;
}

.has-alv-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.kramfors-sidhuvud :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--kalk);
}

:where(a, .wp-element-button) {
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

/* Öppna frågor till kunden syns tydligt på stagingen. */
mark {
	background-color: var(--wp--preset--color--lav);
	color: var(--wp--preset--color--granit);
	padding: 0 0.25em;
}

/* ---------- Mörka ytor (älvblå) ---------- */

/* Malm klarar inte AA mot älvblått (2,3:1), så text, rubriker och länkar blir ljusa. */
.has-alv-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.has-alv-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--kalk);
}

.has-alv-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--vit);
}

.has-alv-background-color .wp-element-button:hover,
.has-alv-background-color .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover {
	background-color: var(--wp--preset--color--kalk);
	border-color: var(--wp--preset--color--kalk);
	color: var(--wp--preset--color--alv);
}

/* Knapp med kantlinje: ärver textfärgen (granit på ljust, kalk på mörkt). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover {
	background-color: var(--wp--preset--color--alv);
	border-color: var(--wp--preset--color--alv);
	color: var(--wp--preset--color--vit);
}

/* ---------- Sidhuvud ---------- */

/* Sidhuvudet följer med när man rullar. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
}

.kramfors-sidhuvud {
	border-bottom: 1px solid var(--kramfors-massing);
}

.kramfors-sidhuvud__rad {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
}

.kramfors-sidhuvud .wp-block-site-title {
	margin-right: auto;
}

.kramfors-sidhuvud .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.kramfors-sidhuvud .wp-block-navigation a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--malm);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

.kramfors-telefon a {
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.kramfors-telefon a:hover {
	text-decoration: underline;
}

.kramfors-sidhuvud__kontakt {
	gap: var(--wp--preset--spacing--50);
}

.kramfors-sidhuvud .wp-element-button {
	padding: 0.8em 1.4em;
}

/* Dubbla klasser: core sätter display:flex på flexgrupper med "body .is-layout-flex". */
@media (max-width: 599px) {
	.wp-block-group.kramfors-sidhuvud__kontakt {
		display: none;
	}
}

/* Mellanbredd: menyn får en egen rad under namn, telefon och bokningsknapp. */
@media (min-width: 600px) and (max-width: 1099px) {
	.kramfors-sidhuvud .wp-block-navigation {
		flex-basis: 100%;
		order: 3;
	}
}

/* ---------- Delade sektioner: bild mot kanten, text i en lugn spalt ---------- */

.wp-block-columns.kramfors-delad {
	gap: 0;
	margin-block: 0;
}

.wp-block-columns.kramfors-delad > .wp-block-column {
	box-sizing: border-box;
	min-width: 0;
}

/* Exakt hälften var; annars räknas textspaltens luft in i bredden och bilden blir smalare. */
@media (min-width: 782px) {
	.wp-block-columns.kramfors-delad:not(.kramfors-delad--hero) > .wp-block-column {
		flex: 0 0 50%;
	}
}

.kramfors-delad__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3.5rem, 8vw, 8rem) clamp(1rem, 6vw, 6.5rem);
}

.kramfors-delad__text > * {
	max-width: 34rem;
}

.kramfors-delad__bild .wp-block-image {
	margin: 0;
}

.kramfors-delad__bild img {
	display: block;
	height: auto;
	width: 100%;
}

/* Bilden fyller sin halva och går ut i kanten; motivet hålls i mitten. */
@media (min-width: 782px) {
	.kramfors-delad__bild {
		min-height: 34rem;
		position: relative;
	}

	.kramfors-delad__bild > .wp-block-image {
		inset: 0;
		position: absolute;
	}

	.kramfors-delad__bild img {
		height: 100%;
		object-fit: cover;
	}

	.wp-block-columns.kramfors-bild-hoger {
		flex-direction: row-reverse;
	}
}

.kramfors-bild--frukost img {
	object-position: 55% 70%;
}

.kramfors-bild--relax img {
	object-position: 50% 60%;
}

.kramfors-bild--fasad img {
	object-position: 25% 45%;
}

/* Huvudbilden: hela första skärmen på bredare skärmar. */
@media (min-width: 782px) {
	.kramfors-delad--hero {
		min-height: min(calc(100vh - 5rem), 56rem);
	}
}

.kramfors-delad--hero .kramfors-delad__text {
	padding-block: clamp(3rem, 7vw, 7rem);
}

.kramfors-delad--hero h1 {
	margin-top: 0;
}

.kramfors-hero__ingress {
	color: var(--wp--preset--color--lav);
}

.kramfors-hero__pris {
	border-top: 1px solid var(--kramfors-linje-ljus);
	color: var(--wp--preset--color--lav);
	letter-spacing: 0.01em;
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-top: var(--wp--preset--spacing--40);
}

/* Kundens egna ord som citat. */
.kramfors-citat {
	color: var(--wp--preset--color--alv);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/* Tunn mässingslinje ovanför rubrikerna i sektionerna. */
.kramfors-delad__text > h2::before,
.kramfors-rubrik > h2::before {
	background: var(--wp--preset--color--malm);
	content: "";
	display: block;
	height: 1px;
	margin-bottom: var(--wp--preset--spacing--50);
	width: 3rem;
}

.has-alv-background-color .kramfors-rubrik > h2::before {
	background: var(--kramfors-massing);
}

/* ---------- Prislistan som en meny ---------- */

.wp-block-table.kramfors-prislista {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-table.kramfors-prislista table {
	border-collapse: collapse;
	font-variant-numeric: tabular-nums lining-nums;
	width: 100%;
}

.wp-block-table.kramfors-prislista th,
.wp-block-table.kramfors-prislista td {
	border: 0;
	border-bottom: 1px solid var(--kramfors-massing);
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	padding: 0.7em 0;
	vertical-align: baseline;
}

.wp-block-table.kramfors-prislista th {
	color: var(--wp--preset--color--alv);
	text-align: left;
}

.wp-block-table.kramfors-prislista tr:first-child :is(th, td) {
	border-top: 1px solid var(--kramfors-massing);
}

.wp-block-table.kramfors-prislista td.has-text-align-right {
	color: var(--wp--preset--color--alv);
	padding-left: 1em;
	white-space: nowrap;
}

/* ---------- Bra att veta ---------- */

.wp-block-list.kramfors-rader {
	list-style: none;
	margin-top: 0;
	padding: 0;
}

.wp-block-list.kramfors-rader li {
	border-bottom: 1px solid var(--kramfors-massing);
	break-inside: avoid;
	padding: 1em 0;
}

@media (min-width: 782px) {
	.wp-block-list.kramfors-rader {
		column-gap: var(--wp--preset--spacing--70);
		columns: 2;
	}

	.wp-block-list.kramfors-rader li:first-child {
		padding-top: 0.25em;
	}
}

/* ---------- Sidfot och mobilrad ---------- */

.kramfors-sidfot__namn {
	letter-spacing: -0.015em;
	line-height: 1.05;
}

.kramfors-sidfot__rad {
	border-top: 1px solid var(--kramfors-linje-ljus);
	padding-top: var(--wp--preset--spacing--40);
}

.kramfors-sidfot .wp-block-columns {
	border-top: 1px solid var(--kramfors-massing);
	padding-top: var(--wp--preset--spacing--60);
}

.wp-block-group.kramfors-mobilrad {
	display: none;
}

@media (max-width: 599px) {
	/* Fast rad längst ner med Ring och Boka rum. Sidfoten får lika mycket luft under sig, så att raden aldrig täcker den. */
	.wp-block-group.kramfors-mobilrad {
		bottom: 0;
		box-shadow: var(--wp--preset--shadow--meny);
		box-sizing: border-box;
		display: flex;
		gap: var(--wp--preset--spacing--30);
		height: calc(4.5rem + env(safe-area-inset-bottom));
		left: 0;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
		position: fixed;
		right: 0;
		z-index: 50;
	}

	.kramfors-mobilrad .wp-block-buttons {
		flex: 1;
		flex-wrap: nowrap;
	}

	.kramfors-mobilrad .wp-block-button {
		flex: 1;
	}

	.kramfors-mobilrad .wp-block-button__link {
		padding: 0.85em 1em;
		width: 100%;
	}

	footer.wp-block-template-part {
		background-color: var(--wp--preset--color--alv);
		padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
	}
}