/*
Theme Name: Atelier Brethonière
Theme URI: https://www.moniquehamar.nl
Author: Atelier Brethonière (implemented from Claude Design handoff)
Author URI: https://www.moniquehamar.nl
Description: Immersive dark-green portfolio theme for artist Monique Hamar de la Brethonière — a scroll-through 3D gallery homepage (three.js) plus artwork, category, about, workshops and contact pages. Kunst met Indische roots. Content (artworks, categories, reviews, FAQ, contact details) is fully editable from the WordPress admin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atelier-brethoniere
Tags: portfolio, art, gallery, three-js, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Design tokens (from the Claude Design prototype)
   ========================================================================== */
:root{
  --ab-bg:#0b2a1e;          /* page dark green */
  --ab-bg-3d:#0a1a13;       /* 3D canvas backdrop */
  --ab-panel:#11402c;       /* cards / panels */
  --ab-panel-2:#0e3423;     /* alt section */
  --ab-cream:#f2e8d5;       /* light detail panel */
  --ab-ink:#14352a;         /* text on cream */
  --ab-green:#42b35e;       /* CTA solid green */
  --ab-green-hover:#3aa052;
  --ab-green-deep:#1c6b43;
  --ab-green-deep-hover:#155635;
  --ab-accent:#a9d18e;      /* light-green accent */
  --ab-gold:#d9a441;
  --ab-gold-soft:#e9cf9a;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;}
/* The 3D homepage drives scrolling itself (rAF tween + Lenis); native
   smooth-scroll fights it and causes laggy, multi-painting jumps — turn it
   off there so the gallery's own easing is authoritative. */
html:has(body.ab-front){scroll-behavior:auto;}
html,body{margin:0;padding:0;background:var(--ab-bg);}
body{font-family:'Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#fff;}
img{max-width:100%;}
a{color:inherit;}

/* The 3D homepage kills native scroll snapping / overscroll chaining */
body.ab-front{background:var(--ab-bg-3d);overscroll-behavior:none;}

/* Editor prose inside designed panels — kill default <p> margins so the
   flex gaps in the layout do the spacing. */
.ab-prose > p{margin:0;}
.ab-prose strong{font-weight:500;color:#fff;}
.aw-panel .ab-artwork-content > p{margin:0;}

/* WordPress admin bar shouldn't cover the fixed nav (logged-in editors only) */
.admin-bar .ab-nav-bar,
.admin-bar .ab-gallery-nav{top:32px;}
@media (max-width:782px){
  .admin-bar .ab-nav-bar,
  .admin-bar .ab-gallery-nav{top:46px;}
}

/* ==========================================================================
   Keyframes (welcome blobs, grain, Ken-Burns, hints)
   ========================================================================== */
@keyframes pulseHint{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:.9;transform:translateY(5px)}}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-1.5%,1%)}40%{transform:translate(1%,-1.5%)}60%{transform:translate(-1%,1.5%)}80%{transform:translate(1.5%,-1%)}100%{transform:translate(0,0)}}
@keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-4%) scale(1.06)}}
@keyframes kenA{0%{transform:scale(1.015) translate(0,0)}100%{transform:scale(1.05) translate(-1%,-1%)}}
@keyframes kenB{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.055) translate(1%,1%)}}
@keyframes artIn{0%{opacity:0;transform:translateY(30px) scale(0.975)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ==========================================================================
   FAQ (native <details>)
   ========================================================================== */
summary::-webkit-details-marker{display:none}
.faq-plus{transition:transform .4s cubic-bezier(0.16,1,0.3,1)}
details[open] .faq-plus{transform:rotate(135deg);border-color:rgba(169,209,142,0.7)}

/* ==========================================================================
   Reveal-on-scroll base (JS toggles the revealed state)
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .aw-img{animation:none !important}
}

/* ==========================================================================
   Responsive grids (mirrors the per-page media queries in the prototype)
   ========================================================================== */
/* generic two/three column collapse used across inner pages */
@media (max-width:900px){
  .g-2col,.g-3col{grid-template-columns:1fr !important}
}

/* Artwork detail */
@media (max-width:900px){
  .aw-grid{grid-template-columns:1fr !important}
  .aw-panel{position:static !important}
}

/* Category grid */
@media (max-width:900px){ .cat-grid{grid-template-columns:1fr 1fr !important} }
@media (max-width:560px){ .cat-grid{grid-template-columns:1fr !important} .cat-chips{overflow-x:auto;flex-wrap:nowrap !important;padding-bottom:6px} }

/* Homepage sections */
@media (max-width:900px){
  .tech-grid{grid-template-columns:1fr 1fr !important;height:auto !important}
  .ws-grid{grid-template-columns:1fr !important;min-height:0 !important}
  .ws-img{min-height:320px}
  .faq-grid,.contact-grid{grid-template-columns:1fr !important}
  .faq-grid > div:first-child{position:static !important}
}
@media (max-width:560px){
  .tech-grid{grid-template-columns:1fr !important}
  .tech-mid{display:contents !important}
}

/* ==========================================================================
   Shared button
   ========================================================================== */
.ab-btn{display:inline-flex;align-items:center;gap:11px;padding:16px 34px;background:var(--ab-green);border-radius:16px;color:#fff;text-decoration:none;font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;letter-spacing:0.2px;box-shadow:0 8px 24px rgba(66,179,94,0.28);transition:background .35s ease,transform .35s ease;}
.ab-btn:hover{background:var(--ab-green-hover);transform:translateY(-2px);}

/* Screen-reader only */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}