/**
 * HOLY DOG — BASE LAYER
 * Layout grid, typographic defaults, focus, and control primitives.
 * Consumes tokens.css. Contains no colour literals.
 *
 * Load order: tokens.css → fonts.css → astra → base.css → components
 *
 * @package HolydogChild
 * @since   1.6.0
 */

/* ══════════════════════════════════════════════════════════════
   0. ROOT FONT SIZE  ⚠ read before changing
   ──────────────────────────────────────────────────────────────
   Astra's Customizer emits `html { font-size: 91.2% }`, which
   pins the root to 14.592px instead of the browser default.

   Two problems with that:
     1. Every rem token silently shrinks ~9%, so --hd-text-base
        (1.0625rem) rendered at 15.5px rather than the intended 17px.
     2. More importantly, it partly overrides the reader's own
        browser font-size preference — the exact setting older
        users rely on.

   Restoring 100% means rem resolves against whatever the reader
   has chosen (16px by default). Expect existing pages to render
   roughly 10% larger; that is the correction, not a regression.

   To revert, delete this block AND set Customizer → Global →
   Typography → Body back to 100%.
   ══════════════════════════════════════════════════════════════ */

html {
	font-size: 100%;
}

@media (max-width: 921px) {
	html { font-size: 100%; }
}

@media (max-width: 544px) {
	html { font-size: 100%; }
}


/* ══════════════════════════════════════════════════════════════
   1. TYPOGRAPHIC DEFAULTS
   Astra sets its own body font and sizes from the Customizer.
   These rules re-base the document onto the token scale.
   ══════════════════════════════════════════════════════════════ */

/* Do not style .ast-container here — Astra uses it inside the above-
   header (socials / phone). A white background + ink colour there
   makes those items invisible against the Customizer top-bar colour. */
body,
.entry-content {
	font-family: var(--hd-font-body);
	font-size: var(--hd-text-base);
	font-weight: var(--hd-fw-regular);
	line-height: var(--hd-leading-normal);
	color: var(--hd-text-primary);
	background-color: var(--hd-surface-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
	font-family: var(--hd-font-display);
	font-weight: var(--hd-fw-bold);
	line-height: var(--hd-leading-snug);
	letter-spacing: var(--hd-tracking-tight);
	color: var(--hd-text-primary);
	text-wrap: balance;
	margin-block: 0 var(--hd-space-4);
}

h1, .entry-title { font-size: var(--hd-text-4xl); line-height: var(--hd-leading-tight); }
h2 { font-size: var(--hd-text-3xl); }
h3 { font-size: var(--hd-text-2xl); }
h4 { font-size: var(--hd-text-xl);  letter-spacing: var(--hd-tracking-normal); }
h5 { font-size: var(--hd-text-lg);  letter-spacing: var(--hd-tracking-normal); }
h6 { font-size: var(--hd-text-base); letter-spacing: var(--hd-tracking-normal); }

p {
	margin-block: 0 var(--hd-space-4);
	text-wrap: pretty;
}

/* Constrain reading length. Long lines are the single biggest
   readability problem for older readers on wide screens. */
.hd-prose > p,
.hd-prose > ul,
.hd-prose > ol,
.entry-content > p {
	max-width: var(--hd-measure);
}

small, .hd-caption {
	font-size: var(--hd-text-sm);
	color: var(--hd-text-secondary);
}

/* Uppercase eyebrow / label */
.hd-label {
	font-size: var(--hd-text-sm);
	font-weight: var(--hd-fw-medium);
	letter-spacing: var(--hd-tracking-wide);
	text-transform: uppercase;
	color: var(--hd-text-secondary);
}

a {
	color: var(--hd-text-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--hd-transition);
}

a:hover {
	color: var(--hd-brand-800);
}

/* Links inside running text stay underlined — colour alone is not
   a sufficient affordance (WCAG 1.4.1). */
.hd-prose a,
.entry-content p a {
	text-decoration: underline;
}


/* ══════════════════════════════════════════════════════════════
   1b. MAIN MUST FILL ITS FLEX ROW
   ──────────────────────────────────────────────────────────────
   Astra wraps page content in `.ast-container`, which is
   `display: flex`. A native <main> is therefore a flex item, and
   flex items default to `flex: 0 1 auto` — they size to their
   content rather than filling the row.

   The visible symptom: <main> collapsed to the width of the
   widest thing inside it (the 1264px container), so on displays
   wider than that the whole page sat left-aligned and every
   full-bleed section background stopped short of the right edge.
   It looked correct at laptop widths purely by coincidence.

   Any native template rendering its own <main> needs this.
   ══════════════════════════════════════════════════════════════ */

.ast-container > main,
.ast-container > .hd-main {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;   /* lets grid/flex children shrink instead of overflowing */
}

/* .hd-container already applies --hd-page-pad (same as the header logo).
   Astra's #content > .ast-container adds another 20px and shoves the
   shop/category grid past the logo. Drop that outer pad. */
#content > .ast-container {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

/* Cart/checkout are Woo Blocks with `.alignwide`. Astra still emits
   `margin-inline: calc(-1 * min(var(--ast-container-…), 20px))` to break
   out of its old 20px container pad. With the pad zeroed above, that
   pulls the form 20px off the left edge — clipped fields, and express
   payment titles look shoved right because they centre on the full
   (clipped) width. Restore the header gutter and cancel the breakout. */
body.woocommerce-cart #content > .ast-container,
body.woocommerce-checkout #content > .ast-container {
	max-width: calc(var(--hd-container) + (var(--hd-page-pad) * 2));
	margin-inline: auto;
	padding-left: var(--hd-page-pad, 1.25rem);
	padding-right: var(--hd-page-pad, 1.25rem);
}

@media (min-width: 768px) {
	body.woocommerce-cart #content > .ast-container,
	body.woocommerce-checkout #content > .ast-container {
		max-width: calc(var(--hd-container) + (var(--hd-page-pad-lg) * 2));
		padding-left: var(--hd-page-pad-lg, 2rem);
		padding-right: var(--hd-page-pad-lg, 2rem);
	}
}

body.woocommerce-cart .entry-content[data-ast-blocks-layout] > .alignwide,
body.woocommerce-checkout .entry-content[data-ast-blocks-layout] > .alignwide {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
	max-width: none;
}

/* Elementor kit paints body cream; title sits outside white
   .entry-content on that yellow ground. One raised card wraps
   header + cart; entry-content stays transparent. */
body.woocommerce-cart #primary article.ast-article-single,
body.woocommerce-checkout #primary article.ast-article-single {
	background-color: var(--hd-surface-raised);
	border-radius: var(--hd-radius-card);
	box-shadow: var(--hd-shadow-resting);
	padding: var(--hd-space-5);
}

@media (min-width: 768px) {
	body.woocommerce-cart #primary article.ast-article-single,
	body.woocommerce-checkout #primary article.ast-article-single {
		padding: var(--hd-space-6) var(--hd-space-7);
	}
}

body.woocommerce-cart #primary article.ast-article-single .entry-content,
body.woocommerce-checkout #primary article.ast-article-single .entry-content {
	background-color: transparent;
}

/* Cart page line items: Woo defaults 80px / 14px feel small in the
   wide shell — bump image column + type a notch (page only). */
body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image {
	width: 100px;
}

body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata,
body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
body.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	font-size: var(--hd-text-base);
}

body.woocommerce-cart .wc-block-components-quantity-selector {
	width: 120px;
}

/* Narrow/container layouts use an explicit image+product grid. */
body.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row,
body.woocommerce-cart .is-medium table.wc-block-cart-items .wc-block-cart-items__row,
body.woocommerce-cart .is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
body.woocommerce-cart .is-small table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 100px 1fr;
}

/* Checkout Bestellübersicht: right-side amounts a notch larger than body. */
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price,
body.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-totals-item__value {
	font-size: var(--hd-text-lg);
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--hd-text-xl);
}


/* ══════════════════════════════════════════════════════════════
   2. LAYOUT GRID
   One container width, 12 columns, consistent gutters. Sections
   snap to this so left edges align down the entire page.
   ══════════════════════════════════════════════════════════════ */

.hd-container {
	width: 100%;
	max-width: calc(var(--hd-container) + (var(--hd-page-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--hd-page-pad);
}

.hd-container--wide   { max-width: calc(var(--hd-container-wide) + (var(--hd-page-pad) * 2)); }
.hd-container--narrow { max-width: calc(var(--hd-container-narrow) + (var(--hd-page-pad) * 2)); }
.hd-container--flush  { padding-inline: 0; }

@media (min-width: 768px) {
	.hd-container { padding-inline: var(--hd-page-pad-lg); }
	.hd-container--wide   { max-width: calc(var(--hd-container-wide) + (var(--hd-page-pad-lg) * 2)); }
	.hd-container--narrow { max-width: calc(var(--hd-container-narrow) + (var(--hd-page-pad-lg) * 2)); }
	.hd-container { max-width: calc(var(--hd-container) + (var(--hd-page-pad-lg) * 2)); }
}

/* The 12-column grid itself */
.hd-grid {
	display: grid;
	grid-template-columns: repeat(var(--hd-columns), minmax(0, 1fr));
	gap: var(--hd-gutter);
}

@media (min-width: 1024px) {
	.hd-grid { gap: var(--hd-gutter-lg); }
}

/* Column spans. Mobile-first: everything is full width until sm. */
.hd-col-1,  .hd-col-2,  .hd-col-3,  .hd-col-4,
.hd-col-5,  .hd-col-6,  .hd-col-7,  .hd-col-8,
.hd-col-9,  .hd-col-10, .hd-col-11, .hd-col-12 {
	grid-column: span var(--hd-columns);
}

@media (min-width: 768px) {
	.hd-col-1  { grid-column: span 1;  }
	.hd-col-2  { grid-column: span 2;  }
	.hd-col-3  { grid-column: span 3;  }
	.hd-col-4  { grid-column: span 4;  }
	.hd-col-5  { grid-column: span 5;  }
	.hd-col-6  { grid-column: span 6;  }
	.hd-col-7  { grid-column: span 7;  }
	.hd-col-8  { grid-column: span 8;  }
	.hd-col-9  { grid-column: span 9;  }
	.hd-col-10 { grid-column: span 10; }
	.hd-col-11 { grid-column: span 11; }
	.hd-col-12 { grid-column: span 12; }
}

/* Auto-fit card grid for product and category listings — the
   shop archive, category tiles and related products all use this
   rather than three different bespoke layouts. */
.hd-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--hd-card-min, 240px), 1fr));
	gap: var(--hd-gutter);
	align-items: stretch;
}

.hd-cards--sm { --hd-card-min: 180px; }
.hd-cards--lg { --hd-card-min: 300px; }

/* Equal-height cards regardless of title length */
.hd-cards > * {
	display: flex;
	flex-direction: column;
	min-width: 0;
}


/* ══════════════════════════════════════════════════════════════
   3. SECTION RHYTHM
   Replaces the per-widget padding that currently differs on every
   section. Two rhythms only: standard and tight.
   ══════════════════════════════════════════════════════════════ */

.hd-section {
	padding-block: var(--hd-section-y);
}

.hd-section--tight { padding-block: var(--hd-section-y-tight); }
.hd-section--flush { padding-block: 0; }

.hd-section--sunken { background-color: var(--hd-surface-sunken); }
.hd-section--accent { background-color: var(--hd-surface-accent); color: var(--hd-text-on-cream); }
.hd-section--brand  { background-color: var(--hd-surface-brand);  color: var(--hd-text-on-brand); }
.hd-section--dark   { background-color: var(--hd-surface-dark);   color: var(--hd-text-on-dark); }

/* Headings and links invert correctly on filled sections */
.hd-section--brand :is(h1, h2, h3, h4, h5, h6),
.hd-section--dark  :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.hd-section--accent :is(h1, h2, h3, h4, h5, h6) {
	color: var(--hd-text-on-cream);
}

.hd-section--brand a,
.hd-section--dark a {
	color: inherit;
	text-decoration: underline;
}


/* ══════════════════════════════════════════════════════════════
   4. FOCUS
   The audit found 47–60 focusable elements per page with no
   indicator. One rule fixes all of them.
   ══════════════════════════════════════════════════════════════ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--hd-focus-width) solid var(--hd-focus-color);
	outline-offset: var(--hd-focus-offset);
	border-radius: var(--hd-radius-input);
}

/* On brand or dark fills the blue ring disappears — use the
   white-then-blue halo instead. */
.hd-section--brand :is(a, button):focus-visible,
.hd-section--dark  :is(a, button):focus-visible,
.hd-btn--primary:focus-visible {
	outline: none;
	box-shadow: var(--hd-focus-halo);
}

/* Never remove focus without a replacement. */
:focus:not(:focus-visible) {
	outline: none;
}


/* ══════════════════════════════════════════════════════════════
   4b. FORM CONTROLS — one definition for the whole site
   ──────────────────────────────────────────────────────────────
   Text inputs are contested by three parties at once: Astra's
   Customizer inline CSS (2px, then 4px), WooCommerce's base styles
   (0), and WooCommerce Blocks' checkout.css and packages-style.css
   (4px). Several of those tie with any component-level selector on
   specificity, so whichever happens to be emitted last wins — which
   is why the checkout fields kept square corners while the rest of
   the site used the token radius.

   Rather than escalate the same battle in three component files,
   the control's shape and size are defined once here. !important is
   used deliberately and only on the properties those stylesheets
   contest; it is not a blanket.

   Height is generous on purpose — the audience skews older and
   these are the highest-stakes fields on the site.
   ══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
	min-height: var(--hd-control-h) !important;
	padding: var(--hd-space-3) var(--hd-space-4);
	background-color: var(--hd-surface-page);
	border: 1px solid var(--hd-ink-200);
	border-radius: var(--hd-radius-input) !important;
	font-family: var(--hd-font-body);
	font-size: var(--hd-text-base);
	line-height: var(--hd-leading-normal);
	color: var(--hd-text-primary);
	transition: border-color var(--hd-transition);
}

textarea {
	min-height: 10rem !important;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--hd-brand-500);
}

input::placeholder,
textarea::placeholder {
	color: var(--hd-ink-300);
	opacity: 1;
}

/* Checkboxes and radios are 24px minimum (WCAG 2.2 target size) and
   take the brand colour via accent-color, which keeps the native
   control — better for assistive tech than a restyled span. */
input[type="checkbox"],
input[type="radio"] {
	width: 24px;
	height: 24px;
	min-height: 0 !important;
	accent-color: var(--hd-brand-500);
}


/* ══════════════════════════════════════════════════════════════
   5. TOUCH TARGETS
   44×44 minimum. The audit found 18×18 social and account icons.
   ══════════════════════════════════════════════════════════════ */

.hd-touch,
.ast-header-social-1-wrap a,
.ast-site-header-cart a,
.ast-header-account-wrap a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hd-touch-min);
	min-height: var(--hd-touch-min);
}


/* ══════════════════════════════════════════════════════════════
   6. SKIP LINK
   Present but 1×1 today. Make it appear properly on focus.
   ══════════════════════════════════════════════════════════════ */

.skip-link:focus,
.skip-link:focus-visible {
	position: fixed !important;
	inset-block-start: var(--hd-space-3);
	inset-inline-start: var(--hd-space-3);
	z-index: var(--hd-z-toast);
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	padding: var(--hd-space-3) var(--hd-space-5);
	background: var(--hd-surface-page);
	color: var(--hd-text-link);
	font-weight: var(--hd-fw-medium);
	border-radius: var(--hd-radius-input);
	box-shadow: var(--hd-shadow-raised);
}


/* ══════════════════════════════════════════════════════════════
   7. MEDIA
   ══════════════════════════════════════════════════════════════ */

img, picture, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Do not force display:block / height:auto on every SVG — that clips
   Astra's scroll-to-top chevron and other inline UI icons. */
svg {
	max-width: 100%;
}

/* Astra scroll-to-top: centre the arrow inside the fixed button */
#ast-scroll-top {
	display: none;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	line-height: 1 !important;
	border-radius: 50%;
}

#ast-scroll-top.is-visible,
#ast-scroll-top[style*="display: block"],
#ast-scroll-top[style*="display:block"] {
	display: flex !important;
}

#ast-scroll-top .ast-icon.icon-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

#ast-scroll-top .ast-icon.icon-arrow svg {
	display: block;
	width: 1.15em;
	height: auto;
	max-width: none;
	margin: 0 !important;
	transform: translateY(0) rotate(180deg);
}

.hd-media {
	border-radius: var(--hd-radius-card);
	overflow: hidden;
	background-color: var(--hd-surface-sunken);
}

/* Reserve aspect ratio so images don't shift layout while loading */
.hd-media--square    { aspect-ratio: 1 / 1;  }
.hd-media--portrait  { aspect-ratio: 4 / 5;  }
.hd-media--landscape { aspect-ratio: 3 / 2;  }
.hd-media--map       { aspect-ratio: 16 / 9; }

.hd-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ══════════════════════════════════════════════════════════════
   8. UTILITIES
   ══════════════════════════════════════════════════════════════ */

.hd-stack       { display: flex; flex-direction: column; gap: var(--hd-space-4); }
.hd-stack--sm   { gap: var(--hd-space-2); }
.hd-stack--lg   { gap: var(--hd-space-6); }
.hd-row         { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hd-space-3); }
.hd-center      { text-align: center; }
.hd-center-x    { margin-inline: auto; }

.hd-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Tabular figures wherever prices or weights line up in columns */
.hd-num,
.woocommerce-Price-amount,
.hd-price {
	font-variant-numeric: tabular-nums;
}

/* Wide content must scroll inside itself, never the page body */
.hd-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}