/* Regis — Higher Everyday Living block. Phase 1 bones (Hype, 2026-09-16).
   Tier colour arrives as --helf-accent / --helf-ink on the section. */
.helf { --helf-accent: #42C1E1; --helf-ink: #0E6F86; --helf-tint: #d5f1f8; --helf-bg: #ecf9fc;
  background: var(--helf-bg);
  /* the_content() renders inside .grid-container.standard-content (max-width 1200), so the
     section breaks out to stay full-bleed. 50% resolves against the parent, 50vw against the
     viewport INCLUDING the scrollbar - helf-block.js measures that into --helf-sbw, without
     which Windows gets ~7px of horizontal scroll. Cancels to 0 when already full width. */
  margin-inline: calc(50% - 50vw + (var(--helf-sbw, 0px) / 2)); padding: 5rem 0; font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif; color: #333; }
/* Match the theme's ".grid-container.snippet" + ".grid-x.grid-padding-x" used by the
   section above: 1200px container with 10px gutters, a 50/50 split, 30px right pad on
   the text column and 10px left on the image column. That lines the text left edge and
   the image right edge up exactly with the block above — do not use a uniform gutter. */
.helf__inner { max-width: 1200px; margin: 0 auto; padding: 0 10px; }
.helf__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; }
.helf__copy { padding-right: 30px; }
/* The theme's .img-area image bleeds 10px into the container's right gutter
   (renders 854..1454, not 864..1444), so mirror that with a negative margin. */
.helf__media { margin-right: -10px; }
.helf__eyebrow { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--helf-ink); }
.helf__heading { margin: 0 0 1.25rem; font-family: Formata, "Helvetica Neue", Arial, sans-serif; font-size: 1.875rem; font-weight: 400; line-height: 1.2; color: #1c1c1c; }
.helf__text p, .helf__local { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.55; color: #333; }
.helf__text p + p { margin-top: 0; }
.helf__tagline { margin: 1.25rem 0 0; font-size: 1.125rem; font-weight: 600; color: var(--helf-ink); }
.helf__media img { display: block; width: 100%; height: auto; border-radius: 10px; }
.helf__media-placeholder { aspect-ratio: 4 / 3; border: 2px dashed #cfd6db; border-radius: 10px; display: grid; place-items: center; color: #7a848c; font-size: .875rem; text-align: center; padding: 1rem; background: #f6f8f9; }
.helf__expect { text-align: center; margin: 4rem auto 1.75rem; max-width: 60ch; }
.helf__expect-heading { margin: 0 0 .5rem; font-family: Formata, "Helvetica Neue", Arial, sans-serif; font-size: 1.5rem; font-weight: 400; color: #1c1c1c; }
.helf__expect-sub { margin: 0; font-size: 1rem; color: #5b6771; }

/* Tiles + panels share one grid. Panels span the full row and sort after the tiles on desktop. */
/* Column count comes from PHP as --helf-cols (inclusion count, capped at 4). NOT auto-fit:
   auto-fit sizes tracks by available width, so the open full-width panel occupied a 4th
   track that had been collapsing, shunting 3 tiles into a 4-up grid. */
.helf__grid { display: grid; grid-template-columns: repeat(var(--helf-cols, 3), minmax(0, 1fr)); gap: 1.25rem; }
/* Block wrappers so wpautop's paragraphs land between block tags (see helf.php). */
.helf__cell { order: 1; display: flex; }
.helf__close-wrap { position: absolute; top: 0; right: 0; }
.helf p:empty { display: none; }
.helf__tile { order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; text-align: left; width: 100%; min-height: 100%;
  padding: 1.5rem; background: #fff; border: 0; border-radius: 10px; cursor: pointer; font: inherit; color: inherit;
  transition: background-color .15s; }
.helf__tile:hover { background: var(--helf-tint); }
.helf__tile:focus-visible { outline: 3px solid var(--helf-ink); outline-offset: 2px; }
.helf__tile[aria-expanded="true"] { background: var(--helf-tint); }
/* Brochure icon on a tier-coloured disc. The SVG uses fill="currentColor", so the
   glyph inherits the colour set here. <i> is the numeric fallback. */
.helf__icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; background: var(--helf-accent); color: #fff; }
.helf__icon svg { display: block; width: 64%; height: 64%; }
.helf__icon i { font-style: normal; font-size: .8125rem; font-weight: 800; }
.helf__tile-title { font-family: Formata, "Helvetica Neue", Arial, sans-serif; font-size: 1.25rem; font-weight: 600; color: #1c1c1c; }
.helf__tile-blurb { font-size: 1rem; line-height: 1.5; color: #333; }
/* One clickable tile, the rest plain cards (Andrew, 2 Oct 2026). The clickable tile carries the
   tier outline and a solid pill button; it stays white when open (approved "white background"
   concept). Static cards keep the white ground and lose hover, pointer and link line. */
.helf__tile--static { cursor: default; }
.helf__tile--static:hover { background: #fff; }
.helf__tile--action { box-shadow: inset 0 0 0 2px var(--helf-accent); }
.helf__tile--action[aria-expanded="true"] { background: #fff; }
.helf__tile--action .helf__tile-blurb { margin-bottom: .75rem; }
.helf__tile-more { margin-top: auto; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.15rem; border-radius: 999px;
  background: var(--helf-ink); color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.2; transition: background-color .15s; }
.helf__tile--action:hover .helf__tile-more, .helf__tile--action:focus-visible .helf__tile-more { background: #1c1c1c; }
.helf__more-open { display: none; }
.helf__tile[aria-expanded="true"] .helf__more-closed { display: none; }
.helf__tile[aria-expanded="true"] .helf__more-open { display: inline; }
.helf__chev { width: .7rem; height: .7rem; flex: 0 0 auto; transition: transform .15s; }
.helf__tile[aria-expanded="true"] .helf__chev { transform: rotate(180deg); }
.helf__panel { order: 2; grid-column: 1 / -1; }
.helf__panel[hidden] { display: none; }
.helf__panel-inner { position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; padding: 2rem 3.5rem 2rem 2rem; border: 0; border-radius: 10px; background: #fff; }
.helf__panel-inner--no-media { grid-template-columns: 1fr; }
.helf__panel-title { margin: 0 0 .75rem; font-family: Formata, "Helvetica Neue", Arial, sans-serif; font-size: 1.375rem; font-weight: 600; color: #1c1c1c; }
.helf__panel-body p, .helf__panel-body li { font-size: 1.0625rem; line-height: 1.55; color: #333; }
/* The theme's ".content ul:not(...)" chain carries TWENTY :not() classes (specificity
   0,21,0) and sets margin-left plus padding-left:0 on every list inside .content.
   Scoped !important is the only sane way to beat it — do not try to out-specify it. */
/* The theme also kills native markers (li{list-style:none;position:relative}) and draws a
   4px dot with li::before at left:1px, relying on li{padding-left:20px} for clearance.
   So indent the LI (keeps the dot), never the UL, and never zero the li padding. */
.helf__panel-body ul { margin: .5rem 0 1rem !important; padding-left: 0 !important; }
.helf__panel-body li { margin: 0 0 .4rem !important; padding-left: 1.25rem !important; text-indent: 0; }
.helf__panel-body li::before { background-color: var(--helf-ink) !important; }
.helf__panel-media img { display: block; width: 100%; height: auto; border-radius: 8px; }
.helf__close { position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: #eef1f3; color: #333; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.helf__close:hover, .helf__close:focus-visible { background: var(--helf-accent); color: #fff; outline: none; }
.helf__menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: .25rem 0 1rem; }
.helf__menu h5, .helf__panel-body h5 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--helf-ink); }
.helf__menu ul { margin: 0 !important; padding-left: 0 !important; }
.helf__menu > div + div { margin-top: 0; }
/* Breakfast carries its "continental breakfast" note; drinks run the full width (Andrew's 2 Oct layout). */
.helf__menu-note { margin: .5rem 0 0 !important; font-size: .9375rem; line-height: 1.5; color: #5b6771; }
.helf__menu-wide { grid-column: 1 / -1; }
.helf__foot { margin-top: 2.5rem; text-align: center; }
.helf__value { margin: 0 0 1rem; font-family: Formata, "Helvetica Neue", Arial, sans-serif; font-size: 1.375rem; color: var(--helf-ink); }
.helf__cta { display: inline-block; padding: .9rem 1.75rem; border-radius: 999px; background: var(--helf-ink); color: #fff !important; font-weight: 600; text-decoration: none; min-height: 24px; }
.helf__cta:hover, .helf__cta:focus { background: #1c1c1c; color: #fff !important; }
.helf__terms { margin: 1.5rem auto 0; max-width: 70ch; font-size: .8125rem; line-height: 1.5; color: #6b7680; }

@media (max-width: 1023px) {
  .helf { padding: 3rem 0; }
  .helf__inner { padding: 0 20px; }
  .helf__intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .helf__copy { padding-right: 0; }
  .helf__media { margin-right: 0; }
  .helf__media { order: -1; }
  /* Accordion: single column, panel directly beneath its own tile. */
  .helf__grid { grid-template-columns: 1fr !important; gap: .75rem; }
  .helf__cell, .helf__tile, .helf__panel { order: 0; }
  .helf__tile { min-height: 0; padding: 1rem 1.25rem; }
  .helf__icon { width: 2.5rem; height: 2.5rem; }
  /* Blurbs stay visible: three of the four cards no longer open, so the blurb is all they say. */
  .helf__tile-blurb { display: block; }
  .helf__tile-more { margin-top: .25rem; }
  .helf__panel-inner { grid-template-columns: 1fr; padding: 1.25rem 1.25rem 1.5rem; }
  .helf__close { display: none; }
  .helf__menu { grid-template-columns: 1fr; gap: 1.1rem; }
  .helf__menu-wide { grid-column: auto; }
  .helf__panel-body li { padding-left: 1.1rem !important; }
  .helf__panel-title { font-size: 1.25rem; }
  .helf__heading { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .helf__tile { transition: none; } }
@media (forced-colors: active) { .helf__tile { border: 1px solid CanvasText; } }