/*
Theme Name:  Gul & Gift — Forest & Rose
Theme URI:   https://gulngift.com
Description: Child theme for Uncode — complete Forest & Rose brand identity. Flowers, gifting & event decoration for Islamabad and Jeddah.
Author:      Gul & Gift
Author URI:  https://gulngift.com
Template:    uncode
Version:     1.0.0
Text Domain: gulngift
*/

/* ─────────────────────────────────────────
   FOREST & ROSE — Design Token System
   All colour, radius, shadow and motion
   decisions live here. Never override inline.
───────────────────────────────────────── */
:root {
  /* Palette */
  --forest:   #0A382E;
  --forest-s: #1D5C47;
  --forest-l: #2A6B55;
  --forest-d: #061F18;
  --amber:    #E89A3A;
  --amber-d:  #C07820;
  --pink:     #F37A92;
  --petal:    #FFBED4;
  --white:    #FFFFFF;
  --mint:     #F0FAF6;
  --stem:     #4A7C59;
  --mist:     #A8C8BB;

  /* Semantic aliases */
  --bg-dark:    var(--forest);
  --bg-darker:  var(--forest-d);
  --bg-light:   var(--white);
  --bg-offwhite:var(--mint);
  --text-on-dark:   var(--white);
  --text-on-light:  var(--forest);
  --text-muted-dark: var(--mist);
  --cta-bg:     var(--amber);
  --cta-hover:  var(--amber-d);
  --cta-text:   var(--forest);
  --accent-dark: var(--pink);
  --accent-light: var(--stem);
  --border-dark: var(--forest-l);
  --border-light: #E4EDE9;

  /* Radius ladder — 30% less than pill, never sharp */
  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 999px;

  /* Shadows — warm forest tint */
  --sh-sm:  0 1px 4px  rgba(10,56,46,.08);
  --sh-md:  0 4px 16px rgba(10,56,46,.12);
  --sh-lg:  0 16px 40px rgba(10,56,46,.18);
  --sh-glow:0 6px 24px rgba(232,154,58,.36);

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --font-ar:      "IBM Plex Sans Arabic", var(--font-body);
  --font-ur:      "Noto Nastaliq Urdu", serif;

  /* Fluid type scale */
  --fs-display: clamp(3rem, 8vw, 6.5rem);
  --fs-h1:      clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3:      1.5rem;
  --fs-lead:    1.1875rem;
  --fs-body:    1.0625rem;
  --fs-sm:      0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Layout */
  --container:  1360px;
  --section-y:  clamp(60px, 9vw, 96px);
  --gutter:     clamp(16px, 4vw, 40px);

  /* Motion — Apple-design spring approximation */
  --ease:        cubic-bezier(.16,1,.3,1);
  --ease-out:    cubic-bezier(.0,0,.2,1);
  --ease-spring: cubic-bezier(.16,1,.3,1);
  --dur-fast:  150ms;
  --dur-base:  300ms;
  --dur-slow:  500ms;
}

/* ─── Global resets & base ─── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--forest);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Override Uncode's color variables ─── */
body,
#page-header,
.uncollapsed-menu-bar {
  --color-main: var(--forest);
}

/* Display type — Fraunces for all headings */
h1, h2, h3,
.vc_custom_heading,
.wpb_wrapper h1,
.wpb_wrapper h2,
.wpb_wrapper h3,
[class*="heading"],
.uncode-single-title {
  font-family: var(--font-display) !important;
  font-optical-sizing: auto;
}

h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.02em;  }
h3 { font-size: var(--fs-h3); line-height: 1.3;  letter-spacing: -0.01em; }

p, li, td, input, select, textarea {
  font-family: var(--font-body);
  line-height: 1.65;
}

/* Max reading width */
p { max-width: 68ch; }

/* ─── Eyebrow labels ─── */
.gg-eyebrow,
[class*="eyebrow"] {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ─── Focus ring — accessible, amber ─── */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Accessible skip link */
.skip-link {
  position: absolute; left: -999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 8px; top: 8px; width: auto; height: auto;
  padding: 8px 16px;
  background: var(--amber);
  color: var(--forest);
  border-radius: var(--r-sm);
  z-index: 99999;
}