/*
Theme Name:   Hello Elementor Child
Theme URI:    https://digitalcraft.ro/
Description:  Child theme for Hello Elementor. Adds the blog templates Elementor Free cannot build (single post, archive, search), a blog sidebar, and a pageview counter. All colours and fonts resolve against Elementor's Global Colors and Global Fonts, so a project rebrands from Site Settings with no edits here.
Author:       Digital Craft
Author URI:   https://digitalcraft.ro/
Template:     hello-elementor
Version:      1.3.2
Requires PHP: 8.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-elementor-child
*/

/* ==========================================================================
   IMPORTANT — how colours and fonts work here

   Elementor writes its global variables onto the `.elementor-kit-{id}` class that
   sits on <body>, NOT onto :root. The id differs on every install, so this file
   must rely on inheritance: `color: var(--e-global-color-primary)` on any element
   works, because the variable is inherited from body.

   A declaration like `:root { --x: var(--e-global-color-primary) }` would silently
   fail. Never do that.

   Local variables below are declared on `body` for the same reason.
   ========================================================================== */

body {
	/* Motion — three durations, applied consistently. */
	--hec-t-fast: 200ms;
	--hec-t-base: 300ms;
	--hec-t-slow: 500ms;
	--hec-ease: ease-in-out;

	/* Rhythm */
	--hec-gap: 24px;
	--hec-gap-lg: 48px;
	--hec-radius: 6px;
	--hec-max: 1200px;

	/* Derived from Elementor globals, with literal fallbacks so the blog still
	   renders sanely if a kit is missing or a colour role was removed. */
	--hec-c-heading: var(--e-global-color-primary, #1a1a1a);
	--hec-c-body: var(--e-global-color-text, #333333);
	--hec-c-muted: var(--e-global-color-secondary, #4a4a4a);
	--hec-c-accent: var(--e-global-color-accent, #0b5fff);
	--hec-c-bg: var(--e-global-color-background, #ffffff);
	--hec-c-line: rgba(0, 0, 0, 0.1);
	--hec-c-surface: rgba(0, 0, 0, 0.025);

	--hec-f-heading: var(--e-global-typography-primary-font-family, inherit);
	--hec-f-body: var(--e-global-typography-text-font-family, inherit);
}

/* --------------------------------------------------------------------------
   1. Minimal reset
   Hello Elementor's own reset is kept — Elementor assumes a baseline exists, and
   recreating it would be work plus a new surface for bugs for a few KB of gain.
   Only what's missing is added.
   -------------------------------------------------------------------------- */

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

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

/* --------------------------------------------------------------------------
   2. Base typography for blog templates
   Scoped to .hec-* so nothing here can leak into Elementor-built pages.
   -------------------------------------------------------------------------- */

.hec-main {
	color: var(--hec-c-body);
	font-family: var(--hec-f-body);
	padding-block: var(--hec-gap-lg);
}

.hec-main h1,
.hec-main h2,
.hec-main h3,
.hec-main h4 {
	color: var(--hec-c-heading);
	font-family: var(--hec-f-heading);
	line-height: 1.25;
	margin-block: 0 0.6em;
}

.hec-main a {
	color: var(--hec-c-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--hec-t-fast) var(--hec-ease);
}

.hec-main a:hover {
	color: var(--hec-c-heading);
}

/* --------------------------------------------------------------------------
   3. Container and 70/30 layout
   -------------------------------------------------------------------------- */

.hec-container {
	width: 100%;
	max-width: var(--hec-max);
	margin-inline: auto;
	padding-inline: 20px;
}

.hec-layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	gap: var(--hec-gap-lg);
	align-items: start;
}

/* Without a sidebar the content shouldn't stretch to 1200px — long lines are
   tiring to read. */
.hec-main:not(.hec-main--has-sidebar) .hec-layout,
.hec-layout:has(> .hec-content:only-child) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 800px;
}

/* --------------------------------------------------------------------------
   4. Single post
   -------------------------------------------------------------------------- */

.hec-post__title {
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
}

/* The lead is the excerpt: written once, it serves as the meta description, this
   paragraph, and the card text on the listing. Styled larger than body copy so it
   reads as a summary rather than a first paragraph. */
.hec-post__lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--hec-c-muted);
	margin-block: 0 var(--hec-gap);
}

.hec-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--hec-c-muted);
	margin-block: 0 var(--hec-gap);
	padding-block-end: var(--hec-gap);
	border-block-end: 1px solid var(--hec-c-line);
}

.hec-meta a {
	color: inherit;
}

.hec-meta__sep {
	opacity: 0.5;
}

.hec-post__thumb {
	margin: 0 0 var(--hec-gap-lg);
}

.hec-post__thumb img {
	width: 100%;
	border-radius: var(--hec-radius);
	display: block;
}

.hec-post__thumb figcaption {
	font-size: 0.8125rem;
	color: var(--hec-c-muted);
	margin-block-start: 8px;
}

.hec-post__content {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.hec-post__content > * + * {
	margin-block-start: 1.2em;
}

.hec-post__content h2 {
	font-size: 1.6rem;
	margin-block-start: 1.8em;
}

.hec-post__content h3 {
	font-size: 1.3rem;
	margin-block-start: 1.5em;
}

.hec-post__content ul,
.hec-post__content ol {
	padding-inline-start: 1.4em;
}

.hec-post__content li + li {
	margin-block-start: 0.4em;
}

.hec-post__content blockquote {
	margin-inline: 0;
	padding: var(--hec-gap);
	border-inline-start: 3px solid var(--hec-c-accent);
	background: var(--hec-c-surface);
	font-size: 1.0625rem;
}

.hec-post__content blockquote > :last-child {
	margin-block-end: 0;
}

.hec-post__content img {
	border-radius: var(--hec-radius);
}

.hec-post__content figure {
	margin-inline: 0;
}

.hec-post__content table {
	width: 100%;
	border-collapse: collapse;
}

.hec-post__content th,
.hec-post__content td {
	padding: 10px 12px;
	border: 1px solid var(--hec-c-line);
	text-align: start;
}

/* Long words and URLs shouldn't force horizontal scroll on phones. */
.hec-post__content {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   5. Author box
   -------------------------------------------------------------------------- */

.hec-author {
	margin-block-start: var(--hec-gap-lg);
	padding: var(--hec-gap);
	background: var(--hec-c-surface);
	border-radius: var(--hec-radius);
}

.hec-author__name {
	font-size: 1.0625rem;
	margin-block-end: 0.3em;
}

.hec-author__bio {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--hec-c-muted);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. Previous / next navigation
   -------------------------------------------------------------------------- */

.hec-postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hec-gap);
	margin-block-start: var(--hec-gap-lg);
	padding-block-start: var(--hec-gap);
	border-block-start: 1px solid var(--hec-c-line);
}

.hec-postnav__link {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--hec-c-line);
	border-radius: var(--hec-radius);
	text-decoration: none;
	transition: border-color var(--hec-t-base) var(--hec-ease),
		transform var(--hec-t-base) var(--hec-ease);
}

.hec-postnav__link:hover {
	border-color: var(--hec-c-accent);
	transform: translateY(-2px);
}

.hec-postnav__link--next {
	text-align: end;
}

.hec-postnav__label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hec-c-muted);
	margin-block-end: 4px;
}

.hec-postnav__title {
	display: block;
	color: var(--hec-c-heading);
	font-family: var(--hec-f-heading);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   7. Archive and search
   -------------------------------------------------------------------------- */

.hec-archive__header {
	margin-block-end: var(--hec-gap-lg);
}

.hec-archive__title {
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
}

.hec-archive__desc,
.hec-archive__count {
	color: var(--hec-c-muted);
	max-width: 70ch;
}

.hec-archive__query {
	color: var(--hec-c-accent);
}

.hec-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--hec-gap);
}

/* Cards: entrance is left to CSS-free simplicity here, but hover follows the
   project motion system — lift 4px plus a deeper shadow over 300ms. */
.hec-card {
	display: flex;
	flex-direction: column;
	background: var(--hec-c-bg);
	border: 1px solid var(--hec-c-line);
	border-radius: var(--hec-radius);
	overflow: hidden;
	transition: transform var(--hec-t-base) var(--hec-ease),
		box-shadow var(--hec-t-base) var(--hec-ease);
}

.hec-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.hec-card__media {
	display: block;
	overflow: hidden;
}

.hec-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform var(--hec-t-base) var(--hec-ease);
}

/* Images scale on hover but never move on entrance — sliding images look cheap. */
.hec-card:hover .hec-card__media img {
	transform: scale(1.05);
}

.hec-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
}

.hec-card__title {
	font-size: 1.0625rem;
	margin: 0;
}

.hec-card__title a {
	text-decoration: none;
	color: var(--hec-c-heading);
}

.hec-card__title a:hover {
	color: var(--hec-c-accent);
}

.hec-card__lead {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--hec-c-muted);
}

.hec-card__meta {
	margin: auto 0 0;
	font-size: 0.8125rem;
	color: var(--hec-c-muted);
}

.hec-empty {
	padding: var(--hec-gap);
	background: var(--hec-c-surface);
	border-radius: var(--hec-radius);
}

/* --------------------------------------------------------------------------
   8. Pagination
   -------------------------------------------------------------------------- */

.hec-pagination {
	margin-block-start: var(--hec-gap-lg);
}

.hec-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hec-pagination a,
.hec-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--hec-c-line);
	border-radius: var(--hec-radius);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: border-color var(--hec-t-fast) var(--hec-ease),
		background-color var(--hec-t-fast) var(--hec-ease);
}

.hec-pagination a:hover {
	border-color: var(--hec-c-accent);
}

.hec-pagination .current {
	background: var(--hec-c-accent);
	border-color: var(--hec-c-accent);
	color: #fff;
}

/* --------------------------------------------------------------------------
   9. Sidebar and widgets
   -------------------------------------------------------------------------- */

.hec-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--hec-gap-lg);
}

.hec-widget__title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-block-end: 10px;
	border-block-end: 2px solid var(--hec-c-accent);
	margin-block-end: 14px;
}

.hec-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hec-widget li {
	padding-block: 8px;
	border-block-end: 1px solid var(--hec-c-line);
	font-size: 0.9375rem;
}

.hec-widget li:last-child {
	border-block-end: 0;
}

.hec-widget a {
	text-decoration: none;
	color: var(--hec-c-body);
}

.hec-widget a:hover {
	color: var(--hec-c-accent);
}

.hec-postlist__link {
	display: block;
	font-family: var(--hec-f-heading);
	line-height: 1.4;
}

.hec-postlist__date {
	display: block;
	font-size: 0.8125rem;
	color: var(--hec-c-muted);
	margin-block-start: 3px;
}

/* Native "Recent Posts" widget markup */
.hec-widget .wp-block-latest-posts__post-date,
.hec-widget .post-date {
	display: block;
	font-size: 0.8125rem;
	color: var(--hec-c-muted);
}

/* Category counts */
.hec-widget .cat-item .count {
	color: var(--hec-c-muted);
	font-size: 0.8125rem;
}

/* Search form inside widgets and empty states */
.hec-widget .search-form,
.hec-empty .search-form {
	display: flex;
	gap: 8px;
	margin-block-start: 12px;
}

.hec-widget .search-field,
.hec-empty .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--hec-c-line);
	border-radius: var(--hec-radius);
	font: inherit;
}

.hec-widget .search-submit,
.hec-empty .search-submit {
	padding: 10px 16px;
	border: 0;
	border-radius: var(--hec-radius);
	background: var(--hec-c-accent);
	color: #fff;
	font: inherit;
	cursor: pointer;
	transition: opacity var(--hec-t-fast) var(--hec-ease);
}

.hec-widget .search-submit:hover,
.hec-empty .search-submit:hover {
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   4b. Static pages
   Only used for pages NOT built with Elementor (legal text entered directly, for
   example). Elementor pages provide their own layout and ignore all of this.
   -------------------------------------------------------------------------- */

.hec-page {
	max-width: 800px;
}

.hec-page__title {
	font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem);
	margin-block-end: var(--hec-gap);
}

.hec-page__content {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.hec-page__content > * + * {
	margin-block-start: 1.2em;
}

.hec-page__content h2 {
	font-size: 1.5rem;
	margin-block-start: 1.8em;
}

.hec-page__content h3 {
	font-size: 1.25rem;
	margin-block-start: 1.5em;
}

.hec-page__content ul,
.hec-page__content ol {
	padding-inline-start: 1.4em;
}

.hec-page__content li + li {
	margin-block-start: 0.4em;
}

.hec-page__content table {
	width: 100%;
	border-collapse: collapse;
}

.hec-page__content th,
.hec-page__content td {
	padding: 10px 12px;
	border: 1px solid var(--hec-c-line);
	text-align: start;
}

/* --------------------------------------------------------------------------
   9b. Breadcrumbs
   Output comes from Yoast, so the markup is a flat sequence of links with a
   separator — style defensively rather than assuming a list structure.
   -------------------------------------------------------------------------- */

.hec-breadcrumbs {
	font-size: 0.8125rem;
	color: var(--hec-c-muted);
	margin-block-end: var(--hec-gap);
	line-height: 1.5;
}

.hec-breadcrumbs a {
	color: var(--hec-c-muted);
	text-decoration: none;
}

.hec-breadcrumbs a:hover {
	color: var(--hec-c-accent);
	text-decoration: underline;
}

/* The current page is not a link; Yoast wraps it in <span class="breadcrumb_last">. */
.hec-breadcrumbs .breadcrumb_last {
	color: var(--hec-c-heading);
}

/* On a phone a long trail should wrap rather than force horizontal scroll. */
@media (max-width: 640px) {
	.hec-breadcrumbs {
		font-size: 0.75rem;
		overflow-wrap: break-word;
	}
}

/* --------------------------------------------------------------------------
   9c. Elementor-built areas: footer contrast and shortcode output

   Widget settings can colour a widget's own text, but they cannot reach inside
   the output of a Shortcode widget — and that is exactly where the footer's
   contact details live. Left alone, they inherit the body colour (near-black) and
   the accent link colour (dark blue), both invisible on a dark footer.

   Rather than guessing at UAE's markup classes, the shortcode output is wrapped in
   a class this theme owns, and styled here. Anything under our own class is
   predictable; anything under a plugin's class is not.
   -------------------------------------------------------------------------- */

.dca-footer-contact {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* Links must be legible and obviously clickable without relying on colour alone,
   which is also what makes them usable for someone who cannot distinguish it. */
.dca-footer-contact a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.32);
	transition: border-color var(--hec-t-fast, 200ms) ease-in-out;
}

.dca-footer-contact a:hover,
.dca-footer-contact a:focus-visible {
	border-bottom-color: #fff;
}

.dca-footer-contact strong {
	color: #fff;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   9c-bis. Shortcode output styled as a button

   The header's call-to-action is a phone number, and the number has to come from
   Contact Details Craft so it stays in one place. Elementor Free has no dynamic
   tags, so a Button widget cannot read it — the number would have to be typed into
   the widget and would then drift out of sync with the plugin.

   The way out is a Shortcode widget wrapped in a class this theme owns, styled to
   look like a button. The data stays in one place and the appearance matches the
   Global button style.
   -------------------------------------------------------------------------- */

.dca-btn a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 6px;
	background: var(--e-global-color-accent, #0b5fff);
	color: #fff !important;
	font-family: var(--e-global-typography-accent-font-family, inherit);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 300ms ease-in-out, transform 300ms ease-in-out;
}

.dca-btn a:hover,
.dca-btn a:focus-visible {
	background: var(--e-global-color-primary, #1a1a1a);
	color: #fff !important;
	transform: translateY(-1px);
}

/* A phone icon drawn in CSS rather than loaded as an icon font: the header is the
   most latency-sensitive part of the page, and this costs nothing. */
.dca-btn--phone a::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	background-color: currentColor;
	-webkit-mask: var(--dca-phone-icon) center / contain no-repeat;
	mask: var(--dca-phone-icon) center / contain no-repeat;
}

body {
	--dca-phone-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.4 0 .8-.2 1l-2.2 2.3z"/></svg>');
}

/* --------------------------------------------------------------------------
   9c-ter. Footer legal line

   Same reasoning as the contact block: the Copyright widget's own colour settings
   are not introspectable through the API, and its output is a shortcode, so the
   text inherits the near-black body colour. Wrapping it in our own class makes it
   predictable.
   -------------------------------------------------------------------------- */

.dca-footer-legal {
	color: rgba(255, 255, 255, 0.62);
	font-family: var(--e-global-typography-text-font-family, inherit);
	font-size: 0.875rem;
	line-height: 1.6;
	text-align: center;
}

/*
 * The winning rule for this link is UAE's own, and it is more specific than a single
 * class can beat:
 *
 *   .elementor-widget-copyright .hfe-copyright-wrapper a  ->  var(--e-global-color-text)
 *
 * Two classes plus an element outranks one class plus an element, so load order never
 * comes into it — the near-black body colour wins and the link disappears on the dark
 * footer.
 *
 * The fix raises specificity to match rather than relying on !important alone, and keeps
 * !important as a second line of defence in case the plugin's selector changes again.
 * This is a deliberate override of plugin output that cannot be configured any other way.
 */
.dca-footer-legal a,
.elementor-widget-copyright .dca-footer-legal a,
.dca-footer-legal .hfe-copyright-wrapper a {
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.dca-footer-legal a:hover,
.dca-footer-legal a:focus-visible,
.elementor-widget-copyright .dca-footer-legal a:hover,
.elementor-widget-copyright .dca-footer-legal a:focus-visible {
	color: #fff !important;
	border-bottom-color: #fff;
}

/* The wrapper text itself is coloured by the same plugin rule. */
.dca-footer-legal,
.elementor-widget-copyright .dca-footer-legal,
.dca-footer-legal .hfe-copyright-wrapper {
	color: rgba(255, 255, 255, 0.62) !important;
}

/* --------------------------------------------------------------------------
   9d. Header safety net

   The header is the one region where an element overflowing its container
   produces horizontal scroll across the entire site. Percentage widths handle
   this in the layout itself; these rules stop a single oversized element — a logo
   swapped for a wider file, a long menu label — from breaking the page.
   -------------------------------------------------------------------------- */

header .e-con,
header .e-con-inner {
	max-width: 100%;
}

header img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   10. Accessibility
   Keyboard focus must be visible. This is not optional: an invisible focus ring
   makes the site unusable without a mouse.
   -------------------------------------------------------------------------- */

.hec-main :focus-visible,
.hec-sidebar :focus-visible {
	outline: 2px solid var(--hec-c-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   11. Reduced motion
   The one motion rule that cannot live in Elementor, because there is no native
   control for it. Required: motion causes genuine nausea for some people.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   12. Responsive — 960 and 640, matching Elementor's breakpoints exactly

   The sidebar drops below the content at 960, not 640: between 641 and 960 a 30%
   column is only 190-290px, too narrow to be useful.
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
	body {
		--hec-gap-lg: 36px;
	}

	.hec-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.hec-sidebar {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--hec-gap-lg);
		padding-block-start: var(--hec-gap);
		border-block-start: 1px solid var(--hec-c-line);
	}

	.hec-sidebar > * {
		flex: 1 1 240px;
	}

	/* Content cards: 3 columns become 2 in the tablet band. */
	.hec-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	body {
		--hec-gap-lg: 28px;
	}

	.hec-main {
		padding-block: var(--hec-gap-lg);
	}

	.hec-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hec-sidebar {
		flex-direction: column;
	}

	.hec-post__lead {
		font-size: 1.0625rem;
	}

	.hec-post__content {
		font-size: 1rem;
	}

	/* Two side-by-side nav links are cramped on a phone. */
	.hec-postnav {
		grid-template-columns: minmax(0, 1fr);
	}

	.hec-postnav__link--next {
		text-align: start;
	}
}

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */

@media print {
	.hec-sidebar,
	.hec-postnav,
	.hec-pagination {
		display: none !important;
	}

	.hec-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* -------------------------------------------------------------------------
 * Alternating image + text row
 *
 * The top line of the text has to sit exactly level with the top edge of the
 * image. Setting align-items: flex-start is not enough: a heading carries empty
 * space above its letters, because the line box is taller than the glyphs, while
 * an image starts at zero. The gap that shows up is that leading, not padding.
 *
 * text-box-trim removes exactly that space, so the alignment is arithmetic rather
 * than eyeballed. Where it is unsupported, a negative margin derived from the
 * line-height lands within a pixel of the same result.
 * ---------------------------------------------------------------------- */
.dca-row-text > *:first-child {
	margin-top: 0;
	text-box: trim-start cap alphabetic;
}

@supports not (text-box: trim-start cap alphabetic) {
	.dca-row-text > *:first-child {
		margin-top: -0.14em;
	}
}

/* The image fills its column and never overflows it, whatever aspect ratio the
   project uses — the ratio is a content decision, the geometry around it is not. */
.dca-row-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hec-radius, 6px);
}


/* -------------------------------------------------------------------------
 * Utility: push an element to the bottom of its flex column
 *
 * Cards laid out side by side stretch to equal height, which means a card with
 * less text leaves empty space below its content. Without this, each card's
 * button sits directly under its own text and the three buttons land on three
 * different lines — the most common tell that a card row was not thought
 * through.
 *
 * margin-top:auto absorbs the leftover space above the element, so the last
 * item in every card ends up on the same baseline regardless of text length.
 * Applies to cards, testimonials, pricing tables — anything in a stretched row.
 * ---------------------------------------------------------------------- */
.dca-push-bottom {
	margin-top: auto;
}


/* =========================================================================
 * SPACING SCALE
 *
 * One set of tokens for the whole site, so vertical rhythm is adjustable from
 * a single place rather than section by section.
 *
 * The hard rule: never more than 48px of padding on one vertical side. Larger
 * values look generous on a 27" monitor and absurd everywhere else, and they
 * push real content below the fold for no gain.
 * ====================================================================== */
:root {
	--dca-space-2xs: 4px;
	--dca-space-xs:  8px;
	--dca-space-sm:  16px;
	--dca-space-md:  24px;
	--dca-space-lg:  32px;
	--dca-space-xl:  48px;  /* ceiling for vertical padding */

	--dca-flow:       var(--dca-space-md);
	--dca-flow-tight: var(--dca-space-sm);
}

/* Text rhythm — scoped to our own widgets, so nothing outside is affected. */
.elementor-widget-text-editor > .elementor-widget-container > *:first-child,
.elementor-widget-heading .elementor-heading-title {
	margin-top: 0;
}

.elementor-widget-text-editor p + p,
.elementor-widget-text-editor p + ul,
.elementor-widget-text-editor p + ol {
	margin-top: var(--dca-flow);
}

.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-text-editor h4 {
	margin-top: var(--dca-space-lg);
	margin-bottom: var(--dca-flow-tight);
}

/* -------------------------------------------------------------------------
 * Nested accordion: give the answer room to breathe
 *
 * The border sits on the accordion item while the container holding the answer
 * ships with zero horizontal padding, so the text ends up touching the border.
 * Padding rather than margin, because the border belongs to the parent.
 *
 * Note: the question's padding is set on the widget itself
 * (`accordion_padding`), because Elementor's element-ID CSS beats any class
 * selector written here.
 * ---------------------------------------------------------------------- */
.e-n-accordion-item > .e-con {
	padding-inline: var(--dca-space-md);
	padding-block: var(--dca-space-sm) var(--dca-space-md);
}

/* -------------------------------------------------------------------------
 * Sections on a dark background
 *
 * A safety net, not the primary mechanism: the shipped widgets carry explicit
 * light colours of their own, so the text stays readable even without this
 * file. What this adds is coverage for whatever a client drags in later.
 * ---------------------------------------------------------------------- */
.dca-invert,
.dca-invert p,
.dca-invert h1, .dca-invert h2, .dca-invert h3,
.dca-invert h4, .dca-invert h5, .dca-invert h6,
.dca-invert li,
.dca-invert .elementor-heading-title {
	color: #FFFFFF;
}

.dca-invert a:not(.elementor-button) {
	color: #FFFFFF;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Form inside a section: keep it compact
 * ---------------------------------------------------------------------- */
.dca-form-compact .fluentform .ff-el-group {
	margin-bottom: var(--dca-flow-tight);
}

.dca-form-compact .fluentform textarea {
	min-height: 110px;
}


/* A call to action carries the page's main ask, so its supporting line is one
   step larger than body copy rather than the same size. */
.dca-cta-text p {
	font-size: 20px;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.dca-cta-text p { font-size: 18px; }
}

/* -------------------------------------------------------------------------
 * Step number
 *
 * A number is a graphic element, not a heading: it carries no meaning for a
 * screen reader or a search engine, and using h2/h3 for it breaks the heading
 * outline of the page. Styled as plain text instead, at the size a heading
 * would have had.
 * ---------------------------------------------------------------------- */
.dca-step-number p {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	margin: 0;
	color: var(--e-global-color-accent);
}

@media (max-width: 640px) {
	.dca-step-number p { font-size: 32px; }
}

/* Cookie Craft — comparison table (Draft 2) */

.cc-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;border:1px solid var(--e-global-color-line);border-radius:10px}
.cc-compare{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.cc-compare th,.cc-compare td{padding:13px 16px;border-bottom:1px solid var(--e-global-color-line);text-align:left;vertical-align:top}
.cc-compare tbody tr:last-child td{border-bottom:0}
.cc-compare thead th{background:var(--e-global-color-surface);font-weight:700}
.cc-compare thead th:nth-child(2){color:var(--e-global-color-accent)}
.cc-compare td.cc-yes{color:var(--e-global-color-primary);font-weight:600}
.cc-rich table{width:100%}


/* header logo vertical alignment (Draft 2 v3) */
.elementor-element-4a36747 .hfe-site-logo-img{position:relative;top:4px}