/* ============================================================
   eugenio.co.uk — shared design system
   Edit shared styling (colours, header, nav, buttons, footer,
   cookie bar) HERE, once. Every page links this file, so a change
   here applies everywhere and the pages can't drift apart again.
   Page-specific layout lives in each page's own <style> block.
   ============================================================ */

:root{
  --cream:#F7F4F0; --white:#FFFFFF; --brown-dark:#5A3E2B; --tan:#B8956E;
  --brown-mid:#8A5C35; --shade:#E8E2DA; --peach:#E8C4A0; --ink:#3A2C21;
  --chrome:1140px;   /* width of the header/footer bar */
  --maxw:1140px;     /* default content width; a page may override in its own <style> */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Fraunces',serif;color:var(--brown-dark);line-height:1.15;font-weight:500}
p{margin-bottom:1rem}
a{color:var(--brown-mid);text-decoration:none}
a:hover{color:var(--brown-dark)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--brown-mid);color:var(--white);padding:14px 30px;border-radius:4px;font-weight:600;font-size:.98rem;text-decoration:none;transition:background .2s ease,transform .2s ease}
.btn:hover{background:var(--brown-dark);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--brown-dark);border:1.5px solid var(--tan)}
.btn-outline:hover{background:var(--tan);color:var(--white)}

/* ---- header / nav ---- */
header{position:sticky;top:0;z-index:50;background:rgba(247,244,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--shade)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:var(--chrome);margin:0 auto}
.logo{font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;color:var(--brown-dark);text-decoration:none}
.logo span{color:var(--tan)}
.logo em{display:block;font-family:'Inter',sans-serif;font-style:normal;font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tan);margin-top:1px}
.nav-toggle{display:block;background:none;border:none;font-size:1.6rem;color:var(--brown-dark);cursor:pointer;line-height:1}
.nav-links{display:none;position:absolute;top:100%;right:24px;background:var(--cream);flex-direction:column;gap:0;padding:8px 0;list-style:none;min-width:230px;border:1px solid var(--shade);border-radius:8px;box-shadow:0 18px 40px -20px rgba(90,62,43,.5);overflow:hidden}
.nav-links.open{display:flex}
.nav-links li{width:100%}
.nav-links a{display:block;padding:13px 22px;font-size:.95rem;font-weight:500;color:var(--ink);text-decoration:none}
.nav-links a:hover{background:var(--shade);color:var(--brown-mid)}
.nav-links .btn,.nav-links .btn-outline{margin:6px 16px 8px;text-align:center;padding:11px 0!important}

/* ---- footer ---- */
footer{background:var(--ink);color:#cdbcae;padding:40px 24px;font-size:.9rem}
.footer-accred{max-width:var(--chrome);margin:0 auto 28px;text-align:center}
.footer-accred .accred-logo{display:inline-block;background:#fff;border-radius:10px;padding:9px 16px;line-height:0}
.footer-accred .accred-logo img{display:block;height:32px;width:auto}
.footer-accred .accred-caption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:10px}
.foot-grid{max-width:var(--chrome);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:center}
.foot-grid a{color:#cdbcae;text-decoration:none}
.foot-grid a:hover{color:#fff}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}

/* ---- cookie bar ---- */
#eugenio-cookie-bar{position:fixed;bottom:0;left:0;right:0;background:var(--brown-dark);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--brown-mid);font-family:Inter,system-ui,sans-serif;z-index:99999}
#eugenio-cookie-bar p{font-size:14px;line-height:1.65;color:#F5EFE6;flex:1;min-width:220px;margin:0}
#eugenio-cookie-bar a{color:var(--peach);text-decoration:underline;text-underline-offset:3px}
#eugenio-cookie-bar a:hover{color:#FFF3E0}
#eugenio-cookie-bar .cookie-buttons{display:flex;gap:10px;flex-shrink:0;align-items:center}
#eugenio-cookie-bar button{background:transparent;color:#fff;border:2px solid #fff;padding:9px 22px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;font-family:Inter,system-ui,sans-serif}
#eugenio-cookie-bar button:hover{background:rgba(255,255,255,.15)}

/* ---- shared responsive: base + mobile nav (full-width dropdown) ---- */
@media(max-width:640px){
  body{font-size:16px}
  .nav-links{top:100%;left:0;right:0;min-width:0;border:none;border-bottom:1px solid var(--shade);border-radius:0;box-shadow:none;padding:8px 0}
  .nav-links a{padding:13px 24px}
}

/* ---- share buttons ---- */
.share-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:40px 0;padding-top:24px;border-top:1px solid var(--shade)}
.share-label{font-family:'Inter',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tan);width:100%;margin-bottom:4px}
.share-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--shade);color:var(--brown-mid);border:none;cursor:pointer;transition:background .2s ease,color .2s ease;text-decoration:none}
.share-btn:hover{background:var(--brown-mid);color:#fff}
.share-btn svg{width:17px;height:17px;fill:currentColor}
.copy-toast{font-family:'Inter',sans-serif;font-size:.82rem;color:var(--brown-mid);opacity:0;transition:opacity .25s ease}
.copy-toast.show{opacity:1}
@media(max-width:640px){
  .share-bar{gap:10px}
}