/* ==========================================================================
   lc-beaches.css — the beaches vertical
   ==========================================================================

   ⛔ THIS FILE STYLES FOUR BLOCKS AND ONE FALLBACK. NOTHING ELSE.

   /beaches/ and every /beach/<slug>/ page are YOOtheme builder layouts, so the
   hero geometry, the grids, the headings, the cards and the reading column all
   come from the theme's global style settings and from the elements' own
   controls. That is the point of building them natively: the whole vertical can
   be restyled from one settings screen. An earlier version of this file was
   1,165 lines of hand-written layout, and every one of those lines was a rule
   the site owner could not reach.

   What is left is the markup the builder cannot draw, because it is computed:

     .lcb-dogs   the dog verdict, evaluated against the clock by lc-pets
     .lcb-cond   tide and surf, read from lc-conditions-agent through a cache
     .lcb-prov   where the operational facts were read, and when
     .lcb-eyebrow the town over a beach's name, when saying it adds anything

   plus the one thing a section prop cannot express: a beach with no photograph.

   ⭐ IF A RULE HERE IS ABOUT POSITION, WIDTH OR SPACING OF A PAGE ELEMENT, IT IS
   IN THE WRONG FILE. Set it in the builder, or in the theme's style settings.
   ========================================================================== */

.lcb-dogs,
.lcb-cond,
.lcb-tide,
.lcb-surf {
  /* Scoped deliberately to this vertical's own blocks. A global box-sizing reset
     is known on this site to render links wider than they were asked to be. */
  box-sizing: border-box;
}

.lcb-dogs,
.lcb-cond,
.lcb-prov,
.lcb-eyebrow {
  --lcb-ink:     var(--lc-ink, #2d2e33);
  --lcb-muted:   #6c6d74;
  --lcb-faint:   #8f9098;
  --lcb-line:    #e5e5e7;
  --lcb-serif:   'Playfair Display', 'PT Serif', Georgia, serif;
  --lcb-sans:    -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --lcb-ease:    var(--lc-ease, cubic-bezier(.22, .72, 0, 1));

  /* lc-pets owns these four. Restating the values rather than deriving them is
     the compromise: the stylesheets do not import each other, and a beach page
     showing a different green from the dog guide for the same verdict is worse
     than the duplication. */
  --lcb-good:    #3f6b4f;
  --lcb-ok:      #8a6a2f;
  --lcb-bad:     #96504a;
  --lcb-unknown: #6e6862;
}

/* --------------------------------------------------------------------------
   1. A beach with no photograph
   --------------------------------------------------------------------------

   The hero section binds its background to the beach's own photograph and the
   main menu is tucked over it. Twenty of the twenty-one records carry one;
   Bulls Island does not.

   ⛔ THE GROUND IS NOT SET HERE. The section carries a background colour as a
   real builder prop, so it is painted whether or not the binding resolves, and
   an editor can see and change it where they change everything else. That is
   the guard against the failure this vertical must never ship: a transparent
   header over nothing returns a 200 page with the logo and every navigation
   link invisible, and every check except looking at the page passes it.

   What IS here is the half of the problem a section prop cannot express. The
   section asks for 58vh, because a subject hero earns real height — the
   photograph is how a reader decides — and it stops short of the viewport so
   the first line below stays visible as a scroll cue. Height with no photograph
   in it is a large empty band that reads as a page that failed to load, so a
   photograph-less beach stands the band down to what the name needs. That is a
   deliberate title card rather than a hole.

   !important is load-bearing: the height arrives as an inline style, and a
   stylesheet rule without it silently loses. */

body.lcb-nophoto .lcb-hero-sec {
  min-height: 0 !important;
  /* The top padding stays — the menu is genuinely sitting there and the name has to clear
     it. Only the foot is trimmed, because the space below the type on a photographed hero
     exists to show more picture, and there is no picture here. A photographed beach then
     visibly earns more room than one without, which is the point. */
  padding-bottom: 56px !important;
}

/* --------------------------------------------------------------------------
   2. NO HEADER RULE HERE, AND THAT IS THE FINDING
   --------------------------------------------------------------------------

   The menu is tucked over the hero and stays transparent once UIkit fixes it on
   scroll, so past the photograph it floats over the page's own content. The
   obvious fix is a white ground on .uk-navbar-sticky forced with !important, to
   beat the theme's inline transparent rule. It was tried here on 2026-08-16 and
   it is WRONG.

   UIkit decides the link colour and which wordmark file to paint by SAMPLING
   WHAT IS BEHIND THE BAR. An opaque ground does not change that sample — it
   still reads the page content underneath — so the bar turns white while the
   links keep the light treatment UIkit chose for the photograph behind them.
   Measured: rgba(255,255,255,.4) on #fff. The navigation disappears completely,
   which is worse than the semi-transparent state it was meant to fix.

   UIkit's own toggle is working: light over the photographs, dark further down
   over white ground. Leave it alone. Anything better than this belongs in the
   theme's header settings, not in a per-vertical stylesheet. */

/* --------------------------------------------------------------------------
   3. A band with nothing in it
   --------------------------------------------------------------------------

   The "nearby" band repeats over the beaches sharing this one's area term, and
   for Bulls Island — the only beach in Awendaw — that list is empty. The
   builder can hide an element when a bound VALUE is empty, but it cannot test
   the LENGTH of a list, so the heading and its empty grid would both render.
   A heading over nothing is the "we do not know" apology with the words left
   off, and this vertical's rule is that an absent fact draws nothing at all.

   :has() is what the builder is missing, not a layout decision. Where the
   feature is unsupported the band simply shows as it does today. */

body.single-beach .lcb-nearby:not(:has(.uk-panel)) {
  display: none;
}

/* --------------------------------------------------------------------------
   3. The eyebrow
   -------------------------------------------------------------------------- */

.lcb-eyebrow {
  margin: 0 0 10px;
  font-family: var(--lcb-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: inherit;
  opacity: .78;
}

/* --------------------------------------------------------------------------
   4. Dogs
   -------------------------------------------------------------------------- */

.lcb-dogs h2 {
  margin: 0 0 14px;
  font-family: var(--lcb-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lcb-faint);
}

/* The verdict is the sentence a reader came for, so it is the largest thing in
   the block and the tone is carried by its colour. */
.lcb-dogs-call {
  margin: 0;
  font-family: var(--lcb-serif);
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.lcb-dogs--good    .lcb-dogs-call { color: var(--lcb-good); }
.lcb-dogs--ok      .lcb-dogs-call { color: var(--lcb-ok); }
.lcb-dogs--bad     .lcb-dogs-call { color: var(--lcb-bad); }
.lcb-dogs--unknown .lcb-dogs-call { color: var(--lcb-unknown); }

.lcb-dogs-rule,
.lcb-dogs-next,
.lcb-dogs-permit {
  margin: 12px 0 0;
  color: var(--lcb-muted);
  font-size: 16.5px;
  line-height: 1.6;
}

.lcb-dogs-more {
  margin: 18px 0 0;
}

.lcb-dogs-more a {
  font-family: var(--lcb-sans);
  font-size: 14.5px;
  color: var(--lcb-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--lcb-line);
  padding-bottom: 2px;
  transition: border-color .28s var(--lcb-ease);
}

.lcb-dogs-more a:hover,
.lcb-dogs-more a:focus-visible {
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
   5. Conditions
   -------------------------------------------------------------------------- */

.lcb-cond {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}

.lcb-cond h3 {
  margin: 0 0 18px;
  font-family: var(--lcb-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lcb-faint);
}

/* Four tide moments read as a row of times, not as a bulleted list. The time is
   the number a reader is scanning for, so it is the large one; high or low is
   the label above it and the height is the detail below. */
.lcb-tide ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lcb-tide li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lcb-tide-k {
  order: -1;
  font-family: var(--lcb-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lcb-faint);
}

.lcb-tide-t {
  font-family: var(--lcb-serif);
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.1;
  color: var(--lcb-ink);
  white-space: nowrap;
}

.lcb-tide-f {
  font-family: var(--lcb-sans);
  font-size: 13px;
  color: var(--lcb-muted);
}

.lcb-water,
.lcb-station {
  margin: 16px 0 0;
  font-family: var(--lcb-sans);
  font-size: 13.5px;
  color: var(--lcb-muted);
}

.lcb-station {
  margin-top: 4px;
  color: var(--lcb-faint);
}

.lcb-surf-n {
  margin: 0;
  font-family: var(--lcb-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  color: var(--lcb-ink);
}

.lcb-surf-v {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--lcb-ink);
}

.lcb-surf-w,
.lcb-surf-h {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--lcb-muted);
}

.lcb-surf-h { color: var(--lcb-bad); }

/* --------------------------------------------------------------------------
   6. Provenance
   -------------------------------------------------------------------------- */

.lcb-prov {
  margin: 0;
  font-family: var(--lcb-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--lcb-faint);
}

.lcb-prov a { color: var(--lcb-muted); }