/*
Theme Name:   Broadband.click
Theme URI:    https://broadband.click
Description:  Child of Hello Elementor for broadband.click. Carries the design-token layer (tokens.css) that Elementor page furniture and the comparison plugin both consume, plus the base editorial styling. Colour, type and spacing decisions live in tokens.css — edit there, not here.
Author:       broadband.click
Template:     hello-elementor
Version:      1.0.0
Requires PHP: 8.1
Tested up to: 7.0
License:      GPL-2.0-or-later
Text Domain:  broadband-click
*/

/* ============================================================
   Base — consumes var(--bbc-*) only. No literals below this
   line except where a value cannot be a token (e.g. 1px).
   ============================================================ */

body {
	background: var(--bbc-bg);
	color: var(--bbc-text);
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-base);
	line-height: var(--bbc-lh-base);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "tnum" 1, "zero" 1, "ss02" 1;
}

/* Editorial long-form gets the serif; UI keeps Inter. */
h1, h2, h3, h4,
.entry-content p,
.entry-content li {
	font-family: var(--bbc-font-serif);
}

h1, h2, h3, h4 {
	color: var(--bbc-text);
	font-weight: var(--bbc-weight-semi);
	text-wrap: balance;
	margin: 0 0 var(--bbc-space-4);
}

h1 { font-size: var(--bbc-text-3xl); line-height: var(--bbc-lh-3xl); letter-spacing: -0.015em; }
h2 { font-size: var(--bbc-text-2xl); line-height: var(--bbc-lh-2xl); margin-top: var(--bbc-space-7); }
h3 { font-size: var(--bbc-text-xl);  line-height: var(--bbc-lh-xl);  margin-top: var(--bbc-space-6); }
h4 { font-size: var(--bbc-text-lg);  line-height: var(--bbc-lh-lg);  margin-top: var(--bbc-space-5); }

.entry-content p,
.entry-content li {
	font-size: var(--bbc-text-md);
	line-height: var(--bbc-lh-md);
}

.entry-content > * {
	max-width: var(--bbc-measure);
}

/* Tables carry data — they get the full width and the sans face. */
.entry-content > .wp-block-table,
.entry-content > .wp-block-separator {
	max-width: none;
}

a {
	color: var(--bbc-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}
a:hover { text-decoration-thickness: 2px; }
a:visited { color: var(--bbc-link-visited); }

/* Two-tone focus ring — legible on paper, ink and Signal alike. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--bbc-focus-ring);
	border-radius: var(--bbc-radius-1);
}

/* ---- Tables ------------------------------------------------ */
.wp-block-table { margin: var(--bbc-space-6) 0; }

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	line-height: var(--bbc-lh-sm);
	background: var(--bbc-surface);
	border: 1px solid var(--bbc-border-strong);
	border-radius: var(--bbc-radius-2);
}

.wp-block-table th {
	background: var(--bbc-surface-2);
	color: var(--bbc-text);
	font-weight: var(--bbc-weight-semi);
	text-align: left;
	padding: var(--bbc-space-3);
	border-bottom: 1px solid var(--bbc-border-strong);
}

.wp-block-table td {
	padding: var(--bbc-space-3);
	border-bottom: 1px solid var(--bbc-border);
	vertical-align: top;
}

.wp-block-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table tbody tr:nth-child(even) { background: var(--bbc-surface-2); }

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.wp-block-table { overflow-x: auto; }

/* ---- Lists, quotes, rules ---------------------------------- */
.entry-content ul, .entry-content ol { padding-left: var(--bbc-space-5); }
.entry-content li + li { margin-top: var(--bbc-space-2); }

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--bbc-border);
	margin: var(--bbc-space-7) auto;
	max-width: var(--bbc-measure);
}

code {
	font-size: 0.9em;
	background: var(--bbc-surface-2);
	border: 1px solid var(--bbc-border);
	border-radius: var(--bbc-radius-1);
	padding: 0.1em 0.35em;
}

/* ---- Sources block: credibility furniture ------------------- */
.bbc-sources {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-sm);
	line-height: var(--bbc-lh-sm);
	color: var(--bbc-text-muted);
	background: var(--bbc-surface-2);
	border: 1px solid var(--bbc-border);
	border-radius: var(--bbc-radius-2);
	padding: var(--bbc-space-4) var(--bbc-space-4) var(--bbc-space-4) var(--bbc-space-6);
}
.bbc-sources li + li { margin-top: var(--bbc-space-2); }

/* ---- Buttons ----------------------------------------------- */
.wp-block-button__link,
button:not(.bbc-plain),
input[type="submit"] {
	background: var(--bbc-cta-bg);
	color: var(--bbc-cta-fg);
	font-family: var(--bbc-font-sans);
	font-weight: var(--bbc-weight-semi);
	border: 0;
	border-radius: var(--bbc-radius-1);
	min-height: var(--bbc-tap-min);
	padding: var(--bbc-space-3) var(--bbc-space-5);
	transition: background var(--bbc-dur-1) var(--bbc-ease);
}
.wp-block-button__link:hover,
button:not(.bbc-plain):hover,
input[type="submit"]:hover {
	background: var(--bbc-cta-bg-hover);
	color: var(--bbc-cta-fg);
}

/* ---- Forms -------------------------------------------------- */
input[type="text"], input[type="search"], input[type="email"], select, textarea {
	font-family: var(--bbc-font-sans);
	font-size: var(--bbc-text-base);
	color: var(--bbc-text);
	background: var(--bbc-surface);
	border: 1px solid var(--bbc-border-strong);
	border-radius: var(--bbc-radius-1);
	min-height: var(--bbc-tap-min);
	padding: var(--bbc-space-2) var(--bbc-space-3);
}

/* ---- Skip link (Hello ships one; make it visible on focus) --- */
.skip-link:focus {
	background: var(--bbc-surface);
	color: var(--bbc-text);
	box-shadow: var(--bbc-focus-ring);
}

/* ---- Site chrome -------------------------------------------- */
.site-header { border-bottom: 1px solid var(--bbc-border-strong); background: var(--bbc-surface); }
.site-footer { border-top: 1px solid var(--bbc-border-strong); background: var(--bbc-surface-2); }