/*!
 * Oyolloo Elements - J10 Footer widget.
 * Scoped to .oo-foot: no element selector, no :root, nothing leaks.
 */
.oo-foot{
  --oof-maxw:1220px;
  --oof-pad:clamp(18px,4.5vw,44px);
  --oof-r:6px;
  --oof-yellow:#F7BE27;
  --oof-yellow-dk:#E0A812;
  --oof-line:#2A2620;
  --oof-on-dark:#F4F1E9;
  --oof-on-dark-mut:#A9A296;
  --oof-f-display:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --oof-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --oof-f-body:'Roboto','Roboto Fallback','Segoe UI',Helvetica,Arial,sans-serif;

  position:relative;
  background:#0E0E0E; color:var(--oof-on-dark);
  font-family:var(--oof-f-body); font-size:16px; line-height:1.7; font-weight:400;
  padding:clamp(48px,6vw,78px) 0 30px;
}
.oo-foot,.oo-foot *,.oo-foot *::before,.oo-foot *::after{ box-sizing:border-box; }

/* a faint warm glow off the top edge keeps flat black from reading dead */
.oo-foot::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 78% at 50% 0%, rgba(247,190,39,.07), transparent 62%);
}
.oo-foot__in{
  position:relative; z-index:1;
  max-width:var(--oof-maxw); margin-inline:auto; padding-inline:var(--oof-pad);
}

/* ---- newsletter ---- */
.oo-foot__news{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid var(--oof-line);
}
@media (max-width:780px){ .oo-foot__news{ grid-template-columns:1fr; } }
.oo-foot__news-t{
  margin:0;
  font-family:var(--oof-f-display); font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.08;
  letter-spacing:.012em; text-transform:uppercase; color:var(--oof-on-dark);
}
.oo-foot__news-p{ margin:8px 0 0; color:var(--oof-on-dark-mut); font-size:.9rem; }
.oo-foot__news-form{ min-width:min(370px,100%); }
/* whatever the newsletter plugin prints, dress it in the house style */
.oo-foot__news-form input[type="email"],
.oo-foot__news-form input[type="text"]{
  width:100%; padding:14px 16px;
  background:transparent; border:1px solid var(--oof-line); border-radius:var(--oof-r);
  color:var(--oof-on-dark); font-family:var(--oof-f-body); font-size:.92rem;
}
.oo-foot__news-form input::placeholder{ color:var(--oof-on-dark-mut); }
.oo-foot__news-form input:focus{ outline:none; border-color:var(--oof-yellow); }
.oo-foot__news-form input[type="submit"],
.oo-foot__news-form button{
  margin-top:10px; padding:14px 30px; cursor:pointer;
  background:var(--oof-yellow); color:#211A05;
  border:0; border-radius:var(--oof-r);
  font-family:var(--oof-f-head); font-weight:600; font-size:.86rem;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background-color .2s ease;
}
.oo-foot__news-form input[type="submit"]:hover,
.oo-foot__news-form button:hover{ background:var(--oof-yellow-dk); }

/* The newsletter plugin stacks its field and its button. In a row this wide
   they belong side by side, sharing one edge the way the design has it. The
   selectors stay inside this widget's own block, so no other form the plugin
   prints elsewhere is touched. */
.oo-foot__news-form form{ display:flex; align-items:stretch; text-align:left; }
/* Descendant selectors, never `form > input`. Google Translate rebuilds the
   run of inline content it translates and wraps it in <font> elements, so on
   a translated page the fields are grandchildren of the form and every child
   combinator here stops matching — which handed the button back to the
   plugin's own width and clipped the label. Nothing but fields lives in this
   form, so reaching them by descent cannot over-match. */
/* the plugin sets its own margins from a two-class selector, so the reset has
   to name the element as well to outrank it */
.oo-foot__news-form form input,
.oo-foot__news-form form input[type="email"],
.oo-foot__news-form form input[type="submit"]{ margin:0; }
/* and the plugin pins its button to a width no label of ours fits in — let it
   take exactly the room its own text needs, in either language. overflow is
   restored because an input whose overflow is not visible loses its automatic
   minimum size, which is what let flex crush it in the first place. */
.oo-foot__news-form form input[type="submit"]{
  flex:0 0 auto; width:auto; min-width:auto;
  overflow:visible; white-space:nowrap;
}
/* the plugin also caps its field at 300px, which in a column leaves it short
   of the button beneath it and on a wide row stops it reaching the button
   beside it */
.oo-foot__news-form form input[type="email"],
.oo-foot__news-form form input[type="text"]{ flex:1 1 auto; min-width:0; max-width:100%; }
/* the <font> wrappers are not ours to style, but they must not become boxes
   of their own between the form and its fields */
.oo-foot__news-form form font{ display:contents; }
.oo-foot__news-form input[type="email"],
.oo-foot__news-form input[type="text"]{
  flex:1; min-width:0; border-right:0;
  border-radius:var(--oof-r) 0 0 var(--oof-r);
}
.oo-foot__news-form input[type="submit"],
.oo-foot__news-form button{ flex:none; border-radius:0 var(--oof-r) var(--oof-r) 0; }
/* the plugin's own privacy line and status message sit under the row */
.oo-foot__news-form .tnp-field-privacy,
.oo-foot__news-form .tnp-privacy-field{ margin-top:10px; font-size:.78rem; color:var(--oof-on-dark-mut); }
/* Stacked, the two are a column of one width. The plugin gives its field a
   width of its own, which in a column leaves it short of the button under it
   — so it is stated here rather than left to the flex line, which only
   governs the main axis and this one now runs the other way. */
@media (max-width:480px){
  .oo-foot__news-form form{ flex-direction:column; gap:10px; }
  .oo-foot__news-form form input[type="email"],
  .oo-foot__news-form form input[type="text"],
  .oo-foot__news-form form input[type="submit"]{ width:100%; }
  .oo-foot__news-form input[type="email"],
  .oo-foot__news-form input[type="text"]{ border-right:1px solid var(--oof-line); border-radius:var(--oof-r); }
  .oo-foot__news-form input[type="submit"],
  .oo-foot__news-form button{ border-radius:var(--oof-r); }
}

/* ---- columns ---- */
.oo-foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; }
@media (max-width:900px){ .oo-foot__grid{ grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:500px){ .oo-foot__grid{ grid-template-columns:1fr; } }

.oo-foot__logo{
  width:92px; height:92px; max-width:none; display:block;
  border:0; border-radius:50%; object-fit:cover;
  box-shadow:0 8px 26px -12px rgba(0,0,0,.9);
}
.oo-foot__tag{
  margin:14px 0 0;
  font-family:var(--oof-f-head); font-weight:500; font-size:.76rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--oof-yellow);
}
.oo-foot__addr{ margin:12px 0 0; color:var(--oof-on-dark-mut); font-size:.9rem; line-height:1.85; }
.oo-foot__addr a{ color:inherit; text-decoration:none; }
.oo-foot__addr a:hover{ color:var(--oof-yellow); }

.oo-foot__col-t{
  margin:0 0 16px;
  font-family:var(--oof-f-head); font-weight:600; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--oof-yellow);
}
.oo-foot__list{ margin:0; padding:0; list-style:none; }
.oo-foot__list li{ margin:0 0 9px; list-style:none; }
.oo-foot__list a{
  font-size:.9rem; color:var(--oof-on-dark); text-decoration:none; opacity:.8;
  transition:opacity .18s ease, color .18s ease;
}
.oo-foot__list a:hover{ opacity:1; color:var(--oof-yellow); }

/* ---- legal bar ---- */
.oo-foot__bar{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--oof-line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--oof-f-head); font-weight:400; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--oof-on-dark-mut);
}
.oo-foot__bar a{ color:inherit; text-decoration:none; }
.oo-foot__bar a:hover{ color:var(--oof-yellow); }

.oo-foot :focus-visible{ outline:3px solid var(--oof-yellow); outline-offset:2px; border-radius:2px; }

/* theme hardening: a theme styles bare h3/h4/p/ul/li/a, and those beat inheritance */
.oo-foot__news-t,.oo-foot__news-p,.oo-foot__tag,.oo-foot__addr,.oo-foot__col-t{ margin-block-end:0; }
.oo-foot__col-t{ margin-block-end:16px; }