/* Responsive layer over the cloned Bricks stylesheet (site.css). Loaded after it; everything that changes the 1440 px desktop look is inside a max-width query. */

/* hero: the 150 px title scales with the viewport (identical to the original at 1440 px and up, it used to overflow below ~1400 px) */
#brxe-uqcryd { font-size: min(150px, 10.4vw); }
#brxe-bcutwb { max-width: 100%; }

/* keyboard focus + reduced motion */
:focus-visible { outline: 2px solid var(--primary, #00ddb1); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 767px) {
  /* hero: dark like the header, no empty bands */
  #brxe-hgdpii { background-color: var(--bg-body); }
  #brxe-bcutwb { height: auto; min-height: 0; padding: 28px 16px 32px; font-size: 16px; }
  #brxe-uqcryd { font-size: clamp(26px, 8.2vw, 44px); line-height: 1.25; color: #e6f1f2; white-space: nowrap; }
  #brxe-uqcryd .typed-cursor { color: var(--primary); }
  #brxe-hoiybi { font-size: clamp(1rem, 4.6vw, 1.5rem); line-height: 1.35; color: var(--primary); background-color: #0f2230; max-width: 100%; }
  #brxe-mxkcbs { margin-top: 1rem; }

  /* header: button left, menu toggle right, one row, 44 px targets */
  #brxe-uhcjlb { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: .75rem; }
  #brxe-kobnuw, #brxe-vwdzhu { width: auto; flex: 0 1 auto; align-items: center; }
  #brxe-tstrad { min-height: 44px; align-items: center; justify-content: center; }
  #brxe-gowdme, #brxe-udxmgk.brx-open #brxe-dorhdp { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; color: #fff; }
  #brxe-gowdme .brxa-inner, #brxe-gowdme .brxa-inner::before, #brxe-gowdme .brxa-inner::after { background-color: #fff; }
  #brxe-udxmgk .brx-nav-nested-items > li > a { min-height: 44px; display: inline-flex; align-items: center; }

  /* footer: the three columns stack, contact details as a tidy list */
  #brxe-lehqdw { flex-direction: column; row-gap: 1.75rem; }
  #brxe-fxjlyc, #brxe-kzweho, #brxe-xqlqrq { width: 100%; }
  #brxe-xqlqrq a, #brxe-pvcmrr a { display: inline-block; padding-block: 10px; }
  .site-contents { overflow-wrap: anywhere; }

  /* page content must never push the page wider than the screen */
  main img, main video, main iframe, main table { max-width: 100%; height: auto; }
  main pre, main code { max-width: 100%; }
  main pre { overflow-x: auto; font-size: 13px; line-height: 1.5; -webkit-overflow-scrolling: touch; }
  main table { display: block; overflow-x: auto; }
  main input, main select, main textarea { font-size: 16px; }
}

/* tablet and phone */
@media (max-width: 991px) {
  main .brxe-image { min-width: 0 !important; max-width: 100% !important; height: auto; }
  #brxe-lixdlb { box-sizing: border-box; max-width: 100%; padding-inline: 16px; }
  #brxe-tstrad { min-height: 44px; }
  #brxe-udxmgk .brx-nav-nested-items > li > a { min-height: 44px; display: inline-flex; align-items: center; }
  .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  main .bricks-button, main .brxe-button { min-height: 44px; }
}

/* WCAG AA contrast fixes (small colour nudges, layout untouched) */
#brxe-sfqqtb .submit-button-wrapper button, #brxe-sfqqtb .submit-button-wrapper button .text { color: #1a0509 !important; }
#brxe-durewe p.brxe-text-basic { color: #9fb4bd !important; opacity: 1 !important; }

@media (max-width: 991px) {
  #brxe-hdrrwm { align-items: stretch; }
  #brxe-xmkkui { width: auto; align-self: stretch !important; padding-inline: 16px; }
}

@media (max-width: 991px) {
  main .brxe-block, main .brxe-container, main .brxe-section { min-width: 0 !important; max-width: 100%; }
}

@media (max-width: 767px) {
  /* text never touches the screen edge (dark bands stay full-bleed, so the inset goes on the text, not on the sections) */
  main :is(h2, h3, h4, h5, h6, p, ul, ol, pre, figure):not(.brxe-post-title, .brxe-post-content *, .brxe-accordion, .site-masonry, .bricks-layout-wrapper, .accordion-content-wrapper *, .brxe-form *, [role='tabpanel'] *, .site-contents *) { margin-inline: 16px; }
  .brxe-post-title { margin-inline: 16px; }
  #brxe-sfqqtb .submit-button-wrapper, #brxe-sfqqtb .submit-button-wrapper button { width: 100%; min-height: 48px; justify-content: center; }
}

/* script / category lists: the JS masonry cannot work with three 98 px columns; two columns on tablets, a single column on phones */
@media (max-width: 991px) {
  .site-masonry > .bricks-isotope-sizer, .site-masonry > .bricks-layout-item { width: calc(50% - 12px); }
}
@media (max-width: 767px) {
  .site-masonry { height: auto !important; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-inline: 0; padding: 0; list-style: none; }
  .site-masonry > .bricks-layout-item { position: static !important; left: auto !important; top: auto !important; width: auto !important; margin: 0 !important; }
  /* the JS reads the sizer's width, so it stays in the layout (invisible, 100 % wide) */
  .site-masonry > .bricks-isotope-sizer { position: absolute; width: 100% !important; height: 0; margin: 0; visibility: hidden; }
  .site-masonry > .bricks-gutter-sizer { position: absolute; width: 0; height: 0; }
  .brxe-posts { padding-inline: 16px; }
}

div.dynamic[data-field-id='ciceue'] { color: rgba(0, 0, 0, 0.66) !important; }
#search-input { min-height: 44px; }
@media (max-width: 767px) {
  ul.brxe-image-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  ul.brxe-image-gallery > li { width: auto !important; min-width: 0 !important; }
  ul.brxe-image-gallery img { width: 100%; height: auto; }
}

@media (max-width: 767px) {
  main .brxe-post-content { padding-inline: 16px; }
}