/*
Theme Name: Photo & Events
Theme URI: https://example.com/
Author: Photo en Events Gertjan
Author URI: https://www.photoenevents.nl
Description: Strak, lichtgewicht WordPress theme voor fotografie & services met 6 beheerbare diensttegels.
Version: 1.1.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: photoenevents-clean
Tags: custom-logo, custom-menu, featured-images, one-column, two-columns, block-styles
*/

*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
:root{
  --pe-accent: #ff7a00;
  --pe-bg: #ffffff;
  --pe-surface: #f4f5f7;
  --pe-text: #111827;
  --pe-muted: #6b7280;
  --pe-border: rgba(17,24,39,.10);
  --pe-radius: 14px;
  --pe-max: 1180px;
  --pe-shadow: 0 10px 24px rgba(0,0,0,.08);
}

body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--pe-text);
  background: var(--pe-bg);
  line-height: 1.55;
}

.container{width:min(100% - 32px, var(--pe-max)); margin-inline:auto}
.section{padding:56px 0}
.section--tight{padding:34px 0}
.surface{background: var(--pe-surface)}
.card{
  background:#fff;border:1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  box-shadow: var(--pe-shadow);
  overflow:hidden;
}
.card--flat{box-shadow:none}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr; }
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
@media (min-width: 760px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:999px;
  border:1px solid var(--pe-border); background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:12px;
  border:1px solid var(--pe-border);
  background:#fff;color:var(--pe-text);
  font-weight:650;
}
.btn:hover{text-decoration:none;transform: translateY(-1px)}
.btn--accent{background: var(--pe-accent); color:#fff; border-color: transparent}
.btn--ghost{background: rgba(255,255,255,.10); color:#fff; border-color: rgba(255,255,255,.25)}
.btn--small{padding:10px 12px;border-radius:11px;font-weight:650}

.site-header{
  position:sticky;top:0;z-index:50;
  background: rgba(255,255,255,.92);
  border-bottom:1px solid var(--pe-border);
  backdrop-filter: blur(10px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .site-title{font-size:18px;margin:0}
.brand img{width:auto;height:34px}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--pe-border);background:#fff}
.primary-nav{display:none}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;align-items:center}
.primary-nav a{padding:10px 10px;border-radius:10px;font-weight:650;color:var(--pe-text)}
.primary-nav a:hover{background: var(--pe-surface);text-decoration:none}
.header-cta{display:none;gap:10px;align-items:center}
@media (min-width: 920px){
  .nav-toggle{display:none}
  .primary-nav{display:block}
  .header-cta{display:flex}
}
.mobile-drawer{
  display:none;border-top:1px solid var(--pe-border);padding:10px 0;background:#fff
}
.mobile-drawer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mobile-drawer a{display:block;padding:12px 12px;border-radius:12px;border:1px solid var(--pe-border)}
.mobile-drawer a:hover{text-decoration:none;background: var(--pe-surface)}
.mobile-drawer.is-open{display:block}

.hero{
  position:relative;color:#fff; min-height: 430px;
  display:grid; align-items:end;
  background:#0b1220;
}
.hero .hero-media{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter: saturate(1.05) contrast(1.02);
}
.hero .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.15) 100%);
}
.hero .hero-content{position:relative; padding: 58px 0}
.hero h1{font-size: clamp(30px, 4vw, 48px); line-height:1.05; margin:0 0 10px}
.hero p{margin:0 0 18px; color: rgba(255,255,255,.85); font-weight:550}
.hero .hero-side{
  margin-top:18px;display:flex;flex-wrap:wrap;gap:10px
}
.hero .hero-side a{color:#fff;text-decoration:none}
.hero .hero-side a:hover{text-decoration:underline}
.hero .hero-side .pill{border-color: rgba(255,255,255,.25); background: rgba(0,0,0,.25)}

.tile{
  position:relative; min-height: 180px;
  display:grid; align-content:end;
  border-radius: var(--pe-radius);
  overflow:hidden;
  border:1px solid var(--pe-border);
  box-shadow: var(--pe-shadow);
  background:#111827;
}
.tile .tile-media{position:absolute; inset:0; background-size:cover; background-position:center; filter: saturate(1.05)}
.tile .tile-overlay{position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.60) 100%)}
.tile .tile-body{position:relative;padding:16px}
.tile h3{margin:0 0 8px; font-size: 22px; color:#fff}
.tile p{margin:0 0 12px; color: rgba(255,255,255,.86); max-width: 44ch}

.site-footer{
  border-top:1px solid var(--pe-border);
  background:#0b1220;color:#fff;
}
.footer-inner{padding:28px 0;display:grid;gap:16px}
.footer-inner a{color:#fff;text-decoration:underline}
.footer-meta{color: rgba(255,255,255,.72); font-size: 14px}

.entry-header{padding:28px 0 10px}
.entry-title{margin:0;font-size: clamp(26px, 3vw, 36px);line-height:1.15}
.entry-content{padding:12px 0 44px}
.entry-content p{max-width: 70ch}
.wp-block-image img{border-radius: var(--pe-radius)}

.wp-custom-logo .brand .site-title{display:none}
.brand img.custom-logo{height:28px;width:auto}
.custom-logo-link img.custom-logo{height:44px;width:auto;max-height:44px;max-width:420px}
@media (min-width: 920px){
  .custom-logo-link img.custom-logo{height:24px;max-height:24px}
}

.primary-nav .page_item a,
.primary-nav .menu-item a{
  padding:10px 10px;border-radius:10px;font-weight:650;color:var(--pe-text);display:inline-block;
}
.primary-nav .page_item a:hover,
.primary-nav .menu-item a:hover{
  background: var(--pe-surface);text-decoration:none;
}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;align-items:center}
.site-header{z-index:9999; position:sticky}
.hero .hero-media,
.hero .hero-overlay{pointer-events:none}
.primary-nav li{position:relative}
.primary-nav ul ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width: 240px;
  padding:8px;
  margin:8px 0 0;
  border-radius: 14px;
  background:#fff;
  border:1px solid var(--pe-border);
  box-shadow: var(--pe-shadow);
  z-index: 10000;
}
.primary-nav ul ul li{width:100%}
.primary-nav ul ul a{
  display:block;
  padding:10px 12px;
  border-radius: 12px;
}
.primary-nav li:hover > ul{display:block}
.primary-nav .menu-item-has-children > a:after{
  content:"▾";
  font-size: 12px;
  margin-left: 8px;
  color: var(--pe-muted);
}
@media (max-width: 919px){
  .mobile-drawer ul ul{display:block; position:static; box-shadow:none; border:none; padding:0; margin:0 0 0 10px}
  .mobile-drawer ul ul a{border:1px solid var(--pe-border); margin-top:6px}
  .primary-nav .menu-item-has-children > a:after{content:""}
}

.services-section-title{
  margin:0 0 16px;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 850;
  color: var(--pe-text);
}
.services-row-2-wrap,
.services-row-3-wrap{margin-top: 26px}
.services-divider-wrap{margin: 24px 0 16px}
.services-divider{
  width: 100%;
  height: 4px;
  background: #0b1220;
  border-radius: 999px;
}
.services-grid{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media (min-width: 900px){
  .services-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
.service-tile{
  min-height: 220px;
  text-decoration:none !important;
}
.service-tile:hover .tile-body{transform: translateY(-2px)}
.service-tile .tile-body{transition: transform .18s ease}
.home-copy-box .box-pad{padding: 22px}
.home-copy-box h2{margin:0 0 10px;font-size: 22px;line-height:1.15}
.home-copy-box p{margin:0 0 18px;color:var(--pe-muted)}
.footer-grid{align-items:start}
.footer-address{margin-top:12px;color:rgba(255,255,255,.82)}
.footer-tagline{color:rgba(255,255,255,.82);font-weight:650}
.footer-contact-title{margin:0 0 8px;font-size:28px;line-height:1.1}
.footer-contact-html h3,
.footer-contact-html h4,
.footer-contact-html p{margin:0 0 10px}
.footer-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:16px;
}