/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/**************************************************
 * Design tokens
 *
 * Colors and font families are NOT here - they live in the
 * Blocksy Customizer (Colors / Typography) and reach CSS as
 * --theme-palette-color-1..8 and the global font stack.
 * ***********************************************/
:root {
    /* --- Layout --- */
    --container-width: 1300px;  /* = GB / Blocksy container width */
    --logo-height: 1.25rem;
    --header-height: 4.5rem;

    /* --- Spacing --- */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-base: 1rem;
    --space-m: clamp(1.13rem, calc(1.00rem + 0.56vw), 1.50rem);
    --space-l: clamp(1.50rem, calc(1.33rem + 0.74vw), 2.00rem);
    --space-xl: clamp(2.25rem, calc(2.00rem + 1.11vw), 3.00rem);
    --space-2xl: clamp(3.00rem, calc(2.67rem + 1.48vw), 4.00rem);
    --space-3xl: clamp(3.75rem, calc(3.33rem + 1.85vw), 5.00rem);
    --space-section: clamp(3.5rem, calc(2.333rem + 3.889vw), 5.25rem);  /* 56 -> 84px */

    /* --- Font sizes --- */
    --font-2xs: 0.625rem;   /* 10px */
    --font-xs: 0.6875rem;   /* 11px */
    --font-s: 0.875rem;     /* 14px */
    --font-base: 1rem;      /* 16px */
    /* Viada scale: close to viada.lv (h1 25, h2 24, h3 22, h4 20px), slightly fluid */
    --font-h6: 0.875rem;    /* 14px */
    --font-h5: 1rem;        /* 16px */
    --font-h4: 1.125rem;    /* 18px */
    --font-h3: clamp(1.125rem, calc(1.08rem + 0.2vw), 1.25rem);   /* 18 -> 20 */
    --font-h2: clamp(1.25rem, calc(1.17rem + 0.3vw), 1.5rem);     /* 20 -> 24 */
    --font-h1: clamp(1.375rem, calc(1.25rem + 0.5vw), 1.625rem);  /* 22 -> 26 */
    --font-section-title: clamp(1.5rem, calc(1.3rem + 0.8vw), 2rem); /* 24 -> 32, section titles */
    --font-hero: clamp(2.375rem, 5vw, 3.875rem);                  /* 38 -> 62 */

    /* Mirrors the Customizer heading font, for non-<h*> elements */
    --font-headings: 'Roboto', Helvetica, Arial, sans-serif;

    /* --- Radii --- */
    --radius-s: 0.25rem;
    --radius-m: 0.5rem;
    --radius-l: 0.75rem;    /* app cards */
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* --- Shadows (neutral: Viada greys, no tint) --- */
    --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-m: 0 6px 22px rgba(0, 0, 0, 0.08);
    --shadow-l: 0 14px 40px rgba(0, 0, 0, 0.12);

    --transition: all 0.3s ease-in-out;

    /* --- Component: buttons --- */
    --button-radius: var(--radius-s);
    --button-padding: 0.75rem 1.5rem;
    --button-font-size: var(--font-s);
    --button-font-weight: 500;
    --button-primary-bg: var(--theme-palette-color-1, #d60131);
    --button-primary-color: var(--theme-palette-color-8, #ffffff);
    --button-primary-bg-hover: var(--theme-palette-color-2, #d60131);
    --button-secondary-bg: transparent;
    --button-secondary-color: var(--theme-palette-color-4, #1f1f1f);
    --button-secondary-border: 1px solid var(--theme-palette-color-4, #1f1f1f);

    /* --- Component: cards --- */
    --card-radius: var(--radius-l);
    --card-bg: var(--theme-palette-color-8, #ffffff);
    --card-shadow: var(--shadow-s);
    --card-padding: var(--space-l);
    --card-border: 1px solid #e3e3e3;

    /* --- One-off colors (too rare for a palette slot) --- */
    --color-muted: #5C5C5C;   /* secondary text on light */
    --color-line: #E3E3E3;    /* borders, dividers */
}

/**************************************************
 * Edge case: Viada app item pages (singles on the "Empty" header).
 * Blocksy renders these (featured image / classic content) with no block
 * to put a class on; the app list/text pages use .mobile-page instead.
 * L1fZlZ = the "Empty" header's id; update it if that header is recreated.
 * ***********************************************/
[data-header*="L1fZlZ"].single .site-main {
	padding-top: 1.25rem;
	padding-bottom: 1.875rem;
}

[data-header*="L1fZlZ"] .entry-content > * + * {
	margin-top: 1rem;
}

[data-header*="L1fZlZ"] .page-title {
	font-size: 1.25rem;
	font-weight: 400;
	text-align: center;
}

/* WS Form layout (design: "Viada – karšu pieteikuma forma"). WS Form renders sections in JS, so this can't be a GB Global Style.
   Section class (WS Form → section → Advanced → Wrapper CSS class): form-section = numbered heading, underlined, above its fields;
   form-section-cont = no heading or separator (Add-card button, consent + submit). */
.wsf-form {
	counter-reset: wsfsec wsfcard;
}

.wsf-form .wsf-section.form-section {
	counter-increment: wsfsec;
	margin-top: var(--space-m);
	padding: var(--space-l) var(--space-l) var(--space-2xs);
	background-color: var(--color-surface, #f2f2f2);
	border-radius: var(--radius-l);
}

.wsf-form .wsf-section.form-section > legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--space-m);
	padding: 0 0 var(--space-xs);
	border-bottom: 1px solid var(--color-line, #e3e3e3);
	font-size: var(--font-h4);
	font-weight: 600;
	line-height: 1.3;
}

.wsf-form .wsf-section.form-section > legend::before {
	content: counter(wsfsec) ".";
	margin-right: var(--space-xs);
	color: var(--theme-palette-color-1, #d60131);
}

.wsf-form .wsf-section.form-section > legend + * {
	clear: both;
}

/* Sections without a panel (Pievienot karti, consent + submit): a gap after the panel above. */
.wsf-form .wsf-section.form-section-cont {
	margin-top: var(--space-s);
}

/* Repeatable cards: WS Form repeats the whole section. The first copy is the numbered section; the others are just
   another card under it (no heading, no rule, no number), split by a dashed line. "Karte N" comes from a counter. */
.wsf-form .wsf-section[data-repeatable] {
	counter-increment: wsfsec wsfcard;
}

.wsf-form .wsf-section[data-repeatable]:not([data-repeatable-index="1"]) {
	counter-increment: wsfcard;
	margin-top: var(--space-s);
}

.wsf-form .wsf-section[data-repeatable]:not([data-repeatable-index="1"]) > legend {
	display: none;
}

.wsf-form .card-title {
	margin: 0 0 var(--space-xs);
	font-weight: 600;
}

.wsf-form .card-title::after {
	content: " " counter(wsfcard);
}

.wsf-form .card-remove {
	display: flex;
	justify-content: flex-end;
}

.wsf-form .card-remove .wsf-button.wsf-button-danger {
	--wsf-field-button-danger-color-hover: var(--theme-palette-color-1, #d60131);
	--wsf-field-button-danger-color-background-hover: transparent;
	--wsf-field-button-danger-border-color-hover: transparent;
	--wsf-field-button-danger-color-focus: var(--theme-palette-color-1, #d60131);
	--wsf-field-button-danger-color-background-focus: transparent;
	--wsf-field-button-danger-border-color-focus: transparent;
	background-color: transparent;
	width: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-muted, #5c5c5c);
	font-size: var(--font-s);
	text-decoration: underline;
}

.wsf-form .wsf-field-wrapper.card-remove .wsf-button.wsf-button-danger:is(:hover, :focus, :active) {
	background-color: transparent;
	box-shadow: none;
	color: var(--theme-palette-color-1, #d60131);
}

.wsf-form .card-remove .wsf-button.wsf-button-danger[disabled] {
	display: none;
}

.wsf-form .card-add .wsf-button {
	width: auto;
	padding: 7px 16px;
	font-weight: 500;
}

.wsf-form .card-add .wsf-button::before {
	content: "+";
	margin-right: var(--space-xs);
	font-size: 1.15em;
}

.wsf-form .wsf-field-wrapper .wsf-help {
	color: var(--color-muted, #5c5c5c);
	font-size: 0.75rem;
}

.wsf-form .field-group-label {
	margin: 0 0 var(--space-xs);
	color: var(--color-muted, #5c5c5c);
	font-size: var(--font-s);
}

/* Number fields (limits, litres): no spinner arrows. */
.wsf-form input[type="number"] {
	-moz-appearance: textfield;
}

.wsf-form input[type="number"]::-webkit-inner-spin-button,
.wsf-form input[type="number"]::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}