/* =========================================================
   ICLPSM — Responsive layer

   Everything in this file sits inside a max-width media query, so the
   desktop rendering is byte-for-byte what it was. Only phone and tablet
   widths are touched.

   Why so many !important declarations: the pages carry their layout in
   inline style attributes — padding, font sizes and widths are written
   directly on the elements. An inline style outranks every selector in a
   stylesheet, so a rule that has to override one has no other lever. They
   are confined to the media queries below and never apply above 991px.

   Measured before writing: at 375px, 41 of 50 pages already fitted the
   viewport; three overflowed by exactly 15px from a Bootstrap row's
   negative margin. The rest of this file is about what a page feels like
   at that width rather than whether it fits — desktop padding and heading
   sizes carried onto a phone unchanged.
   ========================================================= */


/* ---------------------------------------------------------
   1. Nothing may push the page sideways
   ---------------------------------------------------------
   A Bootstrap .row carries -15px side margins that its parent's padding is
   meant to cancel. Where a row sits outside a .container or column, that
   padding is absent and the row hangs 15px past the viewport, which is the
   overflow measured on council-members, blog and find-a-member. Neutralising
   the margin only where there is no parent padding to cancel it is safer
   than zeroing every row. */
@media (max-width: 991.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body > .row,
  section > .row,
  .ftco-section > .row,
  .hero-wrap > .row,
  /* A row nested directly inside another row is the actual cause on
     council-members and blog: the inner row's negative margin has no
     column padding to cancel it, so it hangs past the edge. */
  .row > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Media and embeds never dictate the page width. */
  img,
  video,
  iframe,
  svg,
  canvas {
    max-width: 100%;
    height: auto;
  }

  /* Long unbroken strings — email addresses, reference codes, URLs. */
  p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Wide content scrolls inside its own box, not the page. */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre, code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }
}


/* ---------------------------------------------------------
   2. Tablet — 768px to 991px
   ---------------------------------------------------------
   The desktop card padding is only slightly too generous here, so the
   adjustment is modest. Two-column content still works at this width and
   is deliberately left alone. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ftco-section {
    padding-top: 4em !important;
    padding-bottom: 4em !important;
  }

  .hero-wrap.hero-wrap-2 {
    background-position: center center !important;
  }

  h1.bread {
    font-size: 2.4rem !important;
    line-height: 1.2 !important;
  }
}


/* ---------------------------------------------------------
   3. Phone — up to 767px
   ---------------------------------------------------------
   This is where the inline desktop values genuinely hurt: 40–50px of card
   padding on a 375px screen leaves roughly 290px of usable width, and a
   2.2rem heading sets about 8 characters to the line. */
@media (max-width: 767.98px) {

  /* -- rhythm ------------------------------------------------------- */
  .ftco-section {
    padding-top: 2.75em !important;
    padding-bottom: 2.75em !important;
  }

  /* Bootstrap rows carry -15px side margins that the container's 15px
     padding is meant to cancel exactly. Any other value leaves a residue:
     16px here produced a 2px overflow on every page with a
     .container-fluid. Keep the two numbers equal. */
  .container,
  .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Cards and panels: the inline 30–50px becomes something a phone can
     afford. Scoped to elements carrying an inline style, which is exactly
     the population that needs overriding. */
  section [style*="padding: 50px"],
  section [style*="padding: 45px"],
  section [style*="padding: 40px"],
  section [style*="padding: 35px"],
  section [style*="padding: 30px"] {
    padding: 22px 18px !important;
  }

  section [style*="padding: 60px"],
  section [style*="padding: 80px"] {
    padding: 28px 18px !important;
  }

  /* -- type --------------------------------------------------------- */
  h1.bread {
    font-size: 1.85rem !important;
    line-height: 1.22 !important;
  }

  .hero-wrap .subheading,
  .hero-wrap p.mt-3 {
    font-size: 1rem !important;
  }

  h1 { font-size: 1.8rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.45rem !important; line-height: 1.3 !important; }
  h3 { font-size: 1.2rem !important; line-height: 1.35 !important; }
  h4 { font-size: 1.05rem !important; }

  /* Body copy stays at 16px: anything smaller invites iOS to zoom on
     focus and makes long passages hard work. */
  p, li {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* -- hero --------------------------------------------------------- */
  .hero-wrap,
  .hero-wrap-2 {
    background-attachment: scroll !important;   /* fixed backgrounds judder on iOS */
  }

  .hero-wrap .hero-inner,
  .slider-text {
    text-align: left;
  }

  /* -- controls ----------------------------------------------------- */
  /* 44px is the smallest reliably tappable target. */
  .btn,
  button,
  input[type="submit"],
  .bcs-login-btn,
  .nav-item .bcs-main-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Full-width buttons, but the side margins have to go with it — an
     inline margin-left plus a 100% width is what pushed the button off
     the edge of the contact page. */
  .btn {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }

  /* A row of buttons becomes a stack. */
  [style*="display: flex"][style*="gap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* -- forms -------------------------------------------------------- */
  /* 16px is the threshold below which iOS zooms the viewport on focus. */
  input,
  select,
  textarea,
  .form-control {
    font-size: 16px !important;
    min-height: 44px;
    width: 100%;
  }

  textarea,
  textarea.form-control {
    min-height: 120px;
  }

  .form-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* -- grids -------------------------------------------------------- */
  /* Any grid still holding multiple columns collapses to one. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* -- footer ------------------------------------------------------- */
  .footer {
    text-align: left;
  }

  .footer .col-md-3 {
    margin-bottom: 28px;
  }

  .footer-heading {
    font-size: 1.05rem !important;
    margin-bottom: 12px;
  }
}


/* ---------------------------------------------------------
   4. Small phones — up to 400px
   --------------------------------------------------------- */
@media (max-width: 400px) {
  /* Tighter gutters, but the row margin and the column padding move with
     the container padding so the three still cancel out. */
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .row {
    margin-left: -12px !important;
    margin-right: -12px !important;
  }

  .row > [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1.bread { font-size: 1.6rem !important; }
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.3rem !important; }

  section [style*="padding: 50px"],
  section [style*="padding: 40px"],
  section [style*="padding: 30px"] {
    padding: 18px 14px !important;
  }
}


/* ---------------------------------------------------------
   5. Landscape phone
   ---------------------------------------------------------
   A full-height hero leaves no room for content when the screen is
   320px tall. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-wrap,
  .hero-wrap-2 {
    min-height: 380px !important;
    height: auto !important;
  }

  .ftco-section {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
  }
}


/* ---------------------------------------------------------
   6. Touch devices of any size
   ---------------------------------------------------------
   Hover-to-open menus have no equivalent gesture on a touch screen; the
   menu must respond to a tap instead. */
@media (hover: none) and (pointer: coarse) {
  .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
  }

  .dropdown-item {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}


/* ---------------------------------------------------------
   Deliberately nothing above 991.98px
   ---------------------------------------------------------
   A cap on .container for very wide screens was drafted here and removed:
   the brief is that desktop must look exactly as it did, and 1600px is a
   desktop. Every rule in this file is therefore bounded at 991.98px or
   below, or gated on a touch pointer. That is what makes it safe to load
   on all 44 content pages without reviewing each one's desktop layout. */