/* © 2026 Catchment Ltd. All rights reserved.
 * Licensed for use only via the Catchment platform per the Terms & Conditions
 * at https://catchment.co.uk/Terms_and_Conditions.html
 * Open-source attributions: see https://catchment.co.uk/NOTICES.html
 */
/* Catchment — suite-wide polish overrides (Bucket 3 of cycle-2 CX audit)
 * Loaded via <link rel="stylesheet" href="suds-polish.css"> after the per-page
 * inline styles, so these rules win without editing every page's <style> block.
 *
 * Scope: typography canonicalisation, card shadow refresh, input border +
 * focus-ring upgrade, standards-badge polish, footer trust line, button
 * hierarchy discipline. Idempotent — safe to import twice.
 */

/* === Standards / reference / status badges typography === */
.standard-badge,
.std-card-code,
.compliance-badge,
.status-badge {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
.std-card-code {
  letter-spacing: 0.6px !important;
}

/* === Card shadow refresh — replace flat shadows with layered Apple-style === */
.kg-disc-card,
.std-card,
.how-card,
.tool-card,
.calculator-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
              0 4px 10px rgba(15, 23, 42, 0.04) !important;
  transition: box-shadow 0.25s cubic-bezier(.4, 0, .2, 1),
              transform 0.25s cubic-bezier(.4, 0, .2, 1),
              border-color 0.2s ease !important;
}
.kg-disc-card:hover,
.std-card:hover,
.how-card:hover,
.tool-card:hover,
.calculator-card:hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06),
              0 16px 32px -12px rgba(15, 23, 42, 0.16) !important;
  transform: translateY(-2px);
}

/* === Input border upgrade — subtler at rest, distinct copper focus ring === */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="password"],
textarea,
select {
  border-color: #D8CFBE !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: #8A5E33 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18) !important;
}

/* === Button hierarchy discipline ===
   Copper (#8A5E33 / #C9A06A) reserved for PRIMARY actions only.
   Secondary buttons get slate border + transparent fill, copper on hover.
   Note: this only kicks in if a button explicitly carries .btn-secondary; it
   does NOT silently restyle uncategorised buttons.
*/
.btn-secondary,
button.btn-secondary,
a.btn-secondary {
  background: transparent !important;
  border: 2px solid #D8CFBE !important;
  color: #16271F !important;
}
.btn-secondary:hover,
button.btn-secondary:hover,
a.btn-secondary:hover {
  border-color: #8A5E33 !important;
  color: #8A5E33 !important;
  background: transparent !important;
}

/* === Help-modal close button — visible touch target on mobile === */
@media (max-width: 480px) {
  [aria-label="Close"] {
    top: 8px !important;
    right: 8px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.05) !important;
    font-size: 22px !important;
    line-height: 36px !important;
  }
}

/* === Print: tidy up shadows and animations === */
@media print {
  .kg-disc-card,
  .std-card,
  .how-card,
  .tool-card,
  .calculator-card,
  .suds-banner {
    box-shadow: none !important;
    transform: none !important;
  }
}

/* === suds-nav mobile menu (2026-06-06): gives #navbar a working hamburger on small screens === */
.nav-burger{display:none;background:transparent;border:0;cursor:pointer;padding:8px;margin-left:8px;flex:0 0 auto;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border-radius:8px}
.nav-burger:hover{background:rgba(15,23,42,0.06)}
.nav-burger-bar{display:block;width:22px;height:2px;border-radius:2px;background:var(--suds-slate-950,#16271F);transition:transform .25s ease,opacity .2s ease}
#navbar.nav-open .nav-burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
#navbar.nav-open .nav-burger-bar:nth-child(2){opacity:0}
#navbar.nav-open .nav-burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:768px){
  #navbar .nav-burger{display:inline-flex}
  #navbar .nav-container{position:relative}
  #navbar.nav-open .nav-links,nav#navbar.nav-open .nav-links{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:0 !important;position:absolute;top:64px;left:0;right:0;width:auto !important;margin:0 !important;padding:8px 0 !important;z-index:1001 !important;background:#FFFFFF !important;border-bottom:1px solid rgba(15,23,42,0.08) !important;box-shadow:0 8px 24px rgba(15,23,42,0.10) !important}
  #navbar.nav-open .nav-links a{display:block !important;padding:13px 24px !important;font-size:15px !important;width:100% !important;border-radius:0 !important}
  #navbar.nav-open .nav-links a:hover{background:var(--suds-slate-50,#F6F2E9) !important}
}

/* === Fix invisible project-bar buttons (2026-06-06): the global button rule forced white text;
      these secondary buttons keep a white background, so labels were white-on-white. === */
.suds-project-bar button:not(#suds-project-new){color:var(--suds-slate-600,#5D584E) !important;background:#FFFFFF !important;border:1px solid #D8CFBE !important}
.suds-project-bar button:not(#suds-project-new):hover{border-color:var(--suds-copper-700,#8A5E33) !important;color:var(--suds-copper-700,#8A5E33) !important}
#suds-project-new{color:#FFFFFF !important;background:var(--suds-copper-700,#8A5E33) !important}

/* === Fix wizard step-label clipping on mobile (2026-06-06): .step-indicator was justify-content:center
      with content wider than the container + overflow:auto, clipping the first label ("…e Info").
      Make the steps share width equally so all four fit with no clipping/scroll. === */
@media (max-width:560px){
  .step-indicator{justify-content:space-between !important;gap:4px !important;overflow:visible !important;flex-wrap:nowrap !important;padding-left:0 !important;padding-right:0 !important}
  .step-indicator .step-item{flex:1 1 0 !important;min-width:0 !important;padding:0 2px !important}
  .step-indicator .step-circle{width:34px !important;height:34px !important;font-size:0.8rem !important}
  .step-indicator .step-label{max-width:none !important;width:100% !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;font-size:0.62rem !important;line-height:1.2 !important;text-align:center !important}
}