/*
Theme Name: Process Weave — Navy (Blocks)
Theme URI: https://processweave.ca
Author: Process Weave
Description: Block theme. Flush-left ruled grid, Archivo Black display, Inter Tight body, light/dark ground remembered per visitor. Every section is a pattern; everything is editable in Appearance → Editor.
Version: 2.3.2
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pw-navy
Tags: business, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style
*/

/* ---------------------------------------------------------------
   Ground tokens. theme.json's palette points at these, so the
   colour pickers in the editor stay meaningful and the runtime
   toggle can flip both grounds at once.
   --------------------------------------------------------------- */
:root, html[data-theme="dark"] {
  --pw-bg:#101318; --pw-surface:#1A1F27; --pw-line:#2A3140;
  --pw-fg:#F5F4F0; --pw-fg2:#C2C6CE; --pw-muted:#8A909B;
  --pw-accent:#6E88AE; --pw-accent-hover:#B3C2D8; --pw-on-accent:#101318;
}
html[data-theme="light"] {
  --pw-bg:#F5F4F0; --pw-surface:#FFFFFF; --pw-line:#CFD5DF;
  --pw-fg:#101318; --pw-fg2:#4A505C; --pw-muted:#5E6470;
  --pw-accent:#1B3A6B; --pw-accent-hover:#101F3B; --pw-on-accent:#F5F4F0;
}
/* The editor canvas has no data-theme attribute; default it to dark. */
.editor-styles-wrapper { --pw-bg:#101318; --pw-surface:#1A1F27; --pw-line:#2A3140;
  --pw-fg:#F5F4F0; --pw-fg2:#C2C6CE; --pw-muted:#8A909B;
  --pw-accent:#6E88AE; --pw-accent-hover:#B3C2D8; --pw-on-accent:#101318; }

/* ---- Base ---- */
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main { flex: 1 0 auto; }
*:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }

/* ---- Ruled grid: columns keep their 2px dividers ---- */
.is-style-pw-ruled > .wp-block-column + .wp-block-column,
.is-style-pw-ruled > .wp-block-columns > .wp-block-column + .wp-block-column {
  border-left: 2px solid var(--pw-line);
}
.is-style-pw-ruled.wp-block-columns { gap: 0 !important; }

/* ---- Type ---- */
/* Reading measure applies ONLY to text blocks inside a constrained
   post-content (the default page/single templates). A blanket
   `.wp-block-post-content > *` rule also clamps full-bleed patterns
   on the Wide page template, which is not wanted. */
.wp-block-post-content.is-layout-constrained > p,
.wp-block-post-content.is-layout-constrained > h1,
.wp-block-post-content.is-layout-constrained > h2,
.wp-block-post-content.is-layout-constrained > h3,
.wp-block-post-content.is-layout-constrained > h4,
.wp-block-post-content.is-layout-constrained > ul,
.wp-block-post-content.is-layout-constrained > ol,
.wp-block-post-content.is-layout-constrained > blockquote {
  max-width: 76ch;
}
.pw-mono, .is-style-pw-label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pw-muted);
}
.pw-mono a { color: inherit; }
.pw-mono a:hover { color: var(--pw-fg); }
.pw-mono-plain { text-transform: none; letter-spacing: .04em; font-size: 12px; }
.pw-rail { font-size: 10px; line-height: 1.9; }
.pw-eyebrow, .is-style-pw-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pw-accent); margin-bottom: 24px;
}

/* ---- Measures and balance (kept out of block attributes so the
       editor never flags the markup as invalid) ---- */
.pw-balance { text-wrap: balance; }
.pw-measure-14em { max-width: 14em; }
.pw-measure-16 { max-width: 16ch; }
.pw-measure-20 { max-width: 20ch; }
.pw-measure-22 { max-width: 22ch; }
.pw-measure-24 { max-width: 24ch; }
.pw-measure-26 { max-width: 26ch; }
.pw-measure-46 { max-width: 46ch; }
.pw-measure-48 { max-width: 48ch; }
.pw-measure-54 { max-width: 54ch; }
.pw-measure-56 { max-width: 56ch; }
.pw-measure-62 { max-width: 62ch; }

/* ---- Small parts ---- */
.pw-rule-top { border-top: 1px solid var(--pw-line); }
.pw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-chip {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pw-fg2); border: 1px solid var(--pw-line); padding: 5px 9px;
}
.pw-bullets { border-left: 3px solid var(--pw-accent); padding: 4px 0 4px 20px; }
.pw-pullquote {
  margin: 34px 0 0; padding: 0 0 0 24px;
  border-left: 3px solid var(--pw-accent);
}
.pw-pullquote p {
  font-family: var(--wp--preset--font-family--display);
  font-size: 22px; line-height: 1.25; color: var(--pw-fg); margin: 0;
}
.pw-pullquote cite {
  display: block; margin-top: 12px; font-style: normal;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-muted);
}
.pw-note-row { border-bottom: 1px solid var(--pw-line); padding-bottom: 18px; }
.pw-note-row .wp-block-post-title { margin: 8px 0 0; }
.pw-note-row .wp-block-post-title a { color: var(--pw-fg); }
.pw-note-row .wp-block-post-title a:hover { color: var(--pw-accent); }
.pw-detail { margin-top: 30px; }
.pw-hero-motif { width: 100%; height: 100%; display: block; min-height: 320px; }
.pw-motif-grid { stroke: var(--pw-line); }
.pw-motif-path { stroke: var(--pw-accent); }
.pw-motif-dot-a { fill: var(--pw-accent); }
.pw-motif-dot-b { fill: var(--pw-fg); }

/* ---- Buttons ---- */
.wp-block-button__link { min-height: 44px; transition: background-color 140ms ease, border-color 140ms ease; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--pw-accent-hover); color: var(--pw-on-accent); }
.wp-block-button.is-style-outline .wp-block-button__link { border-width: 2px; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--pw-accent); }
.pw-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }
.pw-nav-cta .wp-block-button__link { padding: 11px 18px; font-size: 13px; }

/* ---- Header ---- */
.pw-topbar {
  padding: 11px 40px; border-bottom: 1px solid var(--pw-line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px;
}
.pw-topbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.pw-masthead {
  padding: 20px 40px; border-bottom: 2px solid var(--pw-line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px;
}
.pw-brand { display: flex; align-items: center; gap: 14px; }
.pw-nav-group { display: flex; flex-wrap: wrap; align-items: center; gap: 34px; }
.pw-flush { margin-top: 0; margin-bottom: 0; }

/* ---- Footer ---- */
.pw-foot-col { padding: 40px; }
.pw-foot-blurb { font-size: 15px; margin-top: 22px; max-width: 38ch; }
.pw-foot-head { margin-top: 0; margin-bottom: 18px; }
.pw-foot-note { font-size: 15px; margin-top: 0; margin-bottom: 18px; }
.pw-foot-hint { font-size: 12px; color: var(--pw-muted); margin-bottom: 0; }
.pw-footer { border-top: 2px solid var(--pw-line); }
.pw-colophon {
  padding: 20px 40px; border-top: 2px solid var(--pw-line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px;
}

/* ---- Navigation ---- */
.wp-block-navigation a { color: var(--pw-fg); text-decoration: none; }
.wp-block-navigation .current-menu-item > a { border-bottom: 2px solid var(--pw-accent); padding-bottom: 2px; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--pw-bg); }
.wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--pw-surface); border: 2px solid var(--pw-line); padding: 6px 0; min-width: 240px;
}
.wp-block-navigation .wp-block-navigation__submenu-container a { padding: 10px 18px; font-size: 14px; }
.wp-block-navigation .wp-block-navigation__submenu-container a:hover { color: var(--pw-accent); }

/* ---- Cards / details ---- */
.is-style-pw-card { background: var(--pw-surface); border: 2px solid var(--pw-line); padding: 32px; }
.is-style-pw-hover:hover { background: var(--pw-surface); }
.wp-block-details { border-top: 1px solid var(--pw-line); padding-top: 22px; }
.wp-block-details summary {
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--pw-fg);
  padding: 12px 0;
}
.wp-block-details[open] summary { color: var(--pw-accent); }
.wp-block-details > :not(summary) { color: var(--pw-fg2); }

/* ---- Theme toggle ---- */
.pw-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--pw-line); color: var(--pw-muted);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; cursor: pointer;
}
.pw-toggle:hover { border-color: var(--pw-accent); color: var(--pw-fg); }
.pw-toggle i { width: 8px; height: 8px; background: var(--pw-accent); display: block; }

/* Wordmark / monogram: ONE image per slot. The toggle script rewrites its src
   (data-src-dark / data-src-light), so nothing depends on CSS hiding — and there
   is never a second copy to overlap. */
.pw-wordmark, .pw-monogram { display: block; line-height: 0; }
.pw-wordmark img { display: block; width: 168px; height: auto; }
.pw-monogram img { display: block; width: 40px; height: 40px; }

/* ---- Forms ---- */
input[type="text"], input[type="email"], input[type="tel"], textarea, select, .wp-block-search__input {
  width: 100%; box-sizing: border-box; min-height: 44px; border-radius: 0;
  background: transparent; border: 2px solid var(--pw-line); color: var(--pw-fg);
  padding: 12px 14px; font-size: 15px; font-family: var(--wp--preset--font-family--body);
}
input:focus, textarea:focus, select:focus { border-color: var(--pw-accent); outline: none; }
label, .gform_wrapper .gfield_label, .wpcf7-form label {
  display: block; font-family: var(--wp--preset--font-family--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pw-muted); margin-bottom: 8px;
}
input[type="submit"], button[type="submit"], .wpcf7-submit, .gform_button {
  min-height: 44px; padding: 15px 22px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--pw-accent); color: var(--pw-on-accent);
  font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 15px;
}
input[type="submit"]:hover, button[type="submit"]:hover, .wpcf7-submit:hover, .gform_button:hover { background: var(--pw-accent-hover); }

/* ---- Responsive: collapse the rule grid ---- */
@media (max-width: 860px) {
  .is-style-pw-ruled > .wp-block-column + .wp-block-column,
  .is-style-pw-ruled > .wp-block-columns > .wp-block-column + .wp-block-column {
    border-left: 0; border-top: 2px solid var(--pw-line);
  }
  .pw-topbar, .pw-masthead, .pw-colophon { padding-left: 24px; padding-right: 24px; }
  .pw-foot-col { padding: 28px 24px; }
}
@media print {
  .pw-toggle, .pw-topbar, .wp-block-navigation { display: none !important; }
}