/*
  Shashank Agency – cross-site design consistency layer.
  Loaded last so it consolidates interaction, type, spacing and responsive
  behavior without replacing individual brand-page colour systems.
*/
:root {
  --sa-surface-page: var(--cream, #f7f4ed);
  --sa-surface-dark: var(--ink, var(--navy, #102743));
  --sa-text: var(--ink, var(--navy, #102743));
  --sa-text-on-dark: #fff;
  --sa-link-hover: var(--accent, var(--orange, #f4613b));
  --sa-border: rgba(16, 39, 67, .18);
  --sa-focus: rgba(244, 97, 59, .88);
  --sa-radius-control: 999px;
  --sa-control-height: 48px;
  --sa-motion-fast: 180ms ease;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-padding-top: 96px; }

body {
  min-width: 0;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
iframe { max-width: 100%; }

img,
svg { display: block; }

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--sa-focus) !important;
  outline-offset: 3px;
}

/* Shared action-control primitive. */
:where(.button, .catalogue-button, .supplier-resource, .footer-cta, .nav-cta, .trade-call, .trade-whatsapp, .footer-trade-action) {
  min-height: var(--sa-control-height);
  align-items: center;
  justify-content: center;
  border-radius: var(--sa-radius-control);
  transition: transform var(--sa-motion-fast), background-color var(--sa-motion-fast), border-color var(--sa-motion-fast), color var(--sa-motion-fast), box-shadow var(--sa-motion-fast);
}

/* Compact utility controls still keep an accessible mobile hit area. */
.menu-toggle { min-width: 44px; min-height: 44px; }

:where(.partner-tabs button, .cookie-reject, .cookie-accept) {
  min-height: 44px;
  padding-inline: 14px;
}

:where(.button, .catalogue-button, .supplier-resource, .footer-cta, .nav-cta, .trade-call, .trade-whatsapp, .footer-trade-action):hover,
:where(.button, .catalogue-button, .supplier-resource, .footer-cta, .nav-cta, .trade-call, .trade-whatsapp, .footer-trade-action):focus-visible {
  transform: translateY(-2px);
}

:where(.catalogue-actions, .resource-actions, .supplier-resource-actions, .hero-actions) {
  min-width: 0;
}

:where(.catalogue-actions, .resource-actions, .supplier-resource-actions) a {
  max-width: 100%;
}

/* A consistent quiet-link treatment for non-button action links. */
:where(.site-footer a, .category-nav a, body > header a, .nav nav a, .catalogue-grid a, .resource-card a, .official-library-link) {
  text-underline-offset: .24em;
  text-decoration-thickness: 1px;
}

:where(.brand-card, .brand-link, .category, .solution, .resource-card) {
  min-width: 0;
}

:where(.brand-card, .brand-link, .category, .resource-card) {
  transition: transform var(--sa-motion-fast), background-color var(--sa-motion-fast), border-color var(--sa-motion-fast), color var(--sa-motion-fast);
}

:where(.brand-card, .brand-link, .category, .resource-card):focus-visible {
  outline: 3px solid var(--sa-focus);
  outline-offset: -3px;
}

/* Keep marks readable without altering their supplied artwork. */
:where(.brand-card, .brand-link, .supplier-mark, .logo-stage) img {
  object-fit: contain;
  object-position: center;
}

/* The Fans & Coolers source artwork is intentionally dark; preserve its
   product detail instead of applying the generic screen-blend treatment. */
.fans-hero-image {
  width: 100% !important;
  height: 100% !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
  object-position: right center !important;
  transform: none !important;
}

/* Forms share spacing, legibility and control height wherever they appear. */
:where(input:not([type='checkbox']):not([type='radio']), select, textarea) {
  max-width: 100%;
  border-color: var(--sa-border);
  color: var(--sa-text);
}

:where(input:not([type='checkbox']):not([type='radio']), select) { min-height: 48px; }

textarea { min-height: 120px; resize: vertical; }

/* Footer already has a shared composition; this completes accessible link states. */
.site-footer a:focus-visible { outline-color: var(--footer-accent, #f8c857) !important; }

/* All grids may safely shrink inside a narrow viewport. */
:where(.section, .intro, .cta, .range, .statement, .overview, .promise, .catalogue-hub, .supplier-hero, .category-hero, .contact, .why, .network) > * { min-width: 0; }

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }

  :where(.button, .catalogue-button, .supplier-resource, .footer-cta, .nav-cta, .trade-call, .trade-whatsapp, .footer-trade-action) {
    min-height: 46px;
  }

  :where(.catalogue-actions, .resource-actions, .supplier-resource-actions) {
    width: 100%;
  }

  :where(.catalogue-actions, .resource-actions, .supplier-resource-actions) > a {
    width: 100%;
  }

  :where(.brand-card, .brand-link, .category, .resource-card) { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Final homepage overflow repairs from live QA. */
body .network .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body .network .stats article{min-width:0}
@media(max-width:700px){body .hero .hero-art{right:0!important;width:min(250px,calc(100vw - 92px))!important}body .hero .hero-tag{right:10px!important}}