/* Scoped styles: no changes to the site's other navs, lists or links. */
.tip-circle { --radius:clamp(102px, 29vw, 170px); --wine:#4d0601; --gold:#ba9245; --blue:#137eaa; position:relative; background:#f8f7ed; color:#333; padding:12px; font:16px/1.5 Arial,sans-serif; isolation:isolate; }
.tip-circle *, .tip-circle *::before, .tip-circle *::after { box-sizing:border-box; }
.tip-circle [hidden] { display:none !important; }
.tip-circle .tip-circle__stage { position:relative; max-width:640px; margin:0 auto; }
.tip-circle.is-ready .tip-circle__stage { min-height:440px; }
.tip-circle .tip-circle__toggle { position:absolute; left:50%; top:220px; transform:translate(-50%,-50%); width:7px; height:76px; padding:0; border:3px solid var(--gold); border-radius:50%; background:var(--wine); color:#fff; cursor:pointer; z-index:2; box-shadow:0 8px 24px #4d060133; }
.tip-circle__toggle span { display:block; font:300 48px/1 Arial,sans-serif; transition:transform .2s; }
.tip-circle.is-open .tip-circle__toggle span { transform:rotate(45deg); }
.tip-circle ul { list-style:none; padding:0; margin:0; }
.tip-circle li { margin:0; padding:0; font-size:16px; }
.tip-circle .tip-circle__items { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.tip-circle.is-ready .tip-circle__items { height:440px; }
.tip-circle.is-ready .tip-circle__items > li { position:absolute; left:50%; top:220px; transform:translate(-50%,-50%) translate(var(--x),var(--y)); }
.tip-circle .tip-circle__item { display:flex; align-items:center; justify-content:center; gap:4px; width:clamp(82px, 22vw, 112px); min-height:62px; padding:10px 8px; border:2px solid var(--gold); border-radius:32px; background:var(--wine); color:#fff; font:600 14px/1.3 Arial,sans-serif; text-align:center; text-decoration:none; overflow-wrap:anywhere; cursor:pointer; box-shadow:0 6px 18px #4d060118; }
.tip-circle .tip-circle__item:hover, .tip-circle .tip-circle__item[aria-expanded="true"] { background:var(--blue); color:#fff; }
.tip-circle :focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.tip-circle [aria-current="page"] { text-decoration:underline; text-underline-offset:4px; }
.tip-circle .tip-circle__panel { background:white; border:2px solid var(--gold); border-radius:12px; padding:18px; margin-bottom:12px; text-align:left; }
.tip-circle .tip-circle__panel strong { display:block; color:var(--wine); font-size:20px; }
.tip-circle .tip-circle__panel a { display:block; color:#155e7c; background:transparent; padding:9px; text-decoration:underline; }
.tip-circle .tip-circle__panel a:hover { background:#f8f7ed; color:var(--wine); }
.tip-circle .tip-circle__panel summary { padding:9px; color:var(--wine); cursor:pointer; }
.tip-circle .tip-circle__panel ul ul { padding-left:18px; border-left:2px solid var(--gold); }
/* Large menus use a readable grid rather than overlapping orbit buttons. */
.tip-circle.is-ready.is-many .tip-circle__items { height:auto; padding-top:290px; padding-bottom:24px; }
.tip-circle.is-ready.is-many .tip-circle__items > li { position:static; transform:none; }
@media (max-width:420px) {
  .tip-circle.is-ready.is-dense .tip-circle__items { height:auto; padding-top:290px; padding-bottom:24px; }
  .tip-circle.is-ready.is-dense .tip-circle__items > li { position:static; transform:none; }
}
@media (prefers-reduced-motion:reduce) { .tip-circle * { transition:none; } }

/* Banner uses the cropped image's real proportions. min-height keeps the round menu inside it. */
.tip-menu-hero { position:relative; display:flex; align-items:center; width:100%; aspect-ratio:2000 / 355; min-height:240px; background-color:#4d0601; background-image:var(--tip-menu-image); background-repeat:no-repeat; background-position:center; background-size:100% 100%; overflow:visible; z-index:5; }
.tip-menu-hero--crop { background-size:cover; }
.tip-menu-hero .tip-circle--overlay { flex:0 0 230px; margin-left:calc(14% - 115px); }
.tip-circle.tip-circle--overlay { --radius:78px; width:230px; max-width:100%; padding:0; background:transparent; }
.tip-circle--overlay.is-ready .tip-circle__stage { min-height:230px; }
.tip-circle--overlay .tip-circle__toggle { top:115px; width:48px; height:48px; }
.tip-circle--overlay .tip-circle__toggle span { font-size:32px; }
.tip-circle--overlay.is-ready .tip-circle__items { height:230px; }
.tip-circle--overlay.is-ready .tip-circle__items > li { top:115px; }
.tip-circle--overlay .tip-circle__item { width:76px; min-height:40px; padding:6px 5px; font-size:11px; box-shadow:0 3px 12px #0008; }
.tip-circle--overlay.is-ready .tip-circle__panels { position:absolute; top:220px; left:0; width:360px; max-width:90vw; z-index:3; }
.tip-circle--overlay.is-ready.is-many .tip-circle__items { height:auto; padding-top:150px; padding-bottom:12px; }
.tip-circle--overlay.is-ready.is-many .tip-circle__items > li { position:static; transform:none; }
.tip-circle--overlay.is-ready.is-many .tip-circle__panels { position:relative; top:auto; width:100%; }
@media (max-width:1100px) {
  .tip-menu-hero .tip-circle--overlay { margin-left:12px; }
}
@media (max-width:600px) {
  .tip-menu-hero { min-height:240px; align-items:center; justify-content:center; background-size:100% 100%; }
  .tip-menu-hero .tip-circle--overlay { margin:0; }
  .tip-circle--overlay.is-ready .tip-circle__panels { width:100%; }
}
@media (max-width:420px) {
  .tip-circle--overlay.is-ready.is-dense .tip-circle__items { height:auto; padding-top:150px; padding-bottom:12px; }
  .tip-circle--overlay.is-ready.is-dense .tip-circle__items > li { position:static; transform:none; }
  .tip-circle--overlay.is-ready.is-dense .tip-circle__panels { position:relative; top:auto; width:100%; }
}