/*
 * DiunaDent — base stylesheet.
 *
 * Design tokens (palette, fonts, sizes) come from theme.json as
 * --wp--preset--* custom properties. This file adds semantic aliases,
 * base element styles, layout primitives and breakpoints.
 *
 * Breakpoints (mobile-first):
 *   ≤ 990px  — mobile/tablet: hamburger navigation, single column
 *   reference viewports: 390 (mobile), 1440 (desktop)
 */

:root {
	--dd-color-accent: var(--wp--preset--color--copper);
	--dd-color-accent-light: var(--wp--preset--color--copper-light);
	--dd-color-accent-dark: var(--wp--preset--color--copper-dark);
	/* Copper for large text on light backgrounds — >=3:1 (WCAG AA large). */
	--dd-color-accent-ink: #a8703c;
	--dd-color-ink: var(--wp--preset--color--contrast);
	--dd-color-text: var(--wp--preset--color--body);
	--dd-color-bg: var(--wp--preset--color--base);
	--dd-color-black: var(--wp--preset--color--black);
	--dd-color-gray: var(--wp--preset--color--zebra);

	--dd-font-body: var(--wp--preset--font-family--body);
	--dd-font-heading: var(--wp--preset--font-family--heading);
	--dd-font-script: var(--wp--preset--font-family--script);

	--dd-container: 1200px;
	--dd-gutter: 1.25rem;

	/*
	 * The sticky bar. 144px is the 72px it used to be, doubled — the client
	 * asked for the black bar to be "wider by 100%" so that the logo in the
	 * corner could grow with it and carry its "DiunaDent Clinic" signature
	 * again. Nav link sizes are deliberately unchanged (same request).
	 *
	 * Everything that has to keep clear of the bar reads this token: the body
	 * offset and scroll padding below, the hero fold, and the intro's docking
	 * slot, which measures the logo box rather than assuming a height.
	 */
	--dd-header-height: 144px;

	/* The strip the floating CTA owns in the bottom-right corner: its own height,
	   its offset from the edge and room to breathe. Anything that would otherwise
	   end flush with the bottom of the fold keeps clear of it — see the footer's
	   padding and the hero portrait frame, which used to end under the pill on a
	   short desktop fold. Geometry lives in floating-cta.css; this is the number
	   the rest of the sheet is allowed to reason about. */
	--dd-cta-reserve: 6.25rem;

	/* One page-title size for every subpage. Before this token they ran at a
	   fixed 34px on five pages and a fluid 28-39px on the sixth, so the same
	   heading changed size as the visitor moved between tabs. */
	--dd-page-title: clamp(1.9rem, 1.1rem + 2.4vw, 2.6rem);

	/*
	 * The two heading roles below the page title. They existed already, but as
	 * three unrelated rules: a section title on Oferta (24-36px), a column title
	 * on Cennik (20.8-25.6px) and a card title on Promocje with no font-size at
	 * all — 25.5px inherited from the browser's own `h2 {1.5em}`, fixed at every
	 * width. So the same level of heading was the largest one on one tab and the
	 * smallest on another, and the order reversed between 390px and 1440px.
	 */
	--dd-section-title: clamp(1.5rem, 2.8vw, 2.25rem);
	--dd-card-title: clamp(1.3rem, 2vw, 1.6rem);

	/*
	 * One corner radius for every photograph on the site.
	 *
	 * The client asked for rounded corners twice — "zaokrąglone narożniki (jak
	 * w WhatsApp)" for the gallery and "wszystkie zdjęcia z zaokrąglonymi
	 * narożnikami" on Kontakt — and both were answered only where they were
	 * written, so the site ended up with 14px in the gallery, 14px on the Kontakt
	 * panels, 6px on Oferta and square corners in the hero. The instruction is
	 * now read as it was meant: every picture, one radius.
	 *
	 * 14px is the gallery's number, which is the one she saw and approved, and it
	 * is what "jak w WhatsApp" measures at these sizes.
	 */
	--dd-radius-media: 14px;
}

/*
 * The pill drops to 52px and moves closer to the edge on phones - and on any
 * short window, for the same reason the bar above does.
 *
 * The pill is fixed to the corner of the WINDOW, so it spends the same 84px of
 * a 614px laptop screen that it spends of a 1080px one. The hero portrait
 * shares that corner and has to clear it, so on the client's short laptop the
 * reserve was taking 24% of the fold away from the photograph he asked to see
 * bigger. Geometry in floating-cta.css; this is the number the fold reads.
 */
@media (max-width: 600px), (max-height: 740px) {
	:root {
		--dd-cta-reserve: 5.5rem;
	}
}

/*
 * The bar is a share of the window, not a constant.
 *
 * 144px is the height the doubled lockup was drawn at and it is right on the
 * window the request was written against — "patrząc na stronę przez pryzmat
 * laptopa/komputera". On a phone with its address bar showing it is not: at
 * 553px of viewport (an iPhone SE in Safari) the bar took 26% of the screen and
 * left the hero 409px for a photograph, three blocks of copy and a control row.
 * The portrait collapsed to 130px wide and the copy climbed onto dr Zawadzki's
 * face — the whole of the 10.08 mobile report.
 *
 * So the concession the rule below already makes for a phone held sideways is
 * made one step earlier and gently: 104px keeps BOTH lines of the lockup (the
 * signature renders at ~9px in a 69px box, against the ~12px it gets at 144)
 * and hands 40px back to the fold. The intro decides whether to crop its
 * signature from the measured aspect ratio of this box, and scaling the token
 * scales the box uniformly, so the docking is untouched.
 *
 * The width gate this rule used to carry is gone, at the same visitor's own
 * request. It was there because 144px was written "patrząc na stronę przez
 * pryzmat laptopa/komputera", and height alone would have taken the doubled
 * lockup away from exactly the window it was asked for.
 *
 * Then he put two laptops side by side and read the bar itself as the fault:
 * "czarny pasek z logo i tytułami zakładek jest szerszy na czarnym laptopie i
 * niestety zabiera dużo miejsca z wysokości ekranu. Może to jest sedno
 * problemu?" It is, and it is this rule. The bar is the same 144px on both
 * machines; what differs is the window it is spent from. 1366x768 at 125%
 * scaling leaves ~614px of viewport, where 144px is 23% of the screen against
 * ~15% on the taller machine he prefers - so the identical bar reads as wider,
 * and everything the fold pays for afterwards is smaller. At 104px the short
 * laptop spends 17%, which is the share he approved on the machine he likes.
 *
 * Width is in the query too, and as an OR rather than an AND. A phone crosses
 * 740px of viewport by itself, without being turned or resized: Chrome and
 * Safari both hand back ~110px when the address bar retracts under the reader's
 * thumb, so a 412x732 phone becomes 412x870 mid-scroll. With height alone the
 * bar grew by 40px at that moment and every measurement below it moved. Below
 * 769px the layout is the stacked one, where 104px is the height that was
 * measured and approved on 10.08 - so it holds there at every window height,
 * and the two phones in the 11.08 photograph stop disagreeing about the bar.
 */
@media (max-width: 768.98px), (max-height: 740px) {
	:root {
		--dd-header-height: 104px;
	}
}

/*
 * The laptop step, added 19.08 after the client photographed two machines side
 * by side: a 16:9 laptop whose window is ~560px tall next to a desktop at ~950.
 * The bar is the same 104px on both, and he read the difference correctly — it
 * is 11% of the taller window and 18.6% of the shorter one, which is why he
 * wrote that the bar "zabiera dużo miejsca z wysokości ekranu".
 *
 * 88px only above 769px of width, so the stacked phone layout keeps the 104px
 * measured and approved on 10.08 — the window this rule is for is a laptop's,
 * short and wide, not a phone's. The signature stays legible: the lockup is
 * two thirds of the bar (header.css), so 88px still gives it 59px against the
 * 69px it has at 104 and the 96 the client approved at 144.
 */
@media (min-width: 769px) and (max-height: 640px) {
	:root {
		--dd-header-height: 88px;
	}
}

/*
 * Below 480px of height — a phone held sideways, and the 400% zoom WCAG 1.4.10
 * asks a page to survive — even 104px is more bar than the window can lend, so
 * it returns to the height it had before the lockup was doubled. Nothing
 * measures the bar by hand: the token is what the body offset, the scroll
 * padding, the hero fold and the intro's docking slot all read.
 */
@media (max-height: 480px) {
	:root {
		--dd-header-height: 72px;
	}
}

/* --- Base ------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;

	/* The bar is fixed (header.css) and so is the CTA pill (floating-cta.css), so
	   anything the browser scrolls to on its own — a focused control reached with
	   Tab, the skip link's target, an in-page anchor — has to stop clear of both.
	   Without this the bar covers the element it just scrolled to whole:
	   a focused line of text is ~21px tall (WCAG 2.4.11). */
	scroll-padding-block-start: calc(var(--dd-header-height) + 1rem);
	scroll-padding-block-end: var(--dd-cta-reserve);
}

body {
	margin: 0;
	font-family: var(--dd-font-body);
	color: var(--dd-color-text);
	background: var(--dd-color-bg);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/*
 * Pictures placed through the editor get the same corner as the ones the theme
 * places itself — otherwise the radius would depend on whether a photograph
 * happens to live in a template or in the page's content, which is not a
 * distinction a visitor can see. Logos and icons are not blocks and are not
 * caught by this.
 */
.wp-block-image img,
.wp-block-gallery img,
.wp-block-media-text__media img {
	border-radius: var(--dd-radius-media);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--dd-font-heading);
	color: var(--dd-color-ink);
	line-height: 1.2;
	margin: 0 0 0.6em;
}

/*
 * Lining figures wherever Playfair carries digits. The subset ships oldstyle
 * figures by default — the zero sits at x-height and the five drops below the
 * baseline — so the clinic's phone number rendered as "6o5 6o8 888" at 32px on
 * the Kontakt page and in the floating pill. That is the one number the whole
 * site exists to get dialled, and it was the only thing on the page set in a
 * face that spells digits like letters. Headings are in the list because
 * "Pacjenci powyżej 60 r.ż." and "Strefa Pacjenta 60+" have the same problem.
 */
h1,
h2,
h3,
h4,
h5,
h6,
.dd-kontakt__phone,
.dd-cta__phone,
.dd-oferta__num,
.dd-promo__price {
	font-variant-numeric: lining-nums;
}

/*
 * Page titles. Every subpage title takes the same scale; the colour is the
 * page's own business — O Klinice sets its title on a graphite field and needs
 * copper there, the rest sit on white and stay ink.
 */
.dd-oklinice__heading,
.dd-promocje__heading,
.dd-galeria-page__heading,
.dd-oferta__heading,
.dd-cennik__heading,
.dd-kontakt__heading,
.dd-404__heading {
	font-size: var(--dd-page-title);
	line-height: 1.15;
	letter-spacing: -.01em;
}

/*
 * ...and the same position under it. The five titles that sit on the white page
 * were centred on three tabs and flushed left on Oferta, with the gap below them
 * running 16.6px, 25px, 40px and 72px depending on which page you were looking
 * at — measured at 1440. One alignment and one gap, so moving between tabs stops
 * moving the title. O Klinice is deliberately outside this: its title stands in
 * the graphite field on the right, not over the page.
 */
.dd-promocje__heading,
.dd-galeria-page__heading,
.dd-oferta__heading,
.dd-cennik__heading,
.dd-kontakt__heading,
.dd-404__heading {
	text-align: center;
	margin-block: 0 clamp(1.5rem, 4vw, 2.5rem);
}

/* --- Not found -------------------------------------------------------- */

.dd-404 {
	text-align: center;
}

.dd-404__lead {
	max-width: 46ch;
	margin-inline: auto;
	margin-block: 0 clamp(1.5rem, 4vw, 2.5rem);
}

.dd-404__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dd-404__list a {
	display: inline-block;
	padding-block: .5rem;
	text-decoration: none;
}

.dd-404__list a:hover,
.dd-404__list a:focus-visible {
	text-decoration: underline;
}

a {
	color: var(--dd-color-accent-dark);
}

a:hover,
a:focus-visible {
	color: var(--dd-color-accent);
}

/*
 * Two rings, because one colour cannot clear 3:1 (WCAG 1.4.11) against both ends
 * of this palette. Copper on black is 6.72:1 and on white 3.13:1, but on the
 * light surfaces of the price list it falls to 2.46-2.99:1 (#f2e1d8, #faf0ec,
 * #f4f4f4). The near-black ring sitting in the offset gap is 17-19:1 there and
 * simply invisible on dark backgrounds, where the copper does the work.
 */
:focus-visible {
	outline: 2px solid var(--dd-color-accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--dd-color-ink);
}

/* The skip link targets <main> and moves focus there programmatically; a
   container that never receives focus from the keyboard needs no ring. */
.dd-main:focus {
	outline: none;
}

/* Calligraphy — reserved for the brand sentence only (not body text). */
/* Great Vibes ships one weight; asking for 700 would have the browser synthesise a bold and
   thicken a copperplate hand that lives on the contrast between its hairlines and its stems. */
.dd-script {
	font-family: var(--dd-font-script);
	font-weight: 400;
}

/* --- Layout primitives ------------------------------------------------ */

.dd-container {
	max-width: var(--dd-container);
	margin-inline: auto;
	padding-inline: var(--dd-gutter);
}

.dd-section {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* Screen-reader-only helper (WP convention). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 16px;
	clip-path: none;
	background: var(--dd-color-bg);
	color: var(--dd-color-ink);
}

/* --- Motion ----------------------------------------------------------- */

/*
 * Reduced motion. Everything that moves is switched off — with one carve-out:
 * the hero, which plays its full arrival for everyone. The carve-out is the
 * client's decision of 09.08, taken with the accessibility cost stated; the
 * reasoning and what replaces the stop are written down in hero.css, next to
 * the animation itself.
 *
 * The exemption has to cover the whole subtree, not the slides alone: the track
 * that carries them is their parent, so a rule that spared only the slides left
 * the carousel jumping sideways between two screens that faded politely.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*:not(.dd-hero):not(.dd-hero *),
	*:not(.dd-hero):not(.dd-hero *)::before,
	*:not(.dd-hero):not(.dd-hero *)::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}