/*!
  mdfd.css — rebuilt for native 2026 CSS
  Source: minireset.css-based build compiled from a Sass/Koala pipeline.
  Rebuilt with: @layer, custom properties, native nesting, container
  queries, aspect-ratio, and no build step required.

  See the notes at the bottom of this file for what was deliberately
  changed or dropped versus the original compiled output.
*/

@import url("https://fonts.googleapis.com/css?family=Archivo+Narrow");
@import url("https://fonts.googleapis.com/css?family=Allerta");

@layer reset, tokens, base, layout, components, utilities, overrides;

/* ============================================================
   RESET  (minireset, unchanged in spirit)
   ============================================================ */
@layer reset {
  html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset,
  legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
  }
  h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
  ul { list-style: none; }
  button, input, select, textarea { margin: 0; }
  html { box-sizing: border-box; }
  *, *::before, *::after { box-sizing: inherit; }
  img, embed, object, audio, video { max-width: 100%; }
  iframe { border: 0; }
  table { border-collapse: collapse; border-spacing: 0; }
  td, th { padding: 0; text-align: left; }
  a img { border-style: none; }
}

/* ============================================================
   DESIGN TOKENS  — every repeated color/font/size in the old
   file now lives here once instead of dozens of times.
   ============================================================ */
@layer tokens {
  :root {
    /* colors */
    --c-text: #4a4a4a;
    --c-heading: #404040;
    --c-ink: #1e1e1e;
    --c-accent: #263663;   /* navy — links/hover, field labels */
    --c-brand: #df7b25;    /* orange — breadcrumbs, category headers */
    --c-danger: #da4231;   /* button border/hover fill */
    --c-white: #fff;
    --c-black: #000;
    --c-gray: gray;
    --c-border: #dcdcdc;

    /* Bulma-style status colors, kept as tokens (only used via .has-text-*) */
    --c-primary: #00d1b2;
    --c-info: #3273dc;
    --c-success: #23d160;
    --c-warning: #ffdd57;
    --c-error: #ff3860;

    /* type */
    --font-body: "Archivo Narrow", "Lucida Sans Unicode", sans-serif;
    --font-heading: Headline, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --font-display: Display, "Lucida Sans Unicode", sans-serif;
    --font-block: Allerta, "Lucida Sans Unicode", sans-serif;

    /* shadows */
    --shadow-card: 12px 12px 32px rgb(0 0 0 / 50%);

    /* twelfths, computed once instead of repeated as magic numbers
       across five separate breakpoint blocks */
    --col-1: 8.3333%;  --col-2: 16.6667%; --col-3: 25%;
    --col-4: 33.3333%; --col-5: 41.6667%; --col-6: 50%;
    --col-7: 58.3333%; --col-8: 66.6667%; --col-9: 75%;
    --col-10: 83.3333%; --col-11: 91.6667%; --col-12: 100%;
  }

  @font-face { font-family: Axis;     src: url("axis.eot"), url("axis.ttf"); }
  @font-face { font-family: Display;  src: url("nevis.woff"), url("nevis.woff2"); }
  @font-face { font-family: Headline; src: url("oranienbaum.woff"), url("oranienbaum.woff2"); }
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
@layer base {
  html { scrollbar-gutter: stable; }
  html, body {
    width: 100%;
    height: 100%;
    font: 14pt/1.6 var(--font-body);
    letter-spacing: .03em;
    color: var(--c-text);
    text-align: left;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background-size: contain;
    background-attachment: fixed;
  }

  a {
    cursor: pointer;
    text-decoration: none;
    color: var(--c-heading);

    &:hover, &:active { color: var(--c-accent); }
  }
  #feeds a:hover { color: var(--c-accent); }

  h1, h2, h3, h4, h5, h6 {
    padding: 0 0 4% 0;
    line-height: 1.6;
    color: var(--c-heading);
    font-weight: 600;
  }
  h1, h2, h3 { font-family: var(--font-heading); }
  h1 { font-size: 2.2em; letter-spacing: .04em; }
  h2 { font-size: 1.6em; letter-spacing: .04em; }
  h3 { font-size: 1.2em; letter-spacing: .05em; padding: 1% 0 3%; }
  h4 { font-family: var(--font-body); font-size: 1.2em; letter-spacing: .05em; font-weight: 600; }
  h5 { font-family: var(--font-body); font-size: 1.1em; font-weight: 500; }
  p  { font-family: var(--font-body); font-size: 1.1em; line-height: 1.6; margin: 0 0 2% 0; }

  small { font-size: .875em; }
  span { font-style: inherit; font-weight: inherit; }
  strong { color: #363636; font-weight: 700; }

  .feeds { font-size: 1em; line-height: 1.5; }
  #navigation {
    font-family: var(--font-display), Helvetica, sans-serif;
    font-size: 1.2em;
    letter-spacing: .4em;
    text-transform: uppercase;
  }
  .icon { color: var(--c-heading); font-size: 1.8em; margin-left: 2%; vertical-align: middle; }
  #footer { font-size: 1em; color: var(--c-black); }
  .error { text-align: left; text-transform: lowercase; color: red; font-weight: 300; }
  .dateline { font-family: var(--font-body); font-size: .84em; letter-spacing: .1em; opacity: .7; }
  .textblock {
    font-family: var(--font-block);
    font-size: 1em;
    background: var(--c-white);
    color: var(--c-accent);
    padding: 6%;
    font-weight: 900;
    letter-spacing: .1em;
  }

  /* forms */
  input, textarea {
    background: rgb(255 255 255 / 90%);
    border: 1px solid var(--c-border);
    padding: 16px 10px;
    width: 100%;
    font: 1.4em var(--font-body) !important;
    color: var(--c-ink);
    text-align: left;

    &:focus { background: var(--c-white); color: var(--c-accent); opacity: 1; }
    &::placeholder { opacity: .3; }
  }
  input[type="checkbox"], input[type="radio"] { vertical-align: baseline; width: 16px; }

  button, input[type="submit"] {
    width: auto;
    appearance: none;
    background-color: transparent;
    border: 2px solid var(--c-danger);
    color: var(--c-danger);
    cursor: pointer;
    display: flex;
    align-self: center;
    font: 800 .85em var(--font-display) !important;
    letter-spacing: 2px;
    line-height: 1;
    margin: 2% 0 2% 2%;
    padding: 2% 4%;
    text-transform: uppercase;
    transition: box-shadow .3s ease-in-out, color .3s ease-in-out;

    &:hover, &:focus {
      color: var(--c-white);
      outline: 0;
    }
    &:hover { box-shadow: 0 0 40px 40px var(--c-danger) inset; }
  }
  input[type="submit"] { float: right; }

  form h3, form h4 { margin: 4% 0; }

  #searchform {
    display: inline;
    white-space: nowrap;

    input { width: 74%; border: 0; border-bottom: 2px solid var(--c-accent); }

    button {
      width: 54px;
      display: inline;
      border: 0;
      font-size: 2.8em;
      margin: 0 1%;
      padding: 0;

      &:hover, &:focus { box-shadow: unset; color: unset; opacity: .7; }
      img { width: 100%; margin: 0 0 -16px -8px; padding: 0; }
      i { font-size: 2.8em; opacity: 1; }
    }
  }
}

/* ============================================================
   LAYOUT — header, nav, mobile menu, modal/overlay
   ============================================================ */

/* ============================================================
   GRID — replaces the old five-tier (mobile/tablet/desktop/
   widescreen/fullhd) x twelve-column Bulma-style expansion.
   .row is now a container, so columns respond to the space
   they actually have instead of the viewport. Only three
   breakpoint tiers are kept (base, ≥700px, ≥1000px); widescreen
   and fullhd tiers collapsed into the desktop tier since they
   carried identical values. See notes at the end of the file.
   ============================================================ */
@layer layout {
  header, #header {
    anchor-name: --site-header;
    position: fixed;
    inset: 0 0 auto 0;
    min-height: 90px;
    background: var(--c-white);
    transition: top 200ms ease, opacity 200ms ease;
    	z-index: 1000;
  }
  #home header, #home #header { background: rgb(255 255 255 / 0%); }

  @media (prefers-reduced-motion: reduce) {
      header,
      #header {
          transition: none;
      }
  }

  main {
    position: relative;
    top: anchor(--site-header bottom);
    padding: var(--header-h, 0px) 2%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  #footer { clear: both; width: 100%; padding: 4%; text-align: right; }
  .right { text-align: right; }

  #logo { display: none; }
  #iconlogo {
    position: relative;
    float: left;
    cursor: pointer;
    width: 16%;
    margin: 2%;
    z-index: 1000;

    img { width: 100%; height: auto; margin: 2% 0 0 0; }
  }

  @media (min-width: 768px) {
    #iconlogo { display: none; }
    #logo {
      position: relative;
      float: left;
      display: inline-block;
      width: 20%;
      max-width: 390px;
      margin: 8px 2% 0;
      z-index: 1000;

      img { width: 100%; height: auto; margin: 2% 0 0 0; }
    }
  }

  #editlink, #editlink a {
    position: fixed;
    top: 90%;
    right: 2%;
    letter-spacing: .4em;
    text-transform: uppercase;
    background: var(--c-gray);
    color: var(--c-white);
    padding: .5% 2%;
    z-index: 8000;
  }

  .overlay {
    position: fixed;
    inset: 0;
    background: rgb(38 54 99 / 70%);
    z-index: 8000;
    opacity: 0;
    transition: opacity .4s ease-in;
    pointer-events: none;

    &:target { opacity: 1; pointer-events: auto; }

    > .modalcontent {
      width: 96%;
      height: 80%;
      position: relative;
      margin: 1% auto;
      padding: 1%;
      text-align: right;
      background: var(--c-white);
      z-index: 9999;

      @media (min-width: 700px) { width: 80%; }
    }
  }
  .innermodal { position: absolute; overflow: auto; inset: 0; padding: 1%; }
  .closelayer { position: absolute; top: 0; width: 100%; height: 100%; z-index: 100; }
  .modalcontent { text-transform: none; font-weight: 500; }

  #search {
    position: absolute;
    margin: 0 0 0 2%;
    width: 96%;
    height: 120px;
    background: var(--c-white);
    padding: 1% 4% 4% 1%;
  }
  #searchresults { float: left; text-align: left; width: 100%; font-size: 1rem; font-weight: 400; }
  #found { text-align: left; margin: 0 0 0 2%; padding: 0 1%; box-shadow: unset; width: 96%; }
  .result {
    &:first-of-type { padding: 2% 0 0 0; }
    &:last-of-type  { padding: 0 0 8% 0; }
    &:only-of-type  { padding: 2% 0 8% 0; }
  }

  .row {
    container-type: inline-size;
    width: 98%;
    padding: 0 0 0 2%;
    margin: 0;
    clear: both;
    min-width: 0;

    &.is-mobile, &.is-multiline { display: flex; }
    &.is-multiline { flex-wrap: wrap; }
    &.is-vcentered { align-items: center; }
  }

  @container (min-width: 45em) {
    .row:not(.is-desktop) { display: flex; }
  }

  .column {
    display: block;
    flex: 1 1 0;
    padding: 0 1% 0 0;
    min-width: 0;

    &:last-of-type { padding: 0; }

    &.is-half  { flex: none; width: var(--col-6); }
    &.is-one-third { flex: none; width: var(--col-4); }
    &.is-two-thirds { flex: none; width: var(--col-8); }
    &.is-one-quarter { flex: none; width: var(--col-3); }
    &.is-three-quarters { flex: none; width: var(--col-9); }
    &.is-full { flex: none; width: var(--col-12); }
    &.is-1 { flex: none; width: var(--col-1); }
    &.is-2 { flex: none; width: var(--col-2); }
    &.is-3 { flex: none; width: var(--col-3); }
    &.is-4 { flex: none; width: var(--col-4); }
    &.is-5 { flex: none; width: var(--col-5); }
    &.is-6 { flex: none; width: var(--col-6); }
    &.is-7 { flex: none; width: var(--col-7); }
    &.is-8 { flex: none; width: var(--col-8); }
    &.is-9 { flex: none; width: var(--col-9); }
    &.is-10 { flex: none; width: var(--col-10); }
    &.is-11 { flex: none; width: var(--col-11); }
    &.is-12 { flex: none; width: var(--col-12); }
    &.is-offset-1 { margin-left: var(--col-1); }
    &.is-offset-2 { margin-left: var(--col-2); }
    &.is-offset-3 { margin-left: var(--col-3); }
    &.is-offset-4 { margin-left: var(--col-4); }
    &.is-offset-5 { margin-left: var(--col-5); }
    &.is-offset-6 { margin-left: var(--col-6); }
    &.is-offset-7 { margin-left: var(--col-7); }
    &.is-offset-8 { margin-left: var(--col-8); }
    &.is-offset-9 { margin-left: var(--col-9); }
    &.is-offset-10 { margin-left: var(--col-10); }
    &.is-offset-11 { margin-left: var(--col-11); }
  }
}

/* ============================================================
   MEDIA / IMAGE HANDLING
   Old file used the "padding-bottom: 56.25%" trick to fake
   aspect ratios. That's no longer needed — aspect-ratio does
   it directly with no absolutely-positioned inner image.
   ============================================================ */
@layer components {
  .preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-position: center;
    background-size: cover;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      &.portrait { aspect-ratio: 9 / 16; height: auto; min-height: 200%; }
    }

    h3 {
      position: absolute;
      bottom: 8%;
      right: 0;
      text-align: right;
      color: var(--c-white);
      margin: 0 2%;
      padding: 1%;
      background: rgb(0 0 0 / 20%);
      z-index: 400;
      font-size: 1.1em;
      line-height: 1.2;
    }
  }
  .post .preview { margin: 0 0 4% 0; }

  .headshot {
    position: relative;
    overflow: hidden;
    float: left;
    margin: 0 2%;
    width: 20%;
    aspect-ratio: 1 / 1;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      &.landscape { object-fit: cover; }
    }
  }
  #public .headshot, .right .headshot { float: right; }

  #fullsize img, #fullsize2 img {
    position: fixed;
    inset: 0;
    max-width: 96%;
    max-height: 96%;
    margin: auto;
    overflow: auto;
  }

  .post img { width: 100%; height: auto; }
  .post .overlay img { width: auto; }

  .fluid-width-video-wrapper, .video { margin: 0; padding: 0; }

  #bg {
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    overflow: hidden;
    z-index: -9999;

    img {
      position: absolute !important;
      inset: 0 !important;
      margin: auto;
      min-width: 50%;
      min-height: 50%;
      overflow: hidden;
    }

    @media (max-width: 767px) {
      background: url("../video/video.png") center center / cover no-repeat;
      video { display: none; }
    }
  }

  #colorscreen {
    background: var(--c-brand);
    opacity: .7;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 50;
  }

  .vidbg {
    width: 200%;
    height: 200%;

    video {
      position: fixed;
      top: 50%;
      left: 50%;
      width: auto;
      max-width: 200%;
      height: auto;
      max-height: 200%;
      translate: -50% -50%;
      object-fit: cover;
    }
  }

  .videobox {
    position: relative;
    padding: 0 0 4% 0;

    &:hover .videocover { display: none; }
  }
  .videocover { z-index: 300; position: absolute; top: 0; left: 0; width: 100%; display: block; }

  .field {
    position: relative;

    label {
      margin: 0;
      padding: 8px;
      color: var(--c-accent);
      font-size: 1.4em;
      opacity: .7;
      text-transform: lowercase;
    }
  }

  .mariah { height: 0; width: 0; opacity: 0; color: transparent; position: fixed; top: 0; left: -200px; z-index: 0; }
}
/* ============================================================
   PRIMARY NAV — .cf-site-nav component (see nav.html / nav.js)
   Deliberately UNLAYERED. Do not move this into a @layer: any
   unlayered rule anywhere in the cascade beats any layered rule
   regardless of specificity, and this site still has other
   unlayered legacy selectors that this nav must keep winning
   against. A prior pass moved this into @layer components for
   architectural tidiness and it broke the live nav. Verify with
   a hostile-collision test (a throwaway stylesheet with `nav ul
   li > ul { left: -99999px }`-style rules loaded first) before
   ever moving this into a layer again.
   ============================================================ */
nav.cf-site-nav {
    --nav-fg: #111;
    --nav-fg-muted: rgb(0 0 0 / 0.65);
    --nav-accent: #7a1f1f;
    --nav-panel-bg: #ffffff;
    --nav-panel-border: rgb(0 0 0 / 0.1);
    --nav-gap: clamp(1.25rem, 2vw, 2rem);
    --nav-radius: 0.375rem;
    --nav-transition: 160ms ease;

    /* #navblock has no flex/grid of its own — #logo/#iconlogo float
       left, #rightnav is position:absolute. This nav needs to slot
       into that same non-flex layout the way the original nav {}
       rule did (float:right; width:78%; top:48px offset to clear
       #rightnav), rather than rendering full-width and overlapping
       #rightnav. */
    position: relative;
    top: 4%;
    right: 2%;
    float: right;
    width: 66%;
    z-index: 800;

    display: flex;
    align-items: center;
    justify-content: flex-end; /* right-aligned */
    font-family: inherit;
  }
nav.cf-site-nav .cf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* ---------- hamburger toggle (mobile only) ---------- */
nav.cf-site-nav .cf-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--nav-fg);
    z-index: 2;

    & .cf-nav-toggle-box {
      display: inline-flex;
      flex-direction: column;
      gap: 5px;
      width: 22px;
    }

    & .cf-nav-toggle-bar {
      display: block;
      height: 2px;
      min-width: 16px;
      background: currentColor;
      border-radius: 1px;
      transition: transform var(--nav-transition), opacity var(--nav-transition);
      transform-origin: center;
    }

    &[aria-expanded="true"] .cf-nav-toggle-bar:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    &[aria-expanded="true"] .cf-nav-toggle-bar:nth-child(2) {
      opacity: 0;
    }
    &[aria-expanded="true"] .cf-nav-toggle-bar:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
  }
/* ---------- menu ---------- */
nav.cf-site-nav .cf-nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nav-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible; /* neutralizes a legacy `nav ul { overflow: hidden }` rule that would clip the dropdown */
  }
nav.cf-site-nav .cf-nav-item {
    position: relative;
    flex-shrink: 0; /* keep items at their natural width instead of compressing */

    & .cf-nav-link-group {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
    }

    & .cf-nav-link {
      color: var(--nav-fg);
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding-block: 0.5rem;
      white-space: nowrap; /* the old nav had this on its <a> elements; carried forward */

      &:hover,
      &:focus-visible {
        color: var(--nav-accent);
      }
    }

    & .cf-nav-caret-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      background: transparent;
      border: 0;
      color: var(--nav-fg-muted);
      cursor: pointer;

      & .cf-nav-caret {
        width: 10px;
        height: 7px;
        transition: transform var(--nav-transition);
      }

      &[aria-expanded="true"] .cf-nav-caret {
        transform: rotate(180deg);
      }

      &:hover,
      &:focus-visible {
        color: var(--nav-accent);
      }
    }

    & .cf-submenu {
      display: block; /* overrides a legacy `nav ul li > ul { display: flex }` rule */
      overflow: visible; /* overrides a legacy `nav ul { overflow: hidden }` rule */
      position: absolute;
      inset-inline-end: 0; /* right-aligned under the parent */
      left: auto; /* overrides a legacy `nav ul li > ul { left: -99999px }` rule that shoves this off-screen */
      top: 100%;
      min-width: 13rem;
      margin: 0.4rem 0 0;
      padding: 0.4rem 0;
      list-style: none;
      background: var(--nav-panel-bg);
      border: 1px solid var(--nav-panel-border);
      border-radius: var(--nav-radius);
      box-shadow: 0 16px 32px -16px rgb(0 0 0 / 0.55);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity var(--nav-transition), transform var(--nav-transition), visibility var(--nav-transition);

      & a {
        display: block;
        padding: 0.55rem 1.1rem;
        color: var(--nav-fg-muted);
        text-decoration: none;
        font-size: 0.88rem;
        white-space: nowrap;

        &:hover,
        &:focus-visible {
          background: rgb(0 0 0 / 0.05);
          color: var(--nav-accent);
        }
      }
    }

    &[data-cf-nav-open="true"] > .cf-submenu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }
/* pointer-fine devices also get hover-to-open, click still works for touch/keyboard */
@media (hover: hover) and (pointer: fine) {
    nav.cf-site-nav .cf-nav-item:hover > .cf-submenu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }
/* ---------- mobile layout ---------- */
@media (max-width: 860px) {

    nav.cf-site-nav {
      float: none;
      width: auto;
      /* top:48px / right:2% carry over unchanged from the base rule —
         the old nav kept this same offset at every breakpoint to clear
         #rightnav; only the open-menu state goes position:fixed. */
    }

    nav.cf-site-nav .cf-nav-toggle {
      display: inline-flex;
      margin-inline-start: auto;
      z-index: 10002; /* above the open menu panel (10001) so it stays tappable to close, and above #rightnav (1400) and everything else sitewide */
    }

    nav.cf-site-nav .cf-nav-backdrop {
      position: fixed;
      inset: 0;
      background: rgb(0 0 0 / 0.45);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--nav-transition), visibility var(--nav-transition);
      z-index: 10000; /* above #rightnav (1400) and everything else sitewide */
    }

    nav.cf-site-nav .cf-nav-backdrop:not([hidden]) {
      opacity: 1;
      visibility: visible;
    }

    nav.cf-site-nav .cf-nav-menu {
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      width: min(320px, 85vw);
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      padding: 5.5rem 1.5rem 2rem;
      background: var(--nav-panel-bg);
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform 240ms ease;
      z-index: 10001; /* above the backdrop (10000), and above everything else sitewide */
    }

    nav.cf-site-nav[data-cf-nav-menu-open="true"] .cf-nav-backdrop {
      opacity: 1;
      visibility: visible;
    }

    nav.cf-site-nav[data-cf-nav-menu-open="true"] .cf-nav-menu {
      transform: translateX(0);
    }

    nav.cf-site-nav .cf-nav-item {
      border-bottom: 1px solid var(--nav-panel-border);

      & .cf-nav-link-group {
        justify-content: space-between;
        width: 100%;
        padding-block: 0.5rem;
      }

      & .cf-nav-caret-btn {
        width: 2.5rem;
        height: 2.5rem;
      }

      & .cf-submenu {
        display: block; /* overrides a legacy `nav ul li > ul { display: flex }` rule */
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        transition: max-height 220ms ease;
      }

      &[data-cf-nav-open="true"] > .cf-submenu {
        max-height: 20rem;
        padding-block: 0.25rem 0.5rem;
      }
    }
  }

nav button:hover, 
nav button:focus {
  color: inherit; /* Keeps text color danger instead of turning white */
  box-shadow: none;       /* Disables the red fill effect */
}

/*
 * Slide Labels — 2026 vanilla CSS/JS, zero PHP required
 *
 * Targets ProcessWire/FrontendForms' markup by HTML tag + type attribute,
 * NOT by the module's own CSS classes (which differ per field type —
 * inputs get "input", textareas get "textarea" — so relying on them
 * would mean tracking every field type's class name individually).
 * Tag + type is guaranteed by HTML semantics and won't change if the
 * module's internal class naming does.
 *
 * Scope: .fieldwrapper > ... > input[type=text/email/...] / textarea / select
 * An explicit allow-list of input types is used so hidden anti-spam/CSRF
 * fields, checkboxes, radios, and submit buttons are never matched.
 *
 * placeholder=" " on each field is required for :placeholder-shown to
 * work, and is added automatically by floating-labels.js on page load.
 */

.fieldwrapper {
	position: relative;
	margin-block: 1.5rem;
	container-type: inline-size;

	& input:is(
			[type="text"],
			[type="email"],
			[type="tel"],
			[type="url"],
			[type="password"],
			[type="number"],
			[type="search"]
		),
	& textarea,
	& select {
		width: 100%;
		padding: 0.75rem;
		font-size: 1rem;
		line-height: 1.4;
		border: 1px solid #999;
		border-radius: 4px;
		background: #fff;
	}

	& input:is(
			[type="text"],
			[type="email"],
			[type="tel"],
			[type="url"],
			[type="password"],
			[type="number"],
			[type="search"]
		):focus,
	& textarea:focus,
	& select:focus {
		outline: 2px solid #2563eb;
		outline-offset: 1px;
	}

	& label {
		position: absolute;
		left: 0.75rem;
		top: 50%;
		transform: translate(0, -50%);
		font-size: 1rem;
		color: #666;
		pointer-events: none;
		opacity: 1;
		transition: transform 300ms ease, opacity 300ms ease;
	}

	/* Focused and still empty: slide right, dim to a hint.
	   cqw = 1% of the .fieldwrapper's own width, so the slide distance
	   scales with the field instead of moving a fixed rem amount. */
	&:has(
			input:is(
				[type="text"],
				[type="email"],
				[type="tel"],
				[type="url"],
				[type="password"],
				[type="number"],
				[type="search"]
			):focus
		) label,
	&:has(textarea:focus) label,
	&:has(select:focus) label {
		transform: translate(55cqw, -50%);
		opacity: 0.5;
	}

	/* Has a value: gone entirely. Declared after the :focus rule so it
	   wins when both are true (typing overrides the focus-hint state). */
	&:has(
			input:is(
				[type="text"],
				[type="email"],
				[type="tel"],
				[type="url"],
				[type="password"],
				[type="number"],
				[type="search"]
			):not(:placeholder-shown)
		) label,
	&:has(textarea:not(:placeholder-shown)) label {
		transform: translate(70cqw, -50%);
		opacity: 0;
	}

	/* Select has no :placeholder-shown, so floating-labels.js toggles
	   this class based on select.value. */
	&.fl-has-value label {
		transform: translate(70cqw, -50%);
		opacity: 0;
	}
}

/* Autofill detection: Chrome/Safari don't fire 'input' events on autofill,
   but they do apply a harmless zero-length animation to autofilled fields.
   floating-labels.js listens for this and re-triggers 'input' manually. */
@keyframes fl-autofill-detect {
	from { opacity: 1; }
	to { opacity: 1; }
}

.fieldwrapper input:-webkit-autofill {
	animation-name: fl-autofill-detect;
}

/* Labels wrapping a checkbox/radio (e.g. "Show password", privacy consent,
   send-a-copy) are inline labels next to their own control, not floating
   overlays for a text field. One override undoes all the label rules
   above for just these, rather than excluding them in every rule. */
.fieldwrapper label:has(input[type="checkbox"], input[type="radio"]) {
	position: static;
	transform: none;
	opacity: 1;
	pointer-events: auto;
}