/*
Theme Name: Wutte Clone (Custom)
Author: Custom
Version: 1.0.1
Text Domain: wutte-clone
*/

:root { --container: 1200px; }

body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.5; }
.container { width: min(var(--container), 92vw); margin: 0 auto; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,.06); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 18px; }
.site-branding a { text-decoration:none; color: inherit; font-weight: 700; letter-spacing: .2px; }

.main-nav ul { display:flex; gap: 18px; list-style:none; margin:0; padding:0; }
.main-nav a { text-decoration:none; color:#111; font-weight:600; }
.main-nav a:hover { text-decoration:underline; }

.hero { position: relative; }
.hero-slide { min-height: 64vh; display:grid; align-items:end; padding: 44px 0; background-size: cover; background-position: center; }
.hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55)); position:absolute; inset:0; }
.hero-content { position: relative; color:#fff; padding: 0 0 26px 0; }
.hero-content h1 { margin:0 0 8px 0; font-size: clamp(28px, 4vw, 54px); }
.hero-content p { margin:0; max-width: 58ch; font-size: 18px; }

.section { padding: 56px 0; }
.section h2 { margin: 0 0 14px 0; font-size: 28px; }
.grid { display:grid; gap: 22px; grid-template-columns: repeat(12, 1fr); }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }
.card { border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 18px; background:#fff; }

.site-footer { padding: 44px 0; border-top: 1px solid rgba(0,0,0,.08); background:#fafafa; }
.footer-widgets { display:grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.subfooter { border-top: 1px solid rgba(0,0,0,.08); padding: 14px 0; font-size: 14px; color:#333; }
@media (max-width: 900px){
  .main-nav ul { flex-wrap: wrap; gap: 12px; }
  .footer-widgets { grid-template-columns: 1fr; }
  .col-6 { grid-column: span 12; }
}


/* Header UI closer to reference */
.custom-logo { max-height: 44px; width: auto; display:block; }
.nav-toggle { display:none; border:1px solid rgba(0,0,0,.12); background:#fff; border-radius: 12px; padding: 8px 10px; font-size: 18px; line-height: 1; cursor:pointer; }
.header-cta { margin-left: 18px; display:inline-block; padding: 10px 14px; border-radius: 999px; background:#111; color:#fff; text-decoration:none; font-weight:700; white-space:nowrap; }
.header-cta:hover { opacity:.9; }

/* Wines */
.section-head { display:flex; align-items:center; justify-content:space-between; gap: 16px; margin-bottom: 14px; }
.section-nav button { border:1px solid rgba(0,0,0,.12); background:#fff; border-radius: 999px; padding: 8px 12px; font-size: 18px; cursor:pointer; }
.wine-card { border:1px solid rgba(0,0,0,.08); border-radius: 18px; overflow:hidden; background:#fff; }
.wine-thumb { height: 180px; background-size: cover; background-position:center; }
.wine-body { padding: 16px; }
.wine-title { margin: 0 0 8px 0; font-size: 18px; }
.wine-text { color:#222; opacity: .92; font-size: 14px; }
.wine-meta { margin: 12px 0 0 0; padding: 0; list-style:none; font-size: 14px; color:#111; }
.wine-meta li { margin: 6px 0; }
.wine-tags { margin-top: 10px; font-size: 13px; opacity: .85; }
.wine-actions { margin: 14px 0 0 0; }
.wine-btn { display:inline-block; padding: 10px 14px; border-radius: 999px; background:#111; color:#fff; text-decoration:none; font-weight:700; }
.wine-btn:hover { opacity:.9; }
.wine-note { margin-top: 14px; font-size: 14px; opacity: .8; }

/* Mobile nav */
@media (max-width: 900px){
  .nav-toggle { display:inline-block; }
  .main-nav { position: fixed; inset: 70px 12px auto 12px; background: rgba(255,255,255,.98); border:1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.12); transform: translateY(-12px); opacity:0; pointer-events:none; transition: .2s ease; }
  .main-nav.is-open { transform: translateY(0); opacity:1; pointer-events:auto; }
  .main-nav ul { flex-direction: column; gap: 10px; }
  .header-cta { margin-left: 0; margin-top: 10px; text-align:center; }
}