/* ---------------------------------------------------------------------------
   Site-specific additions.

   Kept out of the Webflow-generated stylesheets (normalize.css, webflow.css,
   dapenguin.webflow.css) so a future Webflow re-export does not overwrite them.
   Loaded last, so anything here wins.
   --------------------------------------------------------------------------- */

/* Contact form states.
   webflow.css hides `.w-form-done` / `.w-form-fail` with `display: none`;
   js/contact-form.js reveals one by adding `.is-visible`. Two classes beats
   Webflow's one, so no !important is needed. */
.form_success-message.is-visible,
.form_error-message.is-visible {
  display: block;
}

/* `.form` sets its own `display`, which outranks the `hidden` attribute's UA
   style — so hiding the form on success had no visual effect. Make `hidden`
   win for any element carrying a display from the design system. */
[hidden] {
  display: none !important;
}

.form_success-message:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Honeypot: off-screen rather than display:none, which some bots skip.
   Real people never see or tab to it; bots that fill everything get caught. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* "Supported by Bluedobie" lockup.
   This used Webflow's `.logo` utility, which is hard-set to 4rem — it exists for
   the small partner-logo strip — so the mark rendered at 64px and sat alone in a
   450px half-column, swallowed by the space around it. The columns now size to
   their content, so the mark and the text read as one unit.

   The source file is 256x256, which is the ceiling: at 2x pixel density a 160px
   render is already a 1.25x upscale, and the fine "design and developing"
   line under the wordmark is the first thing to soften. Don't push past this
   without a larger source file. */
.sponsor-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--_sizes---gap--lg-gap, 2.5rem);
  align-items: center;
}

.sponsor-mark {
  display: block;
  flex: none;
  line-height: 0;
}

.sponsor-mark img {
  width: clamp(112px, 15vw, 160px);
  height: auto;
  aspect-ratio: 1;
}

@media screen and (max-width: 767px) {
  .sponsor-lockup {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--_sizes---gap--md-gap, 1.5rem);
  }

  .sponsor-lockup .button-group {
    justify-content: center;
  }
}

/* Video gallery. The clips are vertical 9:16, shot for social, so the grid is
   built around that shape rather than the square one the photo grid uses. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--_sizes---gap--sm-gap, 1rem);
  margin: 0;
  padding: 0;
}

.video-grid li {
  margin-bottom: 0;
}

.video-item {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: var(--_sizes---card--card-radius, 0.5rem);
}

.video-grid figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--_colors---text-color--text-secondary);
}

@media screen and (max-width: 991px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 767px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 479px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* Logged ride figures on a ride card. Deliberately quiet: these are evidence
   sitting under the writing, not a dashboard competing with it. Tabular figures
   so the numbers align between cards. */
.ride-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2rem;
  margin: 0 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--_colors---border-color--border-primary, #0000001a);
}

.ride-stats dt {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--_colors---text-color--text-secondary);
  margin-bottom: 0.15rem;
}

.ride-stats dd {
  margin: 0;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* Social graphics are square and there may be one or several, so cap the width
   rather than forcing a column count that looks lopsided at low counts. */
.social-graphics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 22rem));
  gap: var(--_sizes---gap--sm-gap, 1rem);
}

/* The design system gives .card-link a hover state but no focus state, so a
   keyboard user had no idea where they were. */
.card-link:focus-visible {
  outline: 2px solid var(--_colors---text-color--text-primary);
  outline-offset: 3px;
}

/* Ride card photos sit in a fixed 3:2 slot, so a portrait photo gets cropped.
   Anchor the crop above centre: in these shots the subject — a face, a finish
   arch — is in the upper part of the frame, and a straight centre crop was
   cutting heads off. */
.ride-card-image {
  object-position: center 25%;
}

/* Skip link — visually hidden until it receives keyboard focus.
   The Webflow `.screen-reader` utility has no focus state, so it cannot be
   used for this on its own. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background-color: var(--_colors---background-color--bg-primary, #fff);
  color: var(--_colors---text-color--text-primary, #111);
  border-radius: 0 0 var(--_sizes---radius--md-radius, 0.5rem) 0;
  text-decoration: none;
  font-weight: 600;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Photo grid on Photos & Video. Plain CSS grid so it needs no Webflow
   interaction code and reflows cleanly down to phone width. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--_sizes---gap--xs-gap, 0.5rem);
}

.photo-grid figure,
.figure-reset {
  margin: 0;
}

.photo-grid figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.75;
}

@media screen and (max-width: 767px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 479px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
}

/* The nav CTA sits outside the collapsing menu, so keep it from crowding the
   logo and hamburger on narrow phones. */
@media screen and (max-width: 479px) {
  .nav_right .button {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    white-space: nowrap;
  }
}

/* Open mobile menu needs a solid background.
   The Webflow base rule sets `.nav_menu { background-color: #0000 }` and the
   <=991px breakpoint adds padding, radius and a shadow but never restores a
   background, so the open menu rendered as unreadable text floating over the
   page content beneath it.

   It has to be the LIGHT surface, not the dark one: at this same breakpoint the
   template already recolours `.nav_link.on-inverse` to the dark `text-secondary`
   (dapenguin.webflow.css line ~7004), i.e. it was authored for a light panel.
   Painting the panel dark instead put dark text on a dark background at 1:1
   contrast. Supplying the light surface the links were written for is the fix. */
@media screen and (max-width: 991px) {
  .nav_menu {
    background-color: var(--_colors---background-color--bg-primary);
    color: var(--_colors---text-color--text-primary);
    left: 0;
    right: 0;
  }

  /* The template's mobile colour for these links is `text-secondary`
     (rgba(30,31,40,.6)), which lands at 4.36:1 on the white panel — just under
     the 4.5:1 WCAG AA minimum for body-size text. Primary takes it to ~15:1. */
  .nav_menu .nav_link.on-inverse,
  .nav_menu .nav_link.on-inverse:hover {
    color: var(--_colors---text-color--text-primary);
  }
}

/* Logo sizing.
   `.nav_logo-icon` is a flex box with no width, and its image is a flex item
   that collapses to 0px wide at desktop widths, so the mark disappeared and only
   the "DaPenguin" wordmark showed. Give the box and the image real dimensions
   rather than depending on flex intrinsic sizing. */
/* The logo block must not be squeezed narrower than its own contents. Without
   this, between the 991px collapse breakpoint and ~1100px the "DaPenguin"
   wordmark overflowed its box and printed on top of the first nav link. */
.nav_logo {
  flex: 0 0 auto;
  min-width: 0;
}

.nav_logo-icon {
  flex: 0 0 auto;
  align-items: center;
}

.nav_logo-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: var(--_sizes---radius--sm-radius, 0.25rem);
}

.footer .nav_logo-icon img {
  width: 75px;
  height: 75px;
}

/* Lead with the words on small screens.
   These heroes put their image grid first in the DOM so it sits left on
   desktop. Stacked on a phone that pushed the h1 roughly two screens down, so
   the visitor met four photos before finding out whose site this is. */
@media screen and (max-width: 767px) {
  .hero-text-first {
    display: flex;
    flex-direction: column;
  }

  .hero-text-first > .hero-copy {
    order: -1;
  }
}