/*
 * Östman-Tylli – design ovanpå Kadence.
 *
 * Färgerna kommer från Kadences globala palett (Ulkoasu > Mukauta > Värit),
 * så en färgändring där slår igenom här också:
 *   palette1 guld (accent)      palette2 ljusare guld (hover)
 *   palette3 rubriker           palette4 brödtext        palette5 dämpad text
 *   palette7 linjer/kort        palette8 alternativ sektion  palette9 bas
 */

:root {
	--nina-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--nina-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--nina-line: color-mix(in srgb, var(--global-palette1) 28%, transparent);
	--nina-radius: 6px;
	--nina-pad: clamp(3.5rem, 2rem + 5vw, 6.5rem);
	--global-body-font-family: var(--nina-sans);
	--global-heading-font-family: var(--nina-serif);
}

body {
	font-family: var(--nina-sans);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-content h1, .entry-content h2, .entry-content h3 {
	font-family: var(--nina-serif);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--global-palette3);
}
.entry-content h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.7rem); }
.entry-content h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.entry-content h3 { font-size: 1.3rem; }

::selection { background: var(--global-palette1); color: var(--global-palette9); }

/* ------------------------------------------------------------- Header */

#masthead .site-header-row-container-inner {
	border-bottom: 1px solid var(--nina-line);
}
.site-branding .custom-logo { max-height: 78px; width: auto; }

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--global-palette4);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	color: var(--global-palette1);
}
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--global-palette1);
}

/* Polylangs språkväxlare: små förkortningar skilda från menyn med en linje. */
.main-navigation .primary-menu-container > ul > li.lang-item > a {
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	padding-left: 0.55em;
	padding-right: 0.55em;
	color: var(--global-palette5);
}
.main-navigation .primary-menu-container > ul > li.lang-item-first {
	margin-left: 1rem;
	border-left: 1px solid var(--nina-line);
	padding-left: 0.6rem;
}
.main-navigation .primary-menu-container > ul > li.current-lang > a { color: var(--global-palette1); }

/* ------------------------------------------------------ Sektioner */

/* Kadence ger varje block 32 px marginal – sektionerna ska ligga kant i kant. */
.entry-content > .alignfull { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Rutnät: WordPress skriver inte ut blockavstånd (blockGap) för klassiska
   teman som Kadence, så avstånden sätts här. */
.entry-content .is-layout-grid > * { margin: 0 !important; }
.entry-content .nina-cards { gap: 1.25rem; }
/* auto-fit: tre kort fyller hela bredden i stället för att lämna en tom fjärde kolumn. */
.entry-content .nina-cards,
.entry-content .nina-clients { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)) !important; }
.entry-content .nina-cards.nina-services { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)) !important; }
.entry-content .nina-badges {
	gap: 2rem;
	/* auto-fit: fyra (startsidan) eller fem (Meistä) fyller hela bredden */
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)) !important;
}
.entry-content .nina-contact-grid { gap: 2.25rem 2.5rem; }
.entry-content .wp-block-columns { gap: clamp(2rem, 1rem + 3vw, 4rem); }

.nina-head > * { max-width: 46rem; }
.nina-head.is-centered > * { margin-left: auto; margin-right: auto; }

.nina-section {
	padding-top: var(--nina-pad);
	padding-bottom: var(--nina-pad);
}
/* Kadence nollställer sidpaddingen på fullbreddsblock – den behövs på smala skärmar. */
.entry-content > .nina-section.alignfull,
.entry-content > .nina-hero.alignfull {
	padding-left: clamp(1.25rem, 4vw, 2.5rem) !important;
	padding-right: clamp(1.25rem, 4vw, 2.5rem) !important;
}
.nina-section--alt { background: var(--global-palette8); }
.nina-section--line { border-top: 1px solid var(--nina-line); }

.nina-eyebrow {
	font-family: var(--nina-sans);
	font-size: 0.78rem !important;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--global-palette1);
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.9rem !important;
}
.nina-eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 1px;
	background: var(--global-palette1);
	flex: none;
}
.nina-head.is-centered { text-align: center; }
.nina-head.is-centered .nina-eyebrow { justify-content: center; }

.nina-lead {
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.65;
	color: var(--global-palette4);
}
.nina-note { color: var(--global-palette5); font-size: 0.95rem; }

/* ------------------------------------------------------------ Hero */

.nina-hero.wp-block-cover {
	min-height: min(82vh, 760px);
	padding-top: var(--nina-pad);
	padding-bottom: var(--nina-pad);
	align-items: center;
}
.nina-hero .wp-block-cover__inner-container {
	padding-left: 0 !important;   /* Kadence lägger till 24 px – linjera med sektionerna */
	padding-right: 0 !important;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}
.nina-hero__body { max-width: 44rem; }
.nina-hero h1 { color: var(--global-palette3); margin-bottom: 1.2rem; }
.nina-hero .nina-lead { color: var(--global-palette4); margin-bottom: 2rem; }
.nina-hero--page.wp-block-cover { min-height: 340px; }
.nina-hero--page h1 { margin-bottom: 0.6rem; }

/* ------------------------------------------------------------ Knappar */

.wp-block-button__link {
	border-radius: 3px;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 0.85em 1.7em;
}
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background: transparent;
	border: 1px solid var(--global-palette1);
	color: var(--global-palette1);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--global-palette1);
	color: var(--global-palette9);
}

/* -------------------------------------------------------- Tjänstekort */

.nina-cards { margin-top: 2.5rem; }
.nina-card {
	background: var(--global-palette9);
	border: 1px solid var(--global-palette7);
	border-radius: var(--nina-radius);
	padding: 1.75rem 1.6rem 1.6rem;
	position: relative;
	transition: border-color .2s ease, transform .2s ease;
}
.nina-section--alt .nina-card { background: var(--global-palette9); }
.nina-section:not(.nina-section--alt) .nina-card { background: var(--global-palette8); }
.nina-card:hover { border-color: var(--global-palette1); transform: translateY(-2px); }
.nina-card h3 { font-size: 1.25rem; margin: 0 0 0.6rem; }
.nina-card p { margin: 0; color: var(--global-palette5); font-size: 0.97rem; line-height: 1.6; }
.nina-card__num {
	font-family: var(--nina-serif) !important;
	color: var(--global-palette1);
	font-size: 0.95rem !important;
	letter-spacing: 0.05em;
	margin-bottom: 0.9rem !important;
}
/* Ikonen överst i kortet, numret i övre högra hörnet. */
.entry-content .nina-card__icon { margin: 0 0 1.1rem !important; }
.nina-card__icon img { width: 76px; height: auto; display: block; opacity: 0.92; }
.nina-card .nina-card__num {
	position: absolute;
	top: 1.35rem;
	right: 1.5rem;
	margin: 0 !important;
	opacity: 0.8;
}
.nina-card--featured .nina-card__icon img { opacity: 1; }

.nina-card--featured {
	border-color: var(--global-palette1);
	background: linear-gradient(160deg, color-mix(in srgb, var(--global-palette1) 12%, var(--global-palette9)), var(--global-palette9) 70%) !important;
}

/* Palvelut-sidan: längre text per tjänst. */
.nina-services .nina-card { padding: 2rem 2rem 1.9rem; }
.nina-services .nina-card h3 { font-size: 1.3rem; }
/* Elva kort: huvudkortet (Tilintarkastus) tar två kolumner, så att rutnätet
   går jämnt ut – 4 rader om 3 på dator, 6 rader om 2 på surfplatta. */
@media (min-width: 782px) {
	.nina-services .nina-card--featured { grid-column: span 2; }
}

/* -------------------------------------------------- Keitä palvelemme */

.entry-content .nina-clients { margin-top: 2.5rem; gap: 1.25rem; }
.nina-client {
	background: var(--global-palette9);
	border: 1px solid var(--global-palette7);
	border-top: 2px solid var(--global-palette1);
	border-radius: var(--nina-radius);
	padding: 1.6rem 1.6rem 1.5rem;
}
.nina-client h3 { font-size: 1.25rem; margin: 0 0 0.6rem; }
.nina-client p { margin: 0; color: var(--global-palette5); font-size: 0.97rem; line-height: 1.6; }
.nina-clients__note {
	margin-top: 1.75rem !important;
	padding-left: 1rem;
	border-left: 2px solid var(--global-palette1);
	color: var(--global-palette4) !important;
	max-width: 46rem;
}

/* ---------------------------------------------------------- Om oss */

.nina-about img { border-radius: var(--nina-radius); }
.nina-about .wp-block-image { position: relative; margin: 0; }
.nina-about .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 14px -14px -14px 14px;
	border: 1px solid var(--nina-line);
	border-radius: var(--nina-radius);
	z-index: -1;
}

/* ------------------------------------------------------ Kompetens */

.nina-badges { margin-top: 2.5rem; }
.nina-badge {
	border-top: 1px solid var(--global-palette1);
	padding-top: 1.1rem;
}
.nina-badge__abbr {
	font-family: var(--nina-serif) !important;
	font-size: 2.3rem !important;
	font-weight: 600;
	line-height: 1 !important;
	color: var(--global-palette1);
	margin-bottom: 0.5rem !important;
}
.nina-badge p:last-child { color: var(--global-palette4); font-size: 0.95rem; margin: 0; }
/* Engelska versionen: bara benämningen, som rubrik i guld. */
.nina-badge p.nina-badge__title {
	font-family: var(--nina-serif);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--global-palette1);
}

/* ----------------------------------------------------------- CTA */

.nina-cta {
	background:
		radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--global-palette1) 16%, transparent), transparent 60%),
		var(--global-palette8);
	border-top: 1px solid var(--nina-line);
	border-bottom: 1px solid var(--nina-line);
}
.nina-cta h2 { margin-top: 0; }
.nina-cta .wp-block-buttons { margin-top: 1.8rem; }

/* ------------------------------------------------------- Kontakt */

.nina-contact-item {
	border-left: 2px solid var(--global-palette1);
	padding: 0.2rem 0 0.2rem 1.2rem;
}
.nina-contact-item h3 {
	font-family: var(--nina-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--global-palette5);
	margin: 0 0 0.45rem;
}
.nina-contact-item p { margin: 0; font-size: 1.08rem; color: var(--global-palette3); }
.nina-contact-item a { color: var(--global-palette3); text-decoration: none; border-bottom: 1px solid var(--nina-line); }
.nina-contact-item a:hover { color: var(--global-palette1); border-color: var(--global-palette1); }
.nina-contact-photo img { border-radius: var(--nina-radius); }

.nina-map {
	height: clamp(320px, 45vw, 460px);
	border: 1px solid var(--global-palette7);
	border-radius: var(--nina-radius);
	overflow: hidden;
	margin-top: 1.5rem;
}
#nina-karta { width: 100%; height: 100%; background: var(--global-palette8); }
/* Mörka kartrutor som passar sidan – markören och texterna rörs inte. */
#nina-karta .leaflet-tile-pane { filter: invert(0.92) hue-rotate(185deg) brightness(0.9) contrast(0.88) saturate(0.6); }
#nina-karta .leaflet-control-attribution { background: rgba(17, 25, 39, .8); color: var(--global-palette5); }
#nina-karta .leaflet-control-attribution a { color: var(--global-palette1); }
#nina-karta .leaflet-popup-content-wrapper,
#nina-karta .leaflet-popup-tip { background: var(--global-palette9); color: var(--global-palette3); }

/* -------------------------------------------------------- Galleri */

/* Galleriet räknar bildbredden med sin egen variabel – samma värde som gap,
   annars ryms bara två bilder per rad. Alla bilder i samma format (3:2). */
.entry-content .nina-gallery.wp-block-gallery {
	--wp--style--unstable-gallery-gap: 0.9rem;
	gap: 0.9rem;
}
.nina-gallery.wp-block-gallery.is-cropped .wp-block-image img {
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}
.nina-gallery.wp-block-gallery img { border-radius: 4px; }

/* Förstoringen (lightbox) tar annars vit bakgrund, eftersom Kadence inte har theme.json. */
.wp-lightbox-overlay .scrim { background-color: #0b111b !important; }
.wp-lightbox-overlay .close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button { color: var(--global-palette3) !important; fill: currentColor; }
.nina-gallery.wp-block-gallery figure { transition: opacity .2s ease; }
.nina-gallery.wp-block-gallery figure:hover { opacity: .85; }

/* ---------------------------------------------------- Löptext-sidor */

.nina-prose { max-width: 46rem; }
.nina-prose h2 { font-size: 1.55rem; margin-top: 2.4rem; }
.nina-prose ul { padding-left: 1.2rem; }
.nina-prose li { margin-bottom: 0.35rem; }

/* ---------------------------------------------------------- Sidfot */

.nina-footer {
	background: #0b111b;
	border-top: 1px solid var(--nina-line);
	color: var(--global-palette5);
	font-size: 0.95rem;
}
.nina-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
	padding-top: 3.5rem;
	padding-bottom: 3rem;
}
.nina-footer__brand img { width: 200px; height: auto; margin-bottom: 1rem; }
.nina-footer__brand p { max-width: 22rem; margin: 0; }
.nina-footer h2 {
	font-family: var(--nina-sans);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--global-palette1);
	margin: 0 0 0.6rem;
}
.nina-footer h2 + p { margin: 0 0 1.4rem; color: var(--global-palette4); }
.nina-footer a { color: var(--global-palette4); text-decoration: none; }
.nina-footer a:hover { color: var(--global-palette1); }
.nina-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .06); font-size: 0.83rem; }
.nina-footer__bottom .site-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}
.nina-footer__bottom a { margin-left: auto; margin-right: 3.5rem; } /* plats för scroll-upp-knappen */

/* ---------------------------------------------------------- Mobil */

@media (max-width: 1024px) {
	.nina-footer__grid { grid-template-columns: 1fr 1fr; }
	.nina-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 781px) {
	.nina-hero.wp-block-cover { min-height: 72vh; }
	.nina-eyebrow { letter-spacing: 0.14em; }
	.nina-eyebrow::before { width: 1.25rem; }
	.nina-about .wp-block-image::after { display: none; }
	.nina-footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.nina-footer__bottom a { margin-left: 0; }
	.site-branding .custom-logo { max-height: 58px; }
}

/* Mobilmenyn (Kadence popup) */
#mobile-drawer .drawer-inner { background: var(--global-palette9); }
#mobile-drawer .mobile-navigation ul li > a {
	font-size: 1.05rem;
	color: var(--global-palette4);
	border-bottom-color: rgba(255, 255, 255, .08) !important;
}
#mobile-drawer .mobile-navigation ul li > a:hover,
#mobile-drawer .mobile-navigation ul li.current-menu-item > a { color: var(--global-palette1); }
#mobile-drawer .mobile-navigation li.lang-item { display: inline-block; }
#mobile-drawer .mobile-navigation li.lang-item > a { font-size: 0.9rem; padding-right: 1.2rem; color: var(--global-palette5); }
#mobile-drawer .mobile-navigation li.current-lang > a { color: var(--global-palette1); }

@media (prefers-reduced-motion: reduce) {
	.nina-card, .nina-gallery figure { transition: none; }
	.nina-card:hover { transform: none; }
}