/*
Theme Name: IKE Compliance
Theme URI: https://isologismoi.online
Author: KineaPro
Author URI: https://kineapro.gr
Description: Μονοσέλιδο WordPress theme που δημοσιεύει τα υποχρεωτικά στοιχεία εταιρικής δημοσιότητας μιας Ι.Κ.Ε. σύμφωνα με το άρθρο 47 §2 Ν. 4072/2012 και την ΚΥΑ 46982/2025. Material You (MD3) σχεδίαση, dark/light mode, πλήρης front-end WYSIWYG επεξεργασία κειμένων/εικόνων/λογότυπου, 3 στυλ εμφάνισης με προσαρμόσιμα brand χρώματα, απεριόριστοι ισολογισμοί και έγγραφα, email υπενθυμίσεις προθεσμίας, προαιρετικός καθημερινός συγχρονισμός ΓΕΜΗ και ημερολόγιο ενεργειών.
Version: 6.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ike-compliance
*/

/* ==========================================================================
   Design tokens
   Palette + font lifted from isologismoi.online's own theme.css (KineaPro
   deep-navy / teal / lime brand). Shape, elevation, motion and component
   mechanics follow the Material You (MD3) system; the hero/marquee/card
   composition borrows its structural language from a fintech landing-page
   brief, adapted to this page's own legal-disclosure content.
   ========================================================================== */
:root{
  /* --- brand palette, as-is from isologismoi.online (light mode) --- */
  --ike-ink:        #0F2027;
  --ike-deep:       #0B1A20;
  --ike-panel:      #0E1E24;
  --ike-teal-deep:  #123641;
  --ike-teal:       #0E7C93;
  --ike-teal-hover: #0B6577;
  --ike-green:      #3E9B4F;
  --ike-lime:       #B9CB2E;
  --ike-off:        #F7FBFC;
  --ike-page:       #EDEEF0;
  --ike-muted:      #52616B;
  --ike-muted-2:    #8A959A;
  --ike-line:       #E4E7E9;
  --ike-line-2:     #CFD6D9;
  --ike-surface:    #F1F3F4;
  --ike-surface-2:  #F9FAFA;
  --ike-danger:     #B04A45;
  --ike-danger-soft:#E89A96;

  /* --- MD3 semantic roles, mapped onto the palette above --- */
  --md-background:              var(--ike-page);
  --md-on-background:           var(--ike-ink);
  --md-surface-container:       var(--ike-surface);
  --md-surface-container-low:   var(--ike-line);
  --md-outline:                 var(--ike-muted-2);
  --md-on-surface-variant:      var(--ike-muted);

  --md-primary:                 var(--ike-teal);
  --md-primary-hover:           var(--ike-teal-hover);
  --md-on-primary:              #FFFFFF;

  --md-secondary-container:     #D9EEF1; /* pale tint of --ike-teal */
  --md-on-secondary-container:  var(--ike-teal-deep);

  --md-tertiary:                var(--ike-lime);
  --md-on-tertiary:             var(--ike-ink);

  --md-danger:                  var(--ike-danger);
  --md-on-danger:               #FFFFFF;

  /* --- shape --- */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   28px;
  --r-xxl:  48px;
  --r-full: 9999px;

  /* --- elevation --- */
  --shadow-sm: 0 1px 2px rgba(15,32,39,.07), 0 1px 1px rgba(15,32,39,.04);
  --shadow-md: 0 6px 16px rgba(15,32,39,.12), 0 2px 4px rgba(15,32,39,.06);
  --shadow-lg: 0 16px 40px rgba(15,32,39,.16), 0 4px 10px rgba(15,32,39,.08);

  /* --- motion --- */
  --ease-md3: cubic-bezier(0.2, 0, 0, 1);

  --maxw: 1120px;
  --page-x: 24px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (max-width:640px){
  :root{ --page-x: 12px; }
}

/* --------------------------------------------------------------------------
   Dark mode
   System preference is the default signal; an explicit choice from the
   toggle (persisted in localStorage, applied via [data-theme]) always
   wins in both directions, per the Customizer's "default appearance"
   setting and the visitor's own toggle.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --md-background:             var(--ike-deep);
    --md-on-background:          #EAF1F2;
    --md-surface-container:      var(--ike-panel);
    --md-surface-container-low:  #16262E;
    --md-outline:                #3C4C52;
    --md-on-surface-variant:     #9FB4BA;
    --md-secondary-container:    var(--ike-teal-deep);
    --md-on-secondary-container: #BFE9F0;
  }
}
:root[data-theme="dark"]{
  --md-background:             var(--ike-deep);
  --md-on-background:          #EAF1F2;
  --md-surface-container:      var(--ike-panel);
  --md-surface-container-low:  #16262E;
  --md-outline:                #3C4C52;
  --md-on-surface-variant:     #9FB4BA;
  --md-secondary-container:    var(--ike-teal-deep);
  --md-on-secondary-container: #BFE9F0;
}

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

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--md-background);
  color:var(--md-on-background);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s var(--ease-md3), color .3s var(--ease-md3);
}
a{ color:var(--md-primary); text-decoration:none; }
a:hover{ color:var(--md-primary-hover); }
::selection{ background:var(--md-tertiary); color:var(--md-on-tertiary); }
img{ max-width:100%; }

:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--md-background), 0 0 0 4px var(--md-primary);
  border-radius: var(--r-xs);
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Page shell: insets the hero/content so large-radius panels read as
   architectural containers with the page background visible around
   them, instead of edge-to-edge rectangles. Header/footer stay full-bleed. */
.ike-page{ margin:0 var(--page-x); }
.iso-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.iso-skip:focus{
  position:fixed; top:12px; left:12px; z-index:200;
  width:auto; height:auto; clip:auto; margin:0;
  padding:12px 20px; border-radius:var(--r-full);
  background:var(--md-primary); color:var(--md-on-primary); font-weight:600;
}

/* ==========================================================================
   Type scale (MD3)
   ========================================================================== */
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.01em; color:var(--md-on-background); }
.md-display{ font-size:clamp(32px,5vw,56px); line-height:1.15; font-weight:700; letter-spacing:-.03em; }
.md-headline-md{ font-size:clamp(22px,3vw,32px); line-height:1.25; }
.md-title-lg{ font-size:24px; line-height:1.3; font-weight:600; }
.md-body-lg{ font-size:20px; line-height:1.5; }
.md-body-md{ font-size:16px; line-height:1.55; }
.md-label-md{ font-size:14px; line-height:1.4; font-weight:600; letter-spacing:.01em; }
.md-label-sm{ font-size:12px; line-height:1.4; font-weight:600; letter-spacing:.02em; }
.muted{ color:var(--md-on-surface-variant); font-weight:500; }

/* ==========================================================================
   Chips (eyebrows, pills, badges) — always fully rounded
   ========================================================================== */
.md-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:var(--r-full);
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
  white-space:nowrap;
}
.md-chip .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.md-chip--tertiary{ background:rgba(185,203,46,.16); color:var(--ike-lime); }
.md-chip--tertiary-solid{ background:var(--md-tertiary); color:var(--md-on-tertiary); }
.md-chip--tonal{ background:var(--md-secondary-container); color:var(--md-on-secondary-container); }
.md-chip--outline{ background:transparent; border:1px solid var(--md-outline); color:var(--md-on-surface-variant); }
.md-chip--outline-inverse{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#DCE4E6; }
.md-chip--num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:var(--r-full);
  background:var(--md-secondary-container); color:var(--md-on-secondary-container);
  font-size:11px; font-weight:800; flex:0 0 auto;
  transition:background-color .3s var(--ease-md3), color .3s var(--ease-md3), box-shadow .3s var(--ease-md3);
}

/* ==========================================================================
   Buttons — pill-shaped, state-layer feedback, tactile press
   ========================================================================== */
.md-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 26px; border-radius:var(--r-full);
  font-size:14px; font-weight:600; letter-spacing:.01em;
  border:none; cursor:pointer; text-decoration:none;
  transition:filter .3s var(--ease-md3), background-color .3s var(--ease-md3),
             box-shadow .3s var(--ease-md3), transform .2s var(--ease-md3);
}
.md-btn:active{ transform:scale(.95); }
.md-btn svg{ width:18px; height:18px; }

.md-btn--filled{ background:var(--md-primary); color:var(--md-on-primary); }
.md-btn--filled:hover{ filter:brightness(.93); box-shadow:var(--shadow-md); color:var(--md-on-primary); }
.md-btn--filled:active{ filter:brightness(.85); }

/* The one true call-to-action on a dark surface (hero, prefooter):
   tertiary/lime instead of primary teal, so it reads as THE action
   rather than blending in with the informational teal links/chips. */
.md-btn--cta{ background:var(--md-tertiary); color:var(--md-on-tertiary); }
.md-btn--cta:hover{ filter:brightness(1.06); box-shadow:var(--shadow-md); color:var(--md-on-tertiary); }
.md-btn--cta:active{ filter:brightness(.95); }

.md-btn--tonal{ background:var(--md-secondary-container); color:var(--md-on-secondary-container); }
.md-btn--tonal:hover{ filter:brightness(.97); box-shadow:var(--shadow-sm); color:var(--md-on-secondary-container); }

.md-btn--outlined{ background:transparent; border:1px solid var(--md-outline); color:var(--md-primary); }
.md-btn--outlined:hover{ background:rgba(14,124,147,.08); color:var(--md-primary); }

.md-btn--outlined-inverse{ background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; }
.md-btn--outlined-inverse:hover{ background:rgba(255,255,255,.08); color:#fff; }

.md-btn--text{ background:transparent; color:var(--md-primary); height:auto; padding:8px 14px; }
.md-btn--text:hover{ background:rgba(14,124,147,.10); color:var(--md-primary); }

.md-btn--sm{ height:36px; padding:0 16px; font-size:13px; }
.md-btn--sm svg{ width:15px; height:15px; }

/* Pill button with a trailing white arrow-circle (Halo-brief pattern) */
.md-btn--arrow{ padding:4px 4px 4px 26px; gap:14px; }
.md-btn--arrow .arrow-circle{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:#fff; color:var(--ike-ink); flex:0 0 auto;
  transition:transform .3s var(--ease-md3);
}
.md-btn--arrow:hover .arrow-circle{ transform:translateX(3px); }
.md-btn--arrow svg{ width:18px; height:18px; }

/* ==========================================================================
   Surfaces & cards
   ========================================================================== */
.md-card{
  background:var(--md-surface-container);
  border-radius:var(--r-lg);
  padding:32px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease-md3), background-color .3s var(--ease-md3);
}
.md-card + .md-card{ margin-top:24px; }
.md-card--elevated{ box-shadow:var(--shadow-md); }
.md-card__eyebrow{ margin-bottom:6px; }
.md-card h2{ font-size:24px; line-height:1.3; margin:0 0 6px; }
.md-card .card-sub{ margin:0 0 24px; }

.md-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:8px; }
.md-card__toolbar{ display:flex; gap:8px; flex-wrap:wrap; flex:0 0 auto; }

/* ==========================================================================
   Demo banner (tonal, dismiss-free notice strip)
   ========================================================================== */
.demo-banner{
  background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
  text-align:center; padding:10px 16px; text-transform:uppercase;
}
.demo-banner span{ opacity:.85; font-weight:500; text-transform:none; letter-spacing:0; }

/* ==========================================================================
   Hero — layered organic blur shapes on the brand's dark navy.
   No site header/nav any more: this is the page's only top region,
   so its text is always set against this fixed dark gradient and
   never depends on the light/dark [data-theme] tokens — it stays
   legible in both modes by design, not by coincidence.
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--ike-deep) 0%, var(--ike-panel) 100%);
  color:#fff; padding:72px 0 88px;
  border-radius:var(--r-xxl);
  margin-top:24px;
}
@media (max-width:640px){
  .hero{ border-radius:var(--r-lg); padding:48px 0 56px; margin-top:12px; }
}
.hero .blur-shape{
  position:absolute; border-radius:50%; filter:blur(64px); pointer-events:none;
}
.hero .blur-shape--1{ width:420px; height:420px; background:var(--md-primary); opacity:.28; top:-140px; right:-80px; }
.hero .blur-shape--2{ width:340px; height:340px; background:var(--md-tertiary); opacity:.20; bottom:-160px; left:-60px; }
.hero .blur-shape--3{ width:260px; height:260px; background:var(--ike-green); opacity:.14; top:40%; left:38%; }
.hero__inner{ position:relative; z-index:1; }

/* Dark/light toggle now lives inside the hero itself (there is no nav
   bar left to hold it), styled like every other hero action: same
   border + hover-fill language as the outlined-inverse button. */
.hero-theme-toggle{
  position:absolute; top:24px; right:24px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:transparent; border:1px solid rgba(255,255,255,.28);
  color:#fff; cursor:pointer;
  transition:background-color .3s var(--ease-md3), transform .2s var(--ease-md3);
}
.hero-theme-toggle:hover{ background:rgba(255,255,255,.08); }
.hero-theme-toggle:active{ transform:scale(.92); }
.hero-theme-toggle svg{ width:19px; height:19px; }
.hero-theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .hero-theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .hero-theme-toggle .icon-moon{ display:block; }
@media (max-width:640px){
  .hero-theme-toggle{ top:16px; right:16px; width:40px; height:40px; }
}

.hero-logo-wrap{ margin-bottom:14px; border-radius:var(--r-sm); }
.hero-logo-wrap:empty{ display:none; }
body.ike-editing .hero-logo-wrap:empty{ display:block; width:56px; height:56px; }
.hero-logo{ display:block; max-height:56px; width:auto; max-width:240px; object-fit:contain; }

.hero-company-name{
  font-size:clamp(28px,4vw,44px); line-height:1.2; font-weight:700;
  letter-spacing:-.02em; color:#ffffff; margin:14px 0 6px; max-width:22ch;
  text-wrap:balance;
}
.hero-trade-name{
  font-size:clamp(16px,2vw,20px); font-weight:500; color:#C9D6D9;
  margin:0 0 14px;
}
.hero-address{
  font-size:15px; font-weight:500; color:#C9D6D9; margin:0 0 28px;
}

.hero .actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; }

/* ==========================================================================
   Facts list — presentational, numbered chips, hairline dividers
   ========================================================================== */
dl.facts{ margin:0; }
dl.facts .fact{
  display:grid; grid-template-columns:auto 220px 1fr; align-items:start;
  gap:18px; padding:18px 16px; margin:0 -16px;
  border-top:1px solid var(--md-surface-container-low);
  border-radius:var(--r-md);
  transition:background-color .3s var(--ease-md3);
}
dl.facts .fact:first-child{ border-top:none; padding-top:4px; }
dl.facts .fact:hover{ background:var(--md-surface-container-low); }
dl.facts .fact:hover .md-chip--num{
  background:var(--md-tertiary); color:var(--md-on-tertiary);
  box-shadow:0 0 0 6px rgba(185,203,46,.18);
}
dl.facts dt{ font-size:14px; font-weight:600; color:var(--md-on-surface-variant); padding-top:3px; }
dl.facts dd{ margin:0; font-size:19px; font-weight:600; color:var(--md-on-background); white-space:pre-line; }
dl.facts dd.muted{ font-weight:500; color:var(--md-on-surface-variant); font-size:16px; }

@media (max-width:720px){
  dl.facts .fact{ grid-template-columns:auto 1fr; }
  dl.facts dt{ grid-column:2; padding-top:0; }
  dl.facts dd{ grid-column:2; }
}

/* ==========================================================================
   Source / verification card
   ========================================================================== */
.source{ display:flex; align-items:flex-start; gap:18px; }
.source .icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--md-secondary-container); color:var(--md-on-secondary-container);
  display:flex; align-items:center; justify-content:center;
}
.source .icon svg{ width:22px; height:22px; stroke:currentColor; }
.source .body h3{ margin:0 0 6px; font-size:16px; font-weight:700; }
.source .body p{ margin:0 0 14px; font-size:14.5px; color:var(--md-on-surface-variant); }
.source .meta{ display:flex; gap:10px; flex-wrap:wrap; }

/* ==========================================================================
   Generic content sections (statements)
   ========================================================================== */
.ike-section{ padding:72px 0; }
.ike-section--tight{ padding:48px 0; }
.ike-eyebrow{ display:block; margin-bottom:10px; }

/* Financial statements */
.ike-statements{ margin-top:28px; display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .ike-statements{ grid-template-columns:1fr 1fr; } }
.ike-statement{
  display:flex; align-items:center; gap:16px;
  background:var(--md-surface-container); border-radius:var(--r-lg);
  padding:20px 22px; box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease-md3), transform .3s var(--ease-md3);
}
.ike-statement:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ike-statement .year-chip{
  flex:0 0 auto; width:52px; height:52px; border-radius:var(--r-sm);
  background:var(--md-secondary-container); color:var(--md-on-secondary-container);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
}
.ike-statement .info{ flex:1 1 auto; min-width:0; }
.ike-statement .info .label{ font-size:15.5px; font-weight:600; margin:0 0 2px; }
.ike-statement .info .meta{ font-size:12.5px; color:var(--md-on-surface-variant); margin:0; }
.ike-statement .md-btn{ flex:0 0 auto; height:40px; padding:0 18px; }

/* Admin-only "add new" affordance — same card footprint, dashed, links
   straight to the CPT's Add New screen in wp-admin. */
.ike-statement--add{
  justify-content:center; border:1.5px dashed var(--md-outline);
  background:transparent; box-shadow:none; color:var(--md-on-surface-variant);
  font-size:14.5px; font-weight:600; text-decoration:none;
}
.ike-statement--add:hover{ border-color:var(--md-primary); color:var(--md-primary); box-shadow:none; }
.ike-statement--add .plus{ font-size:20px; line-height:1; }

/* Documents library (πρακτικά/πιστοποιητικά/ανακοινώσεις) */
.ike-doc-groups{ margin-top:28px; display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:820px){ .ike-doc-groups{ grid-template-columns:repeat(3,1fr); } }
.ike-doc-group__title{ font-size:14px; font-weight:700; margin:0 0 10px; }
.ike-doc-group__empty{ margin:0; }
.ike-doc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ike-doc-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:10px 14px; border-radius:var(--r-sm); background:var(--md-surface-container);
}
.ike-doc-list a{ font-size:14.5px; font-weight:600; }
.ike-doc-list .muted{ font-size:12px; flex:0 0 auto; }

/* ==========================================================================
   Front-end WYSIWYG editor (admins only — script is never even
   enqueued for anyone without edit_theme_options, see functions.php)
   ========================================================================== */

/* Idle state: a field the admin *could* edit gets a barely-there dotted
   underline on hover, so the page still reads as a normal page. */
[data-ike-edit]{ border-radius:4px; transition:background-color .2s var(--ease-md3), box-shadow .2s var(--ease-md3); }
body:not(.ike-editing) [data-ike-edit]:hover{
  box-shadow:0 1px 0 0 currentColor;
  cursor:text;
}

/* Active editing: every field becomes a visibly editable region. */
body.ike-editing [data-ike-edit]{
  outline:1.5px dashed var(--md-tertiary);
  outline-offset:3px;
  background:rgba(185,203,46,.08);
}
body.ike-editing [data-ike-edit]:focus{
  outline-style:solid;
  background:rgba(185,203,46,.14);
}

.ike-editor-fab{
  position:fixed; right:24px; bottom:24px; z-index:100;
  display:inline-flex; align-items:center; gap:10px;
  height:52px; padding:0 22px 0 20px; border-radius:var(--r-full);
  background:var(--ike-ink); color:#fff; border:none; cursor:pointer;
  font-size:14px; font-weight:600; font-family:inherit;
  box-shadow:var(--shadow-lg);
  transition:transform .2s var(--ease-md3), background-color .3s var(--ease-md3);
}
.ike-editor-fab:hover{ background:var(--ike-panel); }
.ike-editor-fab:active{ transform:scale(.95); }
.ike-editor-fab svg{ width:18px; height:18px; flex:0 0 auto; }
body.ike-editing .ike-editor-fab{ display:none; }

.ike-editor-bar{
  position:fixed; left:50%; bottom:24px; z-index:100;
  transform:translate(-50%, 130%);
  display:none; align-items:center; gap:18px;
  background:var(--ike-ink); color:#fff;
  padding:12px 14px 12px 20px; border-radius:var(--r-full);
  box-shadow:var(--shadow-lg);
  transition:transform .3s var(--ease-md3);
}
body.ike-editing .ike-editor-bar{ display:flex; transform:translate(-50%, 0); }
.ike-editor-bar__status{ font-size:13px; font-weight:600; color:rgba(255,255,255,.7); white-space:nowrap; }
.ike-editor-bar__actions{ display:flex; gap:8px; }

@media (max-width:640px){
  .ike-editor-fab span{ display:none; }
  .ike-editor-fab{ width:52px; padding:0; justify-content:center; }
  .ike-editor-bar{ left:12px; right:12px; transform:translateY(130%); width:auto; }
  body.ike-editing .ike-editor-bar{ transform:translateY(0); }
  .ike-editor-bar__status{ display:none; }
}

/* ==========================================================================
   Plain page fallback
   ========================================================================== */
.plain-page{ padding:64px 0; }
.plain-page h1{ font-size:28px; margin:0 0 18px; }
.plain-page .content{ font-size:15px; color:var(--md-on-surface-variant); }

/* ==========================================================================
   Pre-footer — a compliance "certificate": same dark hero treatment
   (gradient, grain-free blur shapes, white text) AND the same inset,
   large-radius card width as the hero — an architectural bookend to it.
   ========================================================================== */
.prefooter{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--ike-panel) 0%, var(--ike-deep) 100%);
  color:#fff; padding:56px 0;
  border-radius:var(--r-xxl);
  margin:24px 0;
}
@media (max-width:640px){
  .prefooter{ border-radius:var(--r-lg); padding:40px 0; margin:12px 0; }
}
.prefooter .blur-shape{ position:absolute; border-radius:50%; filter:blur(64px); pointer-events:none; }
.prefooter .blur-shape--1{ width:320px; height:320px; background:var(--md-tertiary); opacity:.14; top:-120px; left:-60px; }
.prefooter .blur-shape--2{ width:280px; height:280px; background:var(--md-primary); opacity:.20; bottom:-140px; right:-40px; }

.prefooter__inner{ position:relative; z-index:1; display:flex; align-items:center; gap:36px; flex-wrap:wrap; }

/* Certificate seal — a classic circular "CERTIFIED" rubber-stamp
   emblem (double ring, curved caption, bold check with an
   overflowing flourish), rendered in a fixed engraved-gold gradient
   (matching the reference stamp graphic) rather than the brand
   accent, with the X/10 score set as its own line beneath it. */
.prefooter__seal{
  flex:0 0 auto; width:168px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.prefooter__seal-graphic{ position:relative; width:168px; height:168px; border-radius:50%; }
.prefooter__seal-stamp{
  width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
}
.prefooter__seal-logo{
  width:100%; height:100%; object-fit:contain; border-radius:50%;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
}
.prefooter__seal-ring-thick{ fill:none; stroke:url(#ike-seal-gold); stroke-width:3.5; }
.prefooter__seal-ring-thin{ fill:none; stroke:url(#ike-seal-gold); stroke-width:1.4; opacity:.9; }
.prefooter__seal-text{
  fill:url(#ike-seal-gold); font-size:14.5px; font-weight:800; letter-spacing:.14em;
}
.prefooter__seal-text--citation{ font-size:11px; letter-spacing:.04em; }
.prefooter__seal-check{
  fill:none; stroke:url(#ike-seal-gold); stroke-width:16;
  stroke-linecap:round; stroke-linejoin:round;
}

.prefooter__seal-score{ font-size:30px; font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1; }
.prefooter__seal-score span{ font-size:14px; font-weight:600; color:rgba(255,255,255,.55); }

/* Front-end image editing (admins only) — same dashed-outline language
   as the text fields, plus a hover overlay with the actual actions,
   since a bare outline alone wouldn't tell you click-to-replace works
   here the way contenteditable already implies it for text. */
body.ike-editing [data-ike-edit-image]{
  outline:1.5px dashed var(--md-tertiary); outline-offset:6px; cursor:pointer;
}
.ike-image-edit-overlay{
  position:absolute; inset:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  padding:8px;
  background:rgba(11,26,32,.72); opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease-md3);
}
body.ike-editing [data-ike-edit-image]:hover .ike-image-edit-overlay{ opacity:1; pointer-events:auto; }
.ike-image-edit-btn{
  font:inherit; font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:6px 10px; border-radius:999px; border:none; cursor:pointer;
  background:var(--md-tertiary); color:var(--md-on-tertiary);
}
.ike-image-edit-btn--remove{ background:rgba(255,255,255,.18); color:#fff; }

.prefooter__body{ flex:1 1 380px; min-width:0; }
.prefooter__body h2{ color:#fff; font-size:clamp(22px,3vw,30px); line-height:1.25; letter-spacing:-.02em; margin:14px 0 10px; }
.prefooter__body p{ color:#C9D6D9; font-size:15px; line-height:1.6; max-width:62ch; margin:0; }
.prefooter__basis{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }

@media (max-width:640px){
  .prefooter__seal{ width:140px; }
  .prefooter__seal-graphic{ width:140px; height:140px; }
  .prefooter__seal-score{ font-size:24px; }
}

/* ==========================================================================
   Footer — same surface as the page body, separated by a hairline
   instead of a color change, so it reads correctly in both themes.
   ========================================================================== */
footer.site{
  background:var(--md-background); color:var(--md-on-surface-variant);
  border-top:1px solid var(--md-surface-container-low);
  padding:40px 0; font-size:13px;
  transition:background-color .3s var(--ease-md3), color .3s var(--ease-md3);
}
footer.site .row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
footer.site .disclaimer{ max-width:700px; color:var(--md-on-surface-variant); font-size:12.5px; line-height:1.65; margin-bottom:20px; }
footer.site .credit{
  display:inline-flex; align-items:center; gap:8px; color:var(--md-on-background); font-weight:600;
  padding:8px 8px 8px 8px; border-radius:var(--r-full);
  transition:background-color .3s var(--ease-md3), transform .2s var(--ease-md3);
}
footer.site .credit:hover{ background:var(--md-surface-container-low); }
footer.site .credit:active{ transform:scale(.96); }
footer.site .credit .mark{
  width:24px; height:24px; border-radius:var(--r-xs);
  background:var(--md-tertiary); color:var(--md-on-tertiary);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px;
}