/* Tamara Nails Lounge — shared stylesheet. Logical properties are used throughout so LTR/RTL both work. */
:root{
  --ink:#3f342d;          /* mocha: text, footer */
  --ink-soft:#6e6258;     /* secondary text (AA on --sand) */
  --sand:#f3eeeb;         /* page background, matches hero photo */
  --greige:#ddd2c6;       /* panels, rules */
  --glow:#e9c9a0;         /* warm LED accent */
  --blush:#e7cfca;        /* logo blush */
  --white:#fffdfb;
  --radius:28px;
  --font-display:"Playfair Display","Cairo",Georgia,serif;
  --font-body:"Playfair Display","Cairo",Georgia,serif;
  --header-base:84px;
  --header-h:calc(var(--header-base) + env(safe-area-inset-top,0px));
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;padding-top:var(--header-h);background:var(--sand);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.75;font-weight:400;overflow-x:hidden}
html[lang="ar"] body{line-height:1.9}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.1;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:10px;z-index:100;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}

/* ---------- header ---------- */
.site-header{direction:ltr;position:fixed;top:0;inset-inline:0;z-index:70;height:var(--header-h);padding-top:env(safe-area-inset-top,0px)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(243,238,235,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-block-end:1px solid rgba(63,52,45,.1)}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{width:auto;height:64px}
.tools{display:flex;align-items:center;gap:10px}
.lang{font:inherit;font-size:.92rem;background:transparent;color:var(--ink);border:1px solid rgba(63,52,45,.35);border-radius:999px;padding:7px 14px;min-width:44px;min-height:44px;cursor:pointer;transition:background .2s}
.lang:hover{background:rgba(63,52,45,.07)}

/* ---------- buttons ---------- */
.btn{text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--white);font:inherit;font-weight:500;font-size:1rem;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.btn:hover{background:#2c231d;box-shadow:0 10px 26px -12px rgba(63,52,45,.7);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--white)}
.btn svg,.social svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn svg{width:20px;height:20px;flex-shrink:0}
.header-book{padding-block:10px;min-height:44px}

/* ---------- hero ---------- */
.hero{padding-block:clamp(36px,7vw,88px) clamp(48px,8vw,104px)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(28px,6vw,80px)}
.hero h1{font-size:clamp(3.6rem,9vw,7.2rem);letter-spacing:-.01em;font-weight:500}
.hero h1{position:relative;width:fit-content;padding-block-end:.46em}
.hero h1 small{position:absolute;inset-inline-start:50%;inset-block-end:.04em;font-size:.3em;line-height:1.1;letter-spacing:.06em;font-weight:500;white-space:nowrap;color:var(--ink-soft)}
html[lang="ar"] .hero h1{font-weight:600;line-height:1.25}
html[lang="ar"] .hero h1{padding-block-end:.5em}
html[lang="ar"] .hero h1 small{letter-spacing:0;font-size:.34em;inset-inline-start:45%}
.hero .lede{margin-block:28px 34px;max-width:34ch;font-size:clamp(1.1rem,2vw,1.3rem);color:var(--ink-soft)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-photo{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;box-shadow:0 0 0 1px rgba(233,201,160,.9),0 40px 90px -36px rgba(233,201,160,1),0 30px 60px -40px rgba(63,52,45,.5);background:var(--blush)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
/* the one orchestrated moment: hero entrance */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lede,.hero .actions{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero .lede{animation-delay:.12s}.hero .actions{animation-delay:.24s}
  .hero-photo{animation:glow-in 1.4s ease-out both}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes glow-in{from{opacity:0;box-shadow:0 0 0 1px rgba(233,201,160,0),0 0 0 0 rgba(233,201,160,0)}to{opacity:1}}

/* ---------- sections ---------- */
section{padding-block:clamp(48px,8vw,96px)}
.section-head{max-width:46ch;margin-block-end:clamp(28px,5vw,52px)}
.section-head h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.section-head p{margin-block-start:14px;color:var(--ink-soft)}
html[lang="ar"] .section-head h2{line-height:1.35}
.about{background:var(--greige)}
.about .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,6vw,80px);align-items:start}
.about h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.about p{font-size:1.15rem;max-width:56ch}

.visit{background:var(--greige)}
.visit h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-block-end:clamp(24px,4vw,44px)}
.services-list{list-style:none;margin:0;padding:0;border-block-start:1px solid rgba(63,52,45,.25)}
.services-list li{border-block-end:1px solid rgba(63,52,45,.25)}
.services-list a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;text-decoration:none;transition:padding .3s,background .3s}
.services-list a:hover{padding-inline:18px;background:rgba(233,201,160,.28)}
.services-list h3{font-size:clamp(1.9rem,4vw,2.8rem)}
.services-list .go{font-size:.95rem;color:var(--ink-soft);white-space:nowrap}
html[dir="rtl"] .go .arr{display:inline-block;transform:scaleX(-1)}

/* arch photos: echo the lit arched mirrors in the salon */
.arches{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,28px);align-items:end}
.arch{margin:0;border-radius:999px 999px 18px 18px;overflow:hidden;aspect-ratio:3/4.4;background:var(--greige)}
.arch:nth-child(2){aspect-ratio:3/5}
.arch img{width:100%;height:100%;object-fit:cover}
.more{margin-block-start:36px}

.visit-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:clamp(24px,4vw,56px)}
.visit-grid h3{font-size:1.4rem;margin-block-end:10px}
.visit-grid p,.visit-grid dd,.visit-grid dt{color:var(--ink-soft)}
.hours{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 24px}
.hours dt{color:var(--ink)}.hours dd{margin:0}
.visit-grid a{color:var(--ink);text-underline-offset:4px}
.visit-grid a:hover{text-decoration-thickness:2px}
.contact-links{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:16px}

/* ---------- gallery page ---------- */
.page-head{padding-block:clamp(36px,6vw,72px) 12px}
.page-head h1{font-size:clamp(3rem,8vw,5.6rem)}
.page-head p{margin-block-start:14px;color:var(--ink-soft);max-width:48ch}
.masonry{columns:3;column-gap:clamp(12px,2vw,24px);padding-block:clamp(24px,4vw,48px) clamp(48px,8vw,96px)}
.masonry button{display:block;width:100%;margin:0 0 clamp(12px,2vw,24px);padding:0;border:0;background:var(--greige);border-radius:22px;overflow:hidden;cursor:zoom-in;break-inside:avoid;aspect-ratio:3/4}
.masonry img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.masonry button:hover img{transform:scale(1.04)}
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%}
.lightbox::backdrop{background:rgba(32,25,21,.92)}
.lightbox-inner{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:56px 64px}
.lightbox img{max-height:calc(100vh - 112px);max-width:min(100%,900px);width:auto;border-radius:18px}
.lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;font-size:1.4rem;cursor:pointer;display:grid;place-items:center}
.lb-btn:hover{background:rgba(255,255,255,.25)}
.lb-close{top:14px;inset-inline-end:14px}
.lb-prev{inset-inline-start:12px;top:50%;margin-top:-24px}
.lb-next{inset-inline-end:12px;top:50%;margin-top:-24px}
html[dir="rtl"] .lb-prev,html[dir="rtl"] .lb-next{transform:scaleX(-1)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#e9e0d7;padding-block:clamp(40px,6vw,72px) 28px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:32px 64px;justify-content:space-between;align-items:center}
.site-footer img{height:92px;width:auto}
.site-footer .social{display:flex;gap:10px}
.social a{width:46px;height:46px;border-radius:50%;border:1px solid rgba(233,224,215,.45);display:grid;place-items:center;transition:background .2s,color .2s}
.social a:hover{background:var(--glow);color:var(--ink);border-color:var(--glow)}
.social svg{width:22px;height:22px}
.legal{width:100%;font-size:.88rem;color:#c9bdb1;border-block-start:1px solid rgba(233,224,215,.2);padding-block-start:18px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero .wrap,.about .wrap{grid-template-columns:1fr}
  .hero-photo{order:-1;max-width:420px;width:100%;margin-inline:auto;aspect-ratio:4/5}
  .hero .lede{max-width:44ch}
  .visit-grid{grid-template-columns:1fr}
  .masonry{columns:2}
}
@media (max-width:560px){
  :root{--header-base:68px}
  .brand img{height:54px}
  .arches{grid-template-columns:1fr 1fr}
  .arch:nth-child(3){grid-column:1/-1;aspect-ratio:3/2}
  .masonry{columns:1}
  .masonry button{aspect-ratio:4/5}
  .lightbox-inner{padding:56px 12px}
  .actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =====================================================================
   Device coverage layer: safe areas, foldables, tablets, landscape phones,
   large/ultra-wide screens, touch, print, high-contrast.
   ===================================================================== */
.wrap{width:min(1160px,100% - 2*max(20px,env(safe-area-inset-left),env(safe-area-inset-right)))}
.site-footer{padding-block-end:calc(28px + env(safe-area-inset-bottom))}
.site-header{padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}

/* tablets in portrait / small laptops: keep two-column hero but tighter */
@media (min-width:901px) and (max-width:1100px){
  .hero h1{font-size:clamp(3.4rem,8vw,5.2rem)}
  .visit-grid{grid-template-columns:1fr 1fr}
  .visit-grid > :last-child{grid-column:1/-1}
}
/* large desktops */
@media (min-width:1600px){
  html{font-size:112.5%}
  .wrap{width:min(1360px,100% - 160px)}
}
/* 4K / ultra-wide */
@media (min-width:2200px){
  html{font-size:137.5%}
  .wrap{width:min(1680px,100% - 240px)}
}
/* small phones and foldables (cover screens ~280-360px) */
@media (max-width:360px){
  .wrap{width:calc(100% - 32px)}
  .hero h1{font-size:3.1rem}
  .hero-photo{aspect-ratio:1/1.1}
  .tools{gap:6px}
  .lang{padding-inline:10px;font-size:.85rem}
  .btn{padding-inline:20px}
  .services-list h3{font-size:1.7rem}
  .site-footer .wrap{justify-content:center;text-align:center}
}
@media (max-width:300px){ .brand img{height:44px} .header-book{display:none} }
/* phones in landscape / very short screens */
@media (max-height:520px) and (orientation:landscape){
  :root{--header-base:64px}
  .brand img{height:48px}
  .hero{padding-block:24px 40px}
  .hero .wrap{grid-template-columns:1.1fr .9fr;gap:24px}
  .hero-photo{order:0;aspect-ratio:4/3;max-width:none}
  .hero h1{font-size:clamp(2.6rem,9vh,4rem)}
  .hero .lede{margin-block:14px 18px}
  .lightbox-inner{padding:48px 56px}
  .lightbox img{max-height:calc(100dvh - 96px)}
  .masonry{columns:3}
  .masonry button{aspect-ratio:3/4}
}
/* dynamic viewport units on mobile browsers with collapsing toolbars */
@supports (height:100dvh){ .lightbox{height:100dvh} .lightbox img{max-height:calc(100dvh - 112px)} }
/* touch screens: no hover-only motion, comfortable targets */
@media (hover:none){
  .services-list a:hover{padding-inline:4px;background:transparent}
  .masonry button:hover img{transform:none}
  .btn:hover{transform:none;box-shadow:none}
  .lang,.menu-btn{min-height:48px}
  .visit-grid a{display:inline-block;padding-block:6px}
}
/* mouse/trackpad only: hover effects */
@media (hover:hover) and (pointer:fine){ .arch img{transition:transform .8s cubic-bezier(.2,.7,.2,1)} .arch:hover img{transform:scale(1.04)} }
/* user zoomed text / large default font size */
@media (max-width:700px){ html{font-size:100%} .hero .lede{max-width:none} }
/* high-contrast / forced colours */
@media (forced-colors:active){
  .btn,.lang,.menu-btn,.masonry button,.lb-btn{border:2px solid ButtonText}
  .hero-photo,.arch{outline:1px solid CanvasText}
}
/* print: contact details only, no chrome */
@media print{
  .site-header,.site-footer .social,.actions,.more,.skip,.lightbox,.masonry button{display:none!important}
  body{background:#fff;color:#000;font-size:12pt;padding-top:0}
  .about,.visit{background:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
  .hero-photo{box-shadow:none;max-width:260px}
}

/* =====================================================================
   Unified navigation: ONE hamburger + ONE side drawer on every screen size.
   (The header's blur lives on ::before so fixed children use the viewport.)
   ===================================================================== */
html.nav-open,html.nav-open body{overflow:hidden}
html.nav-open{padding-inline-end:var(--sbw,0px)}
.menu-btn{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border:1px solid rgba(63,52,45,.35);background:transparent;color:var(--ink);border-radius:50%;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.menu-btn:hover{background:rgba(63,52,45,.08)}
.menu-btn[aria-expanded="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,top .3s,background .25s}
.menu-btn span{position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;inset-inline-start:0}
.menu-btn span::before{top:-7px}.menu-btn span::after{top:7px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.overlay{position:fixed;inset:0;z-index:60;background:rgba(32,25,21,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}
.overlay.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease}

.nav{position:fixed;top:var(--header-h);bottom:0;right:0;left:auto;z-index:65;width:min(88vw,400px);display:flex;flex-direction:column;gap:6px;padding:28px 20px calc(24px + env(safe-area-inset-bottom));background:var(--sand);border-left:1px solid rgba(63,52,45,.12);box-shadow:-30px 0 60px -34px rgba(32,25,21,.6);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(32px);transition:opacity .3s ease,transform .38s cubic-bezier(.2,.7,.2,1),visibility 0s .3s}
html[dir="rtl"] .nav{direction:rtl}
.nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .3s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.nav a.link{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:18px;text-decoration:none;font-family:var(--font-display);font-size:1.7rem;line-height:1.2;transition:background .25s,padding .25s}
.nav a.link .ico{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--greige);transition:background .25s}
.nav a.link svg,.nav-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav a.link:hover{background:rgba(233,201,160,.3);padding-inline-start:22px}
.nav a.link:hover .ico{background:var(--glow)}
.nav a.link[aria-current="page"]{background:var(--greige)}
.nav a.link[aria-current="page"] .ico{background:var(--white)}
.nav-book{margin-block-start:18px}
.nav-social{display:flex;gap:10px;justify-content:center;margin-block-start:auto;padding-block-start:18px;border-block-start:1px solid rgba(63,52,45,.18)}
.nav-social a{width:46px;height:46px;border-radius:50%;border:1px solid rgba(63,52,45,.35);display:grid;place-items:center;transition:background .2s}
.nav-social a:hover{background:var(--glow);border-color:var(--glow)}
@media (min-width:701px){ .nav-book{display:none} }
@media (max-width:700px){ .header-book{display:none} }
@media (max-width:360px){ .nav{width:92vw} .nav a.link{font-size:1.5rem;gap:12px;padding-inline:10px} .nav a.link .ico{width:40px;height:40px} }
@media (max-height:520px){ .nav{padding-block:14px} .nav a.link{padding-block:8px;font-size:1.4rem} .nav a.link .ico{width:36px;height:36px} .nav-social{display:none} }
@media (prefers-reduced-motion:reduce){ .nav,.overlay{transition-duration:.01s!important} }

/* Stacked layouts (phones and tablets): centred title; "Nails Lounge" hangs under the "ara" on the end side on EVERY device */
@media (max-width:900px) and (min-height:521px){
  .hero h1{margin-inline:auto}
  .hero .lede{margin-inline:auto;text-align:center}
  .hero .actions{justify-content:center}
}
@media (max-width:700px) and (min-height:521px){ .visit-grid h3{font-size:1.25rem} }

/* header stays pinned while scrolling; gains a soft shadow once the page moves */
.site-header::before{transition:background .25s,box-shadow .25s}
.site-header.scrolled::before{background:rgba(243,238,235,.97);box-shadow:0 10px 28px -18px rgba(63,52,45,.55)}