/* Copyright 2026 My Digital Sovereignty Ltd. All rights reserved. Proprietary and confidential; unauthorised copying, use or distribution is prohibited. */
/* ============================================================================
   apex-hub-pages.css: public/security.html and public/protection.html, the two apex pages built on company-hub-village.min.css, now
   under the landing's shared header and footer (scripts/lib/site-chrome.js, public/css/site-chrome.css; 10 Nov 2026, slice 2).

   Loaded before site-chrome.css. Three jobs:
   1. Headings take the landing's type (the hub sheet gives them Inter).
   2. Each page keeps its own colour world (the teal heroes, the green call to action), and its light-only colours get dark values
      from the landing's tokens, so no text sits light-on-light or dark-on-dark in either theme. Selectors carry the theme attribute so
      they win over the page's own :root and the hub sheet's dark block whichever order they load in.
   3. protection.html's inline <style> and style="" attributes live here now (CSP: no inline style on the public surface).
   ============================================================================ */

h1,h2,h3,h4,h5,h6{font-family:inherit}
/* The shared header and footer rows are centred as on the landing (security.html resets every margin to 0; village-apps.css, which
   centres .wrap on the other pages, is not loaded here). */
header.site[data-site-chrome] .wrap,.sub-nav .wrap,footer.site-foot .wrap{margin-left:auto;margin-right:auto}

/* ---------- security.html: its own variables mapped onto the landing's tokens ---------- */
:root:not([data-theme="dark"]){
  --bg-primary:var(--bg); --bg-surface:var(--panel); --border-color:var(--line);
}
:root[data-theme="dark"]{
  --bg-primary:var(--bg); --bg-surface:var(--panel); --bg-accent:var(--panel-2);
  --text-primary:var(--ink); --text-secondary:var(--muted); --border-color:var(--line);
  --security-green:#4fb695; --security-bg:#16261f;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-primary:var(--bg); --bg-surface:var(--panel); --bg-accent:var(--panel-2);
    --text-primary:var(--ink); --text-secondary:var(--muted); --border-color:var(--line);
    --security-green:#4fb695; --security-bg:#16261f;
  }
}
/* The warning box is amber on a pale ground; in the dark theme, a dark amber ground with light text. */
:root[data-theme="dark"] .warning-box{background:#2b2210;border-left-color:#d97706}
:root[data-theme="dark"] .warning-box strong{color:#f5c26b}
:root[data-theme="dark"] .warning-box p,:root[data-theme="dark"] .warning-box li{color:var(--ink)}
:root[data-theme="dark"] .cross{color:#f08a8a}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .warning-box{background:#2b2210;border-left-color:#d97706}
  :root:not([data-theme="light"]) .warning-box strong{color:#f5c26b}
  :root:not([data-theme="light"]) .warning-box p,:root:not([data-theme="light"]) .warning-box li{color:var(--ink)}
  :root:not([data-theme="light"]) .cross{color:#f08a8a}
}
/* The hero and the call to action keep their green, ending on the darker teal: white text on the old end colour (#0d9488) was 3.7:1. */
#main-content .hero,#main-content .cta-box{background:linear-gradient(135deg,#047857 0%,#0f766e 100%)}
#main-content .hero .subtitle,#main-content .hero .tagline,#main-content .cta-box p{opacity:1}
/* The call to action keeps its green ground in both themes; its buttons take the landing's pill shape, with colours fixed for that
   ground (the shared outline button's ink would be dark on green). */
.cta-box .cta-buttons a.btn{border-radius:999px;font-size:1rem;padding:.8rem 1.6rem}
.cta-box .cta-buttons a.btn.btn-primary{background:#ffffff;color:#035e46;border:1.5px solid #ffffff}
.cta-box .cta-buttons a.btn.btn-secondary{background:transparent;color:#ffffff;border:1.5px solid #ffffff}
.cta-box .cta-buttons a.btn.btn-secondary:hover{background:#ffffff;color:#035e46}
/* Links inside the security text are underlined, so they read as links on any ground. */
#main-content .section p a,#main-content .section li a{color:var(--security-green);text-decoration:underline}

/* ---------- protection.html (moved from its inline <style>; teal kept) ---------- */
.prot-note-wrap{max-width:1200px;margin:0 auto;padding:0 1rem}
.prot-provisional{display:none;background:#fef9c3;border:1px solid #fde047;border-radius:.5rem;padding:.75rem 1rem;margin-top:1rem;font-size:.85rem;color:#713f12;line-height:1.6}
.prot-hero{background:linear-gradient(135deg,#0f766e 0%,#115e59 100%);color:#ffffff;padding:4rem 1.5rem;text-align:center}
.prot-hero .eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:600;color:#ccfbf1;margin:0 0 .75rem}
.prot-hero h1{font-size:2.3rem;font-weight:700;margin:0 auto 1rem;max-width:780px;line-height:1.25;color:#ffffff}
.prot-hero p{font-size:1.15rem;color:rgba(255,255,255,.94);max-width:680px;margin:0 auto;line-height:1.6}
.feature-section{padding:3.5rem 1.5rem}
.feature-section .container{max-width:1040px;margin:0 auto}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:2rem}
.feature-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.5rem}
.feature-card h3{color:#0f766e;font-size:1.1rem;margin:0 0 .6rem}
.feature-card p{color:var(--muted);line-height:1.6;font-size:.95rem;margin:0}
.prot-tamper{max-width:820px;margin:2.5rem auto 0;padding:1.5rem 1.75rem;background:var(--panel-2);border:1px solid var(--line);border-left:4px solid #64748b;border-radius:.5rem;color:var(--ink)}
.prot-tamper h3{margin:0 0 .75rem;font-size:1.15rem;color:var(--ink)}
.prot-tamper p{margin:0;color:var(--ink)}
.prot-close{text-align:center;margin-top:2rem;font-weight:600;color:var(--ink)}
.prot-cta{text-align:center;padding:0 1.5rem 4rem}
.prot-cta a{display:inline-block;background:#0f766e;color:#ffffff;padding:.8rem 2.2rem;border-radius:999px;font-weight:700;text-decoration:none;margin:0 .4rem .6rem;border:1.5px solid #0f766e}
.prot-cta a.secondary{background:transparent;color:#0f766e;border:1.5px solid #0f766e}
:root[data-theme="dark"] .feature-card h3,:root[data-theme="dark"] .prot-cta a.secondary{color:#5fd3bd}
:root[data-theme="dark"] .prot-cta a.secondary{border-color:#5fd3bd}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .feature-card h3,:root:not([data-theme="light"]) .prot-cta a.secondary{color:#5fd3bd}
  :root:not([data-theme="light"]) .prot-cta a.secondary{border-color:#5fd3bd}
}