/*
Theme Name: FF Florence
Theme URI: https://attar-staging.goan.dev
Author: Al-Furqan Traders
Description: Classic WooCommerce theme for the FF Florence attar store. Ported
             from the client-approved prototype; see docs/THEME.md.
Version: 1.0.0
Requires at least: 7.0
Tested up to: 7.1.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ff-florence
*/

/* =========================================================================
   Tokens. Values come from docs/THEME.md section 1 - do not invent new ones.
   ========================================================================= */
:root{
  /* surface */
  --ink:#0d1912;
  --ink-2:#12241a;
  --panel:#14261c;
  --img-bg:#0a130d;

  /* accent */
  --gold:#c8a24c;
  --gold-soft:#d9bd77;
  --gold-wash:rgba(200,162,76,.08);

  /* text */
  --cream:#f4efe4;
  --cream-dim:#cbc3b1;

  /* structure */
  --line:rgba(200,162,76,.28);
  --emerald:#0f3d2e;
  --emerald-2:#124534;
  --header-bg:rgba(13,25,18,.86);
  --badge-bg:rgba(13,25,18,.8);
  --scrim:rgba(0,0,0,.6);
  --hero-glow-1:rgba(15,61,46,.55);
  --hero-glow-2:rgba(84,60,20,.35);
  --danger:#d98a6a;
  --shadow:0 20px 50px -20px rgba(0,0,0,.7);

  /* type */
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  /* layout */
  --wrap:1240px;
  --gutter:24px;
  --gutter-sm:18px;
}

/* =========================================================================
   Reset and base
   ========================================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.serif{font-family:var(--serif)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
svg{display:block}

/* Focus must stay visible - the prototype has no focus styling at all. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--ink);padding:12px 20px;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.skip-link:focus{left:0}

.screen-reader-text{
  border:0;
  clip:rect(1px, 1px, 1px, 1px);
  -webkit-clip-path:inset(50%);
  clip-path:inset(50%);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
  word-wrap:normal !important;
}

.wrap{max-width:var(--wrap);margin:0 auto}
.ff-ornament{display:inline-block;vertical-align:middle;color:var(--gold)}

/* The prototype animates on load and hover only. Respect the OS setting. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================================
   Announcement bar
   ========================================================================= */
.announce{
  background:linear-gradient(90deg,var(--emerald),var(--emerald-2),var(--emerald));
  color:var(--gold-soft);
  text-align:center;font-size:.72rem;letter-spacing:.18em;
  padding:8px 16px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.announce .ff-ornament{color:var(--gold-soft)}

/* =========================================================================
   Header
   ========================================================================= */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--wrap);margin:0 auto;padding:16px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .ff{
  font-family:var(--serif);font-weight:700;
  font-size:1.9rem;color:var(--gold);letter-spacing:.04em;
}
.brand .sub{
  font-size:.6rem;letter-spacing:.34em;color:var(--cream-dim);
  margin-top:3px;text-transform:uppercase;
}
.nav-links{display:flex;gap:30px;align-items:center;list-style:none}
.nav-links a{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-dim);transition:color .2s;
}
.nav-links a:hover,.nav-links .current-menu-item>a{color:var(--gold)}
.nav-actions{display:flex;align-items:center;gap:18px}

.cart-btn{
  position:relative;display:flex;align-items:center;gap:7px;
  font-size:.8rem;letter-spacing:.1em;color:var(--cream);padding:8px 4px;
}
.cart-btn:hover{color:var(--gold)}
.cart-count{
  position:absolute;top:-6px;right:-12px;
  background:var(--gold);color:var(--ink);
  min-width:18px;height:18px;border-radius:9px;
  font-size:.66rem;font-weight:600;font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.menu-toggle{display:none;color:var(--gold);padding:8px 4px}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 34px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;transition:all .25s;border-radius:0;
}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:var(--ink);font-weight:600}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* =========================================================================
   Section shells
   ========================================================================= */
.section{padding:80px var(--gutter)}
.entry-none{text-align:center;color:var(--cream-dim);font-size:.95rem}
.sec-head{text-align:center;margin-bottom:52px}
.sec-head .kicker{font-size:.7rem;letter-spacing:.34em;color:var(--gold);text-transform:uppercase}
.sec-head h1,.sec-head h2{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:600;margin-top:12px;color:var(--cream)}
.sec-head .rule{
  width:60px;height:1px;background:var(--gold);margin:20px auto 0;
  position:relative;display:flex;align-items:center;justify-content:center;
}
.sec-head .rule .ff-ornament{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--ink);padding:0 6px;
  /* width="11" on an <svg> is a presentation attribute, i.e. CSS width:11px.
     With the global border-box that would make the content box 11-12 = 0 and
     the glyph would not draw at all. The padding is the mask over the rule, so
     it has to stay - switch this one element to content-box instead. */
  box-sizing:content-box;
}
/* The values strip and footer sit on --ink-2, so the mark must mask that instead. */
.values .sec-head .rule .ff-ornament{background:var(--ink-2)}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{background:var(--ink-2);border-top:1px solid var(--line);padding:60px var(--gutter) 30px}
.foot-grid{
  max-width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px;
}
.foot-brand .ff{font-family:var(--serif);font-weight:700;font-size:2rem;color:var(--gold)}
.foot-brand p{color:var(--cream-dim);font-size:.85rem;font-weight:300;margin-top:12px;max-width:38ch}
.foot-col h2{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-family:var(--sans);font-weight:500}
.foot-col ul{list-style:none}
.foot-col a{display:block;color:var(--cream-dim);font-size:.85rem;margin-bottom:10px}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{
  max-width:var(--wrap);margin:0 auto;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:.74rem;color:var(--cream-dim);letter-spacing:.08em;
}
.foot-bottom a{color:var(--gold-soft)}

/* =========================================================================
   Responsive. Breakpoints from the prototype: 1000 / 680 / 420.
   ========================================================================= */
@media(max-width:1000px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav-links{display:none}
  .menu-toggle{display:block}
  /* The subtitle wraps onto two lines at phone width and unbalances the
     lockup. Tighten it rather than truncate it. */
  .brand .ff{font-size:1.6rem}
  .brand .sub{font-size:.52rem;letter-spacing:.22em}
  .section{padding:56px var(--gutter-sm)}
  .foot-grid{grid-template-columns:1fr}
}