/*
Theme Name: Vexus
Theme URI: https://vfv.com.au
Author: Vexus (developed with Anthropic Claude, for integration by Vetro)
Description: Vexus corporate theme -- fluid handling and contamination control divisions.
             Merges the former VFV and MMRC brands. Built from an approved static HTML
             prototype; see /docs/README.md in this theme for integration notes.
Version: 0.24.0
Text Domain: vexus
*/

/* ===========================================================
   Vexus shared design system
   Used by: index.html, about.html, fluid-handling.html,
   industrial-thermal.html, biopharma-medical.html,
   contamination-control.html
   =========================================================== */

:root{
  --paper: #1C2024;
  --accent-bg: #202428;
  --tertiary-bg: #1E1B18;
  --graphite: #14171A;
  --ink: #E7E5E0;
  --steel: #9DA3A8;
  --line: #DAD7CF;
  --line-dark: #333A40;
  --orange: #FF7500;
  --on-dark-heading: #F5F4F1;
  --on-dark-a: #B7BCC0;
  --on-dark-b: #9DA3A8;
  --on-dark-c: #C7CBCE;
  --on-dark-d: #8B9298;
  --on-dark-e: #7C8389;
  --on-dark-border: #454C52;
  --on-dark-border-hover: #8A9096;
  --nav-bg: rgba(20,23,26,0.96);
  --grid-line: rgba(255,255,255,0.04);
  --card-hover: #1B1F23;
  --merge-note-text: #D8DBDD;
  --nav-link-hover: #fff;
  --body-bg-image: url('assets/images/index-bg-pattern-dark-mode.png');
}
html.theme-light{
  --paper: #F5F4F1;
  --accent-bg: #EFEDE7;
  --tertiary-bg: var(--paper);
  --graphite: #FFFFFF;
  --ink: #1C1D1F;
  --steel: #58636D;
  --line-dark: #DDDAD3;
  --on-dark-heading: #1C1D1F;
  --on-dark-a: #4A5560;
  --on-dark-b: #58636D;
  --on-dark-c: #4A5560;
  --on-dark-d: #6B7280;
  --on-dark-e: #6B7280;
  --on-dark-border: #C9C6BE;
  --on-dark-border-hover: #9AA0A6;
  --nav-bg: rgba(255,255,255,0.96);
  --grid-line: rgba(20,23,26,0.06);
  --card-hover: #ECEAE4;
  --merge-note-text: #4A5560;
  --nav-link-hover: #14171A;
  --body-bg-image: url('assets/images/index-bg-pattern-light-mode.png');
}
.theme-light-only{ display:none !important; }
html.theme-light .theme-dark-only{ display:none !important; }
html.theme-light .theme-light-only{ display:block !important; }
.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--on-dark-border);
  background:transparent;
  color:var(--on-dark-heading);
  cursor:pointer;
  transition:border-color .15s ease;
  padding:0;
}

/* ---------- NAV SEARCH ---------- */
.search-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.search-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--on-dark-border);
  background:transparent;
  color:var(--on-dark-heading);
  cursor:pointer;
  transition:border-color .15s ease;
  padding:0;
}
.search-toggle:hover{ border-color:var(--orange); }

.site-search-form{
  display:none;
  position:absolute;
  top:100%;
  right:0;
  margin-top:8px;
  background:var(--graphite);
  border:1px solid var(--on-dark-border);
  padding:10px;
  z-index:60;
}
.site-search-form.is-open{ display:block; }
.site-search-form input[type="search"]{
  font-family:'Merriweather', serif;
  font-size:14px;
  padding:10px 14px;
  border:1px solid var(--on-dark-border);
  background:var(--paper);
  color:var(--ink);
  width:240px;
}
.theme-toggle:hover{ border-color:var(--orange); }

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

section[id]{ scroll-margin-top:77px; }
.contact-card[id]{ scroll-margin-top:77px; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Merriweather', serif;
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- HOMEPAGE-ONLY: petal pattern background ----------
   Scoped to body.front-page (WordPress's own is_front_page() body class)
   so only front-page.php gets this dark, patterned background -- every
   other page keeps the plain var(--paper) background set above, with its
   own dark sections (.page-hero, footer) painting their own background
   explicitly. Do NOT apply this globally; .hero/.structure/.contact have
   no background of their own precisely so this shows through underneath
   them (see the removed `background:var(--graphite)` that used to be on
   each one individually -- this replaces that, matching how the original
   prototype's index.html ended up working). */
body.front-page{
  background-color:var(--graphite);
  background-image:var(--body-bg-image);
  background-repeat:repeat;
  background-attachment:fixed;
  background-position:center top;
}

h1,h2,h3,.display{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
}

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--nav-bg);
  border-bottom:1px solid var(--line-dark);
}
nav.wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}
.logo{
  display:flex;
  align-items:center;
}
.logo img{
  height:26px;
  width:auto;
  display:block;
}
.nav-links{
  display:flex;
  align-items:center;
  font-family:'Montserrat', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--on-dark-c);
}
.nav-links ul.nav-menu{
  display:flex;
  gap:30px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links ul.nav-menu li{ margin:0; position:relative; }
.nav-links a{ transition:color .15s ease; }
.nav-links a:hover{ color:var(--nav-link-hover); }
/* WordPress adds this class automatically to the <li> of the page being viewed --
   replaces the prototype's manually-hardcoded class="current" on each page. */
.nav-links li.current-menu-item a,
.nav-links li.current_page_item a,
.nav-links li.current-menu-ancestor a{ color:var(--orange); }

/* ---------- NAV DROPDOWN ----------
   Triggered by WordPress's own nested-menu structure -- in Appearance ->
   Menus, drag a menu item slightly right to make it a child of the item
   above it. No extra plugin or custom walker needed: wp_nav_menu()'s
   default output already wraps children in <ul class="sub-menu"> inside
   the parent <li>, and adds "menu-item-has-children" to that <li> -- this
   is purely CSS reacting to markup WordPress was already producing.
   Revealed on :hover AND :focus-within (not just :hover), so tabbing to
   a parent link with a keyboard also opens its children -- a mouse-only
   dropdown would make the submenu links unreachable without one. */
.nav-links li.menu-item-has-children > a{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-links li.menu-item-has-children > a::after{
  content:"";
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.65;
  flex-shrink:0;
}
.nav-links ul.sub-menu{
  list-style:none;
  margin:0;
  padding:8px 0;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(4px);
  min-width:230px;
  background:var(--graphite);
  border:1px solid var(--on-dark-border);
  box-shadow:0 16px 28px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.nav-links li.menu-item-has-children:hover > ul.sub-menu,
.nav-links li.menu-item-has-children:focus-within > ul.sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity .15s ease, transform .15s ease, visibility 0s;
}
.nav-links ul.sub-menu li{ position:relative; }
.nav-links ul.sub-menu a{
  display:block;
  padding:11px 20px;
  white-space:nowrap;
  color:var(--on-dark-c);
  transition:color .15s ease, background .15s ease;
}
.nav-links ul.sub-menu a:hover,
.nav-links ul.sub-menu a:focus{
  color:var(--nav-link-hover);
  background:var(--card-hover);
}
/* A second level of nesting (a sub-menu inside a sub-menu) is supported by
   WordPress but not something this site's 6-item nav currently needs --
   if that ever comes up, a nested .sub-menu here would need
   `left:100%; top:0;` instead, to flyout sideways rather than stack
   downward inside an already-absolute-positioned parent panel. */

.nav-cta{
  border:1px solid var(--on-dark-border);
  padding:9px 18px;
  color:var(--on-dark-heading);
  font-family:'Montserrat', sans-serif;
  font-size:13.5px;
  font-weight:500;
  transition:border-color .15s ease, background .15s ease;
}
.nav-cta:hover{ border-color:var(--orange); background:rgba(255,117,0,0.08); }

@media (max-width:900px){
  .nav-links{ display:none; }
}

/* ---------- PAGE HERO (secondary pages) ---------- */
.page-hero{
  background:var(--graphite);
  color:var(--on-dark-heading);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line-dark);
  padding:64px 0 56px;
}
.page-hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
}
.page-hero .wrap{ position:relative; }

/* ---------- STERILE ASSEMBLIES: hero drawing ----------
   One-off accent, only present in the markup at all when
   taxonomy-vexus_division.php is rendering that specific term -- see the
   comment there. Positioned to sit right of the page title, at a low
   opacity similar to the homepage's petal pattern (a comparably subtle
   background presence, not a competing visual element). The source
   drawing is very tall and narrow (a vertical pipe run), so most of its
   height intentionally bleeds above/below the hero and gets clipped by
   .page-hero's own overflow:hidden -- top is tuned so the more detailed
   valve/actuator section of the drawing, rather than the plain pipe
   section, is what's actually visible in that window. */
/* Shared defaults for every entry in $term_hero_drawings (see
   taxonomy-vexus_division.php). These are the values Filling and
   Sampling settled on, and happen to match what Sterile Assemblies
   converged on for opacity too -- so a NEW drawing that's roughly
   photo-shaped (not extremely wide/tall) can likely just use these
   as-is, needing only a right-anchor adjustment if the default 25%
   doesn't suit its composition, rather than a full custom block like
   the two below needed. Sized by height (not width) specifically
   because that's the reliable approach for a replaced element like
   <img> -- see the Filling and Sampling comment below for why the
   opposite (stretch via top+bottom with no explicit height) silently
   breaks for images specifically, even though it works fine for
   ordinary elements. */
.term-hero-drawing{
  position:absolute;
  top:25px;
  right:25%;
  height:180px;
  width:auto;
  pointer-events:none;
}
.term-hero-drawing.theme-light-only{ opacity:.16; }
.term-hero-drawing.theme-dark-only{ opacity:.14; }
@media (max-width:900px){
  .term-hero-drawing.theme-light-only{ opacity:.11; }
  .term-hero-drawing.theme-dark-only{ opacity:.12; }
}

/* ---- Sterile Assemblies (settled after several rounds of live tuning) ----
   Sized by WIDTH instead of the shared height-based default above --
   this drawing is unusually wide/short, so controlling it by width
   (with height:auto restoring the default aspect-ratio behaviour the
   base class's explicit height would otherwise override) made more
   sense than forcing it into the default height. This is the pattern
   to reach for if a future drawing is similarly unusual in shape. */
.term-hero-drawing--sterile-assemblies{
  right:21.5%;
  width:2500px;
  height:auto;
}
@media (max-width:900px){
  .term-hero-drawing--sterile-assemblies{ width:1786px; top:5px; }
}

/* ---- Filling and Sampling ----
   No overrides needed at all -- every value it uses is now the shared
   default above, since this is the drawing those defaults were taken
   from. Kept as an empty, commented block (rather than deleted) so it's
   obvious this is intentional if someone goes looking for its rule and
   doesn't find one. */
.term-hero-drawing--filling-and-sampling{ /* uses all shared defaults */ }
.term-hero-drawing--biopharmaceutical-fittings{ /* uses all shared defaults */ }
.term-hero-drawing--steam-in-place{ /* uses all shared defaults */ }
.term-hero-drawing--sterile-connectors{ /* uses all shared defaults */ }

@media (max-width:600px){
  .term-hero-drawing{ display:none; }
}
.breadcrumb{
  font-family:'Montserrat', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--on-dark-b);
  margin-bottom:18px;
}
.breadcrumb a{ transition:color .15s ease; }
.breadcrumb a:hover{ color:var(--orange); }
.page-hero h1{
  font-size:40px;
  line-height:1.12;
  max-width:16ch;
}
.page-hero p{
  margin-top:18px;
  max-width:52ch;
  color:var(--on-dark-a);
  font-size:16.5px;
  font-weight:300;
}
.page-hero p.contact-address{
  margin-top:8px;
  font-size:14px;
  color:var(--on-dark-b);
}

/* ---------- HERO (home) ---------- */
.hero{
  color:var(--on-dark-heading);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line-dark);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:40px;
  align-items:center;
  padding-top:88px;
  padding-bottom:88px;
  min-height:560px;
}
.hero-eyebrow{
  font-family:'Montserrat', sans-serif;
  font-size:13px;
  color:var(--orange);
  font-weight:600;
  margin-bottom:22px;
}
.hero h1{
  font-size:52px;
  line-height:1.08;
  max-width:11.5ch;
}
.hero p{
  margin-top:22px;
  max-width:46ch;
  color:var(--on-dark-a);
  font-size:16.5px;
  font-weight:300;
}
.hero-actions{
  margin-top:38px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.btn-primary{
  background:var(--orange);
  color:#14171A;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:14.5px;
  padding:14px 26px;
  display:inline-block;
  transition:background .15s ease;
}
.btn-primary:hover{ background:#FF8B26; }
.btn-secondary{
  border:1px solid var(--on-dark-border);
  color:var(--on-dark-heading);
  font-family:'Montserrat', sans-serif;
  font-weight:500;
  font-size:14.5px;
  padding:14px 26px;
  display:inline-block;
  transition:border-color .15s ease;
}
.btn-secondary:hover{ border-color:var(--on-dark-border-hover); }

.hero-diagram{ position:relative; }
.hero-diagram svg{ width:100%; height:auto; display:block; }
.flow-line{
  fill:none;
  stroke:var(--orange);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:draw 2.4s ease forwards .3s;
}
.flow-line-b{ stroke:#4E5860; animation-delay:.6s; }
.node{ fill:#14171A; stroke:#5A636B; stroke-width:1.5; }
.node-live{ fill:#14171A; stroke:var(--orange); stroke-width:1.5; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .flow-line{ animation:none; stroke-dashoffset:0; }
}

@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; padding-top:64px; padding-bottom:56px; }
  .hero h1{ font-size:38px; max-width:none; }
  .hero-diagram{ order:-1; }
}

/* ---------- SECTION SHARED ---------- */
section{ padding:100px 0; }
.section-head{
  margin-bottom:56px;
  border-bottom:1px solid var(--line);
  padding-bottom:28px;
}
.section-head h2{
  font-size:32px;
}
.section-head p{
  color:var(--steel);
  font-size:15.5px;
  margin-top:10px;
}
/* ---------- STRUCTURE / FINDER GRID ---------- */
.structure{
  color:var(--on-dark-heading);
  border-bottom:1px solid var(--line-dark);
  position:relative;
  overflow:hidden;
}
.structure .wrap{ position:relative; }
.structure .section-head{ border-bottom-color:var(--line-dark); }
.structure .section-head p{ color:var(--on-dark-b); }

.finder-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.finder-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
.finder-card{
  background:var(--graphite);
  padding:44px 30px 46px;
  display:block;
  transition:background .15s ease;
}
.finder-card:hover{ background:var(--card-hover); }
.finder-card:hover h3{ color:var(--orange); }
.finder-icon{
  height:26px;
  width:auto;
  margin-bottom:26px;
  opacity:.92;
}
.finder-tag{
  font-family:'Montserrat', sans-serif;
  font-size:12.5px;
  font-weight:500;
  color:var(--on-dark-d);
  margin-bottom:10px;
}
.finder-card h3{
  font-size:21px;
  color:var(--on-dark-heading);
  margin-bottom:12px;
  transition:color .15s ease;
}
.finder-card p{
  font-size:14.5px;
  font-weight:300;
  color:var(--on-dark-b);
  max-width:36ch;
}
@media (max-width:760px){
  .finder-grid, .finder-grid.cols-2{ grid-template-columns:1fr; }
}

/* ---------- PRODUCT ROWS (hub pages) ---------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);

}
.quality-email-split{
  margin-top:32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.quality-email-split .feature-tag{ margin-bottom:12px; }
@media (max-width:760px){
  .quality-email-split{ grid-template-columns:1fr; gap:20px; }
}
.product-card{
  background:var(--paper);
  padding:34px 32px;
}
/* When used as a link (archive-vexus_product.php lists products this way) --
   the prototype's product-card was always a static, non-clickable div. */
a.product-card{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:background .15s ease;
}
a.product-card:hover{ background:var(--card-hover); }
a.product-card:hover h3{ color:var(--orange); transition:color .15s ease; }
.product-card h3{
  font-size:18.5px;
  margin-bottom:10px;
}
.product-card p{
  color:var(--steel);
  font-size:14.5px;
  font-weight:300;
}
/* When a product-card body comes from a WYSIWYG field (page-quality.php)
   instead of hand-written markup, it's wrapped in .entry-content for its
   own general styling elsewhere -- this keeps its text sized to match the
   plain .product-card p above rather than .entry-content's larger default. */
.product-card .entry-content{ font-size:14.5px; }
.product-card .entry-content p{ font-size:14.5px; max-width:none; }
.product-card .entry-content > * + *{ margin-top:0.8em; }
@media (max-width:760px){
  .product-grid{ grid-template-columns:1fr; }
}

/* ---------- CONTACT ---------- */
.contact{
  color:var(--on-dark-heading);
  position:relative;
  overflow:hidden;
}
.contact .wrap{ position:relative; }
.contact .section-head{ border-bottom-color:var(--line-dark); }
.contact .section-head p{ color:var(--on-dark-b); }
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.contact-card{
  background:var(--graphite);
  padding:32px 28px;
}
.contact-card h3{ font-size:18px; margin-bottom:10px; }
.contact-card p{ color:var(--on-dark-b); font-size:14.5px; font-weight:300; margin-bottom:22px; }
.contact-card p.contact-card-phone{
  margin-top:14px;
  margin-bottom:0;
}
.contact-card-phone a{
  color:var(--on-dark-b);
  font-size:14px;
  text-decoration:none;
  transition:color .15s ease;
}
.contact-card-phone a:hover{ color:var(--orange); }
@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ---------- ABOUT: CHAPTERS ---------- */
.chapter{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:48px;
  padding:44px 0;
  border-bottom:1px solid var(--line);
}
.chapter:first-of-type{ border-top:1px solid var(--line); }
.chapter-tag{
  font-family:'Montserrat', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--steel);
}
.chapter h3{
  font-size:24px;
  margin-top:8px;
}
.chapter-body p{
  color:var(--steel);
  max-width:64ch;
  font-size:15.5px;
  font-weight:300;
}
.chapter-body p + p{ margin-top:14px; }
@media (max-width:760px){
  .chapter{ grid-template-columns:1fr; gap:14px; }
}

.merge-note{
  background:var(--graphite);
  color:var(--on-dark-heading);
  padding:56px 0;
}
.merge-note .wrap{ max-width:760px; }
.merge-note .hero-eyebrow{ margin-bottom:16px; }
.merge-note p{
  font-size:17px;
  font-weight:300;
  color:var(--merge-note-text);
  max-width:60ch;
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--graphite);
  border-top:1px solid var(--line-dark);
  color:var(--on-dark-e);
  font-size:13px;
  padding:28px 0;
}
footer .wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.footer-brand-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:9px;
}
.footer-brand img{ height:15px; width:auto; }
.footer-address{
  color:var(--on-dark-e);
  font-size:12.5px;
  line-height:1.5;
}

/* footer .wrap above defaults to justify-content:space-between (for the
   brand/tagline row) -- these two need centering instead, hence the
   more specific selector (footer .wrap.footer-X) rather than !important. */
footer .wrap.footer-cta-row{
  justify-content:center;
  margin-top:24px;
}
footer .wrap.footer-social{
  justify-content:center;
  margin-top:20px;
  gap:16px;
}
.footer-social a{
  color:var(--on-dark-e);
  display:flex;
  transition:color .15s ease;
}
.footer-social a:hover{ color:var(--orange); }


/* ---------- WIREFRAME ACCENT ---------- */
.wireframe-mark{
  position:absolute;
  height:auto;
  opacity:.07;
  pointer-events:none;
}
.wireframe-hero{ top:-70px; right:-90px; width:460px; }
.wireframe-structure{ bottom:-110px; left:-100px; width:420px; transform:rotate(18deg); }
.wireframe-contact{ top:-80px; right:-120px; width:440px; transform:scaleX(-1) rotate(8deg); }
@media (max-width:760px){
  .wireframe-mark{ display:none; }
}

/* ---------- FRONT PAGE: HERO LOGO (large lockup beside headline) ---------- */
.hero-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-logo-large{
  width:100%;
  max-width:520px;
  height:auto;
  display:block;
}

/* ---------- PRODUCT FEATURE ROWS ---------- */
.feature-row{
  display:flex;
  align-items:center;
  gap:64px;
  padding:70px 0;
  border-bottom:1px solid var(--line);
}
.feature-row:first-of-type{ border-top:1px solid var(--line); }
.feature-row.reverse{ flex-direction:row-reverse; }
.feature-media{ flex:1 1 0; min-width:0; }
.feature-content{ flex:1 1 0; min-width:0; }

/* object-fit:contain here never crops -- it just stops an unusually tall
   (portrait) photo from making its whole row excessively tall, by
   shrinking it to fit within max-height while keeping the full image
   visible. The old hard crop (see add_image_size in functions.php) is
   what was actually cutting off tops/sides; this is just a display-time
   safety net for shape variety now that nothing crops the file itself. */
.feature-media-image{
  width:100%;
  height:auto;
  max-height:480px;
  object-fit:contain;
  display:block;
}

.image-placeholder{
  aspect-ratio:4/3;
  border:1px dashed var(--line);
  background:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--steel);
  text-align:center;
  padding:24px;
}
.image-placeholder svg{ width:52px; height:52px; opacity:.4; }
.image-placeholder span{
  font-family:'Montserrat', sans-serif;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.02em;
  max-width:22ch;
}

/* ---------- CONTACT: form placeholder ----------
   Shown by page-contact.php only when the page's content editor is empty --
   once Gravity Forms (or whichever plugin) is actually installed, its
   block/shortcode goes directly in that content editor and this never
   renders again. Same dashed-border visual language as .image-placeholder
   above, just sized for a form-shaped gap instead of an image-shaped one. */
.contact-form-placeholder{
  min-height:340px;
  border:1px dashed var(--line);
  background:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--steel);
  text-align:center;
  padding:40px;
}
.contact-form-placeholder svg{ width:48px; height:48px; opacity:.4; }
.contact-form-placeholder p{ max-width:44ch; font-size:14.5px; }
.contact-form-placeholder code{
  font-size:13px;
  background:var(--card-hover);
  padding:3px 8px;
  border-radius:3px;
}

.feature-tag{
  font-family:'Montserrat', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--steel);
  margin-bottom:10px;
}
.feature-content h3{ font-size:26px; margin-bottom:14px; }
.feature-content > p{
  color:var(--steel);
  font-size:15.5px;
  font-weight:300;
  max-width:52ch;
  margin-bottom:28px;
}

.doc-dropdown{
  background:var(--tertiary-bg);
  border:1px solid var(--line);
  max-width:360px;
}
.doc-dropdown summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  cursor:pointer;
  font-family:'Montserrat', sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  list-style:none;
}
.doc-dropdown summary::-webkit-details-marker{ display:none; }
.doc-dropdown summary svg{ transition:transform .15s ease; flex-shrink:0; color:var(--steel); }
.doc-dropdown[open] summary svg{ transform:rotate(180deg); }
.doc-dropdown ul{ list-style:none; border-top:1px solid var(--line); }
.doc-dropdown li + li{ border-top:1px solid var(--line); }
.doc-dropdown li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  font-size:14px;
  color:var(--steel);
  transition:color .15s ease, background .15s ease;
}
.doc-dropdown li a:hover{ color:var(--orange); background:var(--accent-bg); }
.doc-dropdown li a svg{ flex-shrink:0; opacity:.6; }

/* ---------- PRODUCT TAGS ---------- */
.product-tags{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.product-tags a{
  font-family:'Montserrat', sans-serif;
  font-size:12px;
  font-weight:500;
  color:var(--steel);
  border:1px solid var(--line);
  padding:5px 12px;
  transition:color .15s ease, border-color .15s ease;
}
.product-tags a:hover{ color:var(--orange); border-color:var(--orange); }

@media (max-width:760px){
  .feature-row, .feature-row.reverse{ flex-direction:column; gap:32px; padding:48px 0; }
}

/* ---------- ENTRY CONTENT (real WYSIWYG editor output) ----------
   The prototype had no raw editor content anywhere -- every page was
   hand-built markup. This styles whatever an editor actually types into
   the block/classic editor on page.php and single-product.php so it
   doesn't fall back to unstyled browser defaults. */
.entry-content{
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
}
.entry-content > * + *{ margin-top:1.2em; }
.entry-content h2{ font-size:28px; }
.entry-content h3{ font-size:22px; }
.entry-content p{ color:var(--steel); font-weight:300; max-width:70ch; }
.entry-content a{ color:var(--orange); text-decoration:underline; }
.entry-content ul, .entry-content ol{ padding-left:1.4em; color:var(--steel); font-weight:300; }
.entry-content img{ max-width:100%; height:auto; display:block; }

/* ---------- PARTNERS PAGE ---------- */
.partner-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.partner-card{
  background:var(--paper);
  padding:36px 28px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.partner-logo{
  height:60px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
}
.partner-logo img{
  max-height:100%;
  max-width:160px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.partner-card h3{
  font-size:17px;
  margin-bottom:8px;
}
.partner-card p{
  color:var(--steel);
  font-size:13.5px;
  font-weight:300;
  margin-bottom:20px;
  max-width:28ch;
}
.partner-visit{ margin-top:auto; }
@media (max-width:900px){
  .partner-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .partner-grid{ grid-template-columns:1fr; }
}