/* Basic responsive styles for the SK Slagerij prototype */
:root{
  /* Design tokens */
  --primary:#8B1E2D;
  --accent:#D88B2B;
  --bg:#FFF7F5; /* warmer page background */
  --bg-alt-1:#FFF3E6; /* warm peach band */
  --bg-alt-2:#FFFDF6; /* pale cream */
  --text:#222222;
  --muted:#666666;

  --radius:12px;
  --radius-sm:8px;
  --shadow-1: 0 6px 18px rgba(17,17,17,0.06);
  --shadow-2: 0 14px 40px rgba(17,17,17,0.08);
  --space-xs:6px;
  --space-sm:12px;
  --space-md:20px;
  --space-lg:32px;
  --container:1140px; /* tightened slightly to match example proportions */
  --bg-soft: rgba(255,240,235,0.6);
  --bg-accent-soft: rgba(216,139,43,0.12);
  --bg-primary-soft: rgba(139,30,45,0.10);
  --band-sep: rgba(17,17,17,0.06);
}
*{box-sizing:border-box}
/* visually hidden helper for accessible labels */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{max-width:var(--container);margin:0 auto;padding:1rem}
.html,body{height:100%;margin:0;font-family:Poppins, Inter, system-ui, Arial, Helvetica, sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}

/* Use Poppins for headings to better match the reference site's geometric headings */
h1,h2,h3,h4,h5{font-family:Poppins, Montserrat, Inter, system-ui, sans-serif}
/* Smooth in-page anchor scrolling */
html{scroll-behavior:smooth}

/* Focus helper for sections targeted by anchors */
section:focus{outline:4px solid rgba(139,30,45,0.18);outline-offset:6px}
.site-header{background:#fff;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0}
.logo{font-family:Poppins, Montserrat, sans-serif;font-weight:700;color:var(--primary);text-decoration:none;font-size:clamp(1.05rem, 1.8vw, 1.4rem)}
.main-nav{position:relative}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.nav-list a{color:var(--text);text-decoration:none}
.nav-toggle{display:none}

.hero{background-image:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(139,30,45,0.18)),url('../images/hero.webp');background-size:cover;background-position:center;color:#fff;padding:clamp(3rem, 8vw, 7rem) 0;min-height:560px;display:flex;align-items:center}
.hero-inner{max-width:940px}
.hero h1{font-family:Poppins, Montserrat, sans-serif;font-size:clamp(2rem, 6.5vw, 3.6rem);margin:0 0 0.6rem;line-height:1.02;font-weight:600}
.hero p{margin:0 0 1.1rem;font-size:clamp(1rem, 2.1vw, 1.15rem);opacity:0.95}

/* Increase weight for hero and about text for better readability */
.hero h1{font-weight:700}
.hero p{font-weight:600}
.about h2{font-weight:700}
.about p{font-weight:600}
.about .highlights li{font-weight:600}

/* Stronger hero CTA and overlay for modern look */
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.22));pointer-events:none;border-radius:0}
.hero{position:relative}
.hero-cta .btn.primary{padding:0.95rem 1.4rem;font-size:1.12rem;box-shadow:0 18px 46px rgba(139,30,45,0.16);border-radius:14px}
.hero-cta .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.18);color:#fff}

/* Slightly tighter layout for hero actions on mobile */
@media (max-width:480px){
  .hero-inner{padding:0 1rem}
  .hero-cta .btn{display:block;width:100%;text-align:center}
  .hero-cta{display:grid;gap:0.6rem}
}
.btn{display:inline-block;padding:0.6rem 1.1rem;border-radius:999px;background:#fff;color:var(--text);text-decoration:none;border:1px solid rgba(0,0,0,0.06);box-shadow:var(--shadow-1);transition:transform .16s ease, box-shadow .16s ease, background .12s ease}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.btn.primary{background:linear-gradient(90deg,var(--primary), #6f1520);color:#fff;border:none;box-shadow:0 10px 28px rgba(139,30,45,0.12)}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text)}

.about{padding:2rem 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:center}
.about-photo img{width:100%;border-radius:6px}
.highlights{list-style:circle;margin-top:0.5rem;color:var(--muted)}

.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;align-items:start}
.grid-3 img{width:100%;height:200px;object-fit:cover;border-radius:8px}
.see-more{text-align:center;margin-top:0.8rem}

/* Card styling for product overviews (no images variant) */
.card{background:#fff;padding:1.1rem;border-radius:var(--radius);box-shadow:var(--shadow-1);min-height:160px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease}
.card::before{content:"";position:absolute;left:0;top:0;height:6px;width:100%;background:linear-gradient(90deg,var(--accent), #b86b2a)}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-2)}
.card h3{margin:0 0 0.5rem;font-size:1.05rem}
.card p{margin:0 0 0.6rem;color:var(--muted)}
.card ul{margin:0;padding-left:1.2rem;color:var(--muted)}

/* Product card specific improvements */
.product-card{padding:0;overflow:hidden}
.product-media{position:relative;display:block;height:160px;overflow:hidden}
.product-media img{width:100%;height:100%;object-fit:cover;display:block}
.product-badge{position:absolute;left:12px;top:12px;background:rgba(0,0,0,0.6);color:#fff;padding:0.25rem 0.6rem;border-radius:999px;font-size:0.82rem}
.product-body{padding:1rem}
.card-footer{display:flex;align-items:center;justify-content:flex-end;padding:0.75rem 1rem 1rem;border-top:1px solid rgba(17,17,17,0.03);background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96))}
.card-footer .price{font-weight:700;color:var(--primary);font-size:0.98rem}
.card-footer .btn{margin-left:0.6rem}
.product-card .btn{padding:0.5rem 0.9rem;border-radius:999px}

@media (max-width:480px){
  .product-media{height:120px}
  .card-footer{padding:0.6rem 0.75rem}
}

/* Category-specific accent bars for product cards */
.card--rund::before{background:linear-gradient(90deg,#7a1218,#9f2a2f)}
.card--kip::before{background:linear-gradient(90deg,#c58a2b,#d88b2b)}
.card--bbq::before{background:linear-gradient(90deg,#8b3a1f,#b86b2a)}
.card--speciale::before{background:linear-gradient(90deg,#5a5a5a,#8a8a8a)}

/* small badge (if used) */
.badge{display:inline-block;padding:0.18rem 0.5rem;border-radius:999px;font-size:0.78rem;color:#fff;background:var(--accent)}

/* Small banner for pages using the hero as a compact banner */
.page-banner{width:100%;height:120px;background-size:cover;background-position:center;border-radius:8px;margin:1rem 0}

@media (max-width:480px){
  .page-banner{height:80px}
}

.single-gallery{display:block; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);}
.single-gallery img{width:100%;max-width:none;height:480px;object-fit:cover;display:block;border-radius:0;object-position:center}

/* responsive heights for the vitrine image */
@media (max-width:900px){
  .single-gallery img{height:360px}
}
@media (max-width:480px){
  .single-gallery img{height:220px}
}

/* Utility to make a text block visually edge-to-edge while keeping inner text constrained */
.text-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:1.25rem 0;position:relative;overflow:visible;isolation:isolate}
.text-bleed .content{max-width:var(--container);margin:0 auto;padding:0 1rem}

/* Parallax helpers */
[data-parallax]{will-change:transform}
.hero{background-position:center center;background-repeat:no-repeat}
.single-gallery{overflow:hidden}
.single-gallery img{transition:transform .12s linear}

/* Section header/background bands — visually lift each section's heading/lead */
/* Slightly stronger background tints for better separation (tweak 1) */
#about .text-bleed{background:linear-gradient(180deg,var(--bg-primary-soft), rgba(255,255,255,0));}
.gallery-preview .text-bleed{background:var(--bg-alt-2)}
/* Services: make band more prominent and use white text (tweak 2) */
.services .text-bleed{background:var(--primary);color:#fff}
.services .text-bleed .content p,.services .text-bleed .content .muted{color:rgba(255,255,255,0.92)}
.services .text-bleed .content h2{color:#fff}

#onze-winkel .text-bleed{background:linear-gradient(180deg,var(--bg-primary-soft), rgba(255,255,255,0));}
#producten .text-bleed{background:var(--bg-alt-1)}
#contact .text-bleed{background:linear-gradient(180deg, rgba(255,245,240,0.6), rgba(255,255,255,0));}

.text-bleed{padding-top:1.25rem;padding-bottom:1.25rem}
.text-bleed{
  /* smooth visual transitions between bands */
  transition:background-color .36s ease, background .36s ease, color .24s ease;
  /* soft fade at top and bottom to make band edges less harsh */
  box-shadow: inset 0 14px 22px -14px rgba(17,17,17,0.05), inset 0 -14px 22px -14px rgba(17,17,17,0.05);
}

/* gentle gradient separators using pseudo elements (keeps the visual line but softer) */
.text-bleed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--band-sep),transparent);}
.text-bleed::before{content:"";position:absolute;left:0;right:0;top:-1px;height:36px;pointer-events:none;background:linear-gradient(to bottom, rgba(17,17,17,0.05), rgba(17,17,17,0));}
.text-bleed::after{box-shadow:0 1px 0 rgba(255,255,255,0.02) inset}

/* Slightly different top/bottom fades for the dark services band so the fade reads as lighter */
.services .text-bleed::before,.services .text-bleed::after{background:linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0));box-shadow:none}

/* Animate background changes on key section-like elements for smoother visual updates */
.contact-strip, .site-footer, .top-strip{transition:background-color .36s ease, color .24s ease}
.text-bleed .content h1,.text-bleed .content h2{margin-top:0;margin-bottom:0.5rem}

/* Top strip (small contact / ordering band) */
.top-strip{background:var(--primary);padding:0.45rem 0;color:#fff}
.top-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:0.75rem}
.top-strip .top-left,.top-strip .top-center{color:#fff;font-size:0.95rem}
.top-strip .top-center{font-weight:600;letter-spacing:0.6px;text-transform:uppercase}
.top-strip .top-right{ text-align:right }

/* Services block - feature grid */
.services{padding:1.25rem 0}
.services h2{margin:0 0 0.5rem;color:var(--primary);font-weight:700;font-size:1.6rem}
.services .muted{color:var(--muted);margin-bottom:0.75rem}
.services-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.service-card{background:#fff;padding:1.1rem;border-radius:var(--radius);box-shadow:var(--shadow-1);display:flex;gap:0.85rem;min-height:130px;align-items:flex-start;transition:transform .14s ease, box-shadow .14s ease}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.service-icon{font-size:1.6rem;width:56px;height:56px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 56px;background:linear-gradient(90deg,var(--accent),#b86b2a);color:#fff}
.service-icon svg{width:22px;height:22px;display:block}
.service-body h3{margin:0;font-size:1.05rem}
.service-body p{margin:0;color:var(--muted);font-size:0.95rem}

/* Approach grid for 'Onze aanpak' */
.approach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:0.6rem}
.approach-card{background:linear-gradient(180deg,#fff, #fff);padding:0.9rem;border-radius:10px;box-shadow:var(--shadow-1);display:flex;gap:0.9rem;align-items:flex-start;transition:transform .16s ease, box-shadow .16s ease}
.approach-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.approach-icon{width:56px;height:56px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 56px;background:linear-gradient(90deg,var(--accent),#b86b2a);color:#fff}
.approach-icon svg{width:28px;height:28px;display:block}
.approach-body h4{margin:0 0 0.25rem;font-size:1.05rem;color:var(--primary)}
.approach-body p{margin:0;color:var(--muted);font-size:0.95rem}

@media (max-width:480px){
  .approach-card{padding:0.8rem}
  .approach-icon{width:48px;height:48px;flex:0 0 48px}
}

@media (min-width:900px){
  /* Large screens: align icon left, text to the right in service cards */
  .service-card{flex-direction:row}
  .service-card .service-body{display:block}
}

.contact-strip{background:var(--bg-alt-1);padding:1.2rem 0;border-top:1px solid var(--band-sep);border-bottom:1px solid var(--band-sep)}
.contact-inner{display:flex;align-items:center;justify-content:space-between}

.page-hero{padding:2rem 0}

/* Intro accent used on store page: subtle left border and spacing to draw attention */
.page-hero .intro-accent{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));padding:0.6rem 0.8rem;border-left:4px solid var(--accent);border-radius:6px;margin-bottom:0.6rem}
.page-hero .intro-accent strong{display:block;margin-bottom:0.2rem;font-size:1.05rem}

/* Store-specific accenting (applies only when .store-hero/.store-shop classes are present) */
.page-hero.store-hero{background:linear-gradient(90deg, rgba(139,30,45,0.03), rgba(255,255,255,0));border-radius:8px;padding:2.4rem;margin-bottom:0.8rem}
.page-hero.store-hero h1{color:var(--primary);position:relative}
.page-hero.store-hero h1::after{content:'';display:block;height:4px;width:72px;background:var(--primary);border-radius:4px;margin-top:0.6rem;opacity:0.95}
.page-hero.store-hero p{color:#3a1b1d}
.page-hero.store-hero .intro-accent{border-left-color:var(--primary);background:linear-gradient(180deg, rgba(216,139,43,0.06), rgba(255,255,255,0));}

.shop-info.store-shop{background:linear-gradient(180deg, rgba(139,30,45,0.03), rgba(255,255,255,0));padding:1rem;border-radius:8px}
.shop-info.store-shop h2{color:var(--primary)}
.shop-info.store-shop p{color:#3a1b1d}
.shop-info{padding:1rem 0}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.photo-grid{padding:1rem 0}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 0}
.contact-card{background:#fff;padding:1rem;border-radius:6px}

/* Highlighted contact card with red background that visually connects to the site */
.contact-card--primary{background:linear-gradient(180deg,var(--primary), #6f1520);color:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(139,30,45,0.08)}
.contact-card--primary h2,.contact-card--primary h3{color:#fff}
.contact-card--primary p,.contact-card--primary li{color:rgba(255,255,255,0.95)}
.contact-card--primary a{color:rgba(255,255,255,0.98);text-decoration:underline}
.contact-card--primary .btn{background:rgba(255,255,255,0.95);color:var(--primary);border:none;box-shadow:none}
.contact-card--primary .btn.primary{background:#fff;color:var(--primary)}

@media (max-width:800px){
  /* stack contact cards on small screens for better flow */
  .contact-grid{grid-template-columns:1fr}
}

/* Map block styling to visually connect with contact card */
.map{margin-top:0.6rem}
.map .text-bleed{padding-top:0.6rem;padding-bottom:0.6rem}
.map-embed{margin-top:0.6rem}
.map-embed iframe{width:100%;height:420px;border:0;border-radius:10px;box-shadow:0 12px 30px rgba(17,17,17,0.08);display:block}

@media (max-width:900px){
  .map-embed iframe{height:360px}
}
@media (max-width:480px){
  .map-embed iframe{height:240px;border-radius:6px}
}
.contact-form label{display:block;margin-bottom:0.6rem;font-size:0.95rem}
.contact-form input,.contact-form textarea{width:100%;padding:0.6rem;border:1px solid #ddd;border-radius:4px}

.map-embed iframe{width:100%;height:320px;border-radius:6px}

.site-footer{background:var(--bg-alt-2);border-top:1px solid var(--band-sep);padding:1rem 0;margin-top:2rem}
.footer-inner{display:grid;grid-template-columns:1fr auto;align-items:start;gap:1rem}

/* Footer columns on larger screens: logo/contact | quick links | small print */
@media (min-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr auto}
}

.site-footer nav[aria-label="Voettekst navigatie"]{display:flex;flex-direction:column;gap:0.35rem}
.site-footer p{margin:0}

/* footer columns */
.footer-col{padding:0.2rem 0}
.footer-col h4{margin:0 0 0.35rem;font-size:0.95rem;color:var(--text)}
.site-footer .footer-col p{color:var(--muted);margin:0}
.site-footer .footer-col a{color:var(--primary);text-decoration:none}

@media (max-width:800px){
  .about-grid,.info-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .nav-list{display:none;flex-direction:column;background:#fff;position:absolute;right:0;top:100%;padding:0.6rem;border:1px solid #eee;border-radius:6px}
  .nav-toggle{display:inline-block;background:transparent;border:none;padding:0.4rem 0.6rem}

  /* If the header itself uses the dark variant but the mobile nav drops down on a white background,
     force the nav links to a readable dark color and keep the dropdown background white. */
  .site-header.dark .nav-list{background:#fff}
  .site-header.dark .nav-list a{color:var(--text)}
}

@media (max-width:480px){
  .hero h1{font-size:1.6rem}
  .grid-3 img{height:140px}
  .single-gallery img{height:200px;max-width:100%}
  .top-strip-inner{flex-direction:column;align-items:flex-start}
  .top-strip .top-right{text-align:left}
  .services-grid{grid-template-columns:1fr}
}

/* Header variant: dark header with white logo and red search input */
.site-header.dark{background:var(--primary);border-bottom:1px solid rgba(255,255,255,0.08)}
.site-header.dark .logo{color:#fff}
.site-header.dark .nav-list a{color:#fff}
.site-header.dark .nav-toggle{color:#fff}

/* Modern search styling - pill input with left icon and right CTA button */
.search-container{display:flex;align-items:center;gap:0.6rem}
.search-wrapper{position:relative;display:flex;align-items:center}
.search-input{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  border:1px solid rgba(17,17,17,0.06);
  padding:0.6rem 1.1rem 0.6rem 3.2rem; /* space for left icon */
  border-radius:999px;
  width:260px;max-width:34vw;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
  color:var(--text);box-shadow:0 6px 18px rgba(17,17,17,0.06);transition:box-shadow .18s ease, transform .12s ease, border-color .12s ease
}
.search-input::placeholder{color:rgba(34,34,34,0.45)}
.search-input:focus{outline:none;box-shadow:0 14px 40px rgba(17,17,17,0.08);border-color:rgba(139,30,45,0.9);transform:translateY(-1px)}

/* left icon inside the input (SVG data URI) */
.search-wrapper::before{content:'';position:absolute;left:12px;width:18px;height:18px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M21 21l-4.35-4.35' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/><circle cx='11' cy='11' r='6' stroke='%23333' stroke-width='1.6' fill='none'/></svg>");background-repeat:no-repeat;background-position:center;opacity:0.95}

/* right button to submit or clear search */
.search-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:linear-gradient(90deg,var(--primary),#6f1520);color:#fff;padding:0.45rem 0.75rem;border-radius:999px;cursor:pointer;box-shadow:0 8px 20px rgba(139,30,45,0.12);transition:transform .12s ease, box-shadow .12s ease}
.search-btn:active{transform:translateY(1px)}

@media (max-width:800px){
  .search-input{width:160px}
}

/* Ensure mobile dropdown links are readable when header uses .dark (override placed after the dark header rules) */
@media (max-width:800px){
  .site-header.dark .nav-list{background:#fff}
  .site-header.dark .nav-list a{color:var(--text)}
}

@media (max-width:480px){
  /* make the search input full-width, rounded and easily tappable on phones */
  .search-input{width:100%;max-width:none;border-radius:999px;padding:0.65rem 0.9rem;background:#fff;border:1px solid rgba(0,0,0,0.06)}

  /* ensure header stacks neatly and the search occupies a full row */
  .site-header .header-inner{flex-direction:column;align-items:stretch;gap:0.5rem}
  .site-header .search-container{width:100%;padding:0.25rem 0}

  /* keep nav list clean when toggled */
  .nav-list{position:static;border:none;padding:0;box-shadow:none}
}

/* Debug banner to show current deployed commit - visible on all pages (non-destructive) */
/* Mobile navigation toggle removed — hamburger styles cleaned up */

/* mobile drawer/backdrop */
.nav-list{transition:transform .32s cubic-bezier(.2,.9,.2,1),opacity .18s ease}
.nav-list.hidden{transform:translateX(100%);opacity:0;pointer-events:none}
.nav-list.visible{transform:translateX(0);opacity:1;pointer-events:auto}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.35);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:75}
.nav-backdrop.visible{opacity:1;pointer-events:auto}

@media (max-width:800px){
  .nav-list{display:flex;flex-direction:column;background:#fff;position:fixed;right:0;top:0;height:100vh;padding:1.2rem;border-left:1px solid rgba(0,0,0,0.04);border-radius:0;min-width:220px;max-width:320px;width:80vw;box-shadow:0 14px 40px rgba(17,17,17,0.12);z-index:80;transform:translateX(100%)}
}