/*
Theme Name: Lubna's Touch of Hope
Theme URI: https://lubnastouchofhope.com
Author: Studio — for Lubna Sahmoud
Author URI: https://lubnastouchofhope.com
Description: A luxury, multilingual (LTR/RTL) WooCommerce theme for the artist Lubna Sahmoud — an international art gallery, premium gifting house and philanthropic platform in one. Obsidian, ivory and champagne-gold editorial system with a fingerprint "touch" signature. Built mobile-first, accessibility-first and Core-Web-Vitals-conscious.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: touchofhope
Tags: e-commerce, custom-colors, custom-menu, featured-images, rtl-language-support, translation-ready, block-styles, wide-blocks
WC requires at least: 8.0
WC tested up to: 9.1
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Palette (from brand brief) */
  --obsidian:      #090909;
  --ivory:         #F7F3EA;
  --gold:          #C7A86B;
  --gold-soft:     #D8C7AD; /* warm sand */
  --burgundy:      #54212C;
  --charcoal:      #242424;
  --grey-soft:     #EFECE6;

  /* Derived / usage roles */
  --gold-line:     rgba(199,168,107,.42);
  --gold-glow:     rgba(199,168,107,.18);
  --ink:           #1a1a1a;
  --ink-soft:      #4a453e;
  --ivory-dim:     rgba(247,243,234,.72);
  --ivory-faint:   rgba(247,243,234,.5);
  --obsidian-veil: rgba(9,9,9,.55);

  /* Type */
  --font-display: "Cormorant Garamond", "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-arabic:  "Noto Naskh Arabic", "Cairo", var(--font-body);

  /* Scale — fluid, clamp-based */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.4rem);
  --hero:    clamp(2.6rem, 1.4rem + 6vw, 5.25rem); /* ~38px mobile → ~84px desktop */

  /* Spacing */
  --space-xs: 0.5rem;
  --space-s:  1rem;
  --space-m:  2rem;
  --space-l:  4rem;
  --space-xl: 6.5rem;
  --space-2xl: 9rem;

  --measure: 72ch;          /* body width guard (~680–760px) */
  --shell: 1320px;          /* max content width */
  --gutter: clamp(1.15rem, 4vw, 3.25rem);
  --radius: 2px;            /* luxury = near-square */

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .6s;

  --focus-gold: var(--gold);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: inherit;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { max-width: var(--measure); }
p + p { margin-top: 1em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem; height: 1px;
  background: var(--gold-line);
  display: inline-block;
}
.display-serif { font-family: var(--font-display); }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); font-weight: 400; }

/* Body-width guard for prose */
.prose > * { max-width: var(--measure); }
.prose { line-height: 1.75; }
.prose h2 { margin: 2.2em 0 0.6em; }
.prose h3 { margin: 1.8em 0 0.5em; }

/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.shell--narrow { width: min(100% - (var(--gutter) * 2), 860px); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 8vw, var(--space-2xl)); }
.section--tight { padding-block: clamp(2.5rem, 5vw, var(--space-xl)); }

.bg-obsidian { background: var(--obsidian); color: var(--ivory); }
.bg-ivory    { background: var(--ivory);    color: var(--ink); }
.bg-charcoal { background: var(--charcoal);  color: var(--ivory); }
.bg-burgundy { background: var(--burgundy);  color: var(--ivory); }
.bg-grey     { background: var(--grey-soft); color: var(--ink); }

.rule-gold { height: 1px; background: var(--gold-line); border: 0; width: 100%; }

/* ============================================================
   5. BUTTONS / LINKS
   ============================================================ */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--obsidian);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .3s var(--ease);
}
.btn:hover { --btn-bg: transparent; color: var(--gold); border-color: var(--gold); }
.bg-ivory .btn:hover, .bg-grey .btn:hover { color: var(--obsidian); border-color: var(--obsidian); }

.btn--ghost {
  --btn-bg: transparent;
  color: currentColor;
  border-color: currentColor;
}
.btn--ghost:hover { background: var(--gold); color: var(--obsidian); border-color: var(--gold); }

.btn--full { width: 100%; }

.link-underline {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gold-line);
  transition: border-color .4s var(--ease), gap .4s var(--ease);
}
.link-underline:hover { border-color: var(--gold); gap: 0.9rem; }
.link-underline svg { width: 1em; height: 1em; }

/* ============================================================
   6. THE SIGNATURE — FINGERPRINT "TOUCH" FOCUS
   Every interactive element earns a champagne ring whose
   inner detail evokes a fingerprint / wax seal — the literal
   "touch" of hope. Visible, offset, performance-safe.
   ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-gold);
  outline-offset: 4px;
  border-radius: var(--radius);
}
/* Animated fingerprint bloom on richer controls */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  position: relative;
  outline: 2px solid var(--focus-gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--gold-glow);
}
@media (prefers-reduced-motion: no-preference) {
  .btn:focus-visible, .fingerprint-focus:focus-visible {
    animation: touch-bloom .55s var(--ease);
  }
}
@keyframes touch-bloom {
  0%   { box-shadow: 0 0 0 0 var(--gold-glow); }
  60%  { box-shadow: 0 0 0 8px rgba(199,168,107,0); }
  100% { box-shadow: 0 0 0 5px var(--gold-glow); }
}

/* Skip link */
.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--obsidian); color: var(--ivory);
  padding: 0.75rem 1.25rem; z-index: 9999; border-radius: var(--radius);
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Screen-reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   7. UTILITIES
   ============================================================ */
.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-m); }
.center { text-align: center; }
.center p { margin-inline: auto; }
.grid { display: grid; gap: var(--gutter); }
.hidden { display: none !important; }

/* Reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* WordPress core alignment helpers */
.alignwide { width: min(100% - (var(--gutter) * 2), 1500px); margin-inline: auto; }
.alignfull { width: 100%; }