/* ==========================================================================
   Ela Cosmetics — Design System
   Colors, type and spacing per the approved design handoff. Do not change
   these tokens without design sign-off — "העיצוב מושלם, אל תשנו אותו".
   ========================================================================== */

:root{
  /* Colors */
  --ink:        #2B2124;
  --ink-2:      #4A3C40;
  --muted:      #5E4E52;
  --rose-deep:  #7A4B57;
  --rose-deep-hover: #5A3540;
  --rose:       #B48A91; /* decorative only, never for text */
  --rose-light: #E6CBD0;
  --blush:      #F3E8E7;
  --cream:      #FBF7F6;
  --white:      #FFFFFF;
  --error:      #9B2C3C;
  --success-bg: #EAF3EC;
  --success-fg: #1F4A2C;
  --whatsapp:   #1F7A4A;
  --whatsapp-hover: #16603A;
  --hairline:   rgba(122,75,87,.16);
  --hairline-dark: rgba(251,247,246,.28);

  /* Type — unified site-wide on Heebo (premium, purpose-built Hebrew webfont) */
  --font-display: 'Heebo', Arial, sans-serif;
  --font-ui: 'Heebo', Arial, sans-serif;
  --base-size: 1.0625rem; /* 17px */

  /* Spacing / layout */
  --container-max: 78rem;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --section-pad: clamp(3.5rem, 8vw, 7rem);

  /* Radii / shadows */
  --radius-pill: 999px;
  --radius-card: 1.25rem;
  --radius-lg: 1.5rem;
  --radius-input: .75rem;
  --shadow-card-hover: 0 14px 30px rgba(122,75,87,.12);
  --shadow-float: 0 10px 24px rgba(0,0,0,.2);

  /* a11y-controlled variables (overridden by a11y.js) */
  --a11y-scale: 1;
  --a11y-word-spacing: normal;
  --a11y-letter-spacing: normal;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html.a11y-still, html.a11y-still *{ scroll-behavior: auto !important; }
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: calc(var(--base-size) * var(--a11y-scale));
  line-height: 1.65;
  word-spacing: var(--a11y-word-spacing);
  letter-spacing: var(--a11y-letter-spacing);
  direction: rtl;
}
img{ max-width: 100%; display: block; }
a{ color: var(--rose-deep); text-decoration: none; }
a:hover{ color: var(--rose-deep-hover); }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0 0 .6em; }
p{ margin: 0 0 1em; }
button{ font-family: inherit; }

/* Visible focus ring everywhere */
:focus-visible{ outline: 3px solid var(--rose-deep); outline-offset: 3px; border-radius: 4px; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link{
  position: absolute; right: 1rem; top: -60px; z-index: 10000;
  background: var(--ink); color: var(--white); padding: .75rem 1.25rem;
  border-radius: var(--radius-input); transition: top .2s;
}
.skip-link:focus{ top: 1rem; }

/* ---------- Layout helpers ---------- */
.container{ max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.section{ padding: var(--section-pad) 0; }
.section--blush{ background: var(--blush); }
.section--ink{ background: var(--ink); color: var(--rose-light); }
.section--ink h1, .section--ink h2, .section--ink h3{ color: var(--white); }

.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font: 700 13px/1 var(--font-ui); letter-spacing:.12em; color: var(--rose-deep);
  text-transform: none; margin-bottom: .9rem;
}
.eyebrow::before{ content:''; width:40px; height:1px; background: var(--rose); display:inline-block; }
.section--ink .eyebrow{ color: var(--rose-light); }

h1{ font-weight:300; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height:1.05; }
.h1--hero{ font-size: clamp(2.75rem, 7vw, 5.25rem); }
h2.h2-section{ font-weight:300; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height:1.1; }
h2.h2-content{ font-weight:400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height:1.25; }
.lead{ color: var(--muted); font-size: 1.15rem; max-width: 48rem; }

.grid-auto{ display:grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-auto--wide{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .9rem 1.75rem; border-radius: var(--radius-pill); border: 1px solid transparent;
  font-weight:700; font-size: 1rem; cursor:pointer; transition: .2s; min-height:44px;
  text-align:center;
}
.btn--primary{ background: var(--rose-deep); color: var(--white); }
.btn--primary:hover{ background: var(--rose-deep-hover); color:var(--white); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover{ border-color: var(--rose-deep); color: var(--rose-deep); }
.btn--whatsapp{ background: var(--whatsapp); color: var(--white); }
.btn--whatsapp:hover{ background: var(--whatsapp-hover); color:var(--white); }
.btn--block{ width:100%; }

/* ---------- Header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(251,247,246,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding: .85rem var(--container-pad); max-width: var(--container-max); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:.75rem; color: var(--ink); }
.brand img{ width:56px; height:56px; border-radius:50%; }
.brand__name{ font-family: var(--font-display); font-size:1.15rem; line-height:1.1; }
.brand__tag{ font-size:.8rem; color: var(--muted); }
.nav{ display:none; align-items:center; gap:2rem; }
/* :not(.btn) keeps these link styles from leaking onto the CTA pill button,
   which must keep its own .btn/.btn--primary padding, radius and color. */
.nav a:not(.btn){ color: var(--ink); font-weight:600; padding:.4rem 0; border-bottom: 1px solid transparent; }
.nav a:not(.btn)[aria-current="page"]{ color: var(--rose-deep); border-color: var(--rose-deep); }
.nav a:not(.btn):hover{ color: var(--rose-deep); }
.nav-cta{ margin-inline-start: .5rem; }
.hamburger{
  display:inline-flex; background:none; border:1px solid var(--hairline); border-radius: var(--radius-input);
  width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer;
}
.mobile-menu{ display:none; flex-direction:column; gap:.25rem; padding: 1rem var(--container-pad) 1.5rem; border-top: 1px solid var(--hairline); background: var(--cream); }
.mobile-menu.is-open{ display:flex; }
.mobile-menu a:not(.btn){ padding:.75rem .25rem; color: var(--ink); font-weight:600; border-bottom: 1px solid var(--hairline); }
.mobile-menu a:not(.btn)[aria-current="page"]{ color: var(--rose-deep); }

@media (min-width: 900px){
  .nav{ display:flex; }
  .hamburger{ display:none; }
  .mobile-menu{ display:none !important; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ font-size:.9rem; color: var(--muted); padding: 1.25rem 0 0; }
.breadcrumbs a{ color: var(--muted); }
.breadcrumbs a:hover{ color: var(--rose-deep); }
.breadcrumbs [aria-current="page"]{ color: var(--ink); }

/* ---------- Page head pattern ---------- */
.page-head{ padding: 2rem 0 var(--section-pad); }
.page-head .lead{ margin-top: 1rem; }

/* ---------- Home hero — "Radiance": dark, glowing, animated stage ---------- */
.hero-wow{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  min-height: min(94vh, 900px);
  padding: clamp(6rem,13vw,9rem) 0 clamp(5rem,10vw,7rem);
  background:
    radial-gradient(60% 55% at 50% 8%, rgba(180,138,145,.35), transparent 70%),
    radial-gradient(120% 100% at 50% -10%, #4A2F3A 0%, var(--ink) 48%, #150F11 100%);
  color: var(--white);
  text-align:center;
}

.hero-wow__aura{ position:absolute; inset:0; z-index:0; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.hero-wow__glow{
  position:absolute; width:min(60rem,90vw); height:min(60rem,90vw); border-radius:50%;
  background: radial-gradient(circle, rgba(230,203,208,.35) 0%, rgba(122,75,87,.16) 45%, transparent 72%);
  filter: blur(10px);
  animation: wowPulse 7s ease-in-out infinite;
}
.aura-rings{ position:relative; width:min(46rem,110vw); height:auto; overflow:visible; }
.aura-ring{
  fill:none; stroke: var(--rose-light); stroke-opacity:.35; stroke-width:1;
  transform-box: fill-box; transform-origin:50% 50%;
}
.aura-ring--1{ stroke-dasharray: 2 14; animation: wowSpin 70s linear infinite; }
.aura-ring--2{ stroke-dasharray: 1 1 1 22; stroke-opacity:.28; animation: wowSpin 50s linear infinite reverse; }
.aura-ring--3{ stroke-dasharray: 6 10; stroke-opacity:.4; animation: wowSpin 38s linear infinite; }
.aura-dot{ fill: var(--rose-light); animation: wowTwinkle 4.5s ease-in-out infinite; }
.aura-dot--2{ animation-delay: 1.2s; }
.aura-dot--3{ animation-delay: 2.6s; }

@keyframes wowSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes wowPulse{
  0%,100%{ transform: scale(1); opacity:.7; }
  50%{ transform: scale(1.08); opacity:1; }
}
@keyframes wowTwinkle{
  0%,100%{ opacity:.25; }
  50%{ opacity:1; }
}

.hero-wow__inner{
  position:relative; z-index:1; max-width:52rem; margin:0 auto;
  animation: wowReveal .9s cubic-bezier(.16,.8,.3,1) both;
}
@keyframes wowReveal{
  from{ opacity:0; transform: translateY(28px); }
  to{ opacity:1; transform: translateY(0); }
}

.hero-wow__eyebrow{ justify-content:center; color: var(--rose-light); }
.hero-wow__spark{ display:inline-block; margin-inline-end:.4em; animation: wowTwinkle 2.4s ease-in-out infinite; }
.hero-wow__title{
  font-size: clamp(2.5rem, 7vw, 5rem); line-height:1.12; font-weight:700; color: var(--white);
}
.hero-wow__rotator{
  display:inline-block; color: var(--rose-light);
  background-image: linear-gradient(transparent 62%, rgba(122,75,87,.55) 62%);
  background-repeat:no-repeat; padding:0 .05em;
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}
.hero-wow__rotator.is-swapping{ opacity:0; transform: translateY(-.35em); filter: blur(4px); }
.hero-wow__lead{ max-width:34rem; margin:1.35rem auto 0; color: rgba(255,255,255,.82); }
.hero-wow__cta{ justify-content:center; margin-top:2.5rem; }

.hero-wow__scrollcue{
  position:absolute; bottom: clamp(1.25rem,3vw,2.25rem); inset-inline-start:50%; transform: translateX(50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.45); border-radius: var(--radius-pill);
  display:flex; justify-content:center; padding-top:8px; z-index:1;
}
.hero-wow__scrollcue span{
  width:4px; height:8px; border-radius: var(--radius-pill); background: var(--rose-light);
  animation: wowScrollDot 1.8s ease-in-out infinite;
}
@keyframes wowScrollDot{
  0%{ opacity:1; transform: translateY(0); }
  70%{ opacity:0; transform: translateY(14px); }
  100%{ opacity:0; transform: translateY(0); }
}

.hero-badges{ list-style:none; margin: 2.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; position:relative; z-index:1; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  background: rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.5);
  padding:.6rem 1.1rem; border-radius: var(--radius-pill);
  font-size:.85rem; font-weight:700; color: var(--ink-2);
}
.hero-badge__icon{ color: var(--whatsapp); font-weight:800; }

@media (prefers-reduced-motion: reduce){
  .hero-wow__glow, .aura-ring, .aura-dot, .hero-wow__spark, .hero-wow__scrollcue span{ animation:none !important; }
  .hero-wow__inner{ animation:none !important; opacity:1; transform:none; }
  .hero-wow__rotator{ transition:none !important; }
}
html.a11y-still .hero-wow__glow,
html.a11y-still .aura-ring,
html.a11y-still .aura-dot,
html.a11y-still .hero-wow__spark,
html.a11y-still .hero-wow__scrollcue span{ animation:none !important; }
html.a11y-still .hero-wow__inner{ opacity:1 !important; transform:none !important; animation:none !important; }
html.a11y-still .hero-wow__rotator{ transition:none !important; }

@media (max-width:600px){
  .hero-wow{ min-height:auto; padding: clamp(5rem,20vw,6.5rem) 0 3.5rem; }
  .hero-wow__glow{ width:80vw; height:80vw; }
  .aura-rings{ width:130vw; }
  .hero-wow__scrollcue{ display:none; }
  .hero-badge{ font-size:.8rem; padding:.5rem .9rem; }
}
@media (min-width:601px) and (max-width:899px){
  .hero-wow{ min-height:auto; }
}

/* ---------- Cards ---------- */
.card{ background: var(--white); border-radius: var(--radius-card); padding: 1.75rem; border: 1px solid transparent; transition:.2s; }
.card:hover{ box-shadow: var(--shadow-card-hover); border-color: var(--rose-deep); }
.card h3{ font-size: 1.25rem; margin-bottom:.5rem; }
.card .price{ color: var(--rose-deep); font-weight:700; }

.arch-img{ width:100%; border-radius: 999px 999px 1.5rem 1.5rem; aspect-ratio: 4/5; object-fit: cover; }
.feature-img{ width:100%; border-radius: 1.5rem 1.5rem 999px 1.5rem; object-fit: cover; }

/* ---------- Price list (home/services) ---------- */
.price-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--hairline); }
.price-row:last-child{ border-bottom:none; }
.price-row .num{ color: var(--rose); font-family: var(--font-display); font-size:1.5rem; margin-inline-end: .75rem; }
.price-row .name{ font-weight:700; color: var(--ink); }
.price-row .sub{ color: var(--muted); font-size:.92rem; }
.price-row .price{ color: var(--rose-deep); font-weight:700; white-space:nowrap; }

/* ---------- Service / Post detail ---------- */
.detail-hero{ display:grid; gap: 2.5rem; grid-template-columns: 1.1fr .9fr; align-items:center; }
/* minmax(0,1fr) — not bare "1fr" — is required here: a bare fr track keeps
   an automatic minimum size based on its content's natural size, and a
   replaced element that combines a width/height attribute with an
   aspect-ratio (like .arch-img) still contributes that natural size to the
   track even with min-width:0 on the item itself. minmax(0, ...) clamps the
   track's own minimum directly, which is the spec-correct fix. */
@media (max-width: 899px){ .detail-hero{ grid-template-columns: minmax(0,1fr); } }

/* Several sections (home/about/contact/article+TOC) set their own
   grid-template-columns inline per-page. min-width:0 stops a grid track
   from refusing to shrink below a fixed-width image's intrinsic size (the
   classic CSS Grid "blowout" bug), and the media query collapses every one
   of them to a single column on mobile — !important is required because an
   inline style attribute otherwise outranks any class-based rule. */
.responsive-grid-2 > *{ min-width:0; }
@media (max-width:899px){
  .responsive-grid-2{ grid-template-columns: minmax(0,1fr) !important; }
}
.toc{ position: sticky; top: 90px; align-self:start; background: var(--white); border-radius: var(--radius-card); padding: 1.25rem; border:1px solid var(--hairline); }
.toc h2{ font-family: var(--font-ui); font-weight:700; font-size:.95rem; margin-bottom:.75rem; color: var(--ink); }
.toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.toc a{ color: var(--muted); font-size:.92rem; display:block; padding:.35rem .5rem; border-radius:.5rem; }
.toc a:hover{ background: var(--blush); color: var(--rose-deep); }

.content-section{ max-width: 44rem; padding: 2rem 0; border-bottom: 1px solid var(--hairline); }
.content-section:last-child{ border-bottom:none; }
.content-section .num{ color: var(--rose); font-family: var(--font-display); font-size:1.1rem; }
.article-body{ font-size:18px; line-height:1.85; max-width:44rem; }

/* ---------- FAQ accordion ---------- */
.faq-item{ border-bottom: 1px solid var(--hairline); }
.faq-item:first-child{ border-top: 1px solid var(--hairline); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:none; border:none; text-align:start; padding: 1.25rem 0; cursor:pointer;
  font-weight:700; color: var(--ink); font-size:1.05rem;
}
.faq-q .icon{ color: var(--rose-deep); font-size:1.3rem; flex-shrink:0; }
.faq-a{ padding: 0 0 1.25rem; color: var(--ink-2); max-width: 44rem; }
.faq-a[hidden]{ display:none; }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ margin-bottom:1rem; }

/* ---------- Contact ---------- */
.form-field{ margin-bottom: 1.25rem; }
.form-field label{ display:block; font-weight:600; margin-bottom:.4rem; color: var(--ink); }
.form-field input, .form-field textarea{
  width:100%; padding:.85rem 1rem; border-radius: var(--radius-input);
  border:1px solid rgba(43,33,36,.35); font: inherit; background: var(--white); color: var(--ink);
}
.form-field input:invalid[aria-invalid="true"], .form-field .is-invalid{ border-color: var(--error); }
.form-error{ color: var(--error); font-size:.85rem; margin-top:.35rem; }
.form-check{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1rem; font-size:.92rem; color: var(--ink-2); }
.form-alert{ padding:1rem 1.25rem; border-radius: var(--radius-input); margin-bottom:1.5rem; }
.form-alert--success{ background: var(--success-bg); color: var(--success-fg); }
.form-alert--error{ background: #FBEAEC; color: var(--error); }
.contact-tile{ display:flex; gap:1rem; align-items:flex-start; }
.map-frame{ border:0; width:100%; height:320px; border-radius: var(--radius-lg); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: var(--rose-light); padding: var(--section-pad) 0 2rem; }
.site-footer a{ color: var(--rose-light); }
.site-footer a:hover{ color: var(--white); }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,14rem),1fr)); margin-bottom: 2.5rem; }
.footer-logo{ width:48px; height:48px; border-radius:50%; margin-bottom:1rem; display:block; }
.footer-grid h3{ color: var(--white); font-family: var(--font-ui); font-size:1rem; margin-bottom:1rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-bottom{ border-top: 1px solid var(--hairline-dark); padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; font-size:.85rem; }
.footer-legal-links{ display:flex; flex-wrap:wrap; gap:.4rem; }
@media (max-width:768px){
  .footer-bottom{ justify-content:center; text-align:center; }
}

/* ---------- Floating buttons ---------- */
.floating-btn{
  position:fixed; bottom:20px; width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; z-index:9997;
  box-shadow: var(--shadow-float); cursor:pointer; border: 2px solid transparent; transition:.2s;
}
.floating-whatsapp{ inset-inline-end: 20px; background: var(--whatsapp); color:#fff; }
.floating-whatsapp:hover{ background: var(--whatsapp-hover); transform: scale(1.06); }

/* ---------- Blog filters ---------- */
.tag-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin: 1.5rem 0 2.5rem; }
.tag-chip{
  padding:.5rem 1.1rem; border-radius: var(--radius-pill); border:1px solid var(--hairline);
  background: var(--white); color: var(--ink); font-weight:600; font-size:.9rem; cursor:pointer;
}
.tag-chip[aria-pressed="true"]{ background: var(--ink); color:#fff; border-color: var(--ink); }

/* ---------- Utility ---------- */
.visually-hide-mobile{ display:none; }
@media (min-width:900px){ .visually-hide-mobile{ display:initial; } }
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.stack{ display:flex; flex-direction:column; gap:1rem; }
.row-wrap{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ==========================================================================
   Accessibility utility classes (toggled by a11y.js)
   ========================================================================== */
html.a11y-contrast body, html.a11y-contrast body *{ background-color:#000 !important; color:#ffff00 !important; border-color:#ffff00 !important; }
html.a11y-contrast img{ filter: grayscale(100%) contrast(150%); }
html.a11y-links a{ text-decoration:underline !important; text-underline-offset:4px; background:#ffff00 !important; color:#000 !important; font-weight:700 !important; padding:0 4px !important; border-radius:3px; }
html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3, html.a11y-headings h4{ outline:2px solid var(--rose-deep) !important; background: rgba(255,255,255,.5) !important; padding:2px 6px !important; border-radius:4px; }
html.a11y-hide-images img, html.a11y-hide-images svg, html.a11y-hide-images video{ visibility:hidden !important; }
html.a11y-readable, html.a11y-readable *{ font-family: Arial, Helvetica, sans-serif !important; }
html.a11y-grayscale{ filter: grayscale(100%); }
html.a11y-invert{ filter: invert(100%) hue-rotate(180deg); }
html.a11y-still *, html.a11y-still{ animation:none !important; transition:none !important; }

/* ==========================================================================
   Accessibility widget (adapted from Logicode Accessibility plugin)
   Recolored to the site's rose/ink palette; functionality unchanged.
   ========================================================================== */
#a11y-screen-filter{ display:none; position:fixed; inset:0; pointer-events:none; z-index:99996; }
#a11y-reading-guide-line{ display:none; position:fixed; top:50%; inset-inline-start:0; width:100%; height:6px; background-color:var(--rose-deep); z-index:99999; pointer-events:none; box-shadow:0 0 15px rgba(0,0,0,.5); }

button#a11y-trigger{
  position:fixed !important; bottom:20px !important; inset-inline-start:20px !important;
  width:60px !important; height:60px !important; border-radius:50% !important;
  background-color:var(--ink) !important; color:var(--rose-light) !important;
  border:2px solid var(--rose-light) !important; display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:26px !important; cursor:pointer !important; z-index:9998 !important; box-shadow:var(--shadow-float) !important;
  transition:.3s !important; padding:0 !important;
}
button#a11y-trigger:hover{ transform:scale(1.08) !important; background-color:var(--rose-deep) !important; color:#fff !important; }

#a11y-panel{
  display:none; position:fixed !important; bottom:95px !important; inset-inline-start:20px !important;
  width:380px !important; max-width:calc(100vw - 40px) !important; max-height:80vh !important; overflow-y:auto !important;
  background-color:var(--white) !important; border-radius:16px !important; box-shadow:0 10px 40px rgba(0,0,0,.2) !important;
  z-index:9999 !important; border:1px solid var(--hairline) !important; font-family:var(--font-ui) !important; color:var(--ink-2) !important;
}
#a11y-panel *{ box-sizing:border-box; }
#a11y-panel .a11y-header{ background:var(--blush); padding:15px 20px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; border-bottom:1px solid var(--hairline); }
#a11y-panel .a11y-header h3{ margin:0; font-size:1.1rem; display:flex; align-items:center; gap:8px; color:var(--ink); font-family:var(--font-ui); font-weight:700; }
#a11y-panel button.a11y-close{ background:transparent; border:none; color:var(--error); font-size:1.4rem; cursor:pointer; line-height:1; }
#a11y-panel .a11y-body{ padding:20px; }
#a11y-panel .a11y-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
#a11y-panel .a11y-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
#a11y-panel button.a11y-btn{
  background-color:var(--cream); border:1px solid var(--hairline); padding:14px 5px; border-radius:12px;
  cursor:pointer; font-family:inherit; font-size:.8rem; font-weight:600; color:var(--ink-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; transition:.2s;
  text-align:center; width:100%; min-height:80px; line-height:1.2;
}
#a11y-panel button.a11y-btn .ic{ font-size:1.5rem; color:var(--rose-deep); }
#a11y-panel button.a11y-btn:hover{ background-color:var(--blush); border-color:var(--rose-deep); color:var(--ink); }
#a11y-panel button.a11y-btn.active{ background-color:var(--rose-deep); border-color:var(--rose-deep); color:#fff; }
#a11y-panel button.a11y-btn.active .ic{ color:#fff; }
#a11y-panel button.a11y-reset-btn{ width:100%; flex-direction:row; font-size:1rem; color:var(--error); border-color:rgba(155,44,60,.3); background-color:#FBEAEC; margin-top:6px; padding:14px; min-height:48px; }
#a11y-panel .a11y-sliders{ margin-bottom:20px; }
#a11y-panel .a11y-slider-box{ background:var(--cream); border:1px solid var(--hairline); border-radius:12px; padding:14px; margin-bottom:12px; }
#a11y-panel .slider-header{ display:flex; justify-content:space-between; margin-bottom:8px; color:var(--ink-2); font-size:.9rem; font-weight:600; }
#a11y-panel .slider-value{ color:#fff; font-weight:700; background:var(--rose-deep); padding:2px 8px; border-radius:6px; font-size:.8rem; }
#a11y-panel input[type=range]{ -webkit-appearance:none; width:100%; background:transparent; }
#a11y-panel input[type=range]::-webkit-slider-runnable-track{ width:100%; height:6px; cursor:pointer; background:var(--hairline); border-radius:4px; }
#a11y-panel input[type=range]::-webkit-slider-thumb{ height:18px; width:18px; border-radius:50%; background:var(--rose-deep); cursor:pointer; -webkit-appearance:none; margin-top:-6px; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.2); }
#a11y-panel .a11y-statement-link{ text-align:center; margin-top:16px; font-size:.85rem; }
@media (max-width:480px){
  #a11y-panel{ inset-inline-start:10px !important; inset-inline-end:10px !important; width:auto !important; bottom:80px !important; }
  #a11y-panel .a11y-grid-3{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   Cookie consent (adapted from Logicode Cookie Consent plugin)
   Recolored to the site's cream/ink/rose palette; functionality unchanged
   except that consent is stored client-side only (no WordPress backend on
   a static site) via localStorage, with the same accept/decline/customize
   flow and equal-weight Accept/Reject buttons required by Amendment 13.
   ========================================================================== */
#cookie-banner{
  position:fixed; bottom:100px; inset-inline-end:20px; width:380px; max-width:calc(100vw - 40px);
  background: var(--ink); color: var(--rose-light); border:1px solid var(--hairline-dark);
  border-radius:16px; padding:24px; box-shadow:0 10px 40px rgba(0,0,0,.35);
  z-index:9994; display:none; transform:translateY(20px); opacity:0; transition:all .35s ease;
}
#cookie-banner.show{ display:block; transform:translateY(0); opacity:1; }
#cookie-banner .cb-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
#cookie-banner .cb-head .ic{ font-size:1.3rem; color: var(--rose); }
#cookie-banner .cb-head span.title{ font-size:1.1rem; font-weight:800; color:#fff; }
#cookie-banner p{ color: var(--rose-light); font-size:.92rem; line-height:1.5; margin:0 0 18px; }
#cookie-banner .cb-row{ display:flex; gap:10px; }
.cb-btn{ flex:1; padding:12px; border-radius:8px; font:inherit; font-size:.92rem; font-weight:700; cursor:pointer; border:none; min-height:44px; }
.cb-btn-accept{ background: var(--rose-light); color: var(--ink); }
.cb-btn-accept:hover{ filter:brightness(1.08); }
.cb-btn-decline{ background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18); }
.cb-btn-decline:hover{ background: rgba(255,255,255,.16); }
.cb-btn-customize{ background:transparent; color: var(--rose-light); text-decoration:underline; padding:6px; text-underline-offset:4px; width:100%; margin-top:8px; border:none; cursor:pointer; font:inherit; font-size:.88rem; }
.cb-btn-customize:hover{ color:#fff; }

#cookie-modal-overlay{ position:fixed; inset:0; background:rgba(43,33,36,.6); z-index:9999; display:none; align-items:center; justify-content:center; }
#cookie-modal-overlay.show{ display:flex; }
.cookie-modal{ background: var(--white); border-radius:20px; width:92%; max-width:520px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.c-modal-header{ padding:22px 25px; border-bottom:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background: var(--white); }
.c-modal-header h3{ margin:0; font-family:var(--font-ui); color: var(--ink); font-size:1.2rem; font-weight:700; }
.c-modal-close{ background:none; border:none; color: var(--muted); font-size:1.4rem; cursor:pointer; }
.c-modal-body{ padding:22px 25px; }
.c-modal-desc{ color: var(--muted); font-size:.92rem; line-height:1.6; margin-bottom:20px; }
.cookie-option{ background: var(--cream); border:1px solid var(--hairline); border-radius:12px; padding:18px; margin-bottom:14px; }
.c-opt-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:1rem; }
.c-opt-title{ color: var(--ink); font-weight:700; font-size:1rem; }
.c-opt-desc{ color: var(--muted); font-size:.85rem; line-height:1.5; margin:0; }
.toggle-switch{ position:relative; display:inline-block; width:48px; height:26px; flex-shrink:0; }
.toggle-switch input{ opacity:0; width:0; height:0; }
.toggle-slider{ position:absolute; inset:0; background:#D9CDCE; transition:.3s; border-radius:34px; cursor:pointer; }
.toggle-slider::before{ content:''; position:absolute; height:18px; width:18px; left:4px; bottom:4px; background:#fff; transition:.3s; border-radius:50%; }
html[dir="rtl"] .toggle-slider::before{ left:auto; right:4px; }
.toggle-switch input:checked + .toggle-slider{ background: var(--rose-deep); }
.toggle-switch input:checked + .toggle-slider::before{ transform: translateX(-22px); }
html[dir="rtl"] .toggle-switch input:checked + .toggle-slider::before{ transform: translateX(22px); }
.toggle-switch input:disabled + .toggle-slider{ opacity:.6; cursor:not-allowed; }
.c-modal-footer{ padding:18px 25px 24px; }
#cookie-revoke-btn{
  position:fixed; bottom:90px; inset-inline-end:20px; width:50px; height:50px; border-radius:50%;
  background: var(--ink); color: var(--rose-light); border:1px solid var(--hairline-dark);
  display:none; align-items:center; justify-content:center; font-size:20px; cursor:pointer; z-index:9993;
  box-shadow: var(--shadow-float);
}
#cookie-revoke-btn:hover{ background: var(--rose-deep); color:#fff; }
@media (max-width:768px){
  #cookie-banner{ bottom:95px; inset-inline-end:15px; inset-inline-start:15px; width:auto; }
  #cookie-revoke-btn{ bottom:85px; inset-inline-end:15px; width:44px; height:44px; }
}