/*
Theme Name: Tresl Child
Theme URI: https://example.com/tresl-child
Description: Hello Elementor child theme with custom widgets for Tresl. Widgets editable from Elementor, CSS and PHP versionable in Git.
Author: Juan
Author URI: https://example.com
Template: hello-elementor
Version: 1.0.0
Text Domain: tresl-child
License: GPL v2 or later
*/

/* Each widget's styles live in widgets/{widget}/assets/{widget}.css
   and are enqueued conditionally. Only global theme styles here. */

/* ============================================================
 * Legal / policy text blocks rendered through Elementor's
 * text-editor widget. Headings follow TRESL-H3, body follows
 * TRESL-Body — color tokens fall back to literal hex when the
 * design tokens aren't defined globally.
 * ============================================================ */

/* TRESL-H3 */
.tresl-legal__h2,
.elementor-widget-text-editor .tresl-legal__h2 {
    color: var(--TRESL---Primary-Blue, #1A6DB6);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 100% */
    margin: 28px 0 18px;
}
.tresl-legal__h2:first-child,
.elementor-widget-text-editor .tresl-legal__h2:first-child {
    margin-top: 0;
}

/* TRESL-Body — applies to any p / li / strong sibling inside a
   text-editor that contains the legal block. We scope by the
   presence of a .tresl-legal__h2 within the same widget. */
.elementor-widget-text-editor:has(.tresl-legal__h2) p,
.elementor-widget-text-editor:has(.tresl-legal__h2) li,
.elementor-widget-text-editor:has(.tresl-legal__h2) strong {
    color: var(--TRESL---Dark-Blue-Accent, #445463);
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.elementor-widget-text-editor:has(.tresl-legal__h2) strong {
    font-weight: 700;
}

.elementor-widget-text-editor:has(.tresl-legal__h2) p {
    margin: 0 0 18px;
}

.elementor-widget-text-editor:has(.tresl-legal__h2) ul {
    margin: 0 0 18px;
    padding-left: 22px;
}

.elementor-widget-text-editor:has(.tresl-legal__h2) li {
    margin-bottom: 10px;
}

/* ============================================================
 * TRESL BRAND TOKENS
 *
 * Global CSS variables for the brand palette. Anything that needs
 * the dark header background or the orange accent should reference
 * these — change them once here and it propagates everywhere.
 *
 * Currently consumed by:
 *   - assets/css/blog-archive.css   (blog index + category header)
 *   - assets/css/author-archive.css (author archive header)
 *   - assets/css/footer.css         (footer chrome)
 *
 * For widget-level usage (post-cta, blog-hero, header-title, etc.)
 * the same fallbacks are duplicated inside each widget's SCSS so
 * Elementor's custom-color controls keep working without the var().
 * ============================================================ */
:root {
    --tresl-color-primary:      #1A6DB6; /* TRESL Primary Blue */
    --tresl-color-dark:         #003844; /* Header / dark sections */
    --tresl-color-accent:       #FAB041; /* Crescent / highlights */
    --tresl-color-dark-blue:    #445463; /* Dark blue accent (body text) */
    --tresl-color-text-on-dark: #FFFFFF;
}

/* ============================================================
 * Single Post content (blog)
 *
 * Posts are mixed: ~29 were built with Elementor (each brings its
 * own generated CSS) and 2 with the classic editor (raw HTML inside
 * .elementor-widget-theme-post-content).
 *
 * This stylesheet unifies the look of classic content so it matches
 * the visual language of Elementor posts: same heading color/size,
 * same Lato 18/1.55 body, same spacing rhythm.
 *
 * Rules use ">" (direct child) so they don't stomp on each
 * Elementor post's specific CSS.
 * ============================================================ */

/* Variables (TRESL design tokens). */
:root {
    --tresl-h2-size: 38px;
    --tresl-h2-mt: 38px;
    --tresl-h2-mb: 22px;
    --tresl-h3-size: 28px;
    --tresl-body-size: 18px;
    --tresl-body-mt: 18px;
    --tresl-body-mb: 22px;
    --tresl-text-color: #000000;
}

/* Base content typography. */
.single-post .elementor-widget-theme-post-content {
    color: var(--tresl-text-color);
    font-family: 'Lato', system-ui, sans-serif;
    font-size: var(--tresl-body-size);
    font-weight: 500;
    line-height: 1.4;
}

/* Reading area: ~820px even if the Elementor container is wider.
   Padding 0 10px to match the default column-padding Elementor applies
   to its inner widgets, so classic content starts at the same x. */
.single-post .elementor-widget-theme-post-content > *:not(.elementor) {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

/* ============================================================
 * HEADINGS — TRESL-H2 / H3
 * Applies both to classic content (>h2) and to Elementor
 * (.elementor-heading-title h2) so the appearance is identical.
 * ============================================================ */
.single-post .elementor-widget-theme-post-content > h1,
.single-post .elementor-widget-theme-post-content > h2,
.single-post .elementor-widget-theme-post-content > h3,
.single-post .elementor-widget-theme-post-content > h4,
.single-post .elementor-widget-theme-post-content > h5,
.single-post .elementor-widget-theme-post-content > h6,
.single-post .elementor-widget-theme-post-content .elementor-heading-title {
    font-family: 'Montserrat', system-ui, sans-serif;
    color: var(--tresl-text-color);
    font-weight: 700;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -.2px;
}

/* H2 — the large size (38px) */
.single-post .elementor-widget-theme-post-content > h2,
.single-post .elementor-widget-theme-post-content h2.elementor-heading-title {
    font-size: var(--tresl-h2-size) !important;
    line-height: 1.15 !important;
    color: var(--tresl-text-color) !important;
}

/* H3 */
.single-post .elementor-widget-theme-post-content > h3,
.single-post .elementor-widget-theme-post-content h3.elementor-heading-title {
    font-size: var(--tresl-h3-size) !important;
    line-height: 1.2 !important;
    color: var(--tresl-text-color) !important;
}

/* Vertical rhythm of headings (TRESL spec: 38px above / ~22-46px below). */
.single-post .elementor-widget-theme-post-content > h2,
.single-post .elementor-widget-theme-post-content > h3 {
    margin: var(--tresl-h2-mt) auto var(--tresl-h2-mb);
}

/* Override Elementor's per-post negative margins:
   Old posts had the first heading overlapping the featured image
   with margin: -72px. We neutralize it here so it respects the
   new rhythm. */
.single-post .elementor-widget-theme-post-content .elementor-element[class*="elementor-element-"]:has(> .elementor-widget-container > h1.elementor-heading-title),
.single-post .elementor-widget-theme-post-content .elementor-element[class*="elementor-element-"]:has(> .elementor-widget-container > h2.elementor-heading-title),
.single-post .elementor-widget-theme-post-content .elementor-element[class*="elementor-element-"]:has(> .elementor-widget-container > h3.elementor-heading-title) {
    margin-top: var(--tresl-h2-mt) !important;
    margin-bottom: var(--tresl-h2-mb) !important;
}

/* First heading without extra top margin (we already have padding-top on the container). */
.single-post .elementor-widget-theme-post-content > h1:first-child,
.single-post .elementor-widget-theme-post-content > h2:first-child,
.single-post .elementor-widget-theme-post-content > h3:first-child,
.single-post .elementor-widget-theme-post-content > .elementor .elementor-top-section:first-child .elementor-widget:first-child {
    margin-top: 0 !important;
}

/* ============================================================
 * BODY — TRESL-Body (Lato 18 / 500 / #000, 18px arriba / 22px abajo)
 * ============================================================ */
.single-post .elementor-widget-theme-post-content > p,
.single-post .elementor-widget-theme-post-content > ul,
.single-post .elementor-widget-theme-post-content > ol,
.single-post .elementor-widget-theme-post-content > blockquote,
.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor {
    font-family: 'Lato', system-ui, sans-serif !important;
    font-size: var(--tresl-body-size) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--tresl-text-color) !important;
}

/* Bullets/paragraphs inside Elementor's text-editor inherit the size. */
.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor p,
.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor ul,
.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor ol {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin-top: var(--tresl-body-mt);
    margin-bottom: var(--tresl-body-mb);
}

/* First/last paragraph of text-editor without duplicate extra margin. */
.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor p:first-child { margin-top: 0; }
.single-post .elementor-widget-theme-post-content .elementor-widget-text-editor p:last-child  { margin-bottom: 0; }

.single-post .elementor-widget-theme-post-content > p,
.single-post .elementor-widget-theme-post-content > ul,
.single-post .elementor-widget-theme-post-content > ol,
.single-post .elementor-widget-theme-post-content > blockquote {
    margin: var(--tresl-body-mt) auto var(--tresl-body-mb);
}

.single-post .elementor-widget-theme-post-content > ul,
.single-post .elementor-widget-theme-post-content > ol {
    padding-left: 1.4em;
}

.single-post .elementor-widget-theme-post-content > ul > li,
.single-post .elementor-widget-theme-post-content > ol > li {
    margin-bottom: .4em;
}

.single-post .elementor-widget-theme-post-content > blockquote {
    border-left: 4px solid #1A6DB6;
    padding: .25em 0 .25em 1em;
    font-style: italic;
}

/* --- LINKS --- */
.single-post .elementor-widget-theme-post-content a {
    color: #1A6DB6;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single-post .elementor-widget-theme-post-content a:hover {
    text-decoration: none;
}

/* --- IMAGES --- */
.single-post .elementor-widget-theme-post-content > p img,
.single-post .elementor-widget-theme-post-content > img,
.single-post .elementor-widget-theme-post-content > figure img,
.single-post .elementor-widget-theme-post-content .elementor-widget-image img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 1.5em auto;
    border-radius: 6px;
}

/* --- Nested Elementor container: same reading width --- */
.single-post .elementor-widget-theme-post-content > .elementor .elementor-section.elementor-section-boxed > .elementor-container,
.single-post .elementor-widget-theme-post-content > .elementor .e-con-boxed > .e-con-inner {
    max-width: 820px;
}

.tresl-nav__tagline {
  font-family: 'Montserrat', system-ui, sans-serif;
}

@media (max-width: 400px) {
  .tresl-nav__tagline {
    display: none;
  }
}

@media (max-width: 880px) {
    :root {
        --tresl-h2-size: 28px;
        --tresl-h2-mt: 28px;
        --tresl-h2-mb: 16px;
        --tresl-h3-size: 22px;
        --tresl-body-size: 16px;
    }
    .tresl-nav__tagline {
      font-size: 12px;
    }
}