@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Nunito:wght@400;600&display=swap');

:root{
  --menu-idle: #43BB5B;
  --menu-hover: #2E77FF;
  --menu-active: #E30613;

  --submenu-hover-bg: rgba(191,229,255,0.95);

  /* Overlay v5 knobs (Option B) */
  --maxw: 1200px;
  --gap: 18px;
  --spacing-x: 129px; /* #4A = #4B symmetry control */
  --g1: 14px;         /* #4C / G1 (adjustable for best look) */

  --radius: 14px;
  --shadow: 0 10px 24px rgba(0,0,0,.10);

  --text: #1b1b1b;
  --muted: #4a4a4a;
  --sidebar-text-active: var(--menu-active);

  --content-bg: rgba(255,255,255,.92);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.45;
}
a{color:inherit}
img{max-width:100%; height:auto}

/* Header / banner zone (future slider-ready) */
.site-header{position:relative}
.banner{
  height: 520px; /* tune after first WP preview */
  background: transparent;
}
.menu-band{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:150px;
  background-image:url("../images/web-site_main-menu_background_v041212.png");
  background-size:cover;
  background-position:center;
}

/* Leaf menu (two-rail, positioned by JS) */
.primary-nav{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:240px;
  pointer-events:none;
}
.primary-nav .menu{
  list-style:none;
  margin:0;
  padding:0 24px;
  height:100%;
  position:relative;
}
.primary-nav .menu > li{position:absolute; pointer-events:auto;}
.leaf{
  position:relative;
  display:block;
  width:190px; height:136px;
  text-decoration:none;
  background:transparent;
}
.leaf img{width:100%; height:100%; object-fit:contain; display:block;}
.leaf__label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:18px 18px 26px;
  text-align:center;
  font-family:'Fredoka', system-ui, sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:1.05;
  color:#fff;
  text-shadow:0 2px 3px rgba(0,0,0,.35);
  pointer-events:none;
}
.primary-nav .current-menu-item > a{filter: drop-shadow(0 14px 12px rgba(0,0,0,.22));}
.primary-nav .menu > li > a:hover{filter: drop-shadow(0 10px 10px rgba(0,0,0,.18));}

/* Submenu */
.primary-nav .sub-menu{
  position:absolute;
  top:120px;
  left:20px;
  min-width:280px;
  padding:10px;
  border-radius:12px;
  background: rgba(191,229,255,.75);
  box-shadow: var(--shadow);
  display:none;
}
.primary-nav li:hover > .sub-menu{display:block;}
.primary-nav .sub-menu{list-style:none; margin:0;}
.primary-nav .sub-menu a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
}
.primary-nav .sub-menu a:hover{background: var(--submenu-hover-bg);}
.primary-nav .sub-menu img{opacity:.78;}
.primary-nav .sub-menu a:hover img{opacity:1;}

/* Body grid */
.site-main{
  width:min(var(--maxw), calc(100% - 32px));
  margin:0 auto;
  padding-top: var(--g1);
}
.body-grid{
  display:grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: var(--gap);
  align-items:start;
}

/* Sidebar unified background entity (white + gradient) */
.sidebar{
  position:relative;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height:520px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.88) 58%,
    rgba(253,232,202,.92) 100%);
}
.sidebar::after{
  content:"";
  position:absolute; top:0; bottom:0; right:0;
  width:4px;
  background: rgba(110,75,30,.45); /* delimiter #2 */
}
.sidebar__content{padding:16px;}
.sidebar__title{
  margin:0 0 12px 0;
  font-family:'Fredoka', system-ui, sans-serif;
  font-size:28px;
}
.sidebar .menu, .sidebar ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.sidebar a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  color:var(--muted);
}
.sidebar .current-menu-item > a{color:var(--sidebar-text-active); font-weight:700;}
.sidebar__leaf{width:28px; height:22px; opacity:1;}

/* Content column with flat white text box (#6) */
.content{
  border-radius:var(--radius);
  background: var(--content-bg);
  box-shadow: var(--shadow);
  padding:18px 18px 26px;
  min-height:520px;
}
.page-title{
  font-family:'Fredoka', system-ui, sans-serif;
  font-size:42px;
  margin:0 0 10px 0;
}
.entry-content{
  margin-top:16px;
  background:#fff;
  border-radius:10px;
  padding:18px;
}

/* Footer */
.site-footer{margin-top:26px; padding:18px 0 26px;}
.footer__img{
  height:120px;
  background-image:url("../images/fin_de_page.png");
  background-size:cover;
  background-position:center;
}
.footer__text{text-align:center; margin-top:10px; color:var(--muted);}

/* Responsive */
@media (max-width: 980px){
  .body-grid{grid-template-columns:1fr;}
  .primary-nav{position:relative; height:auto; pointer-events:auto;}
  .primary-nav .menu > li{position:relative; display:inline-block; margin:6px;}
  .banner{height:auto}
  .menu-band{position:relative}
}