/*
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) μηχανική πάνω στη χρωματική παλέτα και τη γραμματοσειρά του isologismoi.online, με fintech-style hero/marquee σύνθεση, dark/light mode και front-end επεξεργασία από τον Προσαρμογέα.
Version: 3.1.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); }

.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-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 .basis{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.hero .actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; }

/* ==========================================================================
   Marquee — infinite scrolling brand/source strip (Halo brief pattern)
   ========================================================================== */
.ike-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display:flex; width:max-content; animation:ike-marquee 26s linear infinite; }
.marquee-track--slow{ animation-duration:34s; }
.marquee-track:hover{ animation-play-state:paused; }
.marquee-item{ display:inline-flex; align-items:center; margin:0 28px; white-space:nowrap; font-weight:700; font-size:14px; letter-spacing:.04em; flex:0 0 auto; }
@keyframes ike-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.hero .ike-marquee{ margin-top:40px; max-width:640px; }
.hero .marquee-item{ color:rgba(255,255,255,.55); }

/* ==========================================================================
   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 (powered-by / statements)
   ========================================================================== */
.ike-section{ padding:72px 0; }
.ike-section--tight{ padding:48px 0; }
.ike-eyebrow{ display:block; margin-bottom:10px; }

/* Powered-by section: intro column + marquee column */
.ike-powered{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
@media (min-width:768px){ .ike-powered{ grid-template-columns:1fr 3fr; gap:32px; } }
.ike-powered .intro{ font-size:16px; line-height:1.55; color:var(--md-on-surface-variant); white-space:pre-line; margin:0; }
.ike-powered .marquee-item{ color:var(--md-on-surface-variant); opacity:.85; }

/* 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; }

/* ==========================================================================
   Front-end edit affordance (admins only)
   ========================================================================== */
.ike-editable{ position:relative; }
.ike-edit-badge{
  position:absolute; top:-14px; right:0; z-index:5;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ike-ink); color:#fff !important;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:6px 12px; border-radius:var(--r-full);
  opacity:0; transform:translateY(4px);
  transition:opacity .2s var(--ease-md3), transform .2s var(--ease-md3);
  box-shadow:var(--shadow-md);
}
.ike-edit-badge svg{ width:12px; height:12px; }
.ike-editable:hover .ike-edit-badge,
.ike-edit-badge:focus-visible{ opacity:1; transform:translateY(0); }
.ike-editable{ outline:1px dashed transparent; border-radius:var(--r-md); transition:outline-color .2s var(--ease-md3); }
.ike-editable:hover{ outline-color:rgba(14,124,147,.35); }

/* ==========================================================================
   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); }

/* ==========================================================================
   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;
}