/*
Theme Name: Coffeeshop West
Theme URI: https://coffeeshopwest.drokkie.nl
Author: Coffeeshop West
Description: Standalone custom theme for Coffeeshop West — bilingual (NL/EN), built to the brand's brown/green design system. Pages are custom full-bleed templates (no theme header/footer chrome); each WordPress Page just picks a template from Page Attributes.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: coffeeshop-west
*/

* { box-sizing: border-box; }

:root {
  --brown: #4d3935;
  --accent: #38b449;
  --accent-hover: #2c9138;
  --cream: #F6F3EF;
  --border: rgba(77,57,53,0.1);
}

body {
  margin: 0;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 26px;
  color: var(--brown);
  background: #FFFFFF;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: var(--brown);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  margin: 0 0 7px;
}
h1 { font-size: 54px; line-height: 62px; }
h2 { font-size: 34px; line-height: 44px; }
h3 { font-size: 22px; line-height: 34px; }
h4 { font-size: 18px; line-height: 32px; }
h5 { font-size: 16px; line-height: 26px; }
h6 { font-size: 14px; line-height: 24px; }
p { margin: 0 0 16px; color: var(--brown); }
a { color: inherit; text-decoration: none; }
a.underline-link { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
a.underline-link:hover { opacity: 0.7; }
button { font-family: 'Open Sans', Helvetica, Arial, sans-serif; cursor: pointer; }

.btn-primary { display:inline-block; background: var(--accent); color:#FFFFFF; font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:15px 26px; border-radius:3px; border:none; transition: background 0.15s ease; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { display:inline-block; border:1px solid rgba(77,57,53,0.3); color: var(--brown); font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:15px 26px; border-radius:3px; background:transparent; }
.btn-outline:hover { background: rgba(77,57,53,0.06); }

.nav-link { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--brown); opacity: 0.8; }
.nav-link:hover, .nav-link[aria-current="page"] { opacity: 1; }

/* Plain-link EN/NL switcher (each language is a real WP page, not a JS toggle) */
.lang-switch { display:flex; gap:6px; }
.lang-switch a, .lang-switch span {
  font-size: 12px; letter-spacing: 0.04em; font-weight: 600; padding: 4px 9px; border-radius: 3px;
  border: 1px solid rgba(77,57,53,0.3); color: var(--brown); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lang-switch [aria-current="true"] { background: var(--brown); color: #F6F3EF; border-color: var(--brown); }
.lang-switch a:hover { background: rgba(77,57,53,0.06); }

.kicker { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; color: var(--accent); font-family: 'Open Sans', Helvetica, Arial, sans-serif; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 48px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(77,57,53,0.09); }
.site-header .logo img { height:52px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:34px; }

/* Page hero banner (plain cream, no photo — used on every page) */
.page-hero { position:relative; padding: 80px 48px; background: var(--cream); overflow:hidden; }
.page-hero .inner { max-width:760px; margin:0 auto; text-align:center; position:relative; z-index:2; animation: csw-fade-up 0.7s ease both; }

/* Homepage hero slider */
.hero-slider { position:relative; width:100%; aspect-ratio:2.2/1; overflow:hidden; background:#EDE8E1; }
.hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:1; transition:opacity 0.7s ease; }
.hero-slide.is-active { opacity:1; z-index:2; }
.hero-slider::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.28), rgba(0,0,0,0) 45%); z-index:3; pointer-events:none; }
.hero-nav-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center; }
.hero-nav-btn.prev { left:20px; }
.hero-nav-btn.next { right:20px; }
.hero-dots { position:absolute; left:0; right:0; bottom:22px; z-index:4; display:flex; justify-content:center; gap:8px; }
.hero-dot { height:8px; width:8px; border-radius:4px; border:none; padding:0; cursor:pointer; background:rgba(255,255,255,0.6); transition:all 0.3s ease; }
.hero-dot.is-active { width:22px; background: var(--accent); }
@media (max-width: 560px) { .hero-slider { aspect-ratio: 4/3; } }

section { padding: 96px 48px; }
.section-tight { padding: 64px 48px; }
.max-1240 { max-width:1240px; margin:0 auto; }
.max-760 { max-width:760px; margin:0 auto; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:40px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px; }
.split { display:grid; grid-template-columns: 0.9fr 1.1fr; gap:72px; align-items:center; }

.usp-item { border-top:2px solid var(--accent); padding-top:22px; }
.usp-item svg { color: var(--accent); margin-bottom:16px; }
.usp-item p { font-size:14px; line-height:22px; color: rgba(77,57,53,0.65); margin:0; }

.photo-tile { aspect-ratio:4/3; border-radius:4px; overflow:hidden; }
.photo-tile img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.6s ease; }
.photo-tile:hover img { transform: scale(1.06); }

.banner-cta { background: var(--accent); padding: 64px 48px; }
.banner-cta .row { max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.banner-cta h2, .banner-cta p { color:#FFFFFF; }
.banner-cta .btn-white { background:#FFFFFF; color: var(--accent); font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:15px 26px; border-radius:3px; white-space:nowrap; display:inline-block; transition: transform 0.15s ease, box-shadow 0.2s ease; }
.banner-cta .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.15); }

.body-copy { font-size:16px; line-height:26px; color: rgba(77,57,53,0.75); }
.small-copy { font-size:14px; line-height:22px; color: rgba(77,57,53,0.65); }

.faq-item { border-bottom:1px solid var(--border); padding: 22px 0; transition: background 0.2s ease; }
.faq-item:hover { background: rgba(77,57,53,0.025); }
.faq-item h4 { margin-bottom:8px; }
.faq-item p { margin:0; color: rgba(77,57,53,0.75); font-size:15px; line-height:24px; }

.info-card { background:#FFFFFF; border:1px solid var(--border); border-radius:6px; padding:28px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.info-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(77,57,53,0.09); }

.card-review { background: #FFFFFF; border:1px solid var(--border); border-radius:6px; padding:28px; box-shadow: 0 1px 2px rgba(77,57,53,0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-review:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(77,57,53,0.09); }
.card-review .stars { display:flex; gap:3px; margin-bottom:16px; color: var(--accent); }
.card-review .quote { font-size:15px; line-height:24px; color: rgba(77,57,53,0.7); font-style:italic; margin-bottom:18px; }
.card-review .source { font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color: rgba(77,57,53,0.5); }

/* Footer */
.site-footer { background: var(--brown); padding: 72px 48px 32px; color: #D9CFCB; }
.site-footer h6 { color:#B7A9A4; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; }
.site-footer a { color:#D9CFCB; }
.footer-links { display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12px; color:#B7A9A4; flex-wrap:wrap; gap:12px; }

/* Contact page form */
.contact-form label { display:block; font-size:13px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color: rgba(77,57,53,0.7); margin-bottom:6px; }
.contact-form input, .contact-form textarea {
  width:100%; padding:12px 14px; margin-bottom:18px; border:1px solid rgba(77,57,53,0.2); border-radius:3px;
  font-family:'Open Sans', Helvetica, Arial, sans-serif; font-size:15px; color:var(--brown); background:#FFFFFF;
}
.contact-form textarea { resize:vertical; min-height:110px; }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid-3, .grid-2, .split { grid-template-columns: 1fr !important; }
  h1 { font-size: 40px !important; line-height: 46px !important; }
  .site-header { flex-wrap: wrap; row-gap: 14px; padding: 16px 24px !important; }
  .nav-links { order: 3; width: 100%; justify-content: center; gap: 20px !important; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  section, .page-hero { padding-left: 24px !important; padding-right: 24px !important; }
  h1 { font-size: 32px !important; line-height: 38px !important; }
}

/* ---------- Motion & transitions ---------- */

html { scroll-behavior: smooth; }

.nav-link { position: relative; transition: opacity 0.15s ease; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px;
  background: var(--accent); transition: right 0.25s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { right: 0; }

.btn-primary { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(56,180,73,0.28); }
.btn-outline { transition: background 0.15s ease, transform 0.15s ease; }
.btn-outline:hover { transform: translateY(-2px); }

/* Scroll-triggered reveal for content blocks */
.reveal-target { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-target.is-visible { opacity: 1; transform: translateY(0); }

@keyframes csw-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-target { opacity: 1 !important; transform: none !important; }
  .page-hero .inner, .photo-tile img, .btn-primary, .btn-outline, .banner-cta .btn-white,
  .info-card, .card-review, .hero-slide {
    animation: none !important; transition: none !important; transform: none !important;
  }
}