/*!
 * Oyolloo Elements — J10 Header widget.
 *
 * Every rule is scoped to .oo-header. There is no element
 * selector and no :root block, so nothing here can reach the theme or any
 * other widget. The tokens below belong to this widget alone.
 */

.oo-header,
.oo-prog{
  --ooh-bar-h:80px;
  --ooh-maxw:1220px;
  --ooh-pad:clamp(18px,4.5vw,44px);
  --ooh-r:6px;

  --ooh-accent:#F7BE27;
  --ooh-red:#E3000E;
  --ooh-line:#2A2620;
  --ooh-stuck-bg:rgba(10,9,8,.88);
  /* solid, not translucent: on a WordPress page anything can sit behind
     the mobile panel, and bright theme headings read straight through a
     97% ground */
  --ooh-drawer-bg:#0B0A08;

  --ooh-on-dark:#F4F1E9;
  --ooh-on-dark-mut:#A9A296;

  --ooh-f-display:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --ooh-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --ooh-f-body:'Roboto','Roboto Fallback','Segoe UI',Helvetica,Arial,sans-serif;

  --ooh-ease:cubic-bezier(.22,.61,.36,1);
}

/* box-sizing is set on the widget's own subtree, never globally */
.oo-header,.oo-header *,.oo-header *::before,.oo-header *::after{ box-sizing:border-box; }

/* ================= reading progress ================= */
/* the page is long; the bar gives it a floor. Above the header, under the
   cart drawer. */
.oo-prog{
  position:fixed; top:0; left:0; z-index:95;
  height:3px; width:0; pointer-events:none;
  background:linear-gradient(90deg,var(--ooh-accent),var(--ooh-red));
  transition:width .1s linear;
}

/* ================= bar ================= */
.oo-header{
  position:relative; z-index:70;
  /* the theme runs the page at 300; the bar was built against a normal one */
  font-family:var(--ooh-f-body); font-weight:400;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:transform .42s var(--ooh-ease),
             background-color .4s var(--ooh-ease),
             border-color .4s var(--ooh-ease),
             backdrop-filter .4s var(--ooh-ease);
}
.oo-header--fixed{ position:fixed; inset:0 0 auto 0; }
.oo-header.oo-is-stuck{
  background:var(--ooh-stuck-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--ooh-line);
}
.oo-header.oo-is-hidden{ transform:translateY(-101%); }

/* with the mobile menu down the bar has a panel under it, not a photo, so it
   takes its solid ground even at the top of the page */
.oo-header.oo-nav-open{
  background:var(--ooh-stuck-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:transparent;
}
.oo-header.oo-nav-open .oo-header__link{ text-shadow:none; }

.oo-header__in{
  display:flex; align-items:center; gap:16px;
  height:var(--ooh-bar-h);
  max-width:var(--ooh-maxw);
  margin-inline:auto;
  padding-inline:var(--ooh-pad);
}

.oo-header__brand{ display:flex; align-items:center; flex-shrink:0; text-decoration:none; }
.oo-header__brand{ gap:11px; }
.oo-header__logo{
  width:48px; height:48px; max-width:none;
  border-radius:50%; display:block; object-fit:cover;
}
.oo-header__name{
  display:block; margin:0;
  font-family:var(--ooh-f-display); font-weight:700;
  font-size:1.28rem; line-height:1.05; letter-spacing:.012em;
  color:var(--ooh-on-dark);
}
.oo-header__tag{
  display:block;
  font-family:var(--ooh-f-head); font-weight:500;
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ooh-accent);
}

/* ================= navigation ================= */
.oo-header__nav{
  display:flex; align-items:center;
  gap:clamp(.85rem,1.7vw,1.9rem);
  margin-left:auto;
}
.oo-header__link{
  position:relative; white-space:nowrap; text-decoration:none;
  font-family:var(--ooh-f-head); font-weight:500; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:10px 0; color:rgba(244,241,233,.78);
  /* the bar floats over the banner before it condenses, so keep the labels
     legible against whatever photo sits behind them */
  text-shadow:0 1px 12px rgba(0,0,0,.6);
  transition:color .3s var(--ooh-ease), text-shadow .4s var(--ooh-ease);
}
.oo-header.oo-is-stuck .oo-header__link{ text-shadow:none; color:var(--ooh-on-dark-mut); }
.oo-header__link:hover,
.oo-header__link.oo-is-active,
.oo-header.oo-is-stuck .oo-header__link:hover,
.oo-header.oo-is-stuck .oo-header__link.oo-is-active{ color:var(--ooh-on-dark); }

/* hairline that wipes in from the leading edge */
.oo-header__link::after{
  content:""; position:absolute; left:0; bottom:4px;
  width:100%; height:1px; background:var(--ooh-accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ooh-ease);
}
.oo-header__link:hover::after,
.oo-header__link.oo-is-active::after{ transform:scaleX(1); transform-origin:left; }

/* ================= tools ================= */
.oo-header__tools{ display:flex; align-items:center; gap:9px; flex-shrink:0; }

/* the control carries its own ground so it stays legible over the photo */
.oo-header__burger{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid rgba(244,241,233,.26); border-radius:var(--ooh-r);
  background:rgba(10,9,8,.34);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  color:var(--ooh-on-dark); cursor:pointer; text-decoration:none;
  font-family:var(--ooh-f-head); font-weight:500; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase;
  transition:border-color .25s ease,color .25s ease;
}
.oo-header__burger:hover{ border-color:var(--ooh-accent); color:var(--ooh-accent); }

.oo-header__burger{ display:none; width:42px; height:42px; padding:0; }
.oo-header__burger span{ display:block; width:18px; height:2px; background:currentColor; position:relative; }
.oo-header__burger span::before,.oo-header__burger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px;
  background:currentColor; transition:transform .3s var(--ooh-ease);
}
.oo-header__burger span::before{ top:-6px; }
.oo-header__burger span::after{ top:6px; }
.oo-header__burger[aria-expanded="true"] span{ background:transparent; }
.oo-header__burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.oo-header__burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* ---- language switcher ----
   The links inside are GTranslate's, not ours: it injects
   <a class="glink" data-gt-lang="fr">FR</a> into this box from the browser
   (Settings > GTranslate, widget look "Language codes", wrapper selector
   .oo-lang). Only the ground and the segments are styled here, so the list of
   languages can never fall out of step with the plugin's own settings.
   The box is empty until that script runs — and stays empty on a site with no
   GTranslate at all — so :empty keeps it from drawing an outline round
   nothing. */
.oo-header .oo-lang{
  display:flex; overflow:hidden; border-radius:var(--ooh-r);
  border:1px solid rgba(244,241,233,.26);
  background:rgba(10,9,8,.34);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
.oo-header .oo-lang:empty{ display:none; }

.oo-header .oo-lang a.glink{
  display:block; margin:0; padding:8px 10px; border:0; background:none;
  font-family:var(--ooh-f-head); font-weight:500; font-size:.72rem;
  letter-spacing:.1em; line-height:1.4; white-space:nowrap;
  color:var(--ooh-on-dark-mut); text-decoration:none; cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.oo-header .oo-lang a.glink:hover{ color:var(--ooh-on-dark); }
/* GTranslate's own sheet marks the current language by bolding it. The design
   marks it with the accent, so the weight is restated rather than left to it. */
.oo-header .oo-lang a.glink.gt-current-lang{
  background:var(--ooh-accent); color:#211A05; font-weight:500;
}
/* French reads first whichever order the plugin happens to list languages in;
   anything added later falls in behind it. */
.oo-header .oo-lang a.glink{ order:2; }
.oo-header .oo-lang a.glink[data-gt-lang="fr"]{ order:1; }

.oo-header :focus-visible{ outline:3px solid var(--ooh-accent); outline-offset:2px; border-radius:2px; }

/* ================= responsive ================= */
/* the bar collapses when the navigation runs out of room, which is a width of
   its own rather than a device size */
@media (max-width:1140px){
  .oo-header__txt{ display:none; }
  .oo-header__nav{ gap:1rem; }
  .oo-header__link{ font-size:.74rem; }
}
@media (max-width:960px){
  .oo-header__burger{ display:inline-flex; }
  .oo-header__tools{ margin-left:auto; }
  .oo-header__nav{
    position:fixed; inset:var(--ooh-bar-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ooh-drawer-bg);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--ooh-line);
    padding:6px var(--ooh-pad) 20px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;
    max-height:calc(100vh - var(--ooh-bar-h)); overflow-y:auto; z-index:2;
  }
  .oo-header__nav.oo-is-open{ opacity:1; transform:none; pointer-events:auto; }
  .oo-header__link{
    padding:14px 0; border-bottom:1px solid var(--ooh-line);
    font-size:.95rem; letter-spacing:.08em;
  }
  .oo-header__link::after{ display:none; }
}
/* the burger, the wordmark and the switcher share a very short row here */
@media (max-width:420px){
  .oo-header .oo-lang a.glink{ padding:7px 8px; font-size:.68rem; }
}

@media (prefers-reduced-motion:reduce){
  .oo-header,.oo-header__link,.oo-header__link::after{ transition-duration:.001ms; }
  .oo-header.oo-is-hidden{ transform:none; }
}

/* ================= theme hardening =================
   A WordPress theme styles bare elements — a, h1-h6, button, img. Those rules
   beat inheritance however low their specificity, so anything a theme is
   likely to set is declared here rather than left to inherit. Found on this
   site: styles.css colours every heading brown and gives every button a margin
   the bar does not want. */
.oo-header__brand{ color:inherit; text-decoration:none; }
.oo-header__burger{ margin:0; font-family:var(--ooh-f-head); }
.oo-header__logo{ border:0; box-shadow:none; }

/* In the editor the bar stays in the flow, otherwise it covers the canvas and
   cannot be selected. The frontend is unaffected. */
body.elementor-editor-active .oo-header--fixed{ position:relative; }