/* 2manybikes – Typography & Layout Overrides */

/* ----------------------------
   Base & fluid type
----------------------------- */
:root {
  --type-0: clamp(1rem, 0.96rem + 0.35vw, 1.125rem);
  --type-1: clamp(1.125rem, 1.02rem + 0.8vw, 1.375rem);
  --type-2: clamp(1.375rem, 1.08rem + 1.8vw, 1.875rem);
  --type-3: clamp(1.75rem, 1.3rem + 2.6vw, 2.5rem);
  --type-4: clamp(2.125rem, 1.6rem + 3.2vw, 3rem);

  --lh-body: 1.7;
  --lh-heading: 1.15;
  --measure: 72ch;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

html { font-size: 100%; }

:where(body) {
  font-size: var(--type-0);
  line-height: var(--lh-body);
  letter-spacing: 0.01em;
  color: #222;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(h1) { font-size: var(--type-4); line-height: var(--lh-heading); margin: 0.6em 0 0.4em; }
:where(h2) { font-size: var(--type-3); line-height: var(--lh-heading); margin: 0.8em 0 0.5em; }
:where(h3) { font-size: var(--type-2); line-height: var(--lh-heading); margin: 0.9em 0 0.5em; }
:where(h4) { font-size: var(--type-1); line-height: var(--lh-heading); margin: 1em 0 0.5em; }
:where(h5,h6) { font-size: 1rem; line-height: 1.2; margin: 1em 0 0.5em; text-transform: none; }

:where(p, li) { margin: 0.6em 0; }
:where(ul, ol) { padding-inline-start: 1.25em; }
:where(blockquote) {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-inline-start: 4px solid rgba(0,0,0,.12);
}

:where(a) {
  text-underline-offset: 2px;
  text-decoration-thickness: from-font;
}

:where(figure, img) { max-width: 100%; height: auto; }
:where(figure) { margin: 1em 0; }
:where(figcaption) { font-size: 0.9em; opacity: .8; margin-top: .25em; }

@media (min-width: 1600px) {
  :where(body) { font-size: clamp(16px, 0.9rem + 0.25vw, 18px); }
}


/* ============================
   Articles listing page
============================== */

/* Outer block: horizontal padding matching layout-content */
#block-views-block-grid-overview-block-1-2 {
  padding: 24px 24px 0;
  box-sizing: border-box;
}

/* "Find what you're looking for" header label */
#views-exposed-form-grid-overview-block-1 > header {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid #FFE800;
}

/* Filter group legends: Article Type, Brand */
#views-exposed-form-grid-overview-block-1 .fieldset-legend {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
  margin: 14px 0 6px;
}

/* Checkbox rows: flex alignment */
#views-exposed-form-grid-overview-block-1 .js-form-type-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

/* Custom checkbox: hide default, draw branded version */
#views-exposed-form-grid-overview-block-1 input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid #bbb;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
#views-exposed-form-grid-overview-block-1 input[type="checkbox"]:checked {
  background: #FFE800;
  border-color: #c8b500;
}
#views-exposed-form-grid-overview-block-1 input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 2px;
  top: -1px;
  width: 6px;
  height: 4px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
}
#views-exposed-form-grid-overview-block-1 label.option {
  font-size: 0.83rem;
  cursor: pointer;
  color: #333;
  line-height: 1.2;
}

/* Hide the top pager — keep only the bottom one */
nav[aria-labelledby="pagination-heading"] {
  display: none;
}

/* Pager: bottom pagination */
#block-views-block-grid-overview-block-1-2 nav.pager {
  margin: 28px 0 20px;
  clear: both;
}
#block-views-block-grid-overview-block-1-2 .pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: center;
}
#block-views-block-grid-overview-block-1-2 .pager__item {
  border: none;
  padding: 0;
}
#block-views-block-grid-overview-block-1-2 .pager__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #333;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
#block-views-block-grid-overview-block-1-2 .pager__item a:hover {
  background: #f5f5f5;
  border-color: #999;
}
#block-views-block-grid-overview-block-1-2 .pager__item.is-active a {
  background: #FFE800;
  border-color: #c8b500;
  color: #000;
  font-weight: 700;
}
#block-views-block-grid-overview-block-1-2 .pager__item--previous a,
#block-views-block-grid-overview-block-1-2 .pager__item--first a,
#block-views-block-grid-overview-block-1-2 .pager__item--next a,
#block-views-block-grid-overview-block-1-2 .pager__item--last a {
  border-color: transparent;
  font-size: 1rem;
  font-weight: 700;
  color: #555;
}
#block-views-block-grid-overview-block-1-2 .pager__item--previous a:hover,
#block-views-block-grid-overview-block-1-2 .pager__item--next a:hover {
  color: #000;
  background: transparent;
  border-color: transparent;
}

/* Mobile: larger pager touch targets */
@media (max-width: 767px) {
  #block-views-block-grid-overview-block-1-2 .pager__item a {
    min-width: 44px;
    height: 44px;
    font-size: 0.95rem;
  }
}


/* ============================
   Contact page
============================== */

/* Block padding: match the layout-content 24px horizontal inset,
   add top breathing room below the sticky header */
#block-contactus {
  padding: 32px 24px 0;
  box-sizing: border-box;
}

/* Intro text colour, spacing, link taming */
#block-contactus p {
  color: #333;
  margin-bottom: 24px;
  font-size: 1rem;
  line-height: 1.6;
}

#block-contactus h2 {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  margin-bottom: 8px;
}

/* Links inside the intro stay on-brand instead of browser default blue */
#block-contactus p a {
  color: #333;
  text-decoration: underline;
  text-decoration-color: #FFE800;
}
#block-contactus p a:hover {
  color: #000;
}

/* Prevent long text overflowing on narrow viewports */
#block-contactus p {
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 767px) {
  #block-contactus {
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
  }
}

/* Wrapper: constrain to a readable form width */
.contact-message-feedback-form {
  max-width: 640px;
}

/* Labels */
.contact-message-feedback-form label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 5px;
}

/* All text/email inputs and textarea: full-width, consistent padding.
   min-width: 0 overrides the browser's intrinsic size from size/cols HTML attributes. */
.contact-message-feedback-form input.form-text,
.contact-message-feedback-form input.form-email,
.contact-message-feedback-form textarea.form-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: inherit;
  font-size: 1rem;
  color: #333;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-message-feedback-form input.form-text:focus,
.contact-message-feedback-form input.form-email:focus,
.contact-message-feedback-form textarea.form-textarea:focus {
  outline: none;
  border-color: #FFE800;
  box-shadow: 0 0 0 3px rgba(255, 232, 0, 0.25);
}

/* Spacing between form fields */
.contact-message-feedback-form .form-item {
  margin-bottom: 18px;
}

/* Submit button: full-width yellow */
.contact-message-feedback-form .form-actions {
  margin-top: 24px;
}

.contact-message-feedback-form .form-actions input[type="submit"] {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: #FFE800;
  color: #000;
  border: none;
  border-radius: 3px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}

.contact-message-feedback-form .form-actions input[type="submit"]:hover {
  background: #e6cf00;
}

/* Mobile: prevent any overflow from the size="60" HTML attribute */
@media (max-width: 767px) {
  .contact-message-feedback-form {
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* ============================
   Breadcrumb (JS-injected on article pages)
============================== */
.site-breadcrumb {
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px 24px;
  font-size: 0.8rem;
}

.site-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.site-breadcrumb li + li::before {
  content: "›";
  margin-right: 4px;
  color: #aaa;
}

.site-breadcrumb a {
  color: #555;
  text-decoration: none;
}
.site-breadcrumb a:hover {
  color: #000;
  text-decoration: underline;
}

.site-breadcrumb li:last-child {
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40ch;
}


/* ============================
   Section breathing room
============================== */

/* Gap between article teasers and the video+sidebar row */
.layout-content-main,
.layout-content-sidebar {
  padding-top: 36px;
  padding-bottom: 36px;
}

/* Separator line above the video+sidebar section — front page only */
.path-frontpage .layout-content::before {
  content: "";
  display: block;
  border-top: 3px solid #FFE800;
}

/* Gap above node content (Who are we / paragraphs) */
.layout-content > .layout-full-width-content:first-of-type {
  padding-top: 40px;
}

/* Padding inside the main content wrapper on article pages */
.container-main-content {
  padding-bottom: 48px;
}


/* ============================
   Article metadata (Submitted by…)
============================== */
article footer {
  margin-top: 8px;
  margin-bottom: 28px;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

article footer div {
  font-size: 0.82rem;
  color: #666;
  letter-spacing: 0.02em;
}

article footer [property="schema:name"],
article footer [rel="schema:author"] {
  font-weight: 600;
  color: #333;
}


/* ============================
   Article subheadings
   (reduce fluid type so they don't overpower body text)
============================== */
article h2 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); margin: 1.4em 0 0.5em; }
article h3 { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); margin: 1.2em 0 0.4em; }
article h4 { font-size: 1rem; margin: 1em 0 0.3em; }


/* ============================
   Poll widget
============================== */
#block-mostrecentpoll h2 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #333;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #FFE800;
}

#block-mostrecentpoll .poll {
  font-size: 0.88rem;
}

#block-mostrecentpoll .vote-form label.option {
  display: inline;
  font-weight: normal;
  cursor: pointer;
}

#block-mostrecentpoll .form-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

#block-mostrecentpoll .form-actions input[type="submit"] {
  flex: 1;
  padding: 8px 10px;
  background: #FFE800;
  color: #000;
  border: none;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
}

#block-mostrecentpoll .form-actions input[type="submit"]:hover {
  background: #e6d000;
}

/* Poll results bars */
#block-mostrecentpoll .text {
  font-size: 0.82rem;
  margin-bottom: 4px;
}

#block-mostrecentpoll .bar {
  height: 8px;
  background: #FFE800;
  border-radius: 4px;
  margin-bottom: 10px;
}

#block-mostrecentpoll .percent {
  font-size: 0.78rem;
  color: #666;
}

#block-mostrecentpoll .total {
  font-size: 0.78rem;
  color: #999;
  margin-top: 8px;
}


/* ============================
   Related Articles block (bottom of article)
   4-column grid; h2 spans all columns
============================== */
#block-relatedarticlesoverview-2 {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 3px solid #FFE800;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}

#block-relatedarticlesoverview-2 > h2 {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

#block-relatedarticlesoverview-2 .teaser-container {
  width: auto;
  min-width: 0;
  height: auto;
  float: none;
  padding: 0;
  background: none;
}


/* ============================
   Text & Image paragraph
   Consistent box-sizing
============================== */
.paragraph.paragraph--type--text-and-image,
.paragraph.paragraph--type--text-and-image * { box-sizing: border-box; }

/* Wrapper: contain float + tuning variables */
.paragraph.paragraph--type--text-and-image {
  display: flow-root !important;

  --gap: .7rem;
  --min-text: 36ch;
  --media-min: 440px;
  --media-ideal: 58%;
  --media-max: 1000px;
}

/* Kill all column widths / flex on direct children */
.paragraph.paragraph--type--text-and-image > .text-image--text,
.paragraph.paragraph--type--text-and-image > .text-image--image,
.paragraph.paragraph--type--text-and-image.Right > .text-image--text,
.paragraph.paragraph--type--text-and-image.Right > .text-image--image,
.paragraph.paragraph--type--text-and-image.is-image-right > .text-image--text,
.paragraph.paragraph--type--text-and-image.is-image-right > .text-image--image {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  flex-basis: auto !important;
  float: none !important;
}

/* Kill widths on children of the text wrapper */
.paragraph--type--text-and-image .text-image--text > * {
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

/* Text wrapper: layout-invisible so it can never become a 50% column */
.paragraph--type--text-and-image .text-image--text {
  display: contents !important;
}
.paragraph--type--text-and-image .text-image--text > :first-child { margin-top: 0; }

/* Image: float left */
.paragraph--type--text-and-image .text-image--image {
  float: inline-start !important;
  inline-size: min(
    clamp(var(--media-min), var(--media-ideal), var(--media-max)),
    calc(100% - var(--min-text))
  ) !important;
  margin: 0 var(--gap) .85rem 0 !important;
}
.paragraph--type--text-and-image .text-image--image img {
  display: block; width: 100%; height: auto;
}

/* Right variant */
.paragraph--type--text-and-image.Right .text-image--image,
.paragraph--type--text-and-image.is-image-right .text-image--image {
  float: inline-end !important;
  margin: 0 0 .85rem var(--gap) !important;
}

/* Wrap stops after 3rd element on wide screens */
@media (min-width: 960px) {
  .paragraph--type--text-and-image .text-image--text > :nth-child(n+3) { clear: both; }

  /* Lists stay beside the image */
  .paragraph--type--text-and-image .text-image--text > ul,
  .paragraph--type--text-and-image .text-image--text > ol { clear: none !important; }

  .paragraph--type--text-and-image .text-image--text > :not(ul):not(ol):nth-child(n+4) { clear: both; }
}

/* Prevent next media block from creeping beside a float */
.paragraph--type--text-and-image + .paragraph--type--text-and-image,
.paragraph--type--image,
.paragraph--type--gallery,
figure,
.media--image { clear: both; }

/* List spacing beside the image */
.paragraph--type--text-and-image .text-image--text > ul,
.paragraph--type--text-and-image .text-image--text > ol {
  margin-top: .5rem;
  padding-inline-start: 1.25em;
}
.paragraph--type--text-and-image .text-image--text .list--full { clear: both !important; }

/* Mobile: stack image above text */
@media (max-width: 768px) {
  .paragraph.paragraph--type--text-and-image { display: block !important; }
  .paragraph--type--text-and-image .text-image--image {
    float: none !important;
    inline-size: 100% !important;
    margin: 0 0 .85rem 0 !important;
  }
}


/* ============================
   Mobile gutters for articles
============================== */
@media (max-width: 768px) {
  :root { --mobile-gutter: clamp(14px, 5vw, 22px); }

  :where(
    .node--type-article .node__content,
    .layout-content,
    .region-content,
    main article,
    .block-system-main-block
  ) {
    box-sizing: border-box;
    max-width: 100%;
    padding-left:  calc(env(safe-area-inset-left)  + var(--mobile-gutter));
    padding-right: calc(env(safe-area-inset-right) + var(--mobile-gutter));
  }

  :where(.node--type-article) :where(figure, .media--image, .paragraph--type--image) {
    margin-left: 0;
    margin-right: 0;
  }

  .paragraph.paragraph--type--text-and-image {
    padding-left: 0;
    padding-right: 0;
  }
}


/* ============================
   Related Articles cards
   (sidebar / "Also read about" widget)
============================== */
.view-content:has(.related-articles) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.related-articles {
  height: 100%;
  --ra-aspect: 4 / 3;
  --ra-lines: 2;
  --ra-pad: 10px 12px;
  --ra-font: clamp(.9rem, .86rem + .2vw, 1rem);
}

.related-articles > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.related-articles > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.related-articles .teaser-image {
  aspect-ratio: var(--ra-aspect);
  background-size: cover;
  background-position: center;
  position: relative;
}

.related-articles .teaser-cta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #ffe100;
  color: #000;
  padding: var(--ra-pad);
}

.related-articles .teaser-cta-text {
  font-weight: 600;
  line-height: 1.25;
  font-size: var(--ra-font);
  display: -webkit-box;
  -webkit-line-clamp: var(--ra-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .related-articles .teaser-cta-text { -webkit-line-clamp: 2; }
}

@media (hover: hover) {
  .related-articles .teaser-cta {
    max-height: 56px;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .related-articles > a:hover .teaser-cta,
  .related-articles > a:focus-visible .teaser-cta {
    max-height: 240px;
  }
}

/* ============================
   Homepage teaser CTA overlay
   Replace floating yellow text with a gradient + white text
   so it reads on any image brightness.
============================== */
.grid_row .teaser-container .teaser-image .teaser-cta,
.results-wrapper .article-item .teaser-container .teaser-image .teaser-cta {
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.68) 100%);
  padding: 28px 12px 12px;
}

.grid_row .teaser-container .teaser-image .teaser-cta .teaser-cta-text,
.grid_row .teaser-container .teaser-image .teaser-cta span,
.results-wrapper .article-item .teaser-container .teaser-image .teaser-cta .teaser-cta-text,
.results-wrapper .article-item .teaser-container .teaser-image .teaser-cta span {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}


/* ============================
   Article listing grid (.results-wrapper cards also carry
   .related-articles — undo the sidebar card styles)
============================== */

/* Reset the container itself: teaser.css sets height:220px + white bg */
#block-views-block-grid-overview-block-1-2 .teaser-container {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
}

#block-views-block-grid-overview-block-1-2 .related-articles > a {
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  display: block;
  height: auto;
  transition: none;
}

/* 4:3 gives taller images in the narrow 4-column cards (~180px wide) */
#block-views-block-grid-overview-block-1-2 .related-articles .teaser-image {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  width: 100% !important;
}

#block-views-block-grid-overview-block-1-2 .related-articles .teaser-cta {
  max-height: none !important;
  overflow: visible;
  transition: none;
}

/* Keep all cards the same height per row but don't stretch */
.results-wrapper {
  align-items: start;
}


/* ============================
   Related Articles block at bottom of article pages.
   The teaser-cta sits inside the image as an overlay so there
   is no content below the image — remove the dark background
   and let the image define the card height via aspect-ratio.
============================== */
#block-relatedarticlesoverview-2 .related-articles > a {
  background: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  height: auto;
}

/* Override the fixed 220px height from teaser.css so the image
   sizes itself proportionally inside the 4-column grid */
#block-relatedarticlesoverview-2 .teaser-container .teaser-image {
  height: auto !important;
  aspect-ratio: 4 / 3;
}


/* ============================
   Homepage teaser rows also carry .related-articles but
   must keep their original sharp-corner, fixed-height look.
   Explicitly undo the card styles above.
============================== */
#block-homepagearticlesoverview .related-articles > a {
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  display: block;
  transition: none;
}
#block-homepagearticlesoverview .related-articles > a:hover {
  transform: none;
  box-shadow: none;
}
#block-homepagearticlesoverview .related-articles .teaser-image {
  aspect-ratio: auto;
  height: 250px;
}
#block-homepagearticlesoverview .related-articles .teaser-cta {
  max-height: none !important;
  overflow: visible;
  transition: none;
}