/* Shared visual contract for every ORMA Safety Library guide.
   Semantic colours are deliberate: blue = information, green = recommended
   action, amber = caution and red = stop / urgent health action. */
.safety-guide-article{
  --safety-guide-width:1680px;
  --safety-guide-gutter:clamp(24px,3vw,44px);
  --safety-guide-card-radius:15px;
  --guide-reading-width:none;
  background:var(--bg);
}

.safety-guide-article :is(.alt-shell,.cg-shell,.gp-body,.paw2-shell,.scan-shell,.apg-wrap){
  width:100%;
  max-width:var(--safety-guide-width);
  margin-right:auto;
  margin-left:auto;
  padding-right:var(--safety-guide-gutter);
  padding-left:var(--safety-guide-gutter);
}

.safety-guide-article .safety-photo-header.section-page-head{
  min-height:clamp(340px,34vw,450px);
  justify-content:flex-end;
  width:100%;
  max-width:none;
  margin:0;
  padding-right:max(var(--safety-guide-gutter),calc((100vw - var(--safety-guide-width))/2 + var(--safety-guide-gutter)));
  padding-left:max(var(--safety-guide-gutter),calc((100vw - var(--safety-guide-width))/2 + var(--safety-guide-gutter)));
  border:0;
  border-radius:0;
}

.safety-guide-article .safety-photo-header.section-page-head::before{
  background:
    linear-gradient(106deg,rgba(22,38,29,.88) 0%,rgba(22,38,29,.62) 40%,rgba(22,38,29,.04) 66%,rgba(22,38,29,0) 82%),
    linear-gradient(180deg,rgba(22,38,29,.08) 0%,rgba(22,38,29,0) 58%,rgba(22,38,29,.28) 100%);
}

.safety-guide-article .safety-photo-header.section-page-head h1{
  max-width:min(760px,54vw);
  font-size:clamp(28px,3.25vw,52px)!important;
  white-space:normal;
  text-wrap:balance;
}

.safety-guide-article .safety-photo-header :is(.section-page-subtitle,.sub,.alt-subtitle){
  max-width:min(700px,51vw);
  font-size:clamp(12px,1.05vw,17px)!important;
  white-space:normal;
  text-wrap:pretty;
}
.safety-guide-article .safety-topic{
  margin:0 0 10px;
  color:rgba(255,255,255,.82)!important;
  font:800 11px/1.2 'Inter',sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.safety-guide-article .safety-photo-header :is(.alt-meta,.paw2-meta,.cg-meta,.hs-meta,.scan-meta) strong{
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.92);
  color:var(--safety-safe);
}
.safety-guide-article .safety-back-link{
  position:absolute!important;
  top:clamp(22px,3vw,36px);
  left:max(var(--safety-guide-gutter),calc((100vw - var(--safety-guide-width))/2 + var(--safety-guide-gutter)));
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#BCE0EE!important;
  box-shadow:none;
  font-size:13px;
}
.safety-guide-article .safety-back-link:hover{
  background:transparent;
  box-shadow:none;
  text-decoration:underline;
}

/* Card geometry and semantic fills. Page-specific grids stay intact. */
.safety-guide-article :is(
  .scan-intro-copy,.scan-priority,.scan-card,.scan-alert,
  .alt-plan-panel,.alt-context-aside,.alt-vet-note,
  .cg-decision,.cg-muzzle-practice,.cg-step,.cg-stop-banner,
  .hs-readiness,.hs-action,.hs-observation,.hs-risk,
  .paw2-panel,.paw2-essentials,.paw2-first-aid,.paw2-detail,
  .apg-emergency,.apg-tools,.apg-card,.apg-method,
  .water-card,.gp-callout,.gp-warn
){border-radius:var(--safety-guide-card-radius);}

.safety-guide-article :is(.scan-priority,.alt-context-aside,.water-card--info,.gp-callout){
  border-color:color-mix(in srgb,var(--safety-info) 28%,transparent);
  background:var(--safety-info-soft);
}
.safety-guide-article :is(.scan-card--blue,.paw2-detail){
  border-color:color-mix(in srgb,var(--safety-info) 28%,transparent);
  background:var(--safety-info-soft);
}
.safety-guide-article :is(.scan-card--green,.cg-muzzle-practice,.water-card--safe){
  border-color:color-mix(in srgb,var(--safety-safe) 24%,transparent);
  background:var(--safety-safe-soft);
}
.safety-guide-article :is(.scan-card--amber,.water-card--caution){
  border-color:color-mix(in srgb,var(--safety-caution) 28%,transparent);
  background:var(--safety-caution-soft);
}
.safety-guide-article :is(.scan-card--red,.scan-alert,.alt-warning-note,.gp-warn,.water-card--stop){
  border-color:color-mix(in srgb,var(--safety-stop) 38%,transparent);
  background:var(--safety-stop-soft);
}

/* Water-guide sections use one calm white surface. Semantic colour remains in
   their kickers and urgent inset warning, rather than tinting entire cards. */
.safety-guide-article :is(.water-card,.water-card--info,.water-card--safe,.water-card--caution,.water-card--stop){
  border-color:var(--paper-line);
  background:var(--card);
}

/* One calm alert treatment throughout the library: pale red keeps the warning
   visible without letting it overpower the rest of the guide. */
.safety-guide-article :is(.scan-alert,.alt-warning-note,.cg-stop-banner,.hs-risk,.paw2-first-aid,.apg-emergency,.gp-warn){
  border:1px solid color-mix(in srgb,var(--safety-stop) 38%,transparent);
  background:var(--safety-stop-soft);
  color:var(--safety-stop);
  box-shadow:0 10px 24px -22px rgba(92,29,18,.55);
}
.safety-guide-article :is(.scan-alert,.alt-warning-note,.cg-stop-banner,.hs-risk,.paw2-first-aid,.apg-emergency,.gp-warn) :is(h2,h3,strong,b,p,span,summary,li){
  color:inherit;
}
.safety-guide-article :is(.scan-alert,.alt-warning-note,.cg-stop-banner,.hs-risk,.paw2-first-aid,.apg-emergency,.gp-warn) :is(p,span,li){
  color:#70483F;
}
.safety-guide-article :is(.paw2-first-aid-icon,.apg-emergency-mark){
  border-color:var(--safety-stop);
  background:var(--safety-stop);
  color:#fff;
}

/* Heat-choice cards stay neutral until selected; blue communicates the
   current choice without colouring the whole section. */
.safety-guide-article .hs-readiness,
.safety-guide-article .hs-observation,
.safety-guide-article .hs-check{
  border-color:var(--paper-line);
  background:var(--card);
}
.safety-guide-article .hs-check:has(input:checked){
  border-color:var(--safety-info);
  background:var(--safety-info-soft);
}

/* Numbered practical actions use neutral white cards; green is reserved for
   the number marker so the accent stays clear without tinting large areas. */
.safety-guide-article :is(.alt-plan-panel,.cg-muzzle-practice,.cg-step,.hs-action,.paw2-detail,.scan-card.scan-step){
  border-color:var(--paper-line);
  background:var(--card);
}
.safety-guide-article :is(.scan-step-number,.cg-step b,.paw2-essentials li>b){
  background:var(--safety-safe);
  color:#fff;
}
.safety-guide-article .alt-plan-list li::before,
.safety-guide-article .cg-muzzle-practice li::before,
.safety-guide-article .hs-action::before,
.safety-guide-article .gp-steps li::before{
  background:var(--safety-safe);
  color:#fff;
}
.safety-guide-article .paw2-detail-number{color:var(--safety-safe);}

/* Guide-to-guide navigation mirrors the page edges: previous on the left,
   next on the right, both in ORMA's signature dark green. */
.safety-guide-article .safety-continue{
  align-items:center;
  margin-top:32px;
  padding:17px 0;
}
.safety-guide-article :is(.safety-continue__previous,.safety-continue__next){
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:10px 17px;
  border-radius:11px;
  background:var(--ink);
  color:#fff;
  text-decoration:none!important;
  box-shadow:0 10px 22px -14px rgba(23,42,28,.74);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.safety-guide-article :is(.safety-continue__previous,.safety-continue__next) :is(.safety-continue__label,.safety-continue__arrow){color:#DDE8DF;}
.safety-guide-article :is(.safety-continue__previous,.safety-continue__next):hover{
  transform:translateY(-1px);
  background:#1D3024;
  box-shadow:0 13px 25px -14px rgba(23,42,28,.88);
}
.safety-guide-article :is(.safety-continue__previous,.safety-continue__next):hover strong{text-decoration:none;}
.safety-guide-article :is(.safety-continue__previous,.safety-continue__next):focus-visible{
  outline:3px solid rgba(62,122,145,.3);
  outline-offset:4px;
}

.safety-guide-article .safety-sources{
  margin-top:0;
  border-top:0;
  border-bottom:1px solid var(--paper-line);
}

/* The plant catalogue keeps its visual mosaic, with the same full-width page
   setup. Match the original compound selector so its mobile grid can collapse. */
@media(max-width:980px){
  .safety-guide-article .apg-hero.section-page-head{
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
  .safety-guide-article .apg-hero-mosaic{width:100%;min-width:0;}
}

/* Water is an editorial article, but its information is scanned as cards too. */
.water-guide-body{padding-top:28px!important;padding-bottom:56px!important;}
.water-guide-lead{max-width:900px;margin:0 0 22px;color:var(--ink-soft);font-size:.96rem;line-height:1.68;}
.water-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-items:stretch;}
.water-card{padding:22px 24px;border:1px solid var(--paper-line);background:var(--card);}
.water-card--wide{grid-column:1/-1;}
.water-card__kicker{display:block;margin-bottom:7px;color:var(--safety-info);font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
.water-card--caution .water-card__kicker{color:var(--safety-caution);}
.water-card--stop .water-card__kicker{color:var(--safety-stop);}
.water-card h2{margin:0 0 10px!important;font-size:clamp(24px,2.4vw,32px);line-height:1.08;}
.water-card p{margin:0;color:var(--ink-soft);font-size:.82rem;line-height:1.58;}
.water-card p+p{margin-top:10px;}
.water-card .gp-table{margin:8px 0 12px;background:rgba(255,255,255,.62);}
.water-card .gp-table tr:last-child td{border-bottom:0;}
.water-card .gp-warn{margin:16px 0 0;}

@media(max-width:760px){
  .safety-guide-article{--safety-guide-gutter:18px;}
  .safety-guide-article .safety-photo-header.section-page-head{
    min-height:430px;
    padding:28px 20px!important;
  }
  .safety-guide-article .safety-photo-header.section-page-head h1{font-size:clamp(30px,9vw,42px)!important;}
  .safety-guide-article .safety-photo-header.section-page-head h1,
  .safety-guide-article .safety-photo-header :is(.section-page-subtitle,.sub,.alt-subtitle){white-space:normal;}
  .safety-guide-article .safety-back-link{top:20px;left:20px;}
  .safety-guide-article .apg-hero.section-page-head{padding:31px 18px 22px;}
  .water-guide-body{padding-top:20px!important;padding-bottom:44px!important;}
  .water-guide-grid{grid-template-columns:1fr;}
  .water-card--wide{grid-column:auto;}
}

@media(max-width:560px){
  .safety-guide-article .safety-continue{align-items:stretch;}
  .safety-guide-article :is(.safety-continue__previous,.safety-continue__next){
    display:grid;
    grid-template-columns:max-content minmax(0,1fr) max-content;
    align-items:center;
    justify-content:stretch;
    gap:12px;
    width:100%;
    text-align:left;
  }
  .safety-guide-article .safety-continue__label{flex-basis:auto;}
  .safety-guide-article :is(.safety-continue__previous,.safety-continue__next) strong{min-width:0;}
  .safety-guide-article :is(.safety-continue__previous,.safety-continue__next) .safety-continue__arrow{justify-self:end;}
  .water-card{padding:19px 17px;}
}