/*
Theme Name: interpreting.us
Theme URI: https://interpreting.us
Author: interpreting.us
Description: Arabic and English interpreting and voice-over website with a calendar request form. Requests are saved in the WordPress dashboard and emailed to the team.
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: interpreting-us
*/

@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--bg:#f7f4ee;--fg:#0b2a30;--mut:#4d6a72;--card:#fff;--line:#e0dacd;--acc:#8a5a14;--deep:#071a1f;--ink:#0b2a30;--gold:#e0a95a;--teal:#2bb3b8;color-scheme:light;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#081c21;--fg:#eaf3f5;--mut:#9db6bd;--card:#0f2d35;--line:#1d4350;--acc:#e0a95a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#081c21;--fg:#eaf3f5;--mut:#9db6bd;--card:#0f2d35;--line:#1d4350;--acc:#e0a95a;color-scheme:dark}
.dark{--bg:#0a2229;--fg:#eaf3f5;--mut:#a9c1c8;--card:#103039;--line:#1f4552;--acc:#e0a95a}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg);color:var(--fg);font-family:"Figtree","Cairo",system-ui,sans-serif;line-height:1.65;overflow-x:hidden}
html:lang(ar) .en,html:lang(en) .ar{display:none}
h1,h2,h3,.disp{font-family:"Bricolage Grotesque","Reem Kufi",system-ui,sans-serif;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
:lang(ar){letter-spacing:0!important}
html:lang(ar) h1,html:lang(ar) h2,html:lang(ar) h3,html:lang(ar) .disp{font-family:"Reem Kufi","Cairo",sans-serif;line-height:1.3}
html:lang(ar) body{line-height:1.85}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--deep);font:600 1rem "Figtree","Cairo",sans-serif;text-decoration:none;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px var(--gold)}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.prog{position:fixed;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--teal));transform:scaleX(0);transform-origin:left;z-index:30}
html[dir=rtl] .prog{transform-origin:right}
.nav{position:fixed;z-index:20;top:calc(env(safe-area-inset-top,0px) + 12px);inset-inline:clamp(10px,3vw,32px);display:flex;align-items:center;gap:20px;padding:10px 12px 10px 20px;border-radius:999px;background:color-mix(in oklab,var(--deep) 55%,transparent);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.12);color:#fff}
html[dir=rtl] .nav{padding:10px 20px 10px 12px}
.brand{margin-inline-end:auto;display:block}.logo{display:block;height:34px;width:auto}
.nav nav{display:flex;gap:22px}.nav nav a{color:#fff;text-decoration:none;font-weight:500;font-size:.93rem;opacity:.88}.nav nav a:hover{opacity:1}
.nav .btn{padding:10px 18px;font-size:.9rem}
.lang{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:8px 14px;font:600 .88rem "Figtree","Cairo",sans-serif;cursor:pointer}
.lang:hover{background:rgba(255,255,255,.12)}
.hero{position:relative;min-height:100vh;min-height:100svh;margin-top:calc(-1*env(safe-area-inset-top,0px));display:flex;align-items:center;color:#fff;background:var(--deep);isolation:isolate;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(to right,rgba(7,26,31,.94),rgba(7,26,31,.65) 55%,rgba(7,26,31,.25)),linear-gradient(0deg,rgba(7,26,31,.9),transparent 45%)}
html[dir=rtl] .hero::before{background:linear-gradient(to left,rgba(7,26,31,.94),rgba(7,26,31,.65) 55%,rgba(7,26,31,.25)),linear-gradient(0deg,rgba(7,26,31,.9),transparent 45%)}
.hero .grid2{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding-block:130px 90px}
.eyebrow{color:var(--acc);font-weight:600;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-weight:700;font-size:clamp(2.7rem,7.2vw,5.6rem);margin-top:.25em;max-width:14ch}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:50ch;margin-top:1.3rem;color:rgba(255,255,255,.88)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
.orb{position:relative;width:min(340px,100%);aspect-ratio:1;justify-self:end;display:grid;place-items:center}
.ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--ang),var(--gold),transparent 28%,var(--teal),transparent 68%,var(--gold));animation:spin 9s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
@keyframes spin{to{--ang:360deg}}
.face{width:88%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;gap:6px;background:color-mix(in oklab,var(--deep) 50%,transparent);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.14);transition:opacity .45s}
.face.out{opacity:0}
.face b{font:700 clamp(2rem,4.4vw,3.3rem)/1.2 "Reem Kufi","Cairo",sans-serif;color:var(--gold)}
.face small{font:500 1.05rem "Figtree",sans-serif;color:rgba(255,255,255,.8)}
.sound{position:absolute;inset-inline-end:clamp(20px,5vw,48px);bottom:26px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:8px 15px;font:500 .85rem "Figtree","Cairo",sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.focus{padding:clamp(56px,8vw,96px) 0;background:linear-gradient(120deg,var(--deep),#0e3a43);color:#fff;text-align:center}
.focus p{font:700 clamp(1.6rem,4.4vw,3.2rem)/1.25 "Bricolage Grotesque","Reem Kufi",sans-serif;max-width:22ch;margin-inline:auto;text-wrap:balance}
html:lang(ar) .focus p{font-family:"Reem Kufi","Cairo",sans-serif}
.focus em{font-style:normal;color:var(--gold)}
section.s{padding:clamp(64px,10vw,120px) 0;content-visibility:auto;contain-intrinsic-size:auto 700px}
.dark{background:var(--ink);color:var(--fg)}
h2{font-weight:700;font-size:clamp(1.9rem,4.6vw,3.2rem);margin-top:.5rem;max-width:20ch}
.sub{color:var(--mut);max-width:58ch;margin-top:1rem;font-size:1.06rem}
.grid{display:grid;gap:20px;margin-top:2.6rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:var(--gold)}
.dark .card{background:color-mix(in oklab,var(--card) 70%,transparent);backdrop-filter:blur(8px)}
.card h3{font-size:1.25rem;margin-bottom:.5rem}.card p{color:var(--mut)}
.ic{width:46px;height:46px;border-radius:14px;background:var(--gold);color:var(--deep);display:grid;place-items:center;font-weight:700;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:2rem}.chips span{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:10px 20px;font-weight:600}
.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s}.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--deep);font-weight:700;margin-bottom:14px}
.two{display:grid;gap:48px;grid-template-columns:1fr 1.1fr;align-items:start}
details{border-bottom:1px solid var(--line);padding:18px 0}summary{cursor:pointer;font-weight:600;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:16px}summary::after{content:"+";color:var(--acc);font-size:1.4rem;line-height:1}details[open] summary::after{content:"–"}
details p{color:var(--mut);margin-top:10px;max-width:62ch}.faq{max-width:780px;margin-top:2rem}
form{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,3vw,36px);display:grid;gap:16px}
label,.lbl{font-weight:600;font-size:.92rem;display:grid;gap:6px}
input,select,textarea{font:400 1rem "Figtree","Cairo",sans-serif;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg);width:100%}
input:user-invalid,select:user-invalid{border-color:#d04a3a}
.row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.note{font-size:.85rem;color:var(--mut)}
.cal{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--bg);max-width:390px}
.calh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calh button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:1.2rem;cursor:pointer}
html[dir=rtl] .calh button{transform:scaleX(-1)}.calh button:disabled{opacity:.35;cursor:not-allowed}
.dow,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.dow span{font-size:.74rem;color:var(--mut);font-weight:600;padding:4px 0}
.days button{aspect-ratio:1;border:0;border-radius:50%;background:transparent;color:var(--fg);font:500 .95rem "Figtree",sans-serif;cursor:pointer}
.days button:hover:not(:disabled){background:var(--line)}.days button:disabled{opacity:.3;cursor:not-allowed}
.days button.sel{background:var(--gold);color:var(--deep);font-weight:700}.days button.today{box-shadow:inset 0 0 0 2px var(--acc)}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400}.chk input{width:auto;margin-top:7px}
footer{background:var(--deep);color:#a9c1c8;padding:44px 0 36px}footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}footer .logo{height:36px}
footer a,footer button{color:#fff;background:none;border:0;font:inherit;text-decoration:underline;cursor:pointer}
dialog{border:1px solid var(--line);border-radius:24px;background:var(--bg);color:var(--fg);width:min(720px,92vw);max-height:86vh;padding:0;overflow:auto;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .35s,transform .35s,overlay .35s allow-discrete,display .35s allow-discrete}
dialog[open]{opacity:1;transform:none}
@starting-style{dialog[open]{opacity:0;transform:translateY(24px) scale(.98)}}
dialog::backdrop{background:rgba(3,12,15,.6);backdrop-filter:blur(6px)}
dialog .in{padding:clamp(24px,4vw,40px)}dialog h2{font-size:1.9rem;margin:0 0 .2rem}dialog h3{font-size:1.05rem;margin:1.4rem 0 .2rem}dialog p{color:var(--mut)}
dialog .x{position:sticky;top:0;float:inline-end;margin:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:1.2rem;cursor:pointer}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes grow{to{transform:scaleX(1)}}
@supports (animation-timeline:view()){.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 26%}.prog{animation:grow linear both;animation-timeline:scroll(root)}}
/* Podcast */
.pod{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:minmax(220px,360px) 1fr;align-items:center}
.pod-art{position:relative;display:block;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(0,0,0,.6);aspect-ratio:1;background:var(--card)}
.pod-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--card);border:1px solid var(--line);color:var(--fg);text-align:center}.pod-fb b{font:700 clamp(72px,12vw,120px)/1 "Bricolage Grotesque",sans-serif;color:var(--gold)}.pod-fb span{font:700 1.5rem "Reem Kufi","Cairo",sans-serif}.pod-fb small{color:var(--mut);font-size:.9rem}
.pod-art img{position:relative;display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pod-art:hover img{transform:scale(1.03)}
.pod-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
@media (max-width:900px){.pod{grid-template-columns:1fr}.pod-art{max-width:320px}}
@media (max-width:900px){.nav nav{display:none}.two,.hero .grid2{grid-template-columns:1fr}.orb{display:none}.row{grid-template-columns:1fr}}
@media (max-width:560px){.nav .btn{display:none}.logo{height:28px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.rv{opacity:1;transform:none}.prog{display:none}}
form[data-mode=vo] .oi,form[data-mode=interp] .ov{display:none!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

.alert{padding:14px 18px;border-radius:14px;font-weight:600}.alert.ok{background:#e3f4ea;color:#14532d}.alert.bad{background:#fde8e6;color:#7a1f14}
.admin-bar .nav{margin-top:32px}@media (max-width:782px){.admin-bar .nav{margin-top:46px}}