/*
Theme Name: TerraTech 360
Description: Custom child theme for the TerraTech 360 marketing site.
Author: Wonderstruct
Template: generatepress
Version: 0.1.9
Text Domain: terratech-360
*/

/* ==========================================================================
   Design tokens and base reset. Ported from the static prototype's
   html/assets/css/core.css, same RGB-triplet color system so any rule can
   compose alpha via rgba(var(--x), n). See docs/PLAN.md §8 for the full CSS
   migration strategy: every prototype CSS file gets enqueued sitewide as
   each block/template is built, not chained via @import.
   ========================================================================== */

/* Public Sans, same @import the prototype's own core.css uses (a CSS @import, not an HTML
   <link> tag) — @import rules must be the first real rule in a stylesheet (comments are fine
   before them), which is why this sits here and not somewhere more "logical" further down with
   the other type-related tokens. Missing entirely until now: Public Sans was silently falling
   back to the --font-body stack's next option (system-ui) everywhere on the live site, close
   enough to go unnoticed visually but just different enough in its real text metrics to throw
   off exact height comparisons against the prototype by about 1px per card (confirmed directly:
   a stage card rendered 1px taller with the fallback font than with Public Sans actually
   loaded, identical in every other respect — border, padding, width, line-height value). */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300..700;1,300..700&display=swap');

@font-face {
    font-family: "Charter";
    src: url('assets/fonts/charter-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Charter";
    src: url('assets/fonts/charter-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Charter";
    src: url('assets/fonts/charter-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Charter";
    src: url('assets/fonts/charter-bold-italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* One weight only, so never set bold on this font. */
@font-face {
    font-family: "Bolivia Extended";
    src: url('assets/fonts/bolivia-extended.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-headline: "Charter", Georgia, "Times New Roman", serif;
    --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Eyebrows use Bolivia Extended, as the kit says. */
    --font-eyebrow: "Bolivia Extended", var(--font-body);
    --font-size: 16px;

    /* Brand kit. Built from the hex values, the kit's printed RGB has typos. See the project's own brand color notes. */
    --terra-green: 61, 107, 53;
    --gold: 200, 153, 104;
    --cream: 245, 241, 230;
    --dark-green: 39, 83, 46;
    --light-gold: 217, 188, 133;
    --warm-gray: 155, 139, 126;
    --charcoal: 58, 58, 53;
    --white: 255, 255, 255;

    /* Not in the kit. Sampled from references/new-footer.png (#25492B). Footer background only. */
    --footer-green: 37, 73, 43;

    /* Not in the kit. #6D6158, darker warm gray for the newsletter issue meta line. */
    --warm-gray-dark: 109, 97, 88;

    /* Measured from the live reference page. The kit says -0.5 and gives no unit. */
    --headline-tracking: -0.02em;

    /* Content is 1168px wide, the 20px gutters sit inside this width. */
    --container-width: 1208px;
    --container-gutter: 40px;
    --header-padding-y: 22px;
    --footer-padding-y: 24px;
    --radius-button: 4px;

    /* Bootstrap re-skin (ported components still use Bootstrap 5.3.8 utilities). */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: rgb(var(--charcoal));
    --bs-body-color-rgb: var(--charcoal);
    --bs-body-bg: rgb(var(--cream));
    --bs-body-bg-rgb: var(--cream);
    --bs-link-color-rgb: var(--terra-green);
    --bs-link-hover-color-rgb: var(--dark-green);
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: rgba(var(--charcoal), 1);
    background-color: rgba(var(--cream), 1);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 400;
    letter-spacing: var(--headline-tracking);
    color: rgba(var(--terra-green), 1);
}

.container {
    --bs-gutter-x: var(--container-gutter);
    max-width: var(--container-width);
}

/* Safety net (docs/PLAN.md §28, Elisa's instruction): on the Subpage
   template, a core block placed directly on the page (a bare paragraph,
   heading, image...) is a direct child of <main> with no section wrapper of
   its own, so it would otherwise render edge to edge, gutters and all,
   including on phones. The full-bleed section blocks (tt360/section,
   tt360/hero, tt360/closing-band, tt360/role-showcase, tt360/legal-toc) each
   carry .tt360-full-bleed on their own top-level wrapper and are excluded here, so
   they keep rendering the real full viewport width with their own internal
   .container doing the constraining, same as before this rule existed. CSS
   can't add a class to a block that doesn't have it, so this replicates
   .container's own computed effect directly instead. body_class() outputs
   page-template-template-subpage-php for this template (confirmed via
   body_class() in header.php), so this never reaches the Legal template's
   own .legal-content > .container, which already handles this itself.

   Constrains width and margin only, never padding: an earlier version of
   this rule added its own padding-left/right (mirroring .container's own
   mechanism, which pairs a wider max-width with padding to leave the real
   content area narrower) — for a plain paragraph that's invisible, but a
   bordered card block placed bare on the page (tt360/latest-issue's card
   variant, tt360/featured-article) has its own padding/border on this exact
   element, and the safety net's own padding-left/right won over the block's
   plain `padding` shorthand on specificity, silently changing it (28px
   28px 28px 28px -> 28px 20px 28px 20px) instead of leaving it alone, and
   the bordered box itself rendered at the wider 1208px (.container's own
   outer max-width, meant to be shrunk by its own padding) instead of the
   1168px a real .container's content area actually is. Fixed by reaching
   the same final size a different way: `width: calc(100% - gutter)` leaves
   a real 20px gap on each side via the box's own width on a narrow screen
   (no padding involved), while `max-width` caps that same box at
   .container's real inner content width (1208px - 40px = 1168px) once the
   screen is wide enough for the gutter calc to exceed it — never adding or
   overriding a single property on the block's own box model. */
body.page-template-template-subpage-php > main > :not(.tt360-full-bleed) {
    width: calc(100% - var(--container-gutter));
    max-width: calc(var(--container-width) - var(--container-gutter));
    margin-left: auto;
    margin-right: auto;
}

/* Editor companion to the rule above. The editor's own body carries no class
   for which PHP template is selected (that's server-side post data), so
   assets/js/editor-template-class.js (enqueued in functions.php) toggles
   tt360-template-subpage on the editor canvas iframe's own body to match.
   Scoped under .editor-styles-wrapper the same way every other editor-parity
   override in this theme is, so it's structurally incapable of matching the
   front end, and under .is-root-container specifically (not just
   .block-editor-block-list__layout, which also matches nested InnerBlocks
   layouts) so it only ever reaches a block sitting directly on the page,
   matching the front-end rule's > main > scoping exactly. Never applies on
   a Legal-template page's own preview, where .legal-content > .container
   already applies its own narrower containing — that's the whole reason the
   toggle reads the real selected template instead of applying this
   unconditionally. */
.editor-styles-wrapper.tt360-template-subpage .block-editor-block-list__layout.is-root-container > :not(.tt360-full-bleed) {
    width: calc(100% - var(--container-gutter));
    max-width: calc(var(--container-width) - var(--container-gutter));
    margin-left: auto;
    margin-right: auto;
}

:focus-visible {
    outline: 2px solid rgba(var(--gold), 1);
    outline-offset: 2px;
}

/* ==========================================================================
   Neutralizing GeneratePress (docs/PLAN.md §5). GP's plain <button> and
   input[type=submit] default to a dark gray fill, white text, 10px/20px
   padding. Bare <input>/<select>/<textarea> default to a plain 1px border
   with no color, radius 0, 10px/15px padding. Reset both here so every
   component starts clean and sets its own look on top. GP never hardcodes
   a plain-<a> color either, it comes from the Customizer, so set one here
   or RichText links (legal body, article body) take on whatever GP's
   primary color happens to be. Sidebar/full-width is handled in
   functions.php instead, not here.
   ========================================================================== */

button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

button:hover,
button:focus,
button:active {
    background: transparent;
    border: none;
    box-shadow: none;
}

input,
select,
textarea {
    border: 1px solid rgba(var(--warm-gray), 1);
    outline: none;
    background: rgba(var(--white), 1);
    padding: 10px 15px;
    border-radius: var(--radius-button);
    font-family: var(--font-body);
    color: rgba(var(--charcoal), 1);
}

a {
    color: rgba(var(--terra-green), 1);
}

a:hover,
a:focus {
    color: rgba(var(--dark-green), 1);
}

a:visited {
    color: rgba(var(--terra-green), 1);
}

img {
    max-width: 100%;
}

/* A plain core/quote (not tt360/pullquote's own default look, which handles itself
   separately in components/pullquote.css) — GP's own bare blockquote rule makes it
   italic, with a barely-visible gray border, at font-size: 1.2em (19.2px, not this
   site's real 16px body size), none of which matches this site's plain, calm voice
   (no italic text appears anywhere else on the site) or its real type scale. Keeps
   GP's own vertical rhythm (margin-bottom), resets only what's actually wrong: the
   italic, the font-size, the padding, and the border color, using the same 24px-left
   indent and warm-gray tone already used elsewhere (components/pullquote.css,
   components/legal.css). */
blockquote {
    padding: 0 0 0 24px;
    border-left: 3px solid rgba(var(--warm-gray), 0.4);
    font-style: normal;
    font-size: 16px;
}

/* A plain list (ul/ol), anywhere a page doesn't already set its own list spacing
   (components/legal.css's own .legal-content ul/ol, components/faq.css's own
   .is-style-faq-list ul/ol both stay in control there, their own selectors are
   more specific than this one). GP's own bare ul/ol rule sets margin-left: 3em
   (48px) at the same time Gutenberg's own .wp-block-list class separately adds
   its own 32px padding-left, stacking into a much deeper indent than either rule
   alone intends. Flattened to the same 24px indent used everywhere else. */
ul,
ol {
    margin-left: 0;
    padding-left: 24px;
}