/* ============================================================
   AtropaX Security — shared styling for legal / content pages
   Tokens mirror index.html. Keep them in sync.
   ============================================================ */
:root {
  --ink:        #0B1017;
  --ink-2:      #131926;
  --paper:      #EFE7D6;
  --paper-dim:  rgba(239, 231, 214, 0.65);
  --paper-fade: rgba(239, 231, 214, 0.38);
  --paper-hair: rgba(239, 231, 214, 0.14);

  --flame:      #10B981;
  --flame-hot:  #34D399;
  --flame-glow: rgba(16, 185, 129, 0.18);   /* same value as the home page */
  --brass:      #A67C3E;
  --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);   /* matches index.html */
  --nav-bg:     rgba(11, 16, 23, 0.85);   /* translucent, so not a hex */

  --max: 760px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);

  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* Light theme — see the long note in index.html for why --flame and --brass
   are not simply reused at their dark-theme values. Keep the two in sync. */
:root[data-theme="light"] {
  --ink:        #F7F5F0;
  --ink-2:      #FFFFFF;
  --ink-3:      #EEEAE1;
  --paper:      #14181F;
  --paper-dim:  rgba(20, 24, 31, 0.72);
  --paper-fade: rgba(20, 24, 31, 0.52);
  --paper-hair: rgba(20, 24, 31, 0.14);
  --flame:      #047857;
  --flame-hot:  #065F46;
  --flame-glow: rgba(4, 120, 87, 0.10);
  --brass:      #7A5A2A;
  --nav-bg:     rgba(247, 245, 240, 0.78);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-weight: 300;
  line-height: 1.7;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* Emerald is bright: dark ink on it reads 7.5:1, cream only 2.1:1.
   Anywhere --flame is a background, the text on top must be --ink. */
::selection { background: var(--flame); color: var(--ink); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* ---------- Header ---------- */
.legal-nav {
  border-bottom: 1px solid var(--paper-hair);
  padding-block: 1.25rem;
  position: sticky;
  top: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.legal-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--paper);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Same mark and same size as the home page nav. Intrinsic dimensions live
   in the width/height attributes so the space is reserved before it loads;
   height:auto keeps the 600x369 artwork from being squashed to a square. */
.brand img {
  width: 30px;
  height: auto;
  flex: none;
  position: relative;
  top: -1px;
}

.legal-nav__back {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flame);
  text-decoration: none;
  transition: color 0.2s;
}
.legal-nav__back:hover { color: var(--flame-hot); text-decoration: underline; }

.legal-nav__right {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.lang {
  display: inline-flex;
  border: 1px solid var(--paper-hair);
  border-radius: 999px;
  padding: 2px;
}
/* Inline SVG rather than emoji — see the note in index.html */
.lang button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0.45rem 0.6rem;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.lang .flag {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.lang button:hover { transform: scale(1.1); opacity: 0.8; }
.lang button[aria-pressed="true"] { background: var(--flame); color: var(--ink); }

/* ---------- Document body ---------- */
main { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5rem); }

/* The emerald bloom from the home page hero, mirrored to the top left so it
   sits behind the product name instead of the language switcher. Painted as
   a background on <main> rather than an overlay: backgrounds always render
   beneath their own content, so there is no way for it to tint the text.
   Product pages only — the legal documents stay plain. */
body.prod-page main {
  background-image: radial-gradient(circle at 18% 8%, var(--flame-glow) 0%, transparent 55%);
  background-repeat: no-repeat;
  background-size: min(78vw, 820px) min(78vw, 820px);
  background-position: left top;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
  display: block;
  margin-bottom: 0.9rem;
}

h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.updated {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--paper-fade);
  letter-spacing: 0.04em;
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--paper-hair);
}

h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
}

h3 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--paper);
}

p { margin-bottom: 1.1rem; color: var(--paper-dim); }
p.lead { font-size: 1.075rem; color: var(--paper); }

ul, ol { margin: 0 0 1.1rem 1.35rem; color: var(--paper-dim); }
li { margin-bottom: 0.55rem; }
li::marker { color: var(--flame); }

strong { color: var(--paper); font-weight: 500; }

a { color: var(--flame); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
a:hover { color: var(--flame-hot); }

.mono { font-family: var(--f-mono); font-size: 0.9em; }

hr {
  border: 0;
  border-top: 1px solid var(--paper-hair);
  margin-block: 2.5rem;
}

/* Contact / identity block */
.identity {
  background: var(--ink-2);
  border: 1px solid var(--paper-hair);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
  margin-block: 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  line-height: 2;
  color: var(--paper-dim);
}
.identity strong {
  display: inline-block;
  min-width: 8.5rem;
  color: var(--brass);
  font-weight: 500;
}
/* Contact links — and every value in the identity block — read as data rather
   than prose, so the underline is visual noise. This also matches index.html,
   where links carry no underline at all. Emerald still marks them as links and
   hover restores the underline, so the affordance is never lost. Links inside
   flowing legal prose keep their underline. */
.identity a,
a[href^="mailto:"],
a[href^="tel:"] { text-decoration: none; }

.identity a:hover,
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover { text-decoration: underline; }

/* Callout for things the reader should not miss */
.note {
  border-left: 2px solid var(--flame);
  background: var(--ink-2);
  padding: 1.1rem 1.35rem;
  border-radius: 0 8px 8px 0;
  margin-block: 1.5rem;
}
.note p:last-child { margin-bottom: 0; }

/* Small mark after a phone number, so it is obvious the line takes
   WhatsApp. Added by legal.js next to every tel: link. */
.wa-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  vertical-align: -0.2em;
  text-decoration: none;
}
.wa-tag:hover { text-decoration: none; }
.wa-tag svg { width: 15px; height: 15px; fill: #25D366; display: block; }
.wa-tag:hover svg { fill: #3EE27D; }

/* ---------- social buttons ---------- */
.social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;   /* pushed to the far end, as in the reference */
}
.social__btn {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.social__btn svg { width: 17px; height: 17px; fill: #fff; display: block; }
.social__btn--li { background: #0A66C2; }   /* LinkedIn blue */
.social__btn--wa { background: #25D366; }   /* WhatsApp green */
.social__btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
@media (prefers-reduced-motion: reduce) { .social__btn { transition: none; } }

@media (max-width: 900px) {
  /* centred with everything else once the footer stacks */
  .social { margin-left: 0; width: 100%; justify-content: center; }
}

:where(a, button):focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--pad);
  top: 0.5rem;
  z-index: 50;
  background: var(--flame);
  color: var(--ink);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  text-decoration: none;
}

/* ============================================================
   PRODUCT PAGES
   ============================================================ */
.prod-sku {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flame);
  display: block;
  margin-bottom: 0.85rem;
}

/* Product illustration panel.
   The artwork is original line drawing, not vendor photography — swapping in
   official product photos later means replacing the <svg> with an <img>; the
   panel styling needs no change. */
.prod-figure {
  background: var(--ink-2);
  border: 1px solid var(--paper-hair);
  border-radius: 10px;
  padding: 2.25rem 1.5rem 1.5rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  color: var(--flame);          /* the line art inherits this */
}
.prod-figure svg {
  width: 100%;
  max-width: 430px;
  height: auto;
  display: block;
}
/* The photo is hidden until it has actually decoded. A missing file is then
   removed by legal.js and the line drawing simply stays — no broken-image
   icon, and no need to edit markup when photos arrive. */
.prod-figure__photo {
  display: none;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.prod-figure.has-photo .prod-figure__photo { display: block; }
.prod-figure.has-photo .prod-figure__art  { display: none; }

/* Vendor photography is shot on white. If the supplied files are not cut out
   on transparency, add class="prod-figure--light" to the <figure> and the
   panel turns into a light plate so the image does not sit in a glowing
   rectangle against the dark page. */
.prod-figure--light.has-photo {
  background: #F4F1EA;
  border-color: #F4F1EA;
}
.prod-figure--light.has-photo figcaption { color: #6B6459; }
/* A caption that is a full sentence rather than a label. Uppercase mono with
   wide tracking is fine for "ILLUSTRATION —"; it is hard work to read across
   a whole line, so descriptive notes drop back to sentence case. */
.prod-figure figcaption.prod-figure__note {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 48ch;
  color: var(--paper-dim);
}
.prod-figure--light.has-photo figcaption.prod-figure__note { color: #6B6459; }

.prod-figure figcaption {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-fade);
  text-align: center;
}

@media (max-width: 620px) {
  .prod-figure { padding: 1.5rem 1rem 1.1rem; margin-bottom: 2rem; }
}

.prod-lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--paper);
  max-width: 60ch;
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--paper-hair);
}

/* Label/value rows — same visual language as the contact block */
.spec {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0.9rem 1.5rem;
  margin-block: 1.5rem;
}
.spec dt {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 0.15rem;
}
.spec dd {
  margin: 0;
  color: var(--paper-dim);
  font-size: 0.95rem;
  line-height: 1.65;
}
.spec dd .mono { color: var(--paper); }

/* Chips for protocols and form factors — scannable at a glance */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--ink-2);
  border: 1px solid var(--paper-hair);
  border-radius: 3px;
  padding: 0.34rem 0.6rem;
  margin: 0;
}
.chips li::marker { content: none; }

/* Three-up summary panel that frames a product before the detail sections */
.trio-head {
  text-align: center;
  margin-block: 2.75rem 0.5rem;
}
.trio-head h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
}
.trio-head p {
  color: var(--paper-dim);
  max-width: 54ch;
  margin: 0 auto;
  font-size: 1.02rem;
}

.trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-block: 2rem 1rem;
}
@media (min-width: 720px) {
  .trio { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.trio__item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.trio__icon {
  width: 46px;
  height: 46px;
  color: var(--flame);
  margin-bottom: 0.2rem;
}
.trio__item h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--paper);
}
.trio__item p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--paper-dim);
}

.prod-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--paper-hair);
}
.prod-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-radius: 2px;
  background: var(--flame);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.15s, background 0.2s;
}
.prod-cta__btn:hover { background: var(--flame-hot); color: var(--ink); transform: translateY(-1px); }
.prod-cta__note {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--paper-fade);
  line-height: 1.5;
}

/* Sibling products, so a visitor can compare without going back */
.prod-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.7rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--paper-hair);
}
.prod-nav a {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--paper-hair);
  border-radius: 6px;
  text-decoration: none;
  color: var(--paper-dim);
  font-size: 0.9rem;
  transition: border-color 0.2s, color 0.2s;
}
.prod-nav a:hover { border-color: var(--flame); color: var(--paper); }
.prod-nav a[aria-current="page"] {
  border-color: var(--flame);
  color: var(--paper);
  background: var(--ink-2);
}

@media (max-width: 620px) {
  .spec { grid-template-columns: 1fr; gap: 0.3rem 0; }
  .spec dt { padding-top: 0.9rem; }
  .spec dt:first-of-type { padding-top: 0; }
  .prod-cta__btn { width: 100%; justify-content: center; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Long addresses and reconstructed forms like *Ātṛpāta should wrap rather
   than widen the page. */
p, li, h1, h2, h3, .identity { overflow-wrap: break-word; }

@media (max-width: 620px) {
  .legal-nav { padding-block: 0.8rem; }
  .legal-nav__inner { gap: 0.6rem 0.75rem; }
  .brand { font-size: 0.98rem; }
  .brand img { width: 26px; }
  .legal-nav__right { gap: 0.65rem; }
  .legal-nav__back { font-size: 0.68rem; }
  .lang button { padding: 0.5rem 0.45rem; }   /* ~44px tap target */
  .lang .flag { width: 20px; height: 14px; }

  /* An 8.5rem label column left too little room for values like the phone
     number and the opening hours, which wrapped mid-string. The <br> after
     each value then separates the pairs cleanly. */
  .identity {
    padding: 1.2rem 1.25rem;
    font-size: 0.8rem;
    line-height: 1.55;
  }
  .identity strong {
    display: block;
    min-width: 0;
    margin-bottom: 0.05rem;
  }

  .note { padding: 1rem 1.1rem; }
  h2 { margin-top: 2.25rem; }
}

/* ============================================================
   SITE FOOTER
   One markup block and one set of rules, used on all 13 pages.
   Only tokens that both stylesheets define are used here, so the
   two copies cannot drift into looking different.
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--paper-hair);
  margin-top: clamp(3rem, 8vw, 5rem);
  font-size: 0.9rem;
}
/* The legal pages set --max to 760px for a readable measure of prose. The
   footer is not prose, and it should be the same width on every page, so it
   opts out of that and uses the home page width throughout. */
.site-footer .wrap { max-width: 1200px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
}
.site-footer__brand { max-width: 36ch; }
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--paper);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.site-footer__logo img { width: 26px; height: auto; display: block; }
.site-footer__blurb {
  margin: 0.9rem 0 1.3rem;
  color: var(--paper-dim);
  line-height: 1.65;
  font-size: 0.88rem;
}
/* .social carries margin-left:auto on the legal pages so it sits far right
   in the old single-row footer. Inside a column it must not. */
.site-footer .social {
  margin-left: 0;
  width: auto;
  justify-content: flex-start;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.site-footer__head {
  margin: 0 0 0.35rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-fade);
}
.site-footer__col a,
.site-footer__col .consent-link {
  color: var(--paper-dim);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.site-footer__col a:hover,
.site-footer__col .consent-link:hover {
  color: var(--flame);
  text-decoration: none;
}
.site-footer__plain {
  color: var(--paper-fade);
  font-size: 0.88rem;
}
/* legal.js appends the WhatsApp badge as the next sibling of any tel: link.
   In a flex column that would become its own row, so the phone number sits
   in a wrapper and the badge lands inside it, on the same line. */
.site-footer__row { display: block; }
.site-footer__row .wa-tag { vertical-align: -0.15em; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--paper-hair);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--paper-fade);
}

/* Brand column stays wider than the three link columns. */
@media (min-width: 780px) {
  .site-footer__grid {
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 3rem 2rem;
  }
}

/* ============================================================
   THEME TOGGLE
   Sized and shaped to match the language pill beside it. The icon shows the
   mode you are currently in; the accessible name states what pressing it
   will do, which is the part that has to be unambiguous.
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--paper-hair);
  border-radius: 999px;
  background: transparent;
  color: var(--paper-dim);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.theme-toggle:hover {
  color: var(--paper);
  border-color: var(--paper-fade);
  transform: scale(1.06);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
}
.theme-toggle svg { width: 18px; height: 18px; display: block; }

/* The icon shows what pressing it will give you, not where you already are:
   a sun on the dark page (press for light), a moon on the light one. The
   accessible name says the same thing in words.
   These selectors are deliberately as specific as ".theme-toggle svg" above —
   matching it on specificity is not enough, since that rule sets
   display:block and would win on source order. */
.theme-toggle .theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle__sun  { display: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle__moon { display: block; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
  .theme-toggle:hover { transform: none; }
}