/* Four Wellness family layer.
   Shared by fourwellness (hub), Holohan Martial Arts, Fire Flow Yoga, Float Therapy and Still Sauna.
   Owns: the family tokens, the shared text face, the four-faces mark, the collective bar,
   the collective footer and the live-times list. Each brand site owns everything else. */

/* ---- faces: declared once, downloaded only where a site uses them ---- */
@font-face { font-family: "Manrope"; src: url("/family/fonts/manrope-300-800.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/family/fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/family/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/family/fonts/barlow-condensed-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/family/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/family/fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Urbanist"; src: url("/family/fonts/urbanist-200-700.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/family/fonts/bricolage-300-800.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Nothing You Could Do"; src: url("/family/fonts/nothing-you-could-do-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* the collective */
  --fw-olive: #3d3820;        /* from the existing FOUR WELLNESS wordmark */
  --fw-night: #1d1c14;        /* collective bar + footer ground */
  --fw-bone: #f3f0e7;
  --fw-ink: #1c1d19;
  --fw-stone: #6c6a5c;
  --fw-line: #3d3a2a;

  /* the four elements: deep = text-safe on bone, light = text-safe on night */
  --fw-earth: #1f4d3a;  --fw-earth-light: #bfca91;   /* Holohan Martial Arts */
  --fw-fire:  #a8401a;  --fw-fire-light:  #f6a26b;   /* Fire Flow Yoga */
  --fw-water: #14666f;  --fw-water-light: #8bd3db;   /* Float Therapy */
  --fw-air:   #57623f;  --fw-air-light:   #c4cda9;   /* Still Sauna */

  --fw-text: "Manrope", system-ui, sans-serif;
  --fw-ease: cubic-bezier(.23, 1, .32, 1);
  --fw-radius: 2px;
  --fw-bar-h: 40px;
}

/* ---- the mark: four faces of one roof ---- */
.fw-mark { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; flex: none; }
.fw-mark path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; transition: fill .2s var(--fw-ease); }
.fw-mark--solid path { fill: currentColor; stroke: none; }
.fw-mark [data-face="air"].is-on   { fill: var(--fw-air-light);   stroke: var(--fw-air-light); }
.fw-mark [data-face="water"].is-on { fill: var(--fw-water-light); stroke: var(--fw-water-light); }
.fw-mark [data-face="earth"].is-on { fill: var(--fw-earth-light); stroke: var(--fw-earth-light); }
.fw-mark [data-face="fire"].is-on  { fill: var(--fw-fire-light);  stroke: var(--fw-fire-light); }
.fw-mark--on-light [data-face="air"].is-on   { fill: var(--fw-air);   stroke: var(--fw-air); }
.fw-mark--on-light [data-face="water"].is-on { fill: var(--fw-water); stroke: var(--fw-water); }
.fw-mark--on-light [data-face="earth"].is-on { fill: var(--fw-earth); stroke: var(--fw-earth); }
.fw-mark--on-light [data-face="fire"].is-on  { fill: var(--fw-fire);  stroke: var(--fw-fire); }

/* ---- the collective bar: the same band on top of every site ---- */
.fw-bar { position: relative; z-index: 70; height: var(--fw-bar-h); background: var(--fw-night); color: var(--fw-bone); font: 600 11px/1 var(--fw-text); letter-spacing: .16em; text-transform: uppercase; }
.fw-bar__in { height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); display: flex; align-items: center; gap: 24px; }
.fw-bar a { color: inherit; text-decoration: none; }
.fw-bar__home { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.fw-bar__home .fw-mark { font-size: 17px; }
.fw-bar__home span { opacity: .92; }
.fw-bar__list { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.fw-bar__list a { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: var(--fw-radius); color: #cfcab8; transition: color .16s var(--fw-ease), background-color .16s var(--fw-ease); }
.fw-bar__list a::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--c, currentColor); flex: none; }
.fw-bar__list a[data-el="earth"] { --c: var(--fw-earth-light); }
.fw-bar__list a[data-el="fire"]  { --c: var(--fw-fire-light); }
.fw-bar__list a[data-el="water"] { --c: var(--fw-water-light); }
.fw-bar__list a[data-el="air"]   { --c: var(--fw-air-light); }
.fw-bar__list a[aria-current="page"] { color: var(--fw-bone); box-shadow: inset 0 -2px 0 var(--c); }
@media (hover: hover) and (pointer: fine) { .fw-bar__list a:hover { color: var(--fw-bone); background: #ffffff10; } }
.fw-bar a:focus-visible, .fw-bar button:focus-visible { outline: 2px solid var(--fw-bone); outline-offset: 2px; }
.fw-bar__more { display: none; }

@media (max-width: 860px) {
  .fw-bar__home span { display: none; }
  .fw-bar__more { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 32px; padding: 0 10px; border: 1px solid #ffffff2e; border-radius: var(--fw-radius); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .fw-bar__more::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--fw-ease); }
  .fw-bar__more[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
  .fw-bar__list { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 1px 0 0; background: #ffffff1a; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s var(--fw-ease), transform .2s var(--fw-ease), visibility 0s linear .2s; }
  .fw-bar.is-open .fw-bar__list { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .fw-bar__list a { height: 52px; padding: 0 16px; background: var(--fw-night); border-radius: 0; }
  .fw-bar__current { display: inline-flex; }
}
@media (min-width: 861px) { .fw-bar__current { display: none; } }

/* ---- the collective footer: four doors, one roof ---- */
.fw-foot { background: var(--fw-night); color: #d9d4c3; font: 400 15px/1.6 var(--fw-text); padding: clamp(56px, 8vw, 96px) 0 32px; }
.fw-foot a { color: var(--fw-bone); }
.fw-foot__in { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.fw-foot__head { display: flex; align-items: center; gap: 16px; margin: 0 0 40px; color: var(--fw-bone); }
.fw-foot__head .fw-mark { font-size: 40px; }
.fw-foot .fw-foot__head img { height: 56px; width: auto; max-width: calc(100% - 56px); object-fit: contain; filter: brightness(0) invert(.94) sepia(.15); }
.fw-foot__doors { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--fw-line); }
.fw-foot__door { position: relative; display: grid; align-content: start; gap: 8px; padding: 22px 24px 28px 0; text-decoration: none; color: inherit; }
.fw-foot__door + .fw-foot__door { padding-left: 24px; border-left: 1px solid var(--fw-line); }
.fw-foot__door::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--fw-ease); }
.fw-foot__door + .fw-foot__door::before { left: 0; }
.fw-foot__door[aria-current="page"]::before { transform: none; }
@media (hover: hover) and (pointer: fine) { a.fw-foot__door:hover::before { transform: none; } }
.fw-foot__door[data-el="earth"] { --c: var(--fw-earth-light); }
.fw-foot__door[data-el="fire"]  { --c: var(--fw-fire-light); }
.fw-foot__door[data-el="water"] { --c: var(--fw-water-light); }
.fw-foot__door[data-el="air"]   { --c: var(--fw-air-light); }
.fw-foot__el { font: 600 11px/1 var(--fw-text); letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.fw-foot__name { font: 600 19px/1.2 var(--fw-text); color: var(--fw-bone); }
.fw-foot__line { font-size: 14px; color: #b9b39f; max-width: 26ch; }
.fw-foot__door:focus-visible { outline: 2px solid var(--fw-bone); outline-offset: 4px; }
.fw-foot__base { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--fw-line); font-size: 13px; color: #a8a28e; }
.fw-foot__base a { text-underline-offset: 3px; }
.fw-foot__base address { font-style: normal; }
@media (max-width: 860px) {
  .fw-foot__doors { grid-template-columns: 1fr 1fr; }
  .fw-foot__door:nth-child(3) { padding-left: 0; border-left: 0; }
  .fw-foot__door:nth-child(n+3) { border-top: 1px solid var(--fw-line); }
}
@media (max-width: 420px) {
  .fw-foot__doors { grid-template-columns: 1fr; }
  .fw-foot__door, .fw-foot__door + .fw-foot__door { padding-left: 0; border-left: 0; }
  .fw-foot__door + .fw-foot__door { border-top: 1px solid var(--fw-line); }
}

/* ---- live times from ATND: base structure, each brand themes it ---- */
.fw-slots { --s-ink: currentColor; --s-soft: color-mix(in srgb, currentColor 66%, transparent); --s-line: color-mix(in srgb, currentColor 18%, transparent); --s-accent: currentColor; list-style: none; margin: 0; padding: 0; font-family: var(--fw-text); font-variant-numeric: tabular-nums; }
.fw-slots__day { margin: 24px 0 6px; font: 600 11px/1 var(--fw-text); letter-spacing: .18em; text-transform: uppercase; color: var(--s-soft); }
.fw-slots__day:first-child { margin-top: 0; }
.fw-slot { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 4px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--s-line); }
.fw-slot__time { font-weight: 600; }
.fw-slot__name { font-weight: 600; }
.fw-slot__meta { grid-column: 2; font-size: 13px; color: var(--s-soft); }
.fw-slot__go { grid-row: 1 / span 2; grid-column: 3; font: 600 13px/1 var(--fw-text); color: var(--s-accent); text-underline-offset: 3px; white-space: nowrap; }
.fw-slot.is-full .fw-slot__go, .fw-slot.is-closed .fw-slot__go { color: var(--s-soft); }
.fw-slots__note { margin-top: 12px; font-size: 13px; color: var(--s-soft); }
@media (max-width: 480px) { .fw-slot { grid-template-columns: 5.2em 1fr; } .fw-slot__go { grid-row: auto; grid-column: 2; justify-self: start; } }

/* ---- skip link, shared ---- */
.fw-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--fw-bone); color: var(--fw-ink); font: 600 14px/1 var(--fw-text); border-radius: var(--fw-radius); }
.fw-skip:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .fw-bar__list, .fw-foot__door::before, .fw-mark path { transition: none; }
}