/* ============================================================
   ALAA LUX — brand override
   Load AFTER css/style.css:
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/alaa-lux.css">
   ============================================================ */

/* ── 1. Palette ────────────────────────────────────────────
   Redefines the existing variables, so every component that
   already uses var(--copper) / var(--stone) / var(--cream)
   picks up the new brand automatically.               */

:root {
  --core-black:  #101010;
  --gold:        #C7A17A;
  --gold-light:  #DCBB97;
  --gold-deep:   #A9835C;
  --ivory:       #F5F0E1;
  --taupe:       #A0978E;
  --off-white:   #FDFDFD;

  /* remapped originals */
  --cream:        #F5F0E1;
  --parchment:    #FDFDFD;
  --espresso:     #101010;
  --copper:       #A9835C;
  --copper-light: #C7A17A;
  --stone:        #A0978E;

  --grad: linear-gradient(135deg, #C7A17A, #A9835C);

  --bg:        #FDFDFD;
  --bg-raised: #F5F0E1;
  --bg-card:   #FDFDFD;
  --border:    rgba(199, 161, 122, .22);

  --text:       #101010;
  --text-muted: #8A8179;

  --glow:    0 0 20px rgba(199, 161, 122, .18);
  --glow-lg: 0 0 40px rgba(199, 161, 122, .28);
  --shadow:  0 8px 30px rgba(16, 16, 16, .08);

  --primary:       #A9835C;
  --primary-light: #C7A17A;

  --header-h: 108px;
}

/* ── 2. Header: logo centred, nav centred beneath ──────────
   Two stacked rows on desktop. On mobile the nav leaves the
   flow (it's position:fixed off-canvas), so the burger sits
   on the start edge and the logo stays centred.        */

.header {
  background: var(--core-black);
  border-bottom: 1px solid rgba(199, 161, 122, .18);
}

.header-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "burger logo spacer"
    "nav    nav  nav";
  align-items: center;
  row-gap: .55rem;
  padding: .9rem 0 .7rem;
}

.logo {
  grid-area: logo;
  justify-self: center;
  display: flex;
  align-items: center;
}

.logo a {
  display: block;
  line-height: 0;
}

.logo img {
  height: 66px;
  width: auto;
  display: block;
}

/* If the text <h1> is still in place as a fallback */
.logo h1 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.55rem;
  letter-spacing: 3px;
}

.menu-toggle {
  grid-area: burger;
  justify-self: start;
  background: transparent;
  border: 1px solid rgba(199, 161, 122, .35);
  color: var(--gold);
  border-radius: 6px;
}

.menu-toggle:hover {
  background: rgba(199, 161, 122, .12);
}

/* ── 3. Nav on the dark bar ────────────────────────────── */

.main-nav {
  grid-area: nav;
  justify-content: center;
  gap: .35rem;
  border-top: 1px solid rgba(199, 161, 122, .14);
  padding-top: .5rem;
}

.main-nav a {
  color: var(--ivory);
  font-size: .8rem;
  letter-spacing: .4px;
  border: 1px solid transparent;
}

.main-nav a:hover {
  background: rgba(199, 161, 122, .12);
  color: var(--gold-light);
}

.main-nav a.active {
  background: rgba(199, 161, 122, .14);
  color: var(--gold);
  border-color: rgba(199, 161, 122, .38);
}

.main-nav a:focus-visible,
.menu-toggle:focus-visible,
.logo a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── 4. Mobile ─────────────────────────────────────────── */

@media (max-width: 768px) {
  .header-content {
    grid-template-areas: "burger logo spacer";
    row-gap: 0;
    padding: .75rem 0;
  }

  .logo img { height: 46px; }

  /* off-canvas panel — dark to match the bar */
  .main-nav {
    background: var(--core-black);
    border-left: 1px solid rgba(199, 161, 122, .2);
    border-top: none;
    padding-top: 76px;
    justify-content: flex-start;
  }

  .main-nav a {
    color: var(--ivory);
    border-radius: 0;
  }
}

/* ── 5. Buttons & accents ──────────────────────────────── */

.btn-primary {
  background: var(--core-black);
  border-color: var(--core-black);
  color: var(--ivory);
}

.btn-primary:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--off-white);
}

.btn-ghost {
  border-color: rgba(169, 131, 92, .45);
  color: var(--gold-deep);
}

.btn-ghost:hover {
  background: rgba(199, 161, 122, .1);
}

/* ── 6. Footer to match the header ─────────────────────── */

.footer {
  background: var(--core-black);
  color: var(--ivory);
  border-top: 1px solid rgba(199, 161, 122, .18);
}

.footer a { color: var(--taupe); }
.footer a:hover { color: var(--gold-light); }