/*
Theme Name: Kadence Child - Slapić
Theme URI: https://vrtic-slapic.hr
Description: Custom child theme for Vrtić Slapić, built on Kadence.
Author: Slapić
Template: kadence
Version: 1.2.5
Text Domain: slapic
*/

:root {
	/* Colours */
	--color-coral:      #ff8454; /* primary accent, links, buttons */
	--color-coral-hover:#e2564b; /* coral hover / destructive */
	--color-teal:       #80c3d2; /* service block 1, sidebar */
	--color-green:      #88c87b; /* service block 3 */
	--color-yellow:     #f0cd3a; /* service block 4 */
	--color-heading:    #454a4c; /* h1-h5 */
	--color-text:       #6b6b6b; /* body text - darker than original #a6a6a6 for readability */
	--color-bg:         #f2f3f4; /* section backgrounds */
	--color-white:      #ffffff;
	--color-footer:      #454a4c;
	--color-footer-bar:  #3a3f41;
	--color-footer-text: #a6a6a6; /* footer text/links on dark footer bg, matches live site */
	--color-social-bg:   #5e6365;

	/* Accent colours darkened for use as small text — the base accents measure
	   1.5–2.5:1 on white and fail WCAG AA. Hue and saturation preserved.
	   Decorative uses (dots, underlines, fills) keep the base accent. */
	--color-teal-text:   #348091; /* 4.51:1 on white */
	--color-coral-text:  #da3d00; /* 4.52:1 on white */
	--color-green-text:  #448537; /* 4.51:1 on white */
	--color-yellow-text: #8e740b; /* 4.51:1 on white */

	/* Typography
	   Display sizes (lg/xl/2xl/hero) are mobile values here; bumped up to
	   their desktop sizes at 768px below. Body-ish sizes (base/sm/md) don't
	   scale — 18px reads fine on mobile, it's the headings that need it. */
	--font-head:        'Barlow Condensed', sans-serif;
	--font-body:        'Barlow', sans-serif;
	--font-size-base:   1.125rem;  /* 18px */
	--font-size-sm:     0.889rem;
	--font-size-md:     1.111rem;  /* h5 equivalent */
	--font-size-lg:     1.188rem;  /* 19px mobile — 22px (h4 equivalent) from 768px */
	--font-size-xl:     1.5rem;    /* 24px mobile — 31px (h3 equivalent) from 768px */
	--font-size-2xl:    1.875rem;  /* 30px mobile — 40px (h2 equivalent) from 768px */
	--font-size-hero:   2.5rem;    /* 40px mobile — 62px (h1 equivalent) from 768px */
	--font-size-card-title: 1.5rem; /* 24px, deliberately constant — news card
	                                   columns stay ~350px at every breakpoint */
	--line-height-base: 1.667;
	--line-height-head: 1.3;

	/* Spacing */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 3.5rem;
	--space-xl: 5rem;

	/* UI */
	--radius:      4px;
	--radius-card: 1.25rem; /* 20px — service cards */
	--radius-pill: 999px;   /* pill CTA buttons */
	--max-width:   1200px;
	--transition:        all 0.3s ease;
	--transition-bounce: transform 0.5s cubic-bezier(0.34, 1.75, 0.5, 1); /* playful springy overshoot */

	/* Shadows — soft, modern */
	--shadow-card:       0 10px 30px rgba(0, 0, 0, 0.08);
	--shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.12);

}

/* Base
   Qualified with `html` — Kadence ships its own generic body/heading
   typography in an inline <style> block that WordPress outputs AFTER this
   stylesheet, at the same specificity as a bare `body{}` / `h1{}`, so
   unqualified rules here lose the tie on load order. Left unqualified,
   headings render in the browser's system font at Kadence's flat 32px
   instead of Barlow Condensed on our responsive scale.

   `html` is a type selector, so `html h1` is (0,0,2): enough to beat
   Kadence's (0,0,1) `h1`, but still below any single class (0,1,0) — so
   component styles like .front-services__title, .contact-page__info-title
   and .post-card__title keep overriding colour and size exactly as intended.
   Do NOT reach for `:root` here: it is a pseudo-class worth a full (0,1,0),
   which outranks those component rules and silently turns white card titles
   grey and forces the generic heading sizes onto them. */

html body {
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	font-weight: 300;
	/* Safety net, not a fallback for normal wrapping: 25 migrated posts use
	   non-breaking spaces around single-letter conjunctions ("i", "u"...) so
	   they're never orphaned at a line end — a real Croatian typographic
	   convention, kept as-is. But a long run of words glued by NBSP can
	   exceed the column width with nowhere to break, and Kadence's own
	   .entry-content{word-break:break-word} doesn't reach our custom
	   templates (none of them use that class). overflow-wrap only ever
	   engages for a token that doesn't fit its line, so ordinary breakable
	   text is completely unaffected — inherited site-wide rather than
	   duplicated per template, since overflow-wrap inherits by default. */
	overflow-wrap: break-word;
}

html h1, html h2, html h3, html h4, html h5, html h6 {
	color: var(--color-heading);
	font-family: var(--font-head);
	line-height: var(--line-height-head);
	font-weight: 400;
}

html h1 { font-size: var(--font-size-hero); }
html h2 { font-size: var(--font-size-2xl); }
html h3 { font-size: var(--font-size-xl); }
html h4 { font-size: var(--font-size-lg); }
html h5 { font-size: var(--font-size-md); }
html h6 { font-size: var(--font-size-base); }

a {
	color: var(--color-coral);
	transition: var(--transition);
}

a:hover,
a:focus {
	color: var(--color-coral-hover);
}

/* Layout */

/* Kadence's page-title hero tags its header .page-title (see entry_hero). */
.page-title {
	margin: 0;
}

.error-404__home-link {
	margin-top: var(--space-md);
	font-family: var(--font-head);
	font-size: var(--font-size-md);
}

/* Components */

/* Shared "more"/CTA button — used site-wide (e.g. Više vijesti, Više slika).
   Coral pill with an arrow that slides right on hover. */
.more-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	background: var(--color-coral);
	color: var(--color-white);
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius);
	font-family: var(--font-head);
	text-decoration: none;
	transition: var(--transition);
}

.more-btn:hover,
.more-btn:focus {
	background: var(--color-coral-hover);
	color: var(--color-white);
	text-decoration: none;
}

.more-btn__arrow {
	transition: transform 0.2s ease;
}

.more-btn:hover .more-btn__arrow,
.more-btn:focus .more-btn__arrow {
	transform: translateX(4px);
}

/* Utilities */

/* Visually hidden but announced by screen readers — e.g. a <label> paired
   with a placeholder-only field, where the placeholder carries the visible
   design but a real label is still needed for accessibility. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Media queries */

/* Desktop display type — every heading and lead-paragraph-style component
   sources its size from these tokens, so this single block scales
   typography site-wide instead of needing per-page overrides. */
@media (min-width: 768px) {
	:root {
		--font-size-lg:   1.389rem;  /* 22px — h4 equivalent */
		--font-size-xl:   1.944rem;  /* 31px — h3 equivalent */
		--font-size-2xl:  2.5rem;    /* 40px — h2 equivalent */
		--font-size-hero: 3.889rem;  /* 62px — h1 equivalent */
	}
}