/* Shared site styles — endofservice-calculator.com
   Cacheable design-system layer: accessibility fixes + calculator island. */

/* Base font: the whole design is Manrope. Some prerendered wrappers set this only
   on an inner div, leaving out-of-wrapper text (e.g. FAQ sections) as browser-default
   serif — so set the base here. Explicit var(--display)/var(--ar) accents still win. */
body{ font-family:'Manrope',system-ui,-apple-system,sans-serif; }

/* Arabic pages are set in Tajawal. Same problem as above: the inline wrapper carries
   font-family:var(--ar), so anything added outside it fell back to Manrope and read as
   a different typeface mid-page. Set the base per-language instead. */
html[lang="ar"] body{ font-family:'Tajawal',system-ui,-apple-system,sans-serif; }

:root{
  --ink:#0E2438; --ink2:#46566A; --muted:#5D6C80; --line:#E3E9F0; --line2:#EEF2F6;
  --bg:#EDF1F6; --surface:#FFFFFF; --teal:#0FB5A6; --teal-deep:#087A72; --teal-tint:#E4F7F4;
  --navy:#0E2438; --sans:'Manrope',system-ui,-apple-system,sans-serif;
  --display:'Space Grotesk',ui-monospace,monospace;
}

/* ---- Accessibility: visible keyboard focus everywhere (overrides inline outline:none) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--teal)!important; outline-offset:2px; border-radius:6px;
}
:focus:not(:focus-visible){outline:none;}

/* skip link */
/* Hidden by clipping, not by left:-9999px — under dir="rtl" an off-canvas-left element
   extends the scrollable area, which gave every Arabic page a 10,000px sideways scroll. */
.eos-skip{position:absolute;top:0;left:0;z-index:200;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;text-decoration:none;}
.eos-skip:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;}

/* ---- Calculator island ---- */
#eos-calc *{box-sizing:border-box;}
.eos-field{display:block;margin-bottom:18px;}
.eos-label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.eos-label .eos-hint{font-weight:500;color:var(--muted);}
.eos-input,.eos-money input,.eos-select{
  width:100%;background:#F1F4F8;border:1.5px solid transparent;border-radius:12px;outline:none;
  padding:13px 14px;font-size:17px;font-family:var(--display);font-weight:600;color:var(--ink);
}
.eos-select{font-family:var(--sans);cursor:pointer;}
.eos-input:focus,.eos-money input:focus,.eos-select:focus{border-color:var(--teal);background:#fff;}
.eos-money{display:flex;align-items:stretch;background:#F1F4F8;border-radius:12px;overflow:hidden;border:1.5px solid transparent;}
.eos-money:focus-within{border-color:var(--teal);background:#fff;}
.eos-money .eos-cur{display:inline-flex;align-items:center;padding:0 14px;font-family:var(--display);font-size:13px;font-weight:600;color:var(--muted);}
.eos-money input{background:transparent;padding-left:0;}
.eos-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.eos-stepwrap{position:relative;}
.eos-step{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:1.5px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;color:var(--ink);font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
.eos-step-dec{left:8px;} .eos-step-inc{right:8px;}
.eos-stepwrap .eos-input{text-align:center;padding-left:40px;padding-right:40px;}

/* segmented reason toggle */
.eos-seg{display:flex;gap:6px;background:#F1F4F8;padding:5px;border-radius:12px;}
.eos-seg button{flex:1;padding:10px 8px;border-radius:9px;cursor:pointer;font-weight:700;font-size:13.5px;line-height:1.2;border:none;font-family:inherit;background:transparent;color:var(--muted);transition:all .15s;}
.eos-seg button.eos-seg-on{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(14,36,56,.12);}

/* switch (allowances / working-day basis) */
.eos-switch{display:inline-flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);padding:0;}
.eos-switch .eos-track{width:42px;height:24px;border-radius:100px;background:#CBD5E1;position:relative;transition:background .15s;flex:none;}
.eos-switch .eos-track:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.eos-switch.eos-switch-on .eos-track{background:var(--teal);}
.eos-switch.eos-switch-on .eos-track:after{transform:translateX(18px);}

/* result card */
.eos-result{background:var(--navy);color:#fff;border-radius:16px;padding:24px;}
.eos-result-label{font-size:13px;font-weight:600;color:#C7D3E4;margin:0 0 6px;}
.eos-headline{font-family:var(--display);font-weight:800;font-size:clamp(28px,5vw,40px);letter-spacing:-.01em;margin:0;}
.eos-service{font-size:13px;color:#8DA2BE;margin:8px 0 0;}
.eos-note{font-size:12.5px;color:#F5D9A6;margin:14px 0 0;line-height:1.5;}

/* breakdown table */
.eos-breakdown{margin-top:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.eos-breakdown summary{padding:15px 18px;font-weight:700;font-size:14.5px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.eos-breakdown summary::-webkit-details-marker{display:none;}
.eos-breakdown summary:after{content:"▾";color:var(--teal-deep);transition:transform .18s;}
.eos-breakdown[open] summary:after{transform:rotate(180deg);}
.eos-breakdown table{width:100%;border-collapse:collapse;}
.eos-breakdown td{padding:11px 18px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--ink2);}
.eos-breakdown .eos-num{text-align:right;font-family:var(--display);font-weight:700;color:var(--ink);}
.eos-breakdown .eos-br-total td{font-weight:800;color:var(--ink);background:#FBFCFD;}
.eos-muted{color:var(--muted);font-weight:500;}

/* action buttons */
.eos-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.eos-btn{flex:1 1 auto;min-width:120px;font-weight:700;font-size:13.5px;padding:12px;border-radius:12px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--line);background:#fff;color:var(--ink);}
.eos-btn-primary{background:var(--navy);border-color:var(--navy);color:#fff;}
.eos-btn:hover{border-color:var(--teal);}
.eos-btn-primary:hover{background:#16324C;}

/* touch targets */
@media (max-width:860px){
  .eos-btn,.eos-seg button{min-height:44px;}
}

/* comparison / general semantic tables added to content pages */
.eos-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;}
.eos-table caption{text-align:left;font-size:12px;color:var(--muted);margin-bottom:8px;}
.eos-table th,.eos-table td{padding:11px 14px;border:1px solid var(--line);text-align:left;vertical-align:top;}
.eos-table th{background:#F1F4F8;font-weight:800;color:var(--ink);}
.eos-table tbody tr:nth-child(even){background:#FBFCFD;}

/* Wave-3 long-form article + hero-deepen sections — force house font/rhythm
   (these blocks can sit outside the inline Manrope wrapper, so set it explicitly). */
.eos-article, .eos-article *,
[data-w3hero], [data-w3hero] *{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
}
html[lang="ar"] .eos-article, html[lang="ar"] .eos-article *,
html[lang="ar"] [data-w3hero], html[lang="ar"] [data-w3hero] *{
  font-family:'Tajawal',system-ui,-apple-system,sans-serif;
}
.eos-article{color:var(--ink2);}

/* author / reviewer byline */
.eos-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink2);margin:14px 0 0;}
.eos-byline .eos-avatar{width:38px;height:38px;border-radius:50%;background:var(--teal-tint);color:var(--teal-deep);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--display);flex:none;}
.eos-byline a{color:var(--teal-deep);font-weight:700;text-decoration:none;}
.eos-byline a:hover{text-decoration:underline;}

/* breadcrumbs */
.eos-crumbs{font-size:12.5px;color:var(--muted);padding:12px 0;}
.eos-crumbs a{color:var(--teal-deep);text-decoration:none;}
.eos-crumbs a:hover{text-decoration:underline;}
.eos-crumbs span[aria-current]{color:var(--ink2);}

/* Visible hero image (behind the headline) + legibility veil */
.eos-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.eos-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.eos-hero-veil{position:absolute;inset:0;z-index:0;pointer-events:none}