/* ============================================================
   TAX OK Ι.Κ.Ε. — styles.css
   ------------------------------------------------------------
   Layout/appearance lives in the inline style attributes of the
   HTML, exactly as authored in the design artboards. This file
   holds only what an inline attribute cannot express:
     1. base document rules (from the artboards' <helmet>)
     2. keyframes
     3. the :hover / :focus rules that were `style-hover=` /
        `style-focus=` attributes in the artboards
     4. the mobile burger menu
   Colours: ivory #F6EFE3 · ink #1E1B18 · red #B5121B
            gold #E8B92F · line #E2D8C6
   ============================================================ */

/* --- 1. base (artboard <helmet>) --------------------------- */
body{margin:0;background:#F6EFE3;color:#1E1B18;-webkit-font-smoothing:antialiased}
a{color:#B5121B}
a:hover{color:#1E1B18}
input,select,textarea{font-family:inherit}

/* --- 2. keyframes ------------------------------------------ */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* --- 3. hover / focus (was style-hover= / style-focus=) -----
   !important is required, not stylistic: the artboard keeps its base
   styles in inline style attributes, which outrank any plain selector.
   support.js importantify()s these same rules for the same reason. */
.hv-gold:hover{color:#E8B92F !important}
.hv-ul-gold:hover{border-bottom-color:#E8B92F !important}
.hv-top-red:hover{border-top-color:#B5121B !important}
.hv-card:hover{border-color:#1E1B18 !important;box-shadow:0 20px 40px -24px rgba(30,27,24,.35) !important}
.hv-indent:hover{padding-left:12px !important}
.hv-row:hover{background:#F6EFE3 !important;padding:24px 16px !important}
.hv-bg-red:hover{background:#B5121B !important}
.hv-pill:hover{background:#1E1B18 !important;color:#F6EFE3 !important}
.hv-zoom:hover{transform:scale(1.03) !important}
.hv-arrow:hover{gap:18px !important;border-bottom-color:#B5121B !important}
.hv-ivory:hover{color:#F6EFE3 !important}
.hv-btn-red:hover{background:#B5121B !important;color:#fff !important;transform:translateY(-2px) !important}
.hv-red:hover{color:#B5121B !important}
.hv-ink:hover{color:#1E1B18 !important}
.hv-btn-ghost:hover{border-color:#fff !important;background:rgba(255,255,255,.08) !important}
.hv-ul-ink:hover{border-bottom-color:#1E1B18 !important}
.hv-btn-gold:hover{background:#E8B92F !important;transform:translateY(-2px) !important}

/* --- 4. mobile burger menu --------------------------------- */
/* Hidden above 760px: the header is byte-identical to the artboard there. */
.nav-toggle{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0;margin-left:14px;
  background:transparent;border:1px solid #E2D8C6;border-radius:4px;
  cursor:pointer;transition:border-color .25s
}
.nav-toggle:hover{border-color:#1E1B18}
.nav-toggle span{
  display:block;width:18px;height:2px;background:#1E1B18;border-radius:2px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .2s
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:760px){
  /* !important is required: the artboard sets these as inline styles. */
  .nav-toggle{display:flex}
  .site-nav{
    display:none!important;order:3;width:100%;
    flex-direction:column!important;gap:0!important;margin-left:0!important;
    border-top:1px solid #E2D8C6;padding:6px 0 4px
  }
  .site-nav.is-open{display:flex!important}
  .site-nav a{align-self:flex-start;padding:12px 0!important}
  .hdr-phone{margin-left:auto}
}

@media (prefers-reduced-motion:reduce){
  .nav-toggle span{transition:none}
}

/* --- 5. privacy policy: reclaim width on small screens -----
   The numbered sections use a 48px numeral column, which costs
   ~20% of a 375px viewport and squeezes the legal text to an
   unreadable measure. Below 600px the numeral moves inline and
   the controller table stacks. !important: the page sets these
   as inline styles. */
@media (max-width:600px){
  .policy-sec{grid-template-columns:1fr!important;gap:4px!important}
  .policy-dl{grid-template-columns:1fr!important}
  .policy-dl dt{border-bottom:0!important;padding:14px 0 0!important}
  .policy-dl dd{border-top:0!important;padding:2px 0 14px!important}
}

/* --- 6. cookie consent banner ------------------------------
   Deliberately discreet: a small card in the bottom-left corner,
   not a full-width bar or a blocking overlay. Both buttons carry
   equal visual weight — refusing must be as easy as accepting. */
.cc-banner{
  position:fixed;left:24px;bottom:24px;z-index:60;
  box-sizing:border-box;width:min(380px,calc(100vw - 48px));
  background:#fff;border:1px solid #E2D8C6;border-radius:12px;
  padding:20px 22px;
  box-shadow:0 24px 48px -24px rgba(30,27,24,.45);
  font-family:Commissioner,sans-serif;color:#1E1B18;
  animation:cc-in .45s cubic-bezier(.2,.7,.2,1) both
}
@keyframes cc-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cc-banner h2{
  font-family:Literata,serif;font-weight:600;font-size:17px;line-height:1.25;
  margin:0 0 8px
}
.cc-banner p{font-size:14px;line-height:1.6;color:#4A433C;margin:0 0 16px;text-wrap:pretty}
.cc-banner a{color:#1E1B18;font-weight:600;text-decoration:none;border-bottom:2px solid #E8B92F}
.cc-banner a:hover{border-bottom-color:#B5121B}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap}
.cc-btn{
  flex:1 1 auto;font:inherit;font-size:14px;font-weight:600;
  padding:11px 18px;border-radius:4px;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s
}
.cc-accept{background:#1E1B18;color:#F6EFE3;border:1px solid #1E1B18}
.cc-accept:hover{background:#B5121B;border-color:#B5121B}
.cc-decline{background:transparent;color:#1E1B18;border:1px solid #1E1B18}
.cc-decline:hover{background:#1E1B18;color:#F6EFE3}
.cc-btn:focus-visible{outline:2px solid #B5121B;outline-offset:2px}

/* the "change your mind" control inside the privacy policy */
.cc-reopen{
  font:inherit;font-size:15px;font-weight:600;color:#1E1B18;
  background:transparent;border:0;border-bottom:2px solid #E8B92F;
  padding:0 0 2px;cursor:pointer;transition:border-color .25s
}
.cc-reopen:hover{border-bottom-color:#B5121B}

@media (max-width:600px){
  .cc-banner{left:16px;right:16px;bottom:16px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .cc-banner{animation:none}
}

/* minimised state: shown after "Απόρριψη", click to reopen the choice */
.cc-mini{
  position:fixed;left:24px;bottom:24px;z-index:60;
  box-sizing:border-box;width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#1E1B18;border:1px solid #E2D8C6;border-radius:50%;
  box-shadow:0 12px 24px -12px rgba(30,27,24,.4);cursor:pointer;
  transition:border-color .25s,transform .25s,box-shadow .25s;
  animation:cc-in .35s cubic-bezier(.2,.7,.2,1) both
}
.cc-mini:hover{
  border-color:#1E1B18;transform:translateY(-2px);
  box-shadow:0 16px 28px -12px rgba(30,27,24,.45)
}
.cc-mini:focus-visible{outline:2px solid #B5121B;outline-offset:2px}
@media (max-width:600px){ .cc-mini{left:16px;bottom:16px} }
@media (prefers-reduced-motion:reduce){ .cc-mini{animation:none;transition:none} }

/* --- 7. accessibility toolbar ------------------------------
   Self-contained: only this site's own CSS is touched. It never
   overrides ARIA or the keyboard, so a visitor's own screen reader
   and browser settings keep working exactly as they were. */

/* text size — zoom the page wrapper only, so the toolbar and the
   cookie controls stay at their normal size and remain usable */
html[data-a11y-text="large"]  .a11y-scope{zoom:1.15}
html[data-a11y-text="xlarge"] .a11y-scope{zoom:1.30}

/* high contrast — push the muted tiers to full strength.
   Elements were tagged by which tier they use, so light-on-dark
   sections go lighter and dark-on-light sections go darker. */
html[data-a11y-contrast="high"] .a11y-dim-light{color:#1E1B18!important}
html[data-a11y-contrast="high"] .a11y-dim-dark{color:#F6EFE3!important}
html[data-a11y-contrast="high"] .a11y-line{border-color:#8A8078!important}
html[data-a11y-contrast="high"] .a11y-gold-light{color:#1E1B18!important}
html[data-a11y-contrast="high"] .a11y-scope a{text-decoration-thickness:2px}

/* motion off */
html[data-a11y-motion="off"] .a11y-scope *,
html[data-a11y-motion="off"] .a11y-scope *::before,
html[data-a11y-motion="off"] .a11y-scope *::after{
  animation-duration:.001ms!important;animation-delay:0ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;transition-delay:0ms!important
}
html[data-a11y-motion="off"]{scroll-behavior:auto!important}

/* the launcher, bottom-right so it never collides with the cookie icon */
.a11y-toggle{
  position:fixed;right:24px;bottom:24px;z-index:60;
  box-sizing:border-box;width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#1E1B18;border:1px solid #E2D8C6;border-radius:50%;
  box-shadow:0 12px 24px -12px rgba(30,27,24,.4);cursor:pointer;
  transition:border-color .25s,transform .25s,box-shadow .25s
}
.a11y-toggle:hover{
  border-color:#1E1B18;transform:translateY(-2px);
  box-shadow:0 16px 28px -12px rgba(30,27,24,.45)
}
.a11y-toggle:focus-visible,.a11y-opt:focus-visible,.a11y-reset:focus-visible{
  outline:2px solid #B5121B;outline-offset:2px
}

.a11y-panel{
  position:fixed;right:24px;bottom:80px;z-index:61;
  box-sizing:border-box;width:min(300px,calc(100vw - 48px));
  background:#fff;border:1px solid #E2D8C6;border-radius:12px;padding:20px 22px;
  box-shadow:0 24px 48px -24px rgba(30,27,24,.45);
  font-family:Commissioner,sans-serif;color:#1E1B18;
  animation:cc-in .35s cubic-bezier(.2,.7,.2,1) both
}
.a11y-panel h2{
  font-family:Literata,serif;font-weight:600;font-size:17px;line-height:1.25;margin:0 0 16px
}
.a11y-group{margin-bottom:16px}
.a11y-label{
  display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:#6B625A;margin-bottom:8px
}
.a11y-opts{display:flex;gap:6px;flex-wrap:wrap}
.a11y-opt{
  flex:1 1 auto;font:inherit;font-size:13px;font-weight:600;
  padding:9px 10px;border-radius:4px;cursor:pointer;
  background:transparent;color:#1E1B18;border:1px solid #E2D8C6;
  transition:background .2s,border-color .2s,color .2s
}
.a11y-opt:hover{border-color:#1E1B18}
.a11y-opt[aria-pressed="true"]{background:#1E1B18;border-color:#1E1B18;color:#F6EFE3}
.a11y-reset{
  font:inherit;font-size:13px;font-weight:600;color:#1E1B18;background:transparent;
  border:0;border-bottom:2px solid #E8B92F;padding:0 0 2px;cursor:pointer;
  transition:border-color .25s
}
.a11y-reset:hover{border-bottom-color:#B5121B}

@media (max-width:600px){
  .a11y-toggle{right:16px;bottom:16px}
  .a11y-panel{right:16px;left:16px;bottom:72px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .a11y-toggle{transition:none}
  .a11y-panel{animation:none}
}