/*
Theme Name:   Aligner Lounge
Theme URI:    https://alignerlounge.com
Author:       Deebix
Author URI:   https://deebix.com
Description:  Luxury bilingual (EN/AR) WordPress theme for Aligner Lounge — Clear & Shine. Zero-plugin: custom post types, case submission, smile-journey leads, full Customizer control, RTL-ready.
Version:      1.4.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  aligner-lounge
Tags:         dental, medical, luxury, rtl-language-support, custom-colors, custom-logo
*/

/* ==========================================================================
   1. DESIGN TOKENS  —  Luxury language: charcoal + champagne gold + ivory
   ========================================================================== */
:root{
  /* Surfaces */
  --ink:        #0D0D0F;
  --ink-2:      #16161A;
  --ink-3:      #212127;
  --cream:      #FAF7F1;
  --cream-2:    #F1ECE1;
  --cream-3:    #E5DDCC;
  --white:      #FFFFFF;

  /* Gold system */
  --gold:       #C9A227;
  --gold-soft:  #D9BC5E;
  --gold-pale:  #F0DFA8;
  --gold-deep:  #9C7C15;
  --gold-grad:  linear-gradient(135deg,#9C7C15 0%,#D4AF37 28%,#F5E6A8 52%,#C9A227 76%,#8F6F10 100%);
  --gold-line:  linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-pale) 50%,var(--gold) 80%,transparent);

  /* Text */
  --text:       #22222A;
  --text-muted: #6B6B78;
  --text-on-ink:#EDE9E0;
  --text-on-ink-muted:#9C9A93;

  /* Lines */
  --hair:       rgb(34 34 42 / .10);
  --hair-ink:   rgb(240 223 168 / .16);

  /* Motion */
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  /* Deliberately unhurried. Fast transitions read as utility; slow ones read
     as confidence, which is the whole point of the brand. */
  --dur-fast: .35s; --dur-med: .85s; --dur-slow: 1.5s;

  /* Shape */
  --radius:    .35rem;
  --radius-lg: .5rem;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 50px -24px rgb(13 13 15 / .2);
  --shadow-lift: 0 34px 80px -30px rgb(13 13 15 / .3);
  --shadow-gold: 0 18px 50px -20px rgb(201 162 39 / .4);

  /* Rhythm */
  --pad-section: clamp(5.5rem, 11vw, 11rem);
  --gutter:      clamp(1.25rem, 4.5vw, 4rem);
  --maxw:        1280px;
  --maxw-narrow: 780px;

  /* Type */
  /* Latin stacks only. Naming an Arabic family here as a fallback makes the
     browser fetch the whole Arabic face set on English pages. */
  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --tracking-eyebrow: .34em;
}

/* Arabic pages swap in the Arabic stacks; the faces themselves are only
   enqueued for this locale (see inc/enqueue.php). Latin families stay in the
   chain so brand words and terms like "DPA" keep their Latin treatment. */
html[lang^="ar"]{
  --f-display: "Amiri", "Playfair Display", Georgia, serif;
  --f-body:    "Tajawal", "Jost", system-ui, sans-serif;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* The off-canvas nav parks itself outside the viewport; `clip` keeps it out
     of the document's overflow box without creating a scroll container the
     way `hidden` would (which position:fixed escapes anyway). */
  overflow-x:clip;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
html[lang^="ar"] body{font-size:1.09375rem;line-height:1.85}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
/* Author `display` declarations outrank the UA sheet's [hidden] rule, so any
   component with its own display value would ignore el.hidden without this. */
[hidden]{display:none!important}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:var(--gold-pale);color:var(--ink)}

.screen-reader-text{
  position:absolute!important;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;inset-inline-start:1rem;top:-100px;z-index:999;
  background:var(--ink);color:var(--gold-pale);padding:.75rem 1.25rem;border-radius:var(--radius);
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:1rem}

/* ==========================================================================
   3. TYPOGRAPHY SCALE
   ========================================================================== */
h1,.h1,h2,.h2,h3,.h3,h4,.h4{
  font-family:var(--f-display);
  /* A lighter weight at a larger size is the classic luxury setting; 600 at
     these sizes reads as a bold web heading, not a masthead. */
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}
html[lang^="ar"] h1,html[lang^="ar"] h2,html[lang^="ar"] h3,html[lang^="ar"] h4{
  line-height:1.3;letter-spacing:0;font-weight:700;
}
h1,.h1{font-size:clamp(2.75rem, 7vw, 6rem)}
h2,.h2{font-size:clamp(2.125rem, 5vw, 4rem)}
h3,.h3{font-size:clamp(1.5rem, 2.6vw, 2.125rem)}
h4,.h4{font-size:clamp(1.125rem, 1.6vw, 1.3125rem);font-family:var(--f-body);font-weight:600;letter-spacing:0}

.eyebrow{
  font-family:var(--f-body);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:1rem;
  margin-bottom:1.6rem;
}
.eyebrow::before{content:"";width:3rem;height:1px;background:var(--gold);flex:none;opacity:.8}
html[lang^="ar"] .eyebrow{letter-spacing:0;font-size:.8125rem;text-transform:none;font-weight:700}

.lead{
  font-size:clamp(1.09375rem,1.6vw,1.375rem);
  line-height:1.8;
  color:var(--text-muted);
  max-width:58ch;
  font-weight:300;
}
.tagline{
  font-family:var(--f-display);
  font-style:italic;
  font-size:clamp(1.125rem,1.9vw,1.5rem);
  color:var(--gold-deep);
  letter-spacing:.01em;
}
html[lang^="ar"] .tagline{font-style:normal}

.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.rule-gold{height:1px;background:var(--gold-line);border:0;margin:0}

/* Numbers / phones stay LTR inside Arabic */
[dir="ltr"],.ltr{direction:ltr;unicode-bidi:isolate}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--maxw-narrow)}
.section{padding-block:var(--pad-section);position:relative}
.section--tight{padding-block:calc(var(--pad-section) * .62)}
.section--ink{background:var(--ink);color:var(--text-on-ink)}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--cream)}
.section--ink .lead{color:var(--text-on-ink-muted)}
.section--ink .eyebrow{color:var(--gold-soft)}
.section--tint{background:var(--cream-2)}

.section-head{max-width:64ch;margin-bottom:clamp(2.5rem,4.5vw,4rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .lead{margin-inline:auto}
.section-head h2 + .lead{margin-top:1.15rem}

.grid{display:grid;gap:clamp(1.25rem,2.2vw,2rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.stack{display:flex;flex-direction:column;gap:1rem}
.cluster{display:flex;flex-wrap:wrap;gap:.875rem;align-items:center}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--cream); --btn-bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.1rem 2.4rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--radius-pill);
  font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.2;text-align:center;
  /* A button label is a label, not a paragraph — it must never wrap. */
  white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn:active{transform:translateY(0) scale(.98)}

.btn--gold{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:transparent;
  background:var(--gold-grad);
  color:#2A2105;font-weight:600;
}
.btn--gold:hover{box-shadow:var(--shadow-gold)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--hair)}
.btn--ghost:hover{--btn-bd:var(--gold);--btn-fg:var(--gold-deep);box-shadow:none;transform:translateY(-2px)}

/* Any dark surface — hero, page hero, dark sections, closing CTA. */
.section--ink .btn--ghost,
.hero .btn--ghost,
.page-hero .btn--ghost,
.cta-band .btn--ghost{--btn-fg:var(--cream);--btn-bd:var(--hair-ink)}
.section--ink .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.cta-band .btn--ghost:hover{--btn-fg:var(--gold-pale);--btn-bd:var(--gold)}

.btn--lg{padding:1.3rem 3rem;font-size:.875rem}
/* Arabic gets no uppercase and no Latin tracking. */
html[lang^="ar"] .btn{text-transform:none;letter-spacing:0;font-size:.9375rem;font-weight:500}
html[lang^="ar"] .btn--lg{font-size:1rem}
.btn--block{width:100%}

/* Shine sweep — premium CTAs only */
.btn-shine::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgb(255 255 255 / .45) 50%,transparent 62%);
  translate:-130% 0;transition:translate .75s var(--ease-out);
}
.btn-shine:hover::after{translate:130% 0}
html[dir="rtl"] .btn-shine::after{translate:130% 0}
html[dir="rtl"] .btn-shine:hover::after{translate:-130% 0}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9375rem;font-weight:500;color:var(--gold-deep);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color var(--dur-fast) var(--ease-out),gap var(--dur-fast) var(--ease-out);
}
.link-arrow::after{content:"→";transition:translate var(--dur-fast) var(--ease-out)}
html[dir="rtl"] .link-arrow::after{content:"←"}
.link-arrow:hover{border-color:currentColor;gap:.75rem}