/*
Theme Name:   Uno
Theme URI:    https://unofinans.fi/
Description:  Child theme of Twenty Twenty-Five, styled to match unoscore.no — lavender ground, violet actions, DM Sans, pill buttons. Most of the styling lives in theme.json; this file covers only what theme.json cannot express.
Author:       Uno Finans Oy
Template:     twentytwentyfive
Version:      0.1.0
Requires PHP: 8.1
Text Domain:  uno-theme
*/

/*
 * theme.json handles palette, typography, spacing and block styles. What is
 * left here is the handful of things it has no vocabulary for: the logo sizing,
 * focus rings, and a couple of element states.
 */

/* ------------------------------------------------------------------- logo */

.uno-logo img,
.wp-block-site-logo img {
	height: 30px;
	width: auto;
	display: block;
}

/* The Uno Laina mark is a stacked diamond-plus-wordmark at roughly 1.9:1, where
   the UnoScore wordmark is 5.5:1, so it needs its own height rather than
   matching. At 92px it is the anchor of the header rather than a label on it. */
.uno-logo--unolaina img { height: 92px; }

/* The taller mark needs the header to breathe with it, or it crowds the top of
   the viewport and collides with the nav. */
.uno-header:has( .uno-logo--unolaina ) { padding-block: 14px; }

@media ( max-width: 600px ) {
	.uno-logo img,
	.wp-block-site-logo img { height: 24px; }
	.uno-logo--unolaina img { height: 60px; }
}

/* ---------------------------------------------------------------- header */

.uno-header {
	padding-block: 20px;
}

/* --------------------------------------------------------------- buttons */

/*
 * theme.json sets the button colours and radius, but not the hover state -
 * :hover is not expressible there for core/button in a way that survives
 * every context, so it lives here.
 */
.wp-block-button__link:hover {
	background-color: var( --wp--preset--color--violet-dark ) !important;
	color: #fff !important;
}

/* Visible keyboard focus. The theme's default outline disappears against the
   lavender ground, which matters on a site people navigate by keyboard. */
:where( a, button, input, select, textarea ):focus-visible {
	outline: 3px solid var( --wp--preset--color--violet );
	outline-offset: 2px;
}

/* ----------------------------------------------------------------- cards */

/*
 * A white card on the lavender ground, matching the calculator's panels.
 * Add the class to any group block that should read as a card.
 */
.uno-card {
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 1px 12px 2px rgba( 20, 20, 20, 0.08 );
	padding: 28px;
}

/* ------------------------------------------------------------ front page */

.uno-hero { padding-block: 56px 40px; }
.uno-section { padding-block: 56px; }
.uno-section > h2 { margin-bottom: 8px; }

.uno-section-lead {
	max-width: 62ch;
	margin: 0 auto 32px;
	color: var( --wp--preset--color--ink-soft );
}

.uno-lead {
	font-size: clamp( 17px, 1.6vw, 19px );
	line-height: 1.6;
	color: var( --wp--preset--color--ink-soft );
	max-width: 46ch;
}

/*
 * The bullets replace the stock photo that used to fill this column. A photo of
 * strangers on a sofa says nothing; five specific reasons do the persuading the
 * picture was only decorating.
 */
.uno-bullets {
	list-style: none;
	margin: 28px 0 32px;
	padding: 0;
}

.uno-bullets li {
	position: relative;
	padding-left: 38px;
	margin-bottom: 18px;
	color: var( --wp--preset--color--ink-soft );
	line-height: 1.55;
}

.uno-bullets li strong {
	display: block;
	color: var( --wp--preset--color--ink );
	font-weight: 700;
	margin-bottom: 2px;
}

/* Checkmark drawn in CSS rather than shipped as an icon font or SVG sprite -
   five ticks do not justify either. */
.uno-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --wp--preset--color--violet );
}

.uno-bullets li::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 8px;
	width: 8px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate( -45deg );
}

/* ----------------------------------------------------- hero example card */

.uno-quote-card { position: sticky; top: 24px; }

.uno-eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink-soft );
	margin: 0 0 6px;
}

.uno-quote-figure {
	margin: 0;
	font-size: clamp( 34px, 4vw, 44px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var( --wp--preset--color--ink );
}

.uno-quote-figure span {
	font-size: 18px;
	font-weight: 500;
	color: var( --wp--preset--color--ink-soft );
}

.uno-quote-sub {
	margin: 6px 0 20px;
	font-size: 14px;
	color: var( --wp--preset--color--ink-soft );
}

.uno-quote-sub strong { color: var( --wp--preset--color--violet ); }

.uno-quote-rows p {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 10px 0;
	font-size: 14px;
	border-bottom: 1px solid var( --wp--preset--color--lavender );
	color: var( --wp--preset--color--ink-soft );
}

.uno-quote-rows p span:last-child {
	font-weight: 700;
	color: var( --wp--preset--color--ink );
}

.uno-quote-rows { margin-bottom: 22px; }

.uno-fineprint {
	margin: 16px 0 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: var( --wp--preset--color--ink-soft );
}

/* ----------------------------------------------------------------- stats */

.uno-stats { gap: 24px; text-align: center; }
.uno-stat { flex: 1 1 200px; }

.uno-stat-value {
	margin: 0;
	font-size: clamp( 24px, 2.6vw, 30px );
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--violet );
}

.uno-stat-label {
	margin: 2px 0 0;
	font-size: 13.5px;
	color: var( --wp--preset--color--ink-soft );
}

/* ----------------------------------------------------------------- steps */

.uno-steps { margin-top: 32px; }
.uno-step { height: 100%; }
.uno-step h3 { margin: 12px 0 8px; }
.uno-step p { color: var( --wp--preset--color--ink-soft ); font-size: 15px; margin: 0; }

.uno-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 50%;
	background: var( --wp--preset--color--lavender );
	color: var( --wp--preset--color--violet );
	font-weight: 700;
	font-size: 17px;
}

/* ------------------------------------------------------------------- faq */

.uno-faq { margin-bottom: 12px; padding: 18px 24px; }
.uno-faq summary { cursor: pointer; font-weight: 700; color: var( --wp--preset--color--ink ); }
.uno-faq p { color: var( --wp--preset--color--ink-soft ); font-size: 15px; margin-bottom: 0; }
.uno-faq[open] summary { margin-bottom: 10px; }

@media ( max-width: 781px ) {
	.uno-hero { padding-block: 32px 24px; }
	.uno-section { padding-block: 36px; }
	.uno-quote-card { position: static; }
	.uno-lead { max-width: none; }
}

/* --------------------------------------------------------------- content */

/* Long-form reading on a tinted ground benefits from a slightly looser
   measure than the theme default. */
.wp-block-post-content p {
	line-height: 1.7;
}