/*
Theme Name:   Mentia
Theme URI:    https://mentia.me
Description:  Child theme for the Mentia website. Carries the brand's base typography and the small number of styles that genuinely belong to a theme — everything editors touch lives in Elementor, and the custom widgets live in the Mentia Elements plugin.
Author:       Topham Guerin
Version:      0.2.1
Template:     hello-elementor
Text Domain:  mentia
Requires PHP: 8.1
*/

/* ------------------------------------------------------------------
   This file is deliberately short.

   Brand colours and the type scale are set in Elementor's Site Settings
   (the Kit), so Mentia can see and adjust them. Repeating them here would
   create a second source of truth that silently overrides the first.

   What belongs here: base document styles Elementor has no control over,
   and accessibility defaults that must not depend on a widget being
   configured correctly.
   ------------------------------------------------------------------ */

/* Roboto is loaded locally by the theme rather than from Google's CDN —
   no third-party request on every page load, and nothing for the cookie
   banner to have an opinion about. */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings wrap sensibly rather than leaving orphans. The design relies on
   two- and three-line headlines holding their shape. */
h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* ------------------------------------------------------------------
   Accessibility floor — these must hold whatever an editor does in
   Elementor, so they are not left to widget settings.
   ------------------------------------------------------------------ */

/* Visible keyboard focus everywhere. Elementor's defaults are inconsistent
   across widgets, and an invisible focus ring fails the whole site. */
:focus-visible {
  outline: 3px solid var(--e-global-color-accent, #d2682e);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — present in the markup but only visible once focused. */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2147483647;
  padding: 12px 20px;
  background: var(--e-global-color-primary, #22376f);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 10px 0;
}
.skip-to-content:focus {
  left: 0;
}

/* Images never overflow their container, whatever is uploaded. */
img, svg, video {
  max-width: 100%;
  height: auto;
}

/* Wide content scrolls inside itself rather than pushing the page sideways —
   the single most common cause of horizontal scroll on mobile. */
.elementor-widget-table-of-contents,
.wp-block-table,
figure.wp-block-table {
  overflow-x: auto;
}

/* ------------------------------------------------------------------
   Measure for theme-rendered content.

   Hello Elementor declares contentSize in theme.json, but WordPress only
   honours that for blocks inside a constrained layout wrapper. Anything
   rendered straight through the_content() — the default Privacy Policy,
   and every article — runs the full width of the viewport.

   The constraint goes on the children of .page-content rather than on
   .page-content itself, and skips Elementor's root node, so a page built
   in Elementor keeps its own full-bleed sections.

   width: min() rather than max-width + padding, so the gutter belongs to
   the element and cannot be inherited by anything nested inside it.
   ------------------------------------------------------------------ */

:root {
  --mentia-measure: 46rem;
  --mentia-gutter: clamp(1.25rem, 6vw, 3rem);
}

.site-main > .page-header,
.site-main > .page-content > :not(.elementor),
.site-main > .post-tags,
.site-main > .comments-area {
  width: min(var(--mentia-measure), 100% - (var(--mentia-gutter) * 2));
  margin-inline: auto;
}

/* Breathing room above and below, which Hello Elementor does not provide. */
.site-main > .page-header {
  margin-block: clamp(2.5rem, 7vw, 5rem) 0;
}

.site-main > .page-content {
  padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 8vw, 6rem);
}

/* A page-header title is a standalone page name, not a display headline —
   it should not inherit the hero-scale h1 from the Kit. */
.site-main > .page-header .entry-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
}

/* Note: hiding this title on pages that draw their own hero is deliberately
   NOT done here. Every page already carries the .elementor-page class, so a
   blanket rule would hide titles on pages that have nothing else. Elementor's
   per-page "Hide Title" toggle drives --page-title-display and is the control
   an editor will actually find. */

/* ------------------------------------------------------------------
   Article body — the block editor output, since articles are written in
   WordPress rather than built in Elementor.
   ------------------------------------------------------------------ */

.mentia-article-body > * + * {
  margin-top: 1.25em;
}

.mentia-article-body h2 {
  margin-top: 2em;
}

.mentia-article-body h3 {
  margin-top: 1.6em;
}

.mentia-article-body ul,
.mentia-article-body ol {
  padding-left: 1.4em;
}

.mentia-article-body li + li {
  margin-top: 0.4em;
}

.mentia-article-body blockquote {
  margin: 2em 0;
  padding: 0 0 0 1.25em;
  border-left: 3px solid var(--e-global-color-accent, #d2682e);
  font-size: 1.125em;
  line-height: 1.5;
}

.mentia-article-body figure {
  margin: 2em 0;
}

.mentia-article-body figcaption {
  margin-top: 0.6em;
  font-size: 0.875em;
  opacity: 0.7;
}

/* Embeds keep their aspect ratio without a wrapper div. */
.mentia-article-body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}