/* The lc-hero band stylesheet, as live prints it in <style id="lc-hero"> (lc-hero.php). */
/* Everything between the top of the document and the band is removed rather than
         reduced; the band then fills the viewport because its parents no longer constrain
         it. The placeholder is an element theme.js injects to hold space for the overlaid
         navigation — hiding it is what lets the picture rise under the menu. */
      body.lc-hero-page .tm-header-placeholder{display:none}
      body.lc-hero-page #tm-main{padding-top:0}
      body.lc-hero-inline #tm-main > .uk-container{max-width:none;padding-left:0;padding-right:0}
      body.lc-hero-inline #tm-main .uk-margin-medium:has(> .lc-hero-band){margin-top:0!important}
      /* The heading lives in the band; the theme's copy of it would be the same words twice. */
      body.lc-hero-page #tm-main .uk-article-title,
      body.lc-hero-page #tm-main .tm-page-title,
      body.lc-hero-page #tm-main .uk-breadcrumb{display:none!important}

      /* Height comes from the type inside the band and nothing else — no min-height, no vh.
         The photograph is atmosphere, not the subject, and padding it out to a fraction of
         the viewport would push the directory the reader came for below the fold. */
      .lc-hero-band{
        position:relative;width:auto;margin:0 0 26px;
        background-size:cover;background-repeat:no-repeat;
        background-position:center 50%;
        background-color:#1d2721;
        display:flex;align-items:flex-end}
      /* Two scrims in one gradient, each doing one job: the top keeps the white navigation
         legible over a bright sky, the foot holds the title. The middle is left near-clear on
         purpose — an even wash turns every photograph into the same black band, and the
         picture is the point. Top padding is the menu's room — the navigation sits ON the
         photograph, so the title starts below it; the bottom figure buys picture below the
         type, which is the difference between a photograph and a texture.

         --lc-storm-h is the storm ribbon's live height, published by lc-storm-ribbon.js.
         The ribbon renders INSIDE .tm-header, which is position:absolute, so it lowers the
         menu without moving the document — and a fixed 104px that was measured against a
         bare header then puts the title inside the navigation. It went wrong on all ten
         landings at once and only while a storm was live. The variable defaults to 0, so a
         page that never loads the ribbon is unchanged. */
      .lc-hero-band__scrim{
        width:100%;padding:calc(104px + var(--lc-storm-h,0px)) 22px 48px;
        background:linear-gradient(to bottom,rgba(11,14,20,.52) 0%,rgba(11,14,20,.14) 34%,rgba(11,14,20,.12) 55%,rgba(11,14,20,.68) 100%)}
      /* The theme colours headings itself and wins on specificity — state every colour. */
      .lc-hero-band__title{
        font-family:"PT Serif",Georgia,serif;font-weight:700;color:#fff;
        font-size:clamp(1.9rem,3.4vw,2.85rem);line-height:1.04;letter-spacing:-.01em;
        margin:0;text-shadow:0 2px 24px rgba(0,0,0,.45)}
      .lc-hero-band__lead{
        font-family:"PT Serif",Georgia,serif;font-size:clamp(.95rem,1.25vw,1.05rem);
        line-height:1.45;color:rgba(255,255,255,.92);margin:8px 0 0;max-width:78ch;
        text-shadow:0 1px 12px rgba(0,0,0,.5)}
      /* The credit line for the photograph. Absolute so it costs the band no height, bottom-right so it
         is clear of the title, and small enough to read as a caption rather than as copy —
         but a real, selectable line of text, which is what the licence asks for. */
      .lc-hero-band__credit{
        position:absolute;right:10px;bottom:6px;margin:0;z-index:2;
        font-size:10px;letter-spacing:.06em;line-height:1.2;
        color:rgba(255,255,255,.62);text-shadow:0 1px 6px rgba(0,0,0,.65)}
      @media(max-width:640px){
        /* The mobile header is shorter — logo only, LCBottomBar is the navigation — so the
           band needs less room over the picture, but it is still over it. */
        .lc-hero-band__scrim{padding:calc(86px + var(--lc-storm-h,0px)) 22px 26px}
        .lc-hero-band__credit{font-size:9px;right:8px;bottom:4px}
      }

      /* An overlaid header keeps its transparent background when UIkit fixes it on scroll, so
         past the photograph the logo would float directly over the content. The ground rides
         .uk-navbar-sticky — the class UIkit adds only once the bar is stuck mid-page — and
         NEVER .uk-sticky-fixed: an overlay header is position:fixed from the first paint, so
         that class is present at the very top of the page, and a white ground there puts
         white links on a white bar with the whole navigation invisible.

         ⛔ DO NOT ADD !important TO MAKE THIS RULE "WORK". It looks broken and is not. The
         theme emits an inline .tm-header-overlay .uk-navbar-container.uk-navbar-transparent
         {background:transparent!important}, so this rule loses and the bar stays transparent
         — which is correct, because UIkit decides the link and wordmark colours by SAMPLING
         WHAT IS BEHIND THE BAR with elementsFromPoint. An opaque ground blocks nothing about
         the sample (it reads the page content underneath), so the bar turns white while the
         links stay in the light treatment UIkit chose for the photograph behind it: white on
         white, the whole navigation gone, and the wordmark stranded on its inverse file.

         Measured on /beaches/ 2026-08-16 with !important in place. The UIkit toggle itself is
         healthy — uk-light over the photographs, uk-dark further down the page over white
         ground — and it is the mechanism the whole header depends on. Painting over it makes
         things worse, not better. */
      body.lc-hero-page .tm-header .uk-navbar-container.uk-navbar-sticky{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08)}