/* WordPress-specific additions on top of the prototype stylesheet. */
body.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px; } }
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
img.nav-mark{ display:inline-block; height:22px; width:auto; vertical-align:-5px; margin-left:5px; }
.mobile-submenu img.nav-mark{ height:18px; vertical-align:-4px; margin-left:4px; }
.tag.tag-sage{ color:var(--sage, #7C8768); }
.tag.tag-terracotta{ color:var(--terracotta, #B6613C); }
.article-body ul, .article-body ol{ margin:0 0 22px 22px; font-weight:300; color:var(--ink-2); }
.article-body li{ margin-bottom:8px; }
.article-body img{ max-width:100%; height:auto; }
.article-body figure{ margin:32px 0; }
.article-body figcaption{ font-size:12.5px; color:var(--ink-2); margin-top:8px; }
.form-error{ color:#B6613C; font-size:13px; margin-top:10px; display:none; }
.form-error.show{ display:block; }
.newsletter-form .form-error{ width:100%; text-align:center; }
.legal-body h3{ font-family:var(--font-display); font-weight:500; font-size:19px; margin:32px 0 10px; }
.search-results-list{ display:grid; gap:22px; }
.search-result-item{ border-top:1px solid var(--line); padding-top:22px; }
.search-result-item h3{ font-size:22px; }
.search-result-item p{ margin-top:10px; color:var(--ink-2); font-weight:300; }

/* Header: no border in the transparent state; the hairline appears only when scrolled (drawn as inset shadow, no seam over the hero). */
.site-header{ border-bottom:0; background-clip:padding-box; }
.site-header.scrolled{ box-shadow:inset 0 -1px 0 var(--line); }

/* ===== Vector wordmark (template-parts/logo.php) — light animation, logo only ===== */
.lg{ display:block; height:49px; width:auto; overflow:visible; --lg-word:#EFE9DE; --lg-gold:#C9A66B; }
.brand .lg{ transition:height .4s var(--ease); animation:none; }
.site-header.scrolled .brand .lg{ height:43px; --lg-word:#1B1712; --lg-gold:#9C7C48; }
.site-footer .lg, .footer-brand .lg{ height:32px; margin-bottom:20px; --lg-word:#EFE9DE; --lg-gold:#C9A66B; }
.lg-rings{ stroke:var(--lg-gold); transition:stroke .4s var(--ease); }
.lg-word-1{ fill:var(--lg-word); transition:fill .4s var(--ease); }
.lg-word-2{ fill:var(--lg-gold); transition:fill .4s var(--ease); }
.lg-ring{ transform-box:fill-box; transform-origin:center; }
.lg-word{ transform-box:fill-box; transform-origin:left center; }
.brand--mark::before, .brand--mark .logo-shine{ display:none !important; }
.brand--mark:hover .lg{ animation:none; }

/* Intro (once per page load): each ring traces itself from 12 o'clock with a soft ease, the second ring
   settles into the interlock; MAISON then ORELISSE rise into place. ~1.9s in total, nothing snaps. */
.lg-anim .lg-ring{ stroke-dasharray:1; stroke-dashoffset:1; transform:rotate(-90deg); animation:lgDraw 1.5s cubic-bezier(.4,0,.15,1) .1s forwards; }
.lg-anim .lg-ring-2{ animation:lgDraw 1.5s cubic-bezier(.4,0,.15,1) .35s forwards, lgSettle 1.5s cubic-bezier(.22,.61,.36,1) .35s both; }
.lg-anim .lg-word{ opacity:0; transform:translateY(4px); animation:lgRise 1.1s cubic-bezier(.22,.61,.36,1) forwards; }
.lg-anim .lg-word-1{ animation-delay:.75s; }
.lg-anim .lg-word-2{ animation-delay:.95s; }
@keyframes lgDraw{ 0%{ stroke-dashoffset:1; opacity:.6; } 100%{ stroke-dashoffset:0; opacity:1; } }
@keyframes lgSettle{ 0%{ translate:-8px 0; } 100%{ translate:0 0; } }
@keyframes lgRise{ 0%{ opacity:0; transform:translateY(4px); } 100%{ opacity:1; transform:translateY(0); } }

/* Idle: after the intro the second ring keeps a slow, barely-there drift (12s cycle). */
.lg-anim .lg-ring-2{ animation-name:lgDraw, lgSettle, lgDrift; animation-duration:1.5s, 1.5s, 12s; animation-delay:.35s, .35s, 2.2s;
  animation-timing-function:cubic-bezier(.4,0,.15,1), cubic-bezier(.22,.61,.36,1), ease-in-out; animation-iteration-count:1, 1, infinite; animation-fill-mode:forwards, both, none; }
@keyframes lgDrift{ 0%,100%{ translate:0 0; } 50%{ translate:-1px .5px; } }

/* Footer: hold the mark hidden until main.js flips .lg-lazy → .lg-anim on scroll-in (only when JS is running). */
.js .lg-lazy:not(.lg-anim) .lg-ring{ stroke-dasharray:1; stroke-dashoffset:1; }
.js .lg-lazy:not(.lg-anim) .lg-word{ opacity:0; }

/* Hover: the rings ease apart by a hair and settle back. */
.lg-ring-1{ transition:translate .7s cubic-bezier(.22,.61,.36,1); }
.brand:hover .lg-ring-1, .footer-brand:hover .lg-ring-1{ translate:-1.5px 0; }
.brand:hover .lg-ring-2, .footer-brand:hover .lg-ring-2{ animation-play-state:paused; translate:1.5px 0; transition:translate .7s cubic-bezier(.22,.61,.36,1); }

/* Reduced motion is opt-in (Theme Options): everything settles instantly. */
html.reduce-motion .lg-anim .lg-ring, html.reduce-motion .lg-anim .lg-ring-2, html.reduce-motion .lg-anim .lg-word, html.reduce-motion .js .lg-lazy .lg-ring, html.reduce-motion .js .lg-lazy .lg-word{ animation:none; opacity:1; transform:none; translate:0 0; stroke-dashoffset:0; }

/* Anchored sections land below the fixed header. */
section[id]{ scroll-margin-top:76px; }

/* Scroll cue: a real control — click scrolls to the first section, fades out once the visitor has scrolled. */
button.scroll-cue{ background:none; border:0; padding:0; font:inherit; letter-spacing:3px; text-transform:uppercase; cursor:pointer; transition:opacity .5s var(--ease), color .3s var(--ease); }
button.scroll-cue:hover{ color:var(--ivory); }
button.scroll-cue:focus-visible{ outline:1px solid var(--gold-2); outline-offset:6px; }
.scroll-cue.is-hidden{ opacity:0; pointer-events:none; }
