/*
Theme Name: Urgence Toiture 911
Theme URI: https://urgencetoiture911.ca/
Author: Fred
Description: Block theme for Urgence Toiture 911.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ut911
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, wide-blocks
*/

/* ── TT Norms Pro, the only family ─────────────────────────────────
   Declared under `tt_norms_pro` (the name older markup and plugins use) and
   under "TT Norms Pro" through theme.json — both resolve to these files. */
@font-face{font-family:tt_norms_pro;font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/TTNormsPro-Regular.woff2) format("woff2")}
@font-face{font-family:tt_norms_pro;font-weight:500;font-style:normal;font-display:swap;src:url(assets/fonts/TTNormsPro-Medium.woff2) format("woff2")}
@font-face{font-family:tt_norms_pro;font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/TTNormsPro-Bold.woff2) format("woff2")}
@font-face{font-family:tt_norms_pro;font-weight:900;font-style:normal;font-display:swap;src:url(assets/fonts/TTNormsPro-Black.woff2) format("woff2")}

/* ── Design tokens (spec 2026-10-08 §1) ─────────────────────────────
   The only place a colour value may be written. */
:root {
  --ut-red: #da2c00; --ut-red-hover: #b22400;
  --ut-ink: #1a1d20; --ut-text: #2e3236; --ut-muted: #5e646a;
  --ut-paper: #ffffff; --ut-sand: #f5f3ef; --ut-line: #e2ddd5;

  --ut-font: tt_norms_pro, "TT Norms Pro", system-ui, sans-serif;
  --ut-fs-xs: 14px; --ut-fs-base: 17px; --ut-fs-md: 21px; --ut-fs-lg: 26px; --ut-fs-xl: 34px;
  --ut-fs-2xl: clamp(36px, 5vw, 56px);

  --ut-s1: 8px; --ut-s2: 16px; --ut-s3: 24px; --ut-s4: 32px;
  --ut-s5: 48px; --ut-s6: 64px; --ut-s7: 96px; --ut-s8: 120px;
  --ut-section: clamp(64px, 8vw, 120px);
  --ut-container: 1200px; --ut-gutter: clamp(20px, 4.2vw, 60px);
  --ut-radius: 8px;
  --ut-shadow: 0 10px 30px rgb(26 29 32 / .08); --ut-shadow-lg: 0 16px 40px rgb(26 29 32 / .12);
  --ut-rule-dark: rgb(255 255 255 / .12); /* hairline on ink */
  --ut-scrim-1: rgb(26 29 32 / .75); --ut-scrim-2: rgb(26 29 32 / .25);
  --ut-scrim-3: rgb(26 29 32 / .35); --ut-scrim-4: rgb(26 29 32 / .85); /* cover photo overlay stops */
}
@media (max-width: 599px) { :root { --ut-fs-base: 16px; } }

/* Read by apigoat plugins. */
:root {
  --brand-primary: var(--ut-ink); --brand-primary-dark: var(--ut-ink);
  --brand-base: var(--ut-paper); --brand-contrast: var(--ut-text);
  --brand-gray-100: var(--ut-sand); --brand-radius: var(--ut-radius);
}

html {
  scroll-behavior: smooth;
  /* clip instead of hidden: prevents horizontal scroll without creating a
     new scroll container, which would break position:sticky on the header */
  overflow-x: clip;
}

body {
  background: var(--ut-paper);
  font-family: var(--ut-font);
  font-size: var(--ut-fs-base);
  line-height: 1.6;
  color: var(--ut-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--ut-font);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ut-ink);
  text-wrap: balance;
}
h1 { font-size: var(--ut-fs-2xl); }
h2 { font-size: var(--ut-fs-xl); }
h3 { font-size: var(--ut-fs-lg); }
h4 { font-size: var(--ut-fs-md); }

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

:where(.wp-site-blocks) > * { margin-block-start: 0; }
:root :where(.is-layout-constrained) > * { margin-block-start: 0; }
/* Same for flow layouts: every band this theme ships brings its own vertical
   padding, so the block editor's default gap between them is dead space. */
:root :where(.is-layout-flow) > * { margin-block-start: 0; }
/* The overlay header is taken out of flow, so its containing block has to be
   the page wrapper rather than the viewport. */
.wp-site-blocks { position: relative; }

:where(.wp-site-blocks *:focus) { outline: none; }
:where(.wp-site-blocks *:focus-visible) {
  outline: 2px solid var(--ut-red);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Header ──────────────────────────────────────────────────────
   Ink bar; on pages with a .ut-cover (body.has-photo-hero) it is lifted out
   of flow and the cover's own top gradient keeps it readable. */
header.wp-block-template-part{position:relative;z-index:100}
body.has-photo-hero header.wp-block-template-part{position:absolute;top:0;left:0;right:0}
.site-header{padding:0 var(--ut-gutter);background:var(--ut-ink)}
body.has-photo-hero .site-header{background:transparent}
.site-header .site-header-row{min-height:96px;gap:var(--ut-s3);max-width:var(--ut-container);margin-inline:auto}
.site-header .wp-block-site-logo img{width:140px;height:auto}
.site-header-end{gap:var(--ut-s3)}
.site-header .wp-block-navigation{color:var(--ut-paper);font:500 15px/1.2 var(--ut-font)}
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation a.wp-block-navigation-item__content{color:var(--ut-paper);text-decoration:none;text-transform:none;padding:12px 10px;display:inline-block}
.site-header .wp-block-navigation a:hover{text-decoration:underline;text-underline-offset:.3em}
.site-header .wp-block-navigation__container{gap:var(--ut-s1)}
.site-header .wp-block-navigation__responsive-container-open{color:var(--ut-paper)}
.site-header .wp-block-navigation__responsive-container-close{color:var(--ut-ink)}
.site-header .is-cta-duplicate{display:none}
/* Visible only inside the OPEN overlay, as the primary red call button. */
.site-header .is-menu-open .is-cta-duplicate{display:block;align-self:stretch;width:100%;margin-top:var(--ut-s2)}
.site-header .wp-block-navigation__responsive-container.is-menu-open .is-cta-duplicate a.wp-block-navigation-item__content{display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;min-height:52px;padding:0 var(--ut-s3);border-radius:var(--ut-radius);background:var(--ut-red);color:var(--ut-paper);font:500 16px/1.2 var(--ut-font);text-decoration:none;white-space:nowrap}
.site-header .wp-block-navigation__responsive-container.is-menu-open .is-cta-duplicate a.wp-block-navigation-item__content:hover{background:var(--ut-red-hover);text-decoration:none}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container{border:1px solid var(--ut-line);border-radius:var(--ut-radius);padding:var(--ut-s1)}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a,
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content{color:var(--ut-ink);font-size:15px}
.site-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--ut-paper);padding:var(--ut-s4) var(--ut-gutter)}
.site-header .wp-block-navigation__responsive-container.is-menu-open a,
.site-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content{color:var(--ut-ink);font-size:var(--ut-fs-md);padding:10px 0}
.site-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content,.wp-block-navigation__container,.wp-block-navigation-item,.wp-block-navigation__submenu-container){align-items:flex-start;text-align:left}
.ut-header-cta{white-space:nowrap}
.ut-header-cta__short{display:none}
@media(max-width:900px){
  .site-header .site-header-row{min-height:76px}
  .site-header .wp-block-site-logo img{width:110px}
  .site-header-end{gap:var(--ut-s1);flex-direction:row-reverse}
  .ut-header-cta{min-height:44px;padding:0 var(--ut-s2)}
  .ut-header-cta__long{display:none}
  .ut-header-cta__short{display:inline}
  /* Core only collapses the nav under 600px; the CTA swaps at 900px, so match it. */
  .site-header .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open){display:none}
}

/* ── Footer ────────────────────────────────────────────────────── */
.site-footer{background:var(--ut-ink);color:var(--ut-line);font-size:15px;line-height:1.6;padding:var(--ut-s6) var(--ut-gutter) 0}
.site-footer a{color:var(--ut-paper);text-decoration:none}
.site-footer a:hover,.site-footer .current-menu-item a{text-decoration:underline;text-underline-offset:.25em}
.site-footer h2{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ut-paper);margin:0 0 var(--ut-s2)}
.ut-footer-grid{display:grid;gap:var(--ut-s5);grid-template-columns:1fr;max-width:var(--ut-container);margin:0 auto;padding:var(--ut-s5) 0}
@media(min-width:900px){.ut-footer-grid{grid-template-columns:1.4fr 1.6fr 1fr}}
.ut-footer-logo img{width:100%;max-width:200px;height:auto}
.site-footer .ut-footer-col,.site-footer .ut-footer-col a{color:var(--ut-paper)}
.ut-footer-line{display:flex;align-items:center;gap:12px;margin:0 0 var(--ut-s1)}
.ut-footer-line svg{flex:0 0 22px;width:22px;height:22px}
.ut-footer-line svg circle{fill:var(--ut-red)}
.ut-footer-nav .wp-block-navigation__container{gap:4px}
.site-footer-bottom{border-top:1px solid var(--ut-rule-dark);max-width:var(--ut-container);margin:0 auto;padding:var(--ut-s3) 0;text-align:center;font-size:var(--ut-fs-xs);color:var(--ut-line)}
.ut-footer-copy{margin:0}

/* Same story as above for the boilerplate language switcher: pin both states
   explicitly rather than relying on source order (WCAG 1.4.3). */
.site-footer .brand-lang-switcher__item{color:var(--ut-paper);opacity:.85}
.site-footer .brand-lang-switcher__item--active{color:var(--ut-ink);opacity:1}