/*
Theme Name:  Little Muse Cafe
Theme URI:   https://littlemusecafe.com
Description: Official theme for Little Muse Cafe & Co Ltd, Trinidad & Tobago.
Version:     1.0.0
Author:      Little Muse Cafe
Text Domain: little-muse
*/

/* ─── Variables ──────────────────────────────────────────────────────── */
:root{
  --paper:#F4ECDC;
  --paper-deep:#EAE0C8;
  --ink:#2A1B2E;
  --ink-soft:#6B5A6C;
  --plum:#51332E;
  --plum-deep:#34201C;
  --gold:#B9803A;
  --line:#D6C6A1;
  --white:#FFFBF3;
  --max-w:780px;
}

/* ─── Reset & Base ───────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background:
    radial-gradient(circle at 15% 8%,  rgba(217,163,92,0.09), transparent 38%),
    radial-gradient(circle at 85% 92%, rgba(81,51,46,0.07),   transparent 42%),
    var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.6;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }
img{ max-width:100%; height:auto; display:block; }

/* ─── Utility ────────────────────────────────────────────────────────── */
.eyebrow{
  display:block;
  font-size:0.67rem;
  font-weight:600;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:0.9rem;
}
.divider{
  width:46px;
  height:1px;
  background:var(--line);
  margin:0 auto;
}
.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 1.5rem;
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-family:'Work Sans', sans-serif;
  font-size:0.88rem;
  font-weight:600;
  padding:0.75rem 1.5rem;
  border-radius:30px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background 0.18s ease, color 0.18s ease, transform 0.14s ease;
  white-space:nowrap;
  text-decoration:none;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--plum); color:var(--white); border-color:var(--plum); }
.btn-primary:hover{ background:var(--plum-deep); border-color:var(--plum-deep); }
.btn-ghost{ background:transparent; color:var(--plum); border-color:var(--plum); }
.btn-ghost:hover{ background:var(--plum); color:var(--white); }

/* ─── Navigation ─────────────────────────────────────────────────────── */
.site-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(244,236,220,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:calc(var(--max-w) + 3rem);
  margin:0 auto;
  padding:0 1.5rem;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.nav-logo{
  height:40px;
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.nav-logo img{ height:40px; width:auto; object-fit:contain; }
.nav-logo .logo-fallback{
  display:none;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:500;
  font-size:1.15rem;
  color:var(--plum);
}

/* WordPress outputs <ul class="nav-links"> */
ul.nav-links{
  display:flex;
  align-items:center;
  list-style:none;
  gap:0.2rem;
}
ul.nav-links li a{
  display:block;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--ink);
  padding:0.45rem 0.8rem;
  border-radius:20px;
  transition:background 0.18s ease, color 0.18s ease;
  white-space:nowrap;
}
ul.nav-links li a:hover{ background:var(--paper-deep); color:var(--plum); }
ul.nav-links li.nav-order > a{
  background:var(--plum);
  color:var(--white);
  padding:0.45rem 1.1rem;
}
ul.nav-links li.nav-order > a:hover{ background:var(--plum-deep); }
ul.nav-links li.current-menu-item > a{ color:var(--plum); }

/* Mobile toggle */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:6px;
  border:none;
  background:transparent;
}
.nav-toggle span{
  display:block; width:22px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ─── Front Page — Hero ──────────────────────────────────────────────── */
.hero{
  max-width:640px;
  margin:0 auto;
  padding:7vh 1.5rem 5vh;
  text-align:center;
}
.hero-brandmark{
  margin:0 auto 2.5rem;
  height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-brandmark img{ max-height:170px; max-width:360px; object-fit:contain; }
.hero-brandmark .logo-fallback{
  display:none;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:500;
  font-size:2.4rem;
  color:var(--plum);
}
.hero h1{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(2.1rem, 6.5vw, 3.4rem);
  line-height:1.1;
  color:var(--ink);
  margin-bottom:1rem;
}
.hero p{
  font-size:1.05rem;
  font-weight:300;
  color:var(--ink-soft);
  line-height:1.65;
  max-width:28rem;
  margin:0 auto 2.5rem;
}
.hero-actions{
  display:flex;
  gap:0.85rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* ─── Front Page — Contact ───────────────────────────────────────────── */
.contact-section{
  max-width:640px;
  margin:0 auto;
  padding:4.5vh 1.5rem 5vh;
  text-align:center;
}
.contact-list{ list-style:none; display:flex; flex-direction:column; gap:0.7rem; align-items:center; }
.contact-link{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
  padding:0.35rem 0.65rem;
  border-radius:6px;
  transition:color 0.18s ease;
}
.contact-link:hover{ color:var(--plum); }
.contact-link svg{ width:18px; height:18px; flex-shrink:0; }
.contact-link svg.stroke{ fill:none; stroke:var(--gold); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.contact-link svg.fill{ fill:var(--gold); }

/* ─── Generic Page ───────────────────────────────────────────────────── */
.page-header{
  border-bottom:1px solid var(--line);
  padding:4rem 1.5rem 2.5rem;
  text-align:center;
}
.page-header h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(2rem, 5vw, 3rem);
  color:var(--ink);
  margin-bottom:0.5rem;
}
.page-header p{
  color:var(--ink-soft);
  font-size:1rem;
  font-weight:300;
  max-width:30rem;
  margin:0 auto;
}
.page-content{
  max-width:var(--max-w);
  margin:0 auto;
  padding:3.5rem 1.5rem 5rem;
  font-size:1rem;
  line-height:1.75;
  color:var(--ink);
}
.page-content h2{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.5rem;
  color:var(--plum);
  margin:2rem 0 0.75rem;
}
.page-content h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.15rem;
  color:var(--ink);
  margin:1.5rem 0 0.5rem;
}
.page-content p{ margin-bottom:1rem; }
.page-content ul, .page-content ol{ margin:0 0 1rem 1.4rem; }
.page-content li{ margin-bottom:0.35rem; }
.page-content a{ color:var(--plum); text-decoration:underline; }
.page-content a:hover{ color:var(--plum-deep); }
.page-content strong{ font-weight:600; }

/* ─── Single Post (Newsletter) ───────────────────────────────────────── */
.post-header{
  border-bottom:1px solid var(--line);
  padding:4rem 1.5rem 2.5rem;
  max-width:var(--max-w);
  margin:0 auto;
}
.post-header .post-date{
  display:block;
  font-size:0.67rem;
  font-weight:600;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:0.65rem;
}
.post-header h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(1.8rem, 5vw, 2.8rem);
  color:var(--ink);
  line-height:1.15;
}
.post-content{
  max-width:var(--max-w);
  margin:0 auto;
  padding:3rem 1.5rem 5rem;
  font-size:1rem;
  line-height:1.8;
  color:var(--ink);
}
.post-content p{ margin-bottom:1.1rem; }
.post-content h2{ font-family:'Fraunces',serif; font-size:1.5rem; font-weight:600; color:var(--plum); margin:2rem 0 0.75rem; }
.post-content img{ border-radius:8px; margin:1.5rem 0; }
.post-content a{ color:var(--plum); text-decoration:underline; }
.post-back{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-size:0.82rem;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:1.5rem;
  transition:color 0.18s;
}
.post-back:hover{ color:var(--plum); }

/* ─── Archive (Newsletter list) ──────────────────────────────────────── */
.archive-list{ list-style:none; }
.archive-item{
  padding:1.75rem 0;
  border-bottom:1px solid var(--line);
}
.archive-item:last-child{ border-bottom:none; }
.archive-item .arc-date{
  font-size:0.67rem;
  font-weight:600;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:0.4rem;
}
.archive-item h2{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.25rem;
  color:var(--ink);
  margin-bottom:0.5rem;
  line-height:1.3;
}
.archive-item h2 a:hover{ color:var(--plum); }
.archive-item p{ font-size:0.92rem; color:var(--ink-soft); margin-bottom:0.75rem; line-height:1.6; }
.archive-item .read-more{
  font-size:0.8rem;
  font-weight:600;
  color:var(--plum);
  border-bottom:1px solid var(--line);
  padding-bottom:1px;
  transition:border-color 0.18s ease;
}
.archive-item .read-more:hover{ border-color:var(--plum); }

/* ─── Footer ─────────────────────────────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--line);
  padding:1.75rem 1.5rem;
  text-align:center;
  font-size:0.7rem;
  letter-spacing:0.07em;
  color:var(--ink-soft);
  opacity:0.75;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media(max-width:620px){
  .nav-toggle{ display:flex; }
  ul.nav-links{
    display:none;
    position:absolute;
    top:64px;
    left:0; right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    padding:0.75rem 1.25rem 1rem;
    gap:0.15rem;
  }
  ul.nav-links.open{ display:flex; }
  ul.nav-links li a{ border-radius:8px; padding:0.65rem 0.85rem; font-size:0.9rem; }
  ul.nav-links li.nav-order > a{ text-align:center; margin-top:0.35rem; }
}
@media(max-width:480px){
  .hero{ padding:5vh 1.25rem 4vh; }
  .hero p{ font-size:0.97rem; }
  .page-header, .post-header{ padding:3rem 1.25rem 2rem; }
  .page-content, .post-content{ padding:2.5rem 1.25rem 4rem; }
}