/*
 * Small-screen corrections over the Webflow export.
 *
 * Loaded on every page ported from Webflow, after webflow.css and
 * legibility.css, so these win on equal specificity. Recorded in
 * docs/adr/0010-small-screens-over-parity.md.
 *
 * Webflow's stylesheet has four bands: desktop, 991px and down, 767px and down,
 * 479px and down. Most of what breaks does so because a component is only
 * re-laid-out in the smallest band, which leaves every width from 480px to 767px
 * — a large phone turned sideways, a small tablet, a folding phone — with the
 * desktop arrangement squeezed into a phone's width. The rules below mostly
 * carry the 479px layout up to where it is needed, rather than inventing one.
 *
 * Every rule names what it fixed, where it was seen, and at which width. None of
 * them changes the desktop page at 1200px and up.
 *
 * The live Webflow site has every one of these defects.
 */


/* ===========================================================================
   Every width
   =========================================================================== */

/* Article tables. lib/rich-text.js wraps each table in `.table-scroll` so it
   scrolls in its own box, but the rule that makes it scroll lives in site.css,
   which the ported Article pages never load. On a phone the right-hand columns
   of the tables in 20 Articles were cut off with no way to reach them. The box is
   already a focus stop (ticket 13), so it also gets a ring to show it has focus. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* A box that scrolls stops its child's margins collapsing through it, which
     added 17px above and 24px below every table at every width. The table's
     own 24px moves out here, where it collapses with its neighbours as before. */
  margin: 24px 0;
}
.table-scroll > table {
  margin-top: 0;
  margin-bottom: 0;
}
.table-scroll:focus-visible {
  outline: 3px solid #4ecfa2;
  outline-offset: 2px;
}

/* The enquiry form's Assessment picker. Webflow gives selects a fixed 38px, and
   Safari — on an iPhone, but not in Chrome — sizes the control from that rather
   than from the field's min-height, so 24px of padding left the chosen option
   14px of room and cut it in half. The height every other browser already used. */
select.text-field {
  height: 3.3em;
}

/* A bare URL typed into an Article (goodhousekeeping.com/health/a41284506/…) is
   one unbreakable word; at 480px it ran 30px past the column and was cut off. */
.w-richtext a {
  overflow-wrap: anywhere;
}


/* ===========================================================================
   Desktop-width touch screens and small laptops: 992px to 1199px
   =========================================================================== */

/* The header. Eight links, a search button and a call to action share one row,
   the type is scaled to the window (.833vw), and each link hides what does not
   fit. Below 1200px the labels are cut — "ERVICES", "OUNSELLING", "EFERRALS" at
   1024px, an iPad on its side — in 8.5px type. Show the MENU button the site
   already uses below 992px instead; its full-screen menu works at these widths. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .nav-links {
    display: none;
  }
  .fullscreen-menu-button {
    display: flex;
    flex: none;
    width: auto;
    padding-left: 2em;
    padding-right: 2em;
    grid-column-gap: 1.5em;
  }
  .nav-main-links .fs-menu-text {
    font-size: 12px;
  }
}


/* ===========================================================================
   Every touch-screen width: 1199px and down
   =========================================================================== */

/* Form fields in type under 16px make Safari zoom the page in when a field is
   tapped, and leave it zoomed: 15px on phones, 14.5px on an iPad held sideways.
   Enquiry forms on Contact, Questions, Testimonials and all seven Assessments. */
@media screen and (max-width: 1199px) {
  .text-field {
    font-size: max(16px, 1.7em); /* 1.7em is Webflow's own size; this only raises it */
  }
}


/* ===========================================================================
   Tablets and large phones: 991px and down
   =========================================================================== */

@media screen and (max-width: 991px) {
  /* The MENU label is sized .833vw of the window: 7px on an iPad held upright. */
  .nav-main-links .fs-menu-text {
    font-size: 12px;
  }

  /* Careers posting: the job-details card is 30% of the column, 204px at 768px,
     and "Administrative" and "indeterminate," ran out of it. Below the text
     instead, as it already is below 480px. */
  .content-7 {
    flex-wrap: wrap;
  }
  .div-block-64,
  .div-block-65 {
    width: 100%;
  }

  /* "Meet Our Expert Providers" (all seven Assessments and Counselling): each
     card is 60vw wide in an 18rem column, so from 768px to 991px every card lay
     half over the next and their credentials printed on top of each other. The
     card fills its column, as it already does below 768px. */
  .slider-snap-list .scroll-card {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Counselling, "Who We Support": five cards side by side until 480px, each
     120px wide at 768px, so every title and sentence was cut — "Childre",
     "Adoles", "Parent & Familie". Two to a row, the fifth across the full width. */
  .support-section-list {
    flex-wrap: wrap;
  }
  .support-section-list > .service-2-block {
    width: calc(50% - 8px);
  }
  .support-section-list > .service-2-block:last-child:nth-child(odd) {
    width: 100%;
  }
  /* Webflow's clearfix pseudo-elements on .w-container become flex items once
     the row wraps, and pushed the first card onto a row of its own. */
  .support-section-list::before,
  .support-section-list::after {
    content: none;
  }
}

/* Footer, 768px to 991px: the four columns plus 66px of padding a side need
   more room than the window has, and the last column — phone, email, address —
   was cut off. Logo and blurb across the top, three columns under it. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .footer-5 {
    flex: 1;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .footer-grid-02 {
    grid-template-columns: 1fr 1fr 1.3fr;
  }
  /* The first column is placed by a generated id selector; !important is the
     alternative to repeating that id here, which a re-port would break. */
  .footer-grid-02 > .footer-column:first-child {
    grid-column: 1 / -1 !important;
  }
}


/* ===========================================================================
   Phones: 767px and down
   =========================================================================== */

@media screen and (max-width: 767px) {
  /* Justified text in a column this narrow opens rivers of white space between
     words. Home and About Us numbered sections, the About Us intro, the footer. */
  .para-blue,
  .paragraph.is-large.not-align,
  .heading.is-content-9-title.xssmallparag,
  .paragraph-10,
  .paragraph-27 {
    text-align: left;
  }

  /* Enquiry forms (Contact, Questions, Testimonials, all seven Assessments):
     name and surname, email and phone sat two to a row, 120px each at 375px, so
     a typed email showed as "example@e". One to a row. */
  .div-block-7,
  .div-block-8 {
    flex-direction: column;
  }
  /* Assessment pages, "Book your assessment": photograph and form side by side
     down to 480px, the form 240px wide and its Turnstile check cut off. */
  .inquiry-inner {
    flex-flow: column;
  }
  .div-block-73 {
    width: 100%;
  }

  /* Assessment pages, "Other Assessments": the one-column grid still sized its
     column to the card's widest content, 491px in a 480px window. */
  .services-4-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Contact: the three detail cards and the email/booking panel sat side by side
     down to 480px, 601px wide in a 480px window and cut off at both edges. */
  .div-block-9 {
    flex-flow: column;
  }

  /* Provider pages, "Background" and "Specialty": two columns 50% apart, so on a
     phone the specialty column started beyond the right edge. */
  .div-block-51 {
    flex-wrap: wrap;
    grid-column-gap: 2em;
    grid-row-gap: 1.5em;
  }
  /* Provider pages, related Assessment: the checklist carries a -50px right
     margin, which on a phone pushes every line 50px past the edge. */
  .custom-list {
    margin-right: 0;
  }

  /* Careers posting, the job details: label and value share a row half and half,
     so "hr@allbrainsclinic.com" — one word — was cut off in its half. Label above
     value, each the card's full width. */
  .flex-block-5,
  .flex-block-5-last-child {
    flex-direction: column;
    align-items: flex-start;
    grid-row-gap: 2px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .text-block-16,
  .text-block-17 {
    width: 100%;
  }

  /* Counselling cards: one to a row on phones, as Webflow already has below
     480px. (The two-to-a-row rule above stops at 768px.) */
  .support-section-list > .service-2-block,
  .support-section-list > .service-2-block:last-child:nth-child(odd) {
    width: 100%;
  }
}

/* Home, "What Makes Us Different?": below 768px the three panels stack, each a
   fixed 100vh (90vh below 480px) tall. On a phone held sideways that is 375px
   for 730px of photograph and text, and the three panels' text printed over one
   another. At least a screen tall, as before, but never shorter than the content. */
@media screen and (max-width: 767px) {
  .slider-wrapper > .panel {
    height: auto;
    min-height: 100vh;
  }
  /* The middle panel ("Full Psychiatry Assessment") has none of its siblings'
     column layout, so its photograph shrank to a 70px sliver beside the text.
     Laid out like the other two, and only as tall as it needs to be — it was
     never a full screen. */
  .slider-wrapper > .panel:not(.is-red):not(.is-gray) {
    flex-flow: column;
    grid-row-gap: 24px;
    min-height: 0;
    padding: 48px 6%;
  }
}
@media screen and (max-width: 479px) {
  .slider-wrapper > .panel.is-red,
  .slider-wrapper > .panel.is-gray {
    min-height: 90vh;
  }
}

/* Footer, 480px to 767px: three columns in about 440px, and the contact column
   alone needs 220px. Two columns, with the blurb and the contact details each
   across the full width. (Below 480px Webflow already stacks it.) */
@media screen and (min-width: 480px) and (max-width: 767px) {
  /* flex: 1 because .footer-5 is a flex item sized to its content; once the
     content fits, it stopped short and left the dark .footer-1 showing. */
  .footer-5 {
    flex: 1;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .footer-grid-02 {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid-02 > .footer-column:first-child,
  .footer-grid-02 > .footer-column.lastfootercol {
    grid-column: 1 / -1 !important;
  }

  /* The booking form, once it sits under the photograph, runs to both edges of
     the window; below 480px Webflow gives this container 8vw a side. */
  .container-37 {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}


/* ===========================================================================
   Small phones: 479px and down
   =========================================================================== */

@media screen and (max-width: 479px) {
  /* Search. Below 480px Webflow hides the whole button group, so on most phones
     the site had no search at all — not in the header, not in the menu. The
     booking button in that group stays hidden; the menu carries it. */
  .nav-buttons {
    display: flex;
  }
  .nav-search-button {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
  }
  /* The clinic-details dropdown in the same group stays hidden too: its address,
     phone and email are already in the menu, and the logo needs the room. */
  .nav-buttons .dropdown-link-icon {
    display: none;
  }
  /* Home pins its logo at 180px, which with the search button beside it runs
     10px off a 320px screen. Let it give way on the narrowest phones. */
  .nav-main-links .nav-brand.w--current {
    width: auto;
    flex: 0 1 180px;
    min-width: 0;
  }

  /* Home, the providers tabs: four tabs in one scrolling row, and "Therapy Team"
     sat half off the screen. Two rows of two. (The Resources tabs, which fit,
     share the classes and are left alone.) */
  .container-providers:not(.resources-tabs) .tabs-2-links {
    flex-wrap: wrap;
  }
  .container-providers:not(.resources-tabs) .tab-2-link {
    flex: 1 1 calc(50% - 4px);
  }

  /* About Us, "Our Story / Our Team / Our Care": one scrolling row at 7vw type,
     so "Our Care" was cut in half. Let it wrap. */
  .content-9-menu:not(.book-sidebar) {
    flex-wrap: wrap;
    grid-row-gap: .25em;
  }

  /* Article pages, the author box: photograph beside the biography left the
     biography a column three words wide. Photograph above it. */
  .section-18 {
    flex-direction: column;
    grid-row-gap: 12px;
  }

  /* Psychoeducational Assessment: "Psychoeducational" set at 40px is wider than a
     320px phone and was cut off. 10.5vw is 40px at 381px, so the heading keeps
     its size on every phone that fits it and shrinks only on those that don't. */
  .assessment-title-2 {
    font-size: clamp(1.75rem, 10.5vw, 2.5rem);
  }
}

/* The Turnstile check is a fixed 300px. Below 360px the Assessment booking form
   is narrower than that once Webflow's 8vw padding is taken off, and the check
   was cut off. */
@media screen and (max-width: 359px) {
  .container-37 {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Volunteers: "Neurodevelopmental" in the page heading is wider than a 320px
     screen at the heading's 3em. */
  .rich-text-4 h2 {
    font-size: 2.6em;
  }
}