/*
Theme Name:  Bokföring & Redovisning i Skåne
Template:    twentytwentyfive
Description: Brochure theme for Bokföring & Redovisning i Skåne AB
Version:     1.0.0
Text Domain: skane-child
*/

html {
	scroll-behavior: smooth;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }

/* ─── TwentyTwentyFive: remove default block padding ─────── */
.wp-site-blocks { padding-top: 0; padding-bottom: 0; }

/* ─── Header ─────────────────────────────────────────────── */
/* position:fixed, backdrop-filter, and alpha background
   cannot be expressed as block attributes */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--canvas) 95%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent);
	transition: box-shadow 0.3s ease;
}
.site-header.scrolled {
	box-shadow: 0 2px 24px color-mix(in srgb, var(--wp--preset--color--navy) 10%, transparent);
}

/* Hide CTA button on small screens */
@media (max-width: 768px) {
	.site-header .wp-block-buttons { display: none; }
}

/* Tighten header padding and shrink logo on phones so the phone
   number is never squeezed out */
@media (max-width: 600px) {
	.site-header > .wp-block-group {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}
	.site-header .wp-block-site-logo img {
		width: 160px !important;
		max-width: 160px !important;
	}
}

/* ─── Footer logo ────────────────────────────────────────── */
/* CSS filter to invert the dark logo to white on dark background */
.footer-logo img {
	opacity: 0.85;
	filter: brightness(0) invert(1);
}

/* ─── Hero: gradient overlay (pseudo-element) ────────────── */
.hero-section::before {
	content: '';
	position: absolute; inset: 0;
	background-image:
		radial-gradient(ellipse 60% 50% at 80% 50%, color-mix(in srgb, var(--wp--preset--color--blue) 30%, transparent) 0%, transparent 60%),
		radial-gradient(ellipse 40% 60% at 10% 80%, color-mix(in srgb, var(--wp--preset--color--sky) 15%, transparent) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
/* Lift inner content above the pseudo-element */
.hero-section .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* ─── Hero: fade-in animations ───────────────────────────── */
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Classes kept on these blocks solely to attach animations */
.hero-eyebrow { animation: fadeUp 0.7s ease both 0.10s; }
.hero-heading { animation: fadeUp 0.7s ease both 0.25s; }
.hero-lead    { animation: fadeUp 0.7s ease both 0.40s; }
.hero-section .wp-block-buttons { animation: fadeUp 0.7s ease both 0.55s; }

/* ─── Hero button: ghost hover state ────────────────────── */
/* Base ghost style is in block attributes; only hover needs CSS */
.hero-section .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent) !important;
}

/* ─── Services: gradient top rule (pseudo-element) ──────── */
.services-section { position: relative; }
.services-section::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--navy),
		var(--wp--preset--color--blue),
		var(--wp--preset--color--sky));
}

/* ─── Services: CSS counter (pseudo-element) ─────────────── */
.services-grid {
	counter-reset: service-counter;
	background: color-mix(in srgb, var(--wp--preset--color--navy) 6%, transparent); /* alpha gap between cards */
}
.service-item {
	counter-increment: service-counter;
	transition: background 0.25s;
}
.service-item:hover { background: var(--wp--preset--color--canvas); }
.service-item::before {
	content: counter(service-counter);
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--blue);
	display: block;
	margin-bottom: 0.75rem;
}

/* ─── Phone CTA: radial glow (pseudo-element) ────────────── */
.phone-cta-section { position: relative; overflow: hidden; }
.phone-cta-section::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse 70% 80% at 50% 50%,
		color-mix(in srgb, var(--wp--preset--color--blue) 25%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

/* ─── CF7 plugin output overrides ────────────────────────── */
/* font-family is required here: browsers reset font on form controls */
.wpcf7-form p { margin: 0 0 1.1rem; }
.wpcf7-form label {
	font-family: var(--wp--preset--font-family--jost);
	color: var(--wp--preset--color--navy);
	display: block;
	margin-bottom: 0.75rem;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 20%, transparent);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.9rem;
	font-weight: 300;
	color: var(--wp--preset--color--ink);
	outline: none;
	transition: border-color 0.2s;
	appearance: none;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	border-color: var(--wp--preset--color--blue);
}
.wpcf7-form textarea { height: 130px; resize: vertical; }
.wpcf7-form input[type="submit"] {
	padding: 0.9rem 2.5rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border: none;
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 500;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s, transform 0.2s;
}
.wpcf7-form input[type="submit"]:hover {
	background: var(--wp--preset--color--blue);
	transform: translateY(-1px);
}

/* CF7 response output — overrides plugin stylesheet (specificity must match .wpcf7 form .wpcf7-response-output) */
.wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border: none;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* Success */
.wpcf7 form.sent .wpcf7-response-output {
	background: color-mix(in srgb, var(--wp--preset--color--sky) 15%, transparent); /* sky pastel */
}

/* Error / mail failed to send */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	background: rgba(180, 60, 60, 0.1); /* warm red pastel */
}

/* Validation errors / unaccepted acceptance field */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	background: rgba(200, 160, 40, 0.12); /* amber pastel */
}

/* Spam blocked */
.wpcf7 form.spam .wpcf7-response-output {
	background: color-mix(in srgb, var(--wp--preset--color--sky) 10%, transparent);
}