/*
Theme Name: LuxeBarista
Theme URI: https://luxebarista.com
Author: LuxeBarista
Description: Custom theme for LuxeBarista.com — premium home-espresso reviews, guides, and buying advice. Built for SEO, EEAT, and internal-linking performance.
Version: 1.0.0
Text Domain: luxebarista
*/

/* ==========================================================================
   DESIGN TOKENS
   Palette: "Espresso & Copper" — deep roasted brown, warm brass/copper
   accent (nods to La Marzocco's copper boilers), crema ivory background,
   muted sage for freshness cues (beans/roast dates).
   Type: Fraunces (display serif, has grit/character) + Inter (body,
   highly legible) + IBM Plex Mono (specs, prices, data — grinder settings,
   brew ratios read like measurements, so they get a mono face).
   ========================================================================== */
:root{
  --color-espresso:      #241812;
  --color-espresso-soft: #3B2A20;
  --color-crema:         #F7F1E6;
  --color-crema-dim:     #EFE6D6;
  --color-copper:        #B5651D;
  --color-copper-dark:   #8C4E16;
  --color-sage:          #6B7A5E;
  --color-text:          #241812;
  --color-text-muted:    #6B5D4F;
  --color-border:        #E0D5C2;
  --color-white:         #FFFFFF;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --container-max: 1200px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-crema);
  line-height: 1.65;
  font-size: 17px;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--color-copper-dark); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--color-espresso);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}
h1{ font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; }
h2{ font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 600; }
h3{ font-size: 1.3rem; font-weight: 600; }
p{ margin: 0 0 var(--space-2); }
.container{ max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-3); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--color-espresso);
  color:var(--color-white); padding: var(--space-1) var(--space-2); z-index:10000;
}
.skip-link:focus{ left: var(--space-2); top: var(--space-2); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-block; font-family: var(--font-body); font-weight:600;
  padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); border:2px solid transparent;
  cursor:pointer; transition: all .15s ease;
}
.btn-primary{ background: var(--color-copper); color: var(--color-white); }
.btn-primary:hover{ background: var(--color-copper-dark); text-decoration:none; }
.btn-outline{ background: transparent; border-color: var(--color-espresso); color: var(--color-espresso); }
.btn-outline:hover{ background: var(--color-espresso); color: var(--color-white); text-decoration:none; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  background: var(--color-crema); border-bottom: 1px solid var(--color-border);
  position: sticky; top:0; z-index: 999;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.site-branding{ display:flex; align-items:center; gap: var(--space-1); }
.site-title{ font-family: var(--font-display); font-size: 1.5rem; font-weight:700; color: var(--color-espresso); margin:0; }
.site-title a{ color: inherit; }
.site-title a:hover{ text-decoration:none; }

.primary-nav ul{ list-style:none; display:flex; gap: var(--space-3); margin:0; padding:0; }
.primary-nav a{ color: var(--color-espresso); font-weight:500; }
.primary-nav .sub-menu{
  list-style:none; position:absolute; background:var(--color-white); border:1px solid var(--color-border);
  padding: var(--space-1); margin-top: var(--space-1); border-radius: var(--radius-sm); display:none; min-width:200px;
}
.primary-nav li:hover > .sub-menu{ display:block; }
.primary-nav .sub-menu li{ padding: 0.25rem 0.5rem; }

.menu-toggle{ display:none; background:none; border:2px solid var(--color-espresso); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; cursor:pointer; }

@media (max-width: 820px){
  .menu-toggle{ display:block; }
  .primary-nav{ display:none; width:100%; }
  .primary-nav.is-open{ display:block; }
  .site-header .container{ flex-wrap:wrap; }
  .primary-nav ul{ flex-direction:column; gap: var(--space-1); padding: var(--space-2) 0; }
  .primary-nav .sub-menu{ position:static; border:none; padding-left: var(--space-2); }
}

/* ==========================================================================
   TRUST BAR (EEAT)
   ========================================================================== */
.trust-bar{ background: var(--color-espresso); color: var(--color-crema-dim); font-size: 0.85rem; }
.trust-bar .container{ display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:center; padding: 0.5rem var(--space-3); }
.trust-bar a{ color: var(--color-crema-dim); text-decoration: underline; }

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumbs{ font-size: 0.85rem; color: var(--color-text-muted); margin: var(--space-2) 0; }
.breadcrumbs a{ color: var(--color-text-muted); text-decoration: underline; }
.breadcrumbs [aria-current="page"]{ color: var(--color-espresso); font-weight:600; }

/* ==========================================================================
   CARDS (post grid, related posts, category cards)
   ========================================================================== */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: var(--space-3); }
.card{
  background: var(--color-white); border:1px solid var(--color-border); border-radius: var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column; transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 8px 24px rgba(36,24,18,0.1); }
.card-thumb{ aspect-ratio: 16/10; overflow:hidden; background: var(--color-crema-dim); }
.card-thumb img{ width:100%; height:100%; object-fit:cover; }
.card-body{ padding: var(--space-2); display:flex; flex-direction:column; gap: 0.4rem; flex:1; }
.card-cat{ font-family: var(--font-mono); font-size: 0.7rem; letter-spacing:.05em; text-transform:uppercase; color: var(--color-copper-dark); }
.card-title{ font-size: 1.1rem; margin:0; }
.card-title a{ color: var(--color-espresso); }
.card-title a:hover{ text-decoration:none; color: var(--color-copper-dark); }
.card-excerpt{ color: var(--color-text-muted); font-size: 0.92rem; margin:0; flex:1; }
.card-meta{ font-size: 0.78rem; color: var(--color-text-muted); display:flex; gap: var(--space-1); align-items:center; }

/* ==========================================================================
   PAGES (page.php)
   ========================================================================== */
.page-content{ max-width: 800px; margin: var(--space-3) auto var(--space-5); }

/* ==========================================================================
   BLOG INDEX
   ========================================================================== */
.blog-hero{ text-align:center; padding: var(--space-4) 0 var(--space-3); }
.filter-tabs{ display:flex; flex-wrap:wrap; gap: var(--space-1); justify-content:center; margin-bottom: var(--space-3); }
.filter-tabs a{
  border:1px solid var(--color-border); border-radius: 999px; padding: 0.4rem 1rem; font-size:0.85rem; color: var(--color-espresso);
}
.filter-tabs a.is-active{ background: var(--color-espresso); color: var(--color-crema); border-color: var(--color-espresso); }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination{ display:flex; justify-content:center; gap: var(--space-1); margin: var(--space-4) 0; }
.pagination a, .pagination span{ border:1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; }
.pagination .current{ background: var(--color-espresso); color: var(--color-crema); border-color: var(--color-espresso); }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter{ background: var(--color-espresso); color: var(--color-crema); padding: var(--space-4) 0; text-align:center; }
.newsletter h2{ color: var(--color-crema); }
.newsletter-form{ display:flex; gap: 0.5rem; justify-content:center; flex-wrap:wrap; margin-top: var(--space-2); }
.newsletter-form input[type="email"]{ padding: 0.75rem 1rem; border-radius: var(--radius-sm); border:none; min-width:260px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--color-espresso-soft); color: var(--color-crema-dim); padding-top: var(--space-4); }
.footer-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--space-3); padding-bottom: var(--space-3); }
.footer-grid h3{ color: var(--color-crema); font-size:1rem; text-transform:uppercase; letter-spacing:.04em; font-family: var(--font-mono); }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid a{ color: var(--color-crema-dim); }
.footer-grid a:hover{ color: var(--color-copper); }
.footer-bottom{ border-top:1px solid rgba(247,241,230,0.15); padding: var(--space-2) 0; text-align:center; font-size:0.8rem; }

/* Steam divider — signature motif used sparingly between major sections */
.steam-divider{ display:block; width:100%; height:32px; margin: var(--space-3) 0; }
.steam-divider path{ stroke: var(--color-copper); stroke-width:2; fill:none; opacity:0.6; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card{ transition:none; }
}