/**
 * Base element styles.
 *
 * Carried-over Customizer CSS, the site-wide link colour, plus HAP
 * typography and colour for content that is not built with Elementor
 * widgets: classic-editor posts and Hello's page title. Elementor content
 * lives in elementor.css (typography) and ui.css (colour, buttons, links).
 * Policies: docs/typography.md, docs/brand-ui.md.
 *
 * No widths, spacing or layout.
 */

/* Carried over verbatim from Hello Elementor → Customizer → Additional CSS.
   The only !important in the theme; it predates the design system. */
.comments-area, #respond, .comment-respond { display: none !important; }

/* ------------------------------------------------------------------
 * Links
 * Replaces Hello's reset colours (#CC3366 pink, #333366 hover). Header,
 * footer and popup links set their own colours in Elementor, so only
 * links without a colour of their own change. Hello's focus ring
 * (2px outline + white halo) is kept.
 * ------------------------------------------------------------------ */

a {
	color: var(--hap-link);
}
a:hover,
a:active {
	color: var(--hap-link-hover);
}

/* ------------------------------------------------------------------
 * Classic-editor content (posts not built with Elementor)
 * body:not(.elementor-page) keeps these rules off Elementor documents.
 * ------------------------------------------------------------------ */

body:not(.elementor-page) .site-main .page-content {
	color: var(--hap-color-text);
	font-family: var(--hap-font-body);
	font-size: var(--hap-fs-body);
	line-height: var(--hap-lh-body);
}

/* Beats Hello's h1–h6 defaults and Elementor Theme Style's uppercase H2. */
body:not(.elementor-page) .site-main .page-content :is(h1, h2, h3, h4) {
	color: var(--hap-color-ink);
	font-family: var(--hap-font-display);
	font-weight: var(--hap-font-weight-semibold);
	line-height: var(--hap-lh-heading);
	letter-spacing: var(--hap-tracking-heading);
	text-transform: none;
}

body:not(.elementor-page) .site-main .page-content h1 {
	font-size: var(--hap-fs-h1);
	font-weight: var(--hap-font-weight-bold);
	line-height: var(--hap-lh-display);
}
body:not(.elementor-page) .site-main .page-content h2 { font-size: var(--hap-fs-h2); }
body:not(.elementor-page) .site-main .page-content h3 { font-size: var(--hap-fs-h3); }
body:not(.elementor-page) .site-main .page-content h4 { font-size: var(--hap-fs-h4); }

/* Hello already underlines these links; match the Elementor link style. */
body:not(.elementor-page) .site-main .page-content a {
	text-decoration-thickness: var(--hap-link-underline-thickness);
	text-underline-offset: var(--hap-link-underline-offset);
}
body:not(.elementor-page) .site-main .page-content a:hover {
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------
 * Hello page title (e.g. "HAP Insights" on the default page template)
 * Whether this title should appear at all is a separate
 * heading-structure item (docs/typography.md).
 * ------------------------------------------------------------------ */

.site-main .page-header .entry-title {
	color: var(--hap-color-ink);
	font-family: var(--hap-font-display);
	font-size: var(--hap-fs-h1);
	font-weight: var(--hap-font-weight-bold);
	line-height: var(--hap-lh-display);
	letter-spacing: var(--hap-tracking-heading);
	text-transform: none;
}