/*
Theme Name: Mais Luxe
Theme URI: https://www.maiscatering.com
Author: Mais Catering / Barakat Foods
Description: An extra-luxury, bilingual (English + Arabic/RTL) theme for Mais Catering — Kuwait's leading caterer since 1953. Minimal "quiet luxe" layout in teal, champagne gold and ivory, with restrained high-end motion: scroll reveals, a drawn gold line, an animated 1953, a rotating gold monogram and subtle candlelight particles. Logo built into the design. Menu / Set Menu / Drop-Off pages support embedded viewable PDFs and editable on-page text.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maislux
*/

/* ============================================================
   LUXE TOKENS — from the Mais logo
   Teal #007070 · Champagne Gold #C9A86A · Ivory #F4EFE6
   ============================================================ */
:root{
  --teal:#007070;
  --teal-deep:#005A5A;
  --teal-darker:#013F3F;
  --gold:#C9A86A;
  --gold-bright:#E0C58C;
  --gold-deep:#A8854A;
  --ivory:#F7F3EA;        /* page background — light/ivory dominant */
  --ivory-pure:#FCFAF4;
  --espresso:#211C16;
  --ink:#2C2620;
  --ink-soft:#7A7164;
  --line:#E8DFCD;
  --line-gold:rgba(201,168,106,.34);
  --shadow:0 20px 60px rgba(33,28,22,.10);
  --shadow-lift:0 30px 80px rgba(33,28,22,.16);
  --radius:3px;           /* sharp, architectural — luxury restraint */
  --maxw:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.75;overflow-x:hidden;font-size:17px;font-weight:400}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 40px}

/* Marcellus display for EN headings; IBM Plex Sans Arabic for RTL */
.hd{font-family:'Marcellus',Georgia,serif;font-weight:400;line-height:1.1;letter-spacing:.3px}
[dir="rtl"] .hd{font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:600;letter-spacing:0;line-height:1.4}
[dir="rtl"] body{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}

/* gold overline */
.overline{font-family:'IBM Plex Sans',sans-serif;font-weight:500;letter-spacing:4px;text-transform:uppercase;
  font-size:.7rem;color:var(--gold-deep)}
[dir="rtl"] .overline{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:2px}

/* buttons — thin, refined, letterspaced; gold underline wipe on hover */
.btn{display:inline-flex;align-items:center;gap:.7em;border:none;cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:.74rem;letter-spacing:2.5px;text-transform:uppercase;
  padding:17px 38px;border-radius:var(--radius);transition:all .45s var(--ease);line-height:1;position:relative}
[dir="rtl"] .btn{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:1px}
.btn-gold{background:var(--gold);color:var(--espresso)}
.btn-gold:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,168,106,.4)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--espresso);border:1px solid var(--gold)}
.btn-ghost:hover{background:var(--gold);color:var(--espresso)}
.btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:#fff;color:var(--teal)}

/* link with animated gold underline */
.ulink{position:relative;font-weight:500;letter-spacing:1px;color:var(--espresso);padding-bottom:3px}
.ulink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.ulink:hover::after{transform:scaleX(1);transform-origin:left}
[dir="rtl"] .ulink::after{transform-origin:left}
[dir="rtl"] .ulink:hover::after{transform-origin:right}

:focus-visible{outline:2px solid var(--gold);outline-offset:4px}