/* ===========================
   GLOBAL <=1100px ADJUSTMENTS
   =========================== */
@media (max-width:1100px) {
  *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  html, body {
    margin: 0;
    padding: 0;
  }

  img { max-width: 100%; height: auto; }

  h1.testimonials, .testimonials-survey-link { width:auto; }

  .testimonials-survey-link { position:static; margin-bottom:20px; }
  .testimonials-wrap { position: relative; }

  /* Fill width (avoid 98% which caused gutters) */
  .container { width: 100%; }
  .header { width: auto; }

  .navigation ul { display: none; margin: 0; padding: 0; }

  h1 { width: auto; word-wrap: break-word; }
  .main-text-home { width: 60%; }

  .footer,
  .footer-bottom,
  .footer-bottom-middle { height: auto; }
  .footer-bottom-middle { padding: 20px 0 0; }

  .footer-text { width: 50%; }

  .team-col-1, .team-col-2 { width: 46%; margin: 0 2%; }
  .team-pic { width: 23%; }
  .team-info { width: 75%; }

  .main-text,
  .text-right-child,
  .text-right-child2,
  .text-right-medico,
  .text-right-team { width: auto; }

  .text-right-child, .text-right-child2 { padding: 0; }
  .main-text { margin: 0 2%; }

  .survey-column, .testimonials-column { width: 30.33%; margin: 0 1.5% }

  .text-right { width: 65%; padding: 0; margin: 0; }

  div.nav-left { width: 30%; }
  ul.navigation-left { margin: 0; padding: 0; }
  li.nav-left { float: none; width: auto; }

  .navigation ul { float: none; }
  .navigation-left li a {
    margin: 0 0 10px 0 !important;
    padding: 10px !important;
    width: auto !important;
    height: auto !important;
    min-height: 32px;
  }

  .navigation ul li { float: none !important; }
  .navigation ul li a {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    line-height: normal !important;
    text-align: left !important;
    border-bottom: solid 1px #fff;
  }
  .navigation ul li:last-child a { border: 0; }
  .navigation ul li a br { display: none; }

  .text-right-therapies { width: 70%; }

  .footer-text2 { float: right; width: 45%; position: static; }

  /* FIXED: class selectors for logos */
  .logo1, .logo2, .logo3, .logo4, .logo5 { width: 8%; margin-left: 20px; }

  h2 { line-height: normal; }
  .home-page-heading { line-height: normal; margin: 0; font-size: 24px; }

  .main-text-therapy,
  .main-text-team,
  .main-text-testimonials,
  .main-text-training,
  .main-text-gp,
  .main-text-contact,
  .main-text-medico { width: auto; margin: 0; padding: 20px; }

  .therapy-page-heading { padding: 0; }
  .main-text-team { width: auto; }
  .testimonials-page-heading { margin: 0; }

  .testimonials-box-yellow,
  .testimonials-box-green4,
  .testimonials-box-pink-4a {
    width: 18%; left: initial; right: 20px;
  }

  .testimonials-wrap { display:flex; flex-wrap:wrap; align-items: baseline; }
  .testimonials-block {
    margin:1%;
    width:31% !important;
    position: static;
    height:auto !important;
  }

  .breath-works { position: static; }

  .mobile-menu { display: block; }
  .mobile-menu a {
    background: rgba(0, 0, 0, 0) url("images/menu-icon.png") no-repeat scroll 2% 50%;
    padding: 10px 40px;
    margin: 15px 0 15px 15px;
    display: inline-block;
    color: #9d1c20;
    font-weight: bold;
    text-decoration: none;
  }

  .navigation { height: auto; overflow: auto; }

  .main-text-contact, .location-map { width: auto; margin: 0 5%; }
  .text-left-contact { width: 49%; margin: 0; padding: 0; }
  .text-right-contact { width: 48%; margin: 0; padding: 0 0 0 2%; }

  .text-gp-right, .text-gp-left { padding: 0; width: 46%; margin: 0 2%; }
  .text-right-medico { height: auto; }
}

/* ====================
   <=950px REFINEMENTS
   ==================== */
@media (max-width:950px) {
  .footer-bottom-middle { text-align: center; }
  .main-text-home, .main-text-eating-disorders { width: auto; margin: 0 5%; }
  .footer-text { display: block; float: none; width: auto; margin: 0 2%; }
  .child-services-text { margin: 0; }

  .ContactFormRight, .ContactFormLeft { width: 100% !important; height: auto !important; display: block; }
  .ContactFormRight input, .ContactFormLeft input, .ContactFormLeft textarea { width: 100% !important; }

  .text-right-medico { margin: 0; padding: 0; }

  .logo1, .logo2, .logo3, .logo4 {
    float: none; display: inline-block; vertical-align: top; width: auto; margin: 0 5px; height: auto; top: 0;
  }
  .footer-text2 { float: none; width: auto; margin: 15px 0; }

  .therapy-page-heading { width: auto; }
  .main-text-asd { width: auto; padding: 20px; margin: 0; }

  .text-therapy-right, .text-therapy-left { width: 48%; }

  .main-text-testimonials { height:auto; }
  .testimonials-page-heading { margin: 0 0 20px 0; }
}

/* ====================
   <=768px REFINEMENTS
   ==================== */
@media (max-width:768px) {
  .telephon {
    background: #9D409D;
    width: 100%;
    right: 0; left: 0;
    text-align: center;
  }

  .team-col-1, .team-col-2 { width: auto; float: none; }
  .team-text { border-bottom: solid 1px #9d1c20; padding-bottom: 30px; }
  .team-text:last-child { border: 0; }

  .survey-column, .text-left-contact, .text-right-contact, .testimonials-column {
    float: none; width: auto; border: 0;
  }

  .left-menu { display: block; margin-bottom: 20px; }
  .left-menu a { font-weight: bold; }
  div.nav-left { display: block; width: auto; float: none; }
  ul.navigation-left { display: none; float: none; }
  ul.navigation-left li a br { display: none; }
  .navigation-left li a { min-height: inherit; }

  .text-right { float: none; width: auto; background: none; }
  .text-gp-right, .text-gp-left, .medico-text { float: none; width: auto; margin: 0; }

  .main { margin-bottom: 20px; }
  .text-right-therapies { margin: 0; padding: 0; width: 100%; }

  .header { background-repeat: no-repeat; height: 284px; }

  .telephon { top: inherit; bottom: 0; }
  .footer-text2 { width: auto; }

  .testimonials-box-light-blue,
  .testimonials-box-green,
  .testimonials-box-yellow,
  .testimonials-box-red,
  .testimonials-box-pink,
  .testimonials-box-purple,
  .testimonials-box-blue,
  .testimonials-box-teal,
  .testimonials-box-orange,
  .testimonials-box-yellow2,
  .testimonials-box-pink2,
  .testimonials-box-light-blue3,
  .testimonials-box-green3,
  .testimonials-box-yellow3,
  .testimonials-box-red3,
  .testimonials-box-pink3,
  .testimonials-box-purple3,
  .testimonials-box-blue3,
  .testimonials-box-teal3,
  .testimonials-box-orange3,
  .testimonials-box-teal4,
  .testimonials-box-light-blue4,
  .testimonials-box-yellow4,
  .testimonials-box-blue4,
  .testimonials-box-green4,
  .testimonials-box-pink4,
  .testimonials-box-pink4a,
  .testimonials-box-purple4,
  .testimonials-box-red4,
  .testimonials-box-orange4,
  .testimonials-box-yellow4a,
  .testimonials-box-yellow5,
  .testimonials-box-blue5,
  .testimonials-box-green5,
  .testimonials-box-pink5,
  .testimonials-box-red5,
  .testimonials-box-light-blue5 {
    position: static;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 20px;
    width: 48%;
    margin:1%;
  }

  .testimonials-block { width: 48% !important; }
}

/* ====================
   <=480px REFINEMENTS
   ==================== */
@media (max-width:480px) {
  .text-therapy-right, .text-therapy-left { float: none; margin: 20px 0; width: auto; padding: 0; }
  .team-col-1, .team-col-2 { text-align: center; }
  .team-pic { width: auto; float: none; }
  .team-info { width: auto; float: none; }

  .telephon { font-size: 22px; padding: 10px; }
  .telephon { font-size: 18px; }

  .testimonials-box-light-blue,
  .testimonials-box-green,
  .testimonials-box-yellow,
  .testimonials-box-red,
  .testimonials-box-pink,
  .testimonials-box-purple,
  .testimonials-box-blue,
  .testimonials-box-teal,
  .testimonials-box-orange,
  .testimonials-box-yellow2,
  .testimonials-box-pink2,
  .testimonials-box-light-blue3,
  .testimonials-box-green3,
  .testimonials-box-yellow3,
  .testimonials-box-red3,
  .testimonials-box-pink3,
  .testimonials-box-purple3,
  .testimonials-box-blue3,
  .testimonials-box-teal3,
  .testimonials-box-orange3,
  .testimonials-box-teal4,
  .testimonials-box-light-blue4,
  .testimonials-box-yellow4,
  .testimonials-box-blue4,
  .testimonials-box-green4,
  .testimonials-box-pink4,
  .testimonials-box-pink4a,
  .testimonials-box-purple4,
  .testimonials-box-red4,
  .testimonials-box-orange4,
  .testimonials-box-yellow4a,
  .testimonials-box-yellow5,
  .testimonials-box-blue5,
  .testimonials-box-green5,
  .testimonials-box-pink5,
  .testimonials-box-red5,
  .testimonials-box-light-blue5 {
    display: block;
    width: auto;
  }

  .testimonials-block { width: 98% !important; }
}

/* ====================
   <=360px REFINEMENTS
   ==================== */
@media (max-width:360px) {
  .logo1, .logo2, .logo3, .logo4 { margin: 0; padding: 5px; width: 46%; }
  .testimonials-box-green4 { width: 46%; left: initial; right: 20px; }
}

/* ============================
   HEADER IMAGE SWAPS BY DEVICE
   ============================ */

/* iPad PORTRAIT (768–1024px wide) */
@media only screen and (min-width: 768px) and (max-width: 1024.98px) and (orientation: portrait) {
  .header {
    background-image: url('images/mobile-header-wide.jpg');
    background-size: cover;
    background-position: center center;
    height: 284px; /* tweak for your artwork */
  }
}

/* MOBILE PORTRAIT (phones <= 767px wide) */
@media only screen and (max-width: 767.98px) and (orientation: portrait) {
  .header {
    background-image: url('images/mobile-header.jpg');
    background-repeat: no-repeat;
    background-position: center 40px;   /* nudge down from top */
    background-size: 85% auto;          /* image scaled to 85% of screen width */
    width: 100%;
    aspect-ratio: 300 / 206;            /* keep correct image proportions */
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    }

    
    .main-text-home p:first-of-type::after {
    content: url('images/mobile-image.jpg');
    display: block;
    margin: 15px auto;   /* centers the image with spacing */
    max-width: 90%;      /* keep it responsive */
    height: auto;
  }

  /* Purple phone number bar (under image) */
  .telephon {
    position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    display: block !important; width: 100% !important;
    background: #9D409D !important; color: #fff !important; text-align: center !important; font-weight: bold !important;
    font-size: 30px !important; padding: 20px 5px !important; margin: 0 !important;
  }
  .telephon a,
  .telephon a:link,
  .telephon a:visited,
  .telephon a:hover,
  .telephon a:active {
    color: #ffffff !important; text-decoration: none !important; -webkit-tap-highlight-color: transparent;
  }

  /* remove any gap below header */
  .header + * { margin-top: 0 !important; padding-top: 0 !important; }
  .clear, .clear5, .clear-10, .clear-20, .clear-30 { height: 0 !important; }
}

/* MOBILE LANDSCAPE (phones up to 900px wide) */
@media only screen and (max-width: 900px) and (orientation: landscape) {
  .header {
    background-image: url('images/mobile-header-wide.jpg');
    background-size: cover;
    background-position: center center;
    height: 220px; /* adjust for your image */
  }
}

/* =========================================
   FULL-WIDTH ENFORCERS (portrait & landscape)
   ========================================= */

/* Small screens: remove gutters & fill width */
@media only screen and (max-width: 1100px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden; /* prevent tiny horizontal scrolls */
  }
  .container, .container-team {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .main, .main-home, .main-pages, .main-pages-medico {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Phone landscape: catch wide iPhones (CSS width > 767px) */
@media only screen and (orientation: landscape) and (max-width: 1024px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .container, .container-team {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .main, .main-home, .main-pages, .main-pages-medico, .navigation, .footer {
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
}

/* Show it ONLY on phones in portrait */
@media only screen and (max-width: 767.98px) and (orientation: portrait) {
  .mobile-portrait-only-insert {
    display: block !important;
    width: 90%;
    max-width: 480px;
    height: auto;
    margin: 15px auto 0;
  }
}
@media only screen and (max-width: 767.98px) and (orientation: portrait) {
  .mobile-portrait-only-insert {
    display: block !important;
    width: 90%;
    max-width: 480px;
    height: auto;
    margin: 15px auto 0;
  }
}

/* ==== Footer logos: phone PORTRAIT fix ==== */
@media only screen and (max-width: 767.98px) and (orientation: portrait) {
  /* make the row wrap naturally, left-aligned, with no overlap */
  .footer-bottom-middle {
    text-align: left;          /* left-align row */
    height: auto !important;   /* grow with content */
  }

  /* reset desktop floats/offsets and use inline-blocks that wrap nicely */
  .logo1, .logo2, .logo3, .logo4, .logo5 {
    float: none !important;
    display: inline-block !important;
    vertical-align: top;
    position: static !important;   /* kills top:20px from desktop */
    top: auto !important;
    margin: 10px 10px 0 0;         /* small gap between badges */
    width: auto; height: auto;     /* keep their natural sizes */
  }

  /* if you want the wrapped one to definitely start a new line, force it: */
  .logo4, .logo5 {                 /* whichever is the one that wraps */
    /* uncomment ONE of these two lines if needed, otherwise let it wrap naturally */
    /* display: block !important;  */
    /* clear: both !important;     */
  }
}

/* ==== Footer padding: phone PORTRAIT ==== */
@media only screen and (max-width: 767.98px) and (orientation: portrait) {
  .footer-bottom-middle {
    padding-left: 15px !important;  /* adjust as you like (10–20px works) */
    padding-right: 5px !important; /* optional, to balance both sides */
    box-sizing: border-box;
  }

  .footer-text2 {
    margin-left: 0 !important;   /* reset old desktop offset */
    padding-left: 0px;          /* same as logos */
  }

  .logo1, .logo2, .logo3, .logo4, .logo5 {
    margin-left: 0 !important;   /* strip desktop spacing */
    margin-right: 15px;          /* space between logos */
  }
}


/* ===== iPad PORTRAIT (768–1024) ===== */
@media only screen and (min-width:768px) and (max-width:1024.98px) and (orientation:portrait) {
  .header {
    background-image: url('images/mobile-header-wide.jpg');
    background-size: cover;
    background-position: center center;
    height: 284px; /* adjust to your artwork */
  }

  .telephon {
    position: absolute !important;   /* stay on top of header */
    top: 240px !important;           /* adjust until it sits neatly */
    right: 30px !important;
    left: auto !important;
    bottom: auto !important;

    background: transparent !important; /* no purple bar */
    color: #fff !important;             /* ensure white text */
    font-size: 28px !important;         /* tweak size for iPad */
    font-weight: bold !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .telephon a,
  .telephon a:link,
  .telephon a:visited,
  .telephon a:hover,
  .telephon a:active {
    color: #fff !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }
}
/* ===== iPad LANDSCAPE (768–1024 wide) ===== */
@media only screen and (min-width:768px) and (max-width:1024.98px) and (orientation:landscape) {
  .header {
    background-image: url('images/mobile-header-wide.jpg');
    background-size: cover;
    background-position: center center;
    height: 260px; /* adjust if your artwork needs more/less height */
  }

  .telephon {
    position: absolute !important;   /* overlay on the header, not a bar */
    top: 200px !important;           /* nudge down a bit from where it was */
    right: 30px !important;
    left: auto !important;
    bottom: auto !important;

    z-index: 2;                      /* make sure it sits above the header */
    background: transparent !important;
    color: #fff !important;          /* force white number */
    font-size: 28px !important;
    font-weight: bold !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .telephon a,
  .telephon a:link,
  .telephon a:visited,
  .telephon a:hover,
  .telephon a:active {
    color: #fff !important;          /* keep it white in all states */
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ===== iPad LANDSCAPE (all current models) ===== */
@media only screen and (orientation: landscape) and
  ((min-width:1024px) and (max-width:1366px)),
  only screen and (orientation: landscape) and
  (min-device-width:768px) and (max-device-width:1366px) {

  .header {
  background-image: url('images/header-background-3.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;      /* keep proportions, no crop */
  height: 237px !important;      /* same as desktop header */
}
  .telephon {
    position: absolute !important;   /* overlay on header */
    top: 200px !important;           /* nudge down if needed */
    right: 30px !important;
    left: auto !important;
    bottom: auto !important;

    z-index: 2;
    background: transparent !important;
    color: #fff !important;          /* force white */
    font-size: 28px !important;
    font-weight: bold !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .telephon a,
  .telephon a:link,
  .telephon a:visited,
  .telephon a:hover,
  .telephon a:active {
    color: #fff !important;          /* keep white after tap */
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }
}

/* iPad LANDSCAPE fixes (1024x768 logical, incl. Pro variants) */
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {

  /* Let the page grow to fit testimonials */
  .main-pages,
  .main-text-testimonials {
    height: auto !important;
  }

  /* Use a tidy 2-column grid so cards align and gaps are even */
  .testimonials-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;              /* space between cards */
    align-items: start;     /* avoid baseline weirdness */
  }

  /* Neutralise all the absolute/inline positioning */
  .testimonials-block {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* Optional: make text comfortable in the grid */
  .testimonials-block { font-size: 16px; line-height: 1.35; }
}

/* Safety: if any other tablet landscape buckets exist, keep them consistent */
@media only screen and (min-width: 834px) and (max-width: 1023.98px) and (orientation: landscape) {
  .main-pages,
  .main-text-testimonials { height: auto !important; }
  .testimonials-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }
  .testimonials-block {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }
}

/* iPad LANDSCAPE fixes (1024px wide) */
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {

  .main-text-testimonials {
    padding: 0 40px 40px 0px !important; /* add left/right and bottom padding */
    box-sizing: border-box;
  }

  .testimonials-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }

  .testimonials-block {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }
}



/* iPad PORTRAIT fixes (768–1024 logical) */
@media only screen and (min-width: 768px) and (max-width: 1024.98px) and (orientation: portrait) {

  /* Let the page grow naturally and keep space above footer */
  .main-pages,
  .main-text-testimonials {
    height: auto !important;
    padding-bottom: 40px !important;   /* prevents footer overlap */
  }

  /* Use a clean 2-column grid on portrait iPad */
  .testimonials-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  /* Neutralise all inline absolute positioning on the cards */
  .testimonials-block {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* Tidy text inside cards (optional) */
  .testimonials-block { font-size: 16px; line-height: 1.35; }
}

/* Safety: if any portrait iPad Pros report slightly narrower widths */
@media only screen and (width: 820px) and (orientation: portrait) {
  .testimonials-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* === MOBILE FIX: testimonials should not overlap footer === */
@media only screen and (max-width: 767.98px) {
  /* Let the page grow with content */
  .main-pages,
  .main-text-testimonials {
    height: auto !important;
  }

  /* A bit of breathing room above the footer */
  .main-pages {
    padding-bottom: 60px !important;
  }

  /* Turn off absolute positioning on all testimonial boxes */
  .testimonials-wrap {
    display: block !important;
    position: static !important;
    margin: 0 0 10px 0;
  }

  /* Catch all boxes like .testimonials-box-yellow, -green, etc */
  .testimonials-wrap [class^="testimonials-box-"],
  .testimonials-wrap [class*=" testimonials-box-"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;      /* full width on mobile */
    height: auto !important;
    margin: 0 0 16px 0 !important;
  }

  /* If you use a helper class .testimonials-block, normalize it too */
  .testimonials-block {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 16px 0 !important;
  }
}
/* === FINAL RULES FOR MOBILE PORTRAIT IMAGE === */

/* Hide by default (all devices) */
.mobile-portrait-only-insert {
  display: none !important;
}

/* Show ONLY on mobile portrait (phones ≤767px wide) */
@media only screen and (max-width: 767.98px) and (orientation: portrait) {
  .mobile-portrait-only-insert {
    display: block !important;
    width: 90%;
    max-width: 480px;
    height: auto;
    margin: 15px auto 0;
  }
}