/* ============================================================
   Ottawa Flower Bar — Shared Site Styles
   Used by: index.html, bloom-bar-pricing.html, corporate.html,
            request-a-quote.html
   Contains: design tokens, base/reset, buttons, header/nav,
   footer, and the responsive rules for all of the above.
   Page-specific styles (hero, pricing cards, form fields, etc.)
   stay inline in each page's own <style> block.
   ============================================================ */

:root{
  --cream:#fdfaf4;
  --cream-deep:#f6efe2;
  --blush-tint:#f7dfe3;
  --ink:#332924;
  --ink-soft:#6f6259;
  --plum:#2b201c;
  --blush:#c98a92;
  --blush-deep:#c16b80;
  --sage:#7c8967;
  --line:#e3d7c6;
  --radius:2px;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;color:var(--ink);}
p{margin:0;line-height:1.7;color:var(--ink-soft);}
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blush-deep);
  font-weight:600;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
:focus-visible{outline:2px solid var(--blush-deep);outline-offset:3px;}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 30px;
  font-family:var(--sans);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-solid{background:var(--blush);color:#fff;}
.btn-solid:hover{background:var(--blush-deep);}
.btn-solid:disabled{opacity:.6;cursor:not-allowed;}
.btn-outline{border-color:rgba(255,255,255,.75);color:#fff;background:transparent;}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-outline-dark{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-outline-dark:hover{background:var(--ink);color:#fff;}

/* HEADER / NAV */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(248,242,233,.92);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;max-width:1180px;margin:0 auto;
}
.logo{font-family:var(--serif);font-size:2.35rem;color:var(--ink);}
.logo em{font-style:italic;color:var(--blush-deep);}
nav ul{list-style:none;display:flex;gap:36px;margin:0;padding:0;}
nav a{
  font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink);
  padding-bottom:4px;border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
nav a:hover, nav a[aria-current="page"]{border-color:var(--blush-deep);color:var(--blush-deep);}
.menu-toggle{
  display:none;background:none;border:none;cursor:pointer;
  width:26px;height:20px;position:relative;
}
.menu-toggle span{
  position:absolute;left:0;width:100%;height:2px;background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.menu-toggle span:nth-child(1){top:0;}
.menu-toggle span:nth-child(2){top:9px;}
.menu-toggle span:nth-child(3){top:18px;}
.menu-toggle.open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* FOOTER */
footer{background:var(--plum);color:#c9beb6;padding:56px 0 28px;border-top:1px solid rgba(255,255,255,.08);}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-grid .logo{color:#fff;}
.footer-grid p{color:#a89c92;margin-top:14px;font-size:.92rem;max-width:320px;}
.footer-grid h4{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:600;
}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.footer-grid a{font-size:.92rem;color:#c9beb6;transition:color .2s ease;}
.footer-grid a:hover{color:#fff;}
address{font-style:normal;font-size:.92rem;line-height:1.9;color:#c9beb6;}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:24px;font-size:.78rem;color:#8d8078;letter-spacing:.03em;
}

/* RESPONSIVE: shared across all pages */
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-grid .logo-col{grid-column:1/-1;}
}

@media (max-width:720px){
  nav{
    position:fixed;top:84px;left:0;right:0;bottom:0;
    background:var(--cream);
    transform:translateX(100%);
    transition:transform .3s ease;
    padding:36px 32px;
    overflow-y:auto;
  }
  nav.open{transform:translateX(0);}
  nav ul{flex-direction:column;gap:26px;}
  nav a{font-size:.95rem;}
  .menu-toggle{display:block;}
  .wrap{padding:0 22px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}