/* ==========================================================================
   Base CSS — Walltopia v2
   Foundation styles loaded on every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpoint ladder (M1, decisions.md #41) — one consolidated set, replacing
   the ~13 one-off max-width values ported ad hoc from the old theme. Theme
   stays desktop-first (max-width overrides); every max-width step ends one
   pixel below its min-width counterpart so nothing double-fires at exactly
   768 / 1024 / 1250 (the old F-17 boundary bug).

   | Name             | Query               |
   |------------------|----------------------|
   | phone            | max-width: 479px     |
   | tablet           | max-width: 767px     |
   | laptop           | max-width: 1023px    |
   | nav / container  | max-width: 1249px    |
   | — min-width counterparts: 768px, 1024px, 1250px

   Documented exception: 1100px (info-block media row, components.css) stays
   off-ladder — the fixed 710px media column leaves too little room for the
   text column if it moved to 1023px (measured, see the comment there).
   grid.css keeps its own internal Bootstrap min-width steps (576/768/992/1200)
   unchanged — it's a self-contained vendor-style file; only its 768px step
   happens to align with this ladder.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   -------------------------------------------------------------------------- */

:root {
    /* Colors */
    --wt-red: #ec1c24;
    --wt-dark: #333;
    --wt-dark-bg: #333144;
    --wt-light-bg: #f1f4f5;
    --wt-white: #fff;
    --wt-black: #000;
    --wt-gray-border: #ddd;
    --wt-gray-text: #666;
    --wt-link-hover: #820000; /* prod a:hover dark red (old style.css a:hover) */
    --wt-footer-bg: #333144;
    --wt-footer-text: #b6c6c9;
    --wt-focus-color: var(--wt-red); /* M6: shared default for :focus-visible outlines site-wide */

    /* Secondary tabs (M9, decisions.md #41 addendum) — shared by the
       in-content tabs_block skin (components.css, .wt-tabs--secondary) and
       the WooCommerce product tabs (woocommerce-single.css), so both read
       from one source instead of two copies of the same four values. */
    --wt-tab-secondary-bg: #e8f1f1;
    --wt-tab-secondary-text: #666;
    --wt-tab-secondary-active-bg: #b6c6c9;
    --wt-tab-secondary-active-text: #fff;

    /* ACF block background palette (content_background_color choices) */
    --wt-block-graphite: #585858;
    --wt-block-granite: #999;
    --wt-block-limestone: #d9d9d9;
    --wt-block-sandstone: #f0dcc8;
    --wt-block-deep-blue: #00466e;
    --wt-block-aqua: #56c5d0;
    --wt-block-red: #ed2020;
    --wt-block-light: #e8f1f1;

    /* Layout */
    --wt-container-max: 1250px;
    --wt-container-padding: var(--wt-sp-md); /* 25px (M1, decisions.md #41) — was 20px; the full-bleed family below assumed 25px all along (F-4/F-5) */
    --wt-media-col: 710px; /* info-block media column (components.css media row) */

    /* Typography */
    --wt-font-heading: 'Montserrat', sans-serif;
    --wt-font-body: 'Open Sans', sans-serif;
    --wt-font-icons: 'wt-icons';

    /* Type scale (B3-5) — prod's effective sizes (old theme + Customizer
       layer flattened). One deliberate snap: h3 is 29px on prod, snapped to
       28px to share a step with .wt-title. */
    --wt-fs-body: 17px;
    --wt-lh-body: 1.41; /* M8: unitless (was a fixed 24px) — 17px * 1.41 = 23.97px, same prod value, but now a stepped font-size inherits sane leading instead of a frozen 24px */
    --wt-fs-h1: 40px;
    --wt-fs-h2: 36px;
    --wt-fs-h2-content: 32px; /* info-block .content h2 (Customizer override) */
    --wt-fs-h3: 28px; /* prod 29px, snapped */
    --wt-fs-h4: 22px;
    --wt-fs-h5: 16px;
    --wt-fs-h6: 14px;
    --wt-fs-small: 14px; /* meta/caption text role — matches the recurring 14px literal (post-tags, sidebar links) */
    --wt-lh-heading: 1.2;
    --wt-fw-heading: 900;

    /* Spacing scale (B3-5) — the rhythm values that recur across the prod
       port (B1-B3). Step names, not value names, so a step can be retuned
       without renaming: xs=15, sm=20, md=25, lg=30, xl=40, 2xl=50, 3xl=60,
       4xl=100.
       Applied here to the base heading/paragraph rules and the rules B3-5
       touched; adopt elsewhere whenever a rule is next edited. */
    --wt-sp-xs: 15px; /* paragraph rhythm inside info-block .content */
    --wt-sp-sm: 20px;
    --wt-sp-md: 25px; /* base heading/paragraph margin, card gutters */
    --wt-sp-lg: 30px; /* grid/download row gaps (B3-2) */
    --wt-sp-xl: 40px; /* .content h2 bottom margin */
    --wt-sp-2xl: 50px; /* block padding, media column gap */
    --wt-sp-3xl: 60px; /* download grid bottom margin */
    --wt-sp-4xl: 100px; /* gap below tabs nav / above first tab panel, big section blocks */
}

/* --------------------------------------------------------------------------
   2. @font-face Declarations
   -------------------------------------------------------------------------- */

/* Montserrat */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat-v26-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/montserrat-v26-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-v26-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-v26-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/montserrat-v26-latin-900.woff2') format('woff2');
}

/* Open Sans */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-700italic.woff2') format('woff2');
}

/* No 800 face is hosted (Step 20.14): the two theme rules that asked for
   weight 800 now use 700, and any leftover 800 (e.g. .font-weight-800 in DB
   content) resolves to the 700 face without a network request. Declaring a
   face with a missing src was the source of a site-wide font 404. */

/* wt-icons */
@font-face {
    font-family: 'wt-icons';
    font-weight: normal;
    font-style: normal;
    font-display: block;
    src: url('../fonts/wt-icons.woff2?wtf=1.02') format('woff2'),
         url('../fonts/wt-icons.woff?wtf=1.02') format('woff');
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "wt-icons";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: block;
    float: left;
    text-decoration: none;
    width: 100%;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-uniE093:before { content: '\e800'; }
.icon-uniE094:before { content: '\e801'; }
.icon-uniE095:before { content: '\e802'; }
.icon-3:before { content: '\e803'; }
.icon-uniE09D:before { content: '\e804'; }
.icon-uniE09E:before { content: '\e805'; }
.icon-uniE030:before { content: '\e806'; }
.icon-uniE0A3:before { content: '\e807'; }
.icon-uniE0AA:before { content: '\e808'; }
.icon-uniE0AB:before { content: '\e809'; }
.icon-uniE0AC:before { content: '\e80a'; }
.icon-1:before { content: '\e80b'; }
.icon-uniE0B4:before { content: '\e80c'; }
.icon-uniE0B5:before { content: '\e80d'; }
.icon-checkbox-marked-circle-outline:before { content: '\e80e'; }
.icon-uniE0BA:before { content: '\e80f'; }
.icon-uniE0C1:before { content: '\e810'; }
.icon-uniE0C2:before { content: '\e811'; }
.icon-uniE0C3:before { content: '\e812'; }
.icon-2:before { content: '\e813'; }
.icon-uniE0CB:before { content: '\e814'; }
.icon-uniE0CC:before { content: '\e815'; }
.icon-uniE015:before { content: '\e816'; }
.icon-uniE0D1:before { content: '\e817'; }
.icon-whatsapp:before { content: '\e818'; }
.icon-whatsapp-round:before { content: '\e819'; }
.icon-whatsapp-square:before { content: '\e81a'; }
.icon-viber:before { content: '\e81b'; }
.icon-viber-round:before { content: '\e81c'; }
.icon-viber-square:before { content: '\e81d'; }
.icon-uni32:before { content: '\e81e'; }
.icon-uni35:before { content: '\e81f'; }
.icon-uni33:before { content: '\e820'; }
.icon-uni34:before { content: '\e821'; }
.icon-uniE01D:before { content: '\e822'; }
.icon-uniE027:before { content: '\e823'; }
.icon-uni62:before { content: '\e824'; }
.icon-uniE010:before { content: '\e825'; }
.icon-uniE0E3:before { content: '\e826'; }
.icon-ic_remove_circle_black_24px:before { content: '\e827'; }
.icon-ic_add_circle_black_24px:before { content: '\e828'; }
.icon-11:before { content: '\e829'; }
.icon-12:before { content: '\e82a'; }
.icon-ic_remove_red_eye_24px:before { content: '\e82b'; }
.icon-ic_photo_camera_24px:before { content: '\e82c'; }
.icon-ic_movie_24px:before { content: '\e82d'; }
.icon-ic_search_24px:before { content: '\e82e'; }
.icon-cart-outline:before { content: '\e82f'; }
.icon-uni4E:before { content: '\e830'; }
.icon-uni4B:before { content: '\e831'; }
.icon-uni36:before { content: '\e832'; }
.icon-uniE617:before { content: '\e833'; }
.icon-uni5E:before { content: '\e834'; }
.icon-uni4D:before { content: '\e835'; }
.icon-ic_star_24px:before { content: '\e836'; }
.icon-uniE082:before { content: '\e837'; }
.icon-uniE02C:before { content: '\e838'; }
.icon-ic_link_24px:before { content: '\e839'; }
.icon-uniE065:before { content: '\e83a'; }
.icon-ic_description_24px:before { content: '\e83b'; }
.icon-ic_menu_24px:before { content: '\e83c'; }
.icon-ic_info_24px:before { content: '\e83d'; }
.icon-ic_person_black_24px:before { content: '\e83e'; }
.icon-ic_language_black_24px:before { content: '\e83f'; }
.icon-ic_room_black_24px:before { content: '\e840'; }
.icon-ic_phone_black_24px:before { content: '\e841'; }
.icon-ic_email_black_24px:before { content: '\e842'; }
.icon-ic_perm_phone_msg_black_24px:before { content: '\e843'; }
.icon-uni63:before { content: '\e844'; }
.icon-uniE00F:before { content: '\e845'; }
.icon-uniE024:before { content: '\e846'; }
.icon-uniE0E2:before { content: '\e847'; }
.icon-ic_remove_circle_outline_black_24px:before { content: '\e848'; }
.icon-ic_add_circle_outline_black_24px:before { content: '\e849'; }
.icon-ic_indeterminate_check_box_black_24px:before { content: '\e84a'; }
.icon-ic_add_box_black_24px:before { content: '\e84b'; }
.icon-uniE066:before { content: '\e84c'; }
.icon-uniE02B:before { content: '\e84d'; }
.icon-ic_arrow_back_black_24px:before { content: '\e84e'; }
.icon-ic_arrow_forward_black_24px:before { content: '\e84f'; }
.icon-ic_textsms_black_24px:before { content: '\e850'; }
.icon-ic_library_books_black_24px:before { content: '\e851'; }
.icon-ic_person_outline_black_24px:before { content: '\e852'; }
.icon-ic_content_copy_black_48px:before { content: '\e853'; }
.icon-ic_format_align_left_black_48px:before { content: '\e854'; }
.icon-ic_chat_bubble_outline_black_48px:before { content: '\e855'; }
.icon-email:before { content: '\e856'; }
.icon-calendar-check:before { content: '\e857'; }
.icon-ic_favorite_black_24px:before { content: '\e858'; }
.icon-calendar-clock:before { content: '\e859'; }
.icon-email-outline:before { content: '\e85a'; }
.icon-settings:before { content: '\e85b'; }
.icon-multiplication:before { content: '\e85c'; }
.icon-ic_check_black_24px:before { content: '\e85d'; }
.icon-uni5A:before { content: '\e85e'; }
.icon-uniE017:before { content: '\e85f'; }
.icon-uni21:before { content: '\e860'; }
.icon-uni22:before { content: '\e861'; }
.icon-uni23:before { content: '\e862'; }
.icon-uni24:before { content: '\e863'; }
.icon-uni42:before { content: '\e864'; }
.icon-uni43:before { content: '\e865'; }
.icon-uni44:before { content: '\e866'; }
.icon-uni45:before { content: '\e867'; }
.icon-uni5B:before { content: '\e868'; }
.icon-uni59:before { content: '\e869'; }
.icon-uni39:before { content: '\e86a'; }
.icon-uniE033:before { content: '\e86b'; }
.icon-play-circle:before { content: '\e86c'; }
.icon-pause-circle:before { content: '\e86d'; }
.icon-volume-high:before { content: '\e86e'; }
.icon-volume-off:before { content: '\e86f'; }
.icon-fullscreen:before { content: '\e870'; }
.icon-fullscreen-exit:before { content: '\e871'; }
.icon-link-variant:before { content: '\e872'; }
.icon-share-variant:before { content: '\e873'; }
.icon-share-thin-icon:before { content: '\e874'; }
.icon-uni64:before { content: '\e875'; }
.icon-uniE031:before { content: '\e876'; }
.icon-cart:before { content: '\e877'; }
.icon-truck:before { content: '\e878'; }
.icon-earth:before { content: '\e879'; }
.icon-key-variant:before { content: '\e87a'; }
.icon-clipboard-account:before { content: '\e87b'; }
.icon-newspaper:before { content: '\e87c'; }
.icon-uni66:before { content: '\e87d'; }
.icon-alert:before { content: '\e87e'; }
.icon-heart-outline:before { content: '\e87f'; }
.icon-settings-outline:before { content: '\e880'; }
.icon-prev:before { content: '\e881'; }
.icon-next:before { content: '\e882'; }
.icon-icon_quick_view:before { content: '\e883'; }

/* --------------------------------------------------------------------------
   3. Reset & Box-Sizing
   -------------------------------------------------------------------------- */

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

body {
    margin: 0;
    padding: 0;
}

main {
    display: block;
}

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

/* Non-img embeds in post content (iframe/video) need the same overflow cap —
   see the .single-post-content min-width fix in templates.css for why a
   wide replaced element could escape its column in the first place. */
iframe,
video,
embed,
object {
    max-width: 100%;
}

/* WP_Embed's responsive-embeds wrapper (theme support added in setup.php):
   wraps an oEmbed'd video/rich iframe — [embed] shortcode or a bare embed
   URL, in an ACF field via wt_oembed_expand() or in post_content via
   the_content() — in <div class="wp-embed-aspect-W-H wp-has-aspect-ratio"
   style="padding-bottom: NN%">. The classic padding-bottom aspect-ratio
   hack: percentage is height/width of the oEmbed response, so it holds the
   box open and the iframe fills it — fluid width, no CLS, scoped to only
   this wrapper (every other iframe on the site is untouched). */
.wp-has-aspect-ratio {
    position: relative;
    overflow: hidden;
    height: 0;
}

.wp-has-aspect-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* M6: one shared, visible :focus-visible default for interactive elements
   that don't already have their own tuned focus style. Components that
   already set one (tabs, search inputs, forms, gallery links) keep their
   own — they're tuned for a reason: red-active tabs need a contrasting
   hue, both search inputs (header popover + the on-page/404 .search-form)
   use a grey outline because red didn't render as a visible focus
   indicator there in cross-browser testing (P2 follow-up, 2026-10-07) —
   this default is the catch-all everything else was missing
   (mobile-audit F-20). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--wt-focus-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Base Typography
   -------------------------------------------------------------------------- */

/* B3-5: values below are prod's EFFECTIVE typography (old style.css + the
   Customizer "Additional CSS" layer flattened together). The old theme set
   h2-h6 uppercase and the Customizer un-uppercased h2/h3 only — here the
   final values are written directly, no base+counter-rule pair. */

body {
    font-family: var(--wt-font-body);
    font-size: var(--wt-fs-body);
    line-height: var(--wt-lh-body);
    color: var(--wt-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* M1b: long unbroken strings (email addresses, URLs) in a narrow grid
       column don't wrap by default and drive the column's min-content width
       past its container, overflowing the viewport (contact-us-acf @768px,
       a mailto: link in a .col-md-4). `anywhere` (not `break-word`) because
       it's also counted toward min-content sizing in flex/grid, which is
       what actually lets the narrow column shrink to fit instead of being
       blown out by the unbreakable word; `break-word` falls back to
       `normal` for that calculation and wouldn't fix this. Inherited
       site-wide via body, same as the rest of this block's typography — it
       only engages when there's otherwise no acceptable break point, so
       ordinary wrapping text is unaffected, and anything already pinned to
       `white-space: nowrap` (tab labels, the back-to-top button, etc.) stays
       nowrap: nowrap suppresses line-breaking opportunities altogether, so
       there's nothing for overflow-wrap to act on there. */
    overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wt-font-heading);
    font-weight: var(--wt-fw-heading);
    line-height: var(--wt-lh-heading);
    text-transform: none;
}

h1, .title-h1 {
    font-size: var(--wt-fs-h1);
    letter-spacing: 0;
    margin-bottom: 1em;
}

h2 { font-size: var(--wt-fs-h2); letter-spacing: 0; margin: 0 0 var(--wt-sp-md); }
h3 { font-size: var(--wt-fs-h3); margin: 0 0 var(--wt-sp-md); }
h4 { font-size: var(--wt-fs-h4); margin: 0 0 var(--wt-sp-md); text-transform: uppercase; }
h5 { font-size: var(--wt-fs-h5); margin: 0 0 var(--wt-sp-md); text-transform: uppercase; }
h6 { font-size: var(--wt-fs-h6); margin: 0 0 var(--wt-sp-md); text-transform: uppercase; }

.big-title {
    font-size: var(--wt-fs-h1);
    font-weight: 900;
    color: var(--wt-black);
    margin: 0;
    line-height: 1;
    letter-spacing: -2px;
    font-family: var(--wt-font-heading);
}

.montserrat { font-family: var(--wt-font-heading); }
.opensans { font-family: var(--wt-font-body); }

/* Prod is a raw #ff0000; brand token used deliberately — see decisions log */
a {
    color: var(--wt-red);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover { color: var(--wt-link-hover); }

p { margin: 0 0 var(--wt-sp-md); } /* prod global; info-block .content pins --wt-sp-xs */

/* --------------------------------------------------------------------------
   5. Layout Structure
   -------------------------------------------------------------------------- */

.full-width-container {
    width: 100%;
    display: block;
}

/* max-width includes the side padding (box-sizing: border-box, global reset
   above) so the CONTENT area inside the padding is always exactly
   --wt-container-max (1250px) once the viewport is wide enough to reach it,
   same as before M1 — but the padding itself is now never removed, so a
   `.row`'s negative-margin gutter bleed (grid.css, -15px) always lands
   inside the padding instead of past the container's border edge. This
   replaces a max-width:1249px / unset toggle that dropped side padding to
   zero at exactly the width grid.css's own `.row` needs it most, overflowing
   the viewport by up to 15px/side in the 1250-1279px window (M1, decisions.md
   #41; was the contact-acf report's C-4 / the mobile-audit F-5 desktop case). */
.content-container {
    width: 100%;
    max-width: calc(var(--wt-container-max) + 2 * var(--wt-container-padding));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wt-container-padding);
    padding-right: var(--wt-container-padding);
    float: none;
}

.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

/* --------------------------------------------------------------------------
   6. Grid Columns
   -------------------------------------------------------------------------- */

.one-fifth { width: 20%; }
.one-fourth { width: 25%; }
.one-third { width: 33.333333%; }
.one-half { width: 50%; }
.two-thirds { width: 66.666666%; }
.three-fourths { width: 75%; }

/* --------------------------------------------------------------------------
   7. Utility Classes
   -------------------------------------------------------------------------- */

/* Display & Position */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.absolute { position: absolute; }
.absolute-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.visibility-hidden { visibility: hidden; }
.noSelect { -webkit-user-select: none; user-select: none; }

/* Width */
.width-100 { width: 100%; }
.width-50 { width: 50%; }
.width-33 { width: 33.333333%; }
.width-25 { width: 25%; }

/* Height — spacer used by news cards without an excerpt
   (related-content-manual.php, taxonomy-download-category.php, card-news.php) */
.height-20 { height: 20px; }

/* Margin utilities */
.margin-top-0 { margin-top: 0 !important; }
.margin-top-5 { margin-top: 5px !important; }
.margin-top-10 { margin-top: 10px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-25 { margin-top: 25px !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-top-35 { margin-top: 35px !important; }
.margin-top-40 { margin-top: 40px !important; }
.margin-top-50 { margin-top: 50px !important; }
.margin-top-70 { margin-top: 70px !important; }
.margin-top-100 { margin-top: 100px !important; }

.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-bottom-5 { margin-bottom: 5px !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-25 { margin-bottom: 25px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.margin-bottom-35 { margin-bottom: 35px !important; }
.margin-bottom-40 { margin-bottom: 40px !important; }
.margin-bottom-50 { margin-bottom: 50px !important; }
.margin-bottom-70 { margin-bottom: 70px !important; }
.margin-bottom-100 { margin-bottom: 100px !important; }

.margin-left-0 { margin-left: 0 !important; }
.margin-left-5 { margin-left: 5px !important; }
.margin-left-10 { margin-left: 10px !important; }
.margin-left-20 { margin-left: 20px !important; }
.margin-left-25 { margin-left: 25px !important; }
.margin-left-30 { margin-left: 30px !important; }
.margin-left-35 { margin-left: 35px !important; }
.margin-left-40 { margin-left: 40px !important; }
.margin-left-50 { margin-left: 50px !important; }
.margin-left-70 { margin-left: 70px !important; }
.margin-left-100 { margin-left: 100px !important; }

.margin-right-0 { margin-right: 0 !important; }
.margin-right-5 { margin-right: 5px !important; }
.margin-right-10 { margin-right: 10px !important; }
.margin-right-20 { margin-right: 20px !important; }
.margin-right-25 { margin-right: 25px !important; }
.margin-right-30 { margin-right: 30px !important; }
.margin-right-35 { margin-right: 35px !important; }
.margin-right-40 { margin-right: 40px !important; }
.margin-right-50 { margin-right: 50px !important; }
.margin-right-70 { margin-right: 70px !important; }
.margin-right-100 { margin-right: 100px !important; }

/* Padding utilities */
.padding-top-0 { padding-top: 0 !important; }
.padding-top-15 { padding-top: 15px !important; }
.padding-top-20 { padding-top: 20px !important; }
.padding-top-25 { padding-top: 25px !important; }
.padding-top-45 { padding-top: 45px !important; }
.padding-top-50 { padding-top: 50px !important; }
.padding-top-70 { padding-top: 70px !important; }
.padding-top-75 { padding-top: 75px !important; }
.padding-top-100 { padding-top: 100px !important; }

.padding-bottom-0 { padding-bottom: 0 !important; }
.padding-bottom-15 { padding-bottom: 15px !important; }
.padding-bottom-20 { padding-bottom: 20px !important; }
.padding-bottom-25 { padding-bottom: 25px !important; }
.padding-bottom-45 { padding-bottom: 45px !important; }
.padding-bottom-50 { padding-bottom: 50px !important; }
.padding-bottom-70 { padding-bottom: 70px !important; }
.padding-bottom-75 { padding-bottom: 75px !important; }
.padding-bottom-100 { padding-bottom: 100px !important; }

.padding-left-0 { padding-left: 0 !important; }
.padding-left-15 { padding-left: 15px !important; }
.padding-left-20 { padding-left: 20px !important; }
.padding-left-25 { padding-left: 25px !important; }
.padding-left-45 { padding-left: 45px !important; }
.padding-left-50 { padding-left: 50px !important; }
.padding-left-70 { padding-left: 70px !important; }
.padding-left-75 { padding-left: 75px !important; }
.padding-left-100 { padding-left: 100px !important; }

.padding-right-0 { padding-right: 0 !important; }
.padding-right-15 { padding-right: 15px !important; }
.padding-right-20 { padding-right: 20px !important; }
.padding-right-25 { padding-right: 25px !important; }
.padding-right-45 { padding-right: 45px !important; }
.padding-right-50 { padding-right: 50px !important; }
.padding-right-70 { padding-right: 70px !important; }
.padding-right-75 { padding-right: 75px !important; }
.padding-right-100 { padding-right: 100px !important; }

/* Text */
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.normalcase { text-transform: none; }
.bold { font-weight: 700; }
.normal { font-weight: 400; }
.thin { font-weight: 300; }
.text-decoration-none { text-decoration: none; }
.cursor-pointer { cursor: pointer; }
.three-dots { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Font weight */
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.font-weight-800 { font-weight: 800; }
.font-weight-900 { font-weight: 900; }

/* Colors */
.color-white { color: #fff; }
.color-black { color: #000; }
.color-red { color: var(--wt-red); }
.text-black { color: #000; }
.background-white { background-color: #fff; }
.background-black { background-color: #000; }
/* Homepage grey band sections: #testimonials, #projects-map, #home_logos.
   Full-bleed widening lives in components.css (homepage sections area). */
.background-e9f1f1 { background-color: #e9f1f1; }
.dark-background { background-color: var(--wt-dark-bg); }

/* --------------------------------------------------------------------------
   8. Responsive Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1249px) {
    /* .content-container's padding/max-width are now unconditional (see the
       rule above, M1) — nothing left to override here below 1250px. */
    .float-none-under-1024 { float: none; }
}

@media (max-width: 1023px) {
    .float-none-under-1024 { float: none; }

    /* M8 (mobile audit prop. 2, decisions.md #41): h1/h2 step once here —
       h3/h4 don't need a step this wide, their desktop sizes are already
       small enough to read fine down to tablet width (see the ≤479 block
       below, and decisions.md #41 M8 addendum for the full derivation). */
    :root {
        --wt-fs-h1: 32px;
        --wt-fs-h2: 28px;
    }
}

@media (max-width: 767px) {
    .one-fifth,
    .one-fourth,
    .one-third,
    .one-half,
    .two-thirds,
    .three-fourths {
        width: 100%;
    }

    .float-none-under-768 { float: none; }
    .float-left-under-768 { float: left; }
    .float-right-under-768 { float: right; }
}

@media (max-width: 479px) {
    .float-none-under-480 { float: none; }

    /* M8: second (and, for h3/h4, only) step. Ratios follow h1/h2's own
       desktop->phone reduction (~0.7); h3/h4 land on 24/20, the exact
       values several components (related-projects/industries .title,
       custom-loop .item-title) already converged on by hand pre-M8 —
       confirmation the derivation lines up with what was already tuned
       live. Body stays 17px at every width (--wt-fs-body unchanged). */
    :root {
        --wt-fs-h1: 28px;
        --wt-fs-h2: 25px;
        --wt-fs-h3: 24px;
        --wt-fs-h4: 20px;
    }
}

/* ============================================================
   Flexbox utility classes
   Used by ported shortcode templates (related-projects, etc.)
   ============================================================ */

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.vertical-align {
    align-items: center;
}

/* Ported verbatim from old theme's global-styles.css. Used by single-wt_project.php
   (.project-data-container), single-wt_event.php, single-wt_testimonial.php,
   home-news.php and the news-loop shortcode to give a floated image column a real
   height via flex + align-items:stretch — without this, an empty background-image
   <a> collapses to 0 height and disappears. */
.vertical-align-child-elements-the-easy-way {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
}

.flex-direction-column {
    flex-direction: column !important;
}

/* ============================================================
   Accessibility
   ============================================================ */

/* Visually hidden but available to screen readers and crawlers.
   Used for the front-page h1 (page-home.php) and other text that
   must exist in the document without rendering. Standard WP pattern. */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    border: 0;
    word-wrap: normal !important;
}