/*
Theme Name: SYLBRAY — Astra Child
Description: Identité SYLBRAY, navigation commune et Home V2 locale.
Author: SYLBRAY
Template: astra
Version: 0.4.0
Text Domain: sylbray-child
*/

:root {
  --sy-wood: #8B3F24;
  --sy-sand: #D8B894;
  --sy-beige: #EADCC8;
  --sy-ivory: #F8F4EC;
  --sy-ink: #4A433C;
  --sy-white: #FFFFFF;
  --sy-line: rgba(139, 63, 36, .18);
  --sy-shadow-soft: rgba(74, 67, 60, .08);
  --sy-shadow-media: rgba(74, 67, 60, .14);
  --sy-shadow-note: rgba(74, 67, 60, .13);
  --sy-serif: 'Playfair Display', Georgia, serif;
  --sy-sans: 'DM Sans', Arial, sans-serif;
}

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/playfair-display-400.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/playfair-display-500.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/dm-sans-400.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/dm-sans-500.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/dm-sans-600.ttf') format('truetype'); }

/* Shared header only. Other pages retain their existing content and body styles. */
.sy-header, .sy-header * { box-sizing: border-box; }
.sy-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--sy-ivory);
  border-bottom: 1px solid var(--sy-line);
  font-family: var(--sy-sans);
  color: var(--sy-ink);
}
.admin-bar .sy-header { top: 32px; }
.sy-header.is-scrolled { box-shadow: 0 5px 24px var(--sy-shadow-soft); }
.sy-header__inner { max-width: 1384px; padding: 10px 40px; margin: auto; min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.sy-brand { display: flex; align-items: center; flex: 0 0 auto; gap: 22px; color: var(--sy-ink); text-decoration: none; }
/* Keep the original PNG and its displayed scale. Trim only blank source margins,
   with a safety inset around all painted pixels, including the wordmark base. */
.sy-logo { width: 151px; height: 91px; display: block; overflow: hidden; position: relative; flex: 0 0 auto; }
.sy-logo img { display: block; position: absolute; width: 180px; max-width: none; height: auto; object-fit: contain; left: -14.55px; top: -44.85px; }
.sy-brand__tagline { border-left: 1px solid var(--sy-line); padding-left: 22px; max-width: 175px; font: 400 14px/1.45 var(--sy-serif); color: var(--sy-ink); }
.sy-nav ul { display: flex; align-items: center; gap: clamp(17px, 2vw, 29px); list-style: none; margin: 0; padding: 0; }
.sy-nav a { color: var(--sy-ink); font: 500 15px/1.4 var(--sy-sans); text-decoration: none; padding: 18px 0; display: block; position: relative; white-space: nowrap; }
.sy-nav a::after { content: ''; height: 2px; background: var(--sy-wood); position: absolute; bottom: 9px; left: 0; right: 0; transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
.sy-nav a:hover, .sy-nav a[aria-current] { color: var(--sy-wood); }
.sy-nav a:hover::after, .sy-nav a[aria-current]::after { transform: scaleX(1); }
.sy-nav li:last-child a { padding: 12px 18px; border: 1px solid var(--sy-line); border-radius: 4px; }
.sy-nav li:last-child a::after { display: none; }
.sy-header a:focus-visible, .sy-header button:focus-visible, .sy-home a:focus-visible { outline: 2px solid var(--sy-wood); outline-offset: 5px; }
.sy-menu-toggle { display: none; border: 1px solid var(--sy-line); border-radius: 4px; background: var(--sy-ivory); color: var(--sy-ink); padding: 11px 14px; gap: 9px; align-items: center; font: 500 14px/1 var(--sy-sans); }
.sy-menu-toggle:hover, .sy-menu-toggle:focus { background: var(--sy-beige); color: var(--sy-wood); }
.sy-menu-toggle svg { width: 20px; height: 20px; }

@media (max-width: 1199px) {
  .sy-brand__tagline { display: none; }
  .sy-header__inner { padding-left: 28px; padding-right: 28px; gap: 22px; }
  .sy-nav ul { gap: 22px; }
}
@media (max-width: 1023px) {
  .sy-header__inner { min-height: 88px; padding: 6px 24px; flex-wrap: wrap; gap: 0; }
  .sy-logo { width: 129px; height: 79px; }
  .sy-logo img { width: 154px; left: -12.55px; top: -37.8px; }
  .sy-brand__tagline { display: block; padding-left: 16px; max-width: 162px; font-size: 13px; }
  .sy-brand { gap: 16px; }
  .sy-menu-toggle { display: inline-flex; }
  .sy-nav { width: 100%; border-top: 1px solid var(--sy-line); padding: 8px 0 18px; max-height: calc(100dvh - 100px); overflow-y: auto; }
  .sy-header.sy-js .sy-nav:not(.is-open) { display: none; }
  .sy-nav ul { display: block; }
  .sy-nav a { font-size: 16px; padding: 13px 12px; }
  .sy-nav a::after { display: none; }
  .sy-nav a[aria-current] { background: var(--sy-ivory); border-left: 2px solid var(--sy-wood); }
  .sy-nav li:last-child a { margin-top: 8px; padding: 13px 12px; }
}
@media (max-width: 480px) {
  .sy-header__inner { padding-left: 18px; padding-right: 18px; }
  .sy-brand__tagline { max-width: 126px; font-size: 11px; padding-left: 12px; }
  .sy-brand { gap: 10px; }
  .sy-logo { width: 110px; height: 69px; }
  .sy-logo img { width: 130px; left: -10.05px; top: -30.75px; }
  .sy-header__inner { min-height: 76px; }
  .sy-menu-toggle { padding: 10px; gap: 6px; }
}
@media (max-width: 360px) { .sy-brand__tagline { display: none; } }
@media (max-width: 782px) { .admin-bar .sy-header { top: 46px; } }
@media (prefers-reduced-motion: reduce) { .sy-nav a::after { transition: none; } }