﻿@media(max-width:1028px) {
img {
	max-width: 100%;
	height: auto;
}
.container {
	width: 98%;
}
.header {
	width: auto;
}
.navigation ul {
	display: none;
	margin: 0;
	padding: 0;
}
h1 {
	width: auto;
	word-wrap: break-word;
}
.main-text-home {
	width: 60%;
}
.footer {
	height: auto;
}
.footer-bottom-middle {
	height: auto;
	padding: 20px 0;
}
.footer-bottom {
	height: auto;
}
.footer-text {
	width: 50%;
}
.footer-text2 {
	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;
}
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;
}
.text-right {
	margin: 0;
}
.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;
}
.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;
}
.navigation ul li {
	float: none !important;
	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%;
}
}
 @media(max-width:950px) {
.footer-bottom-middle {
	text-align: center;
}
.logo1, .logo2, .logo3, .logo4 {
	display: inline-block;
	float: none;
	width: auto;
}
  .logo4 {
    top: 0 !important;
    margin-top: 10px !important;
    position: static !important;
  }

.main-text-home, .main-text-eating-disorders {
	width: auto;
	margin: 0 5%;
}
.footer-text {
	display: block;
	float: none;
	width: auto;
	margin:0 2%;
}
.footer-text2 {
	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;
}
  .main-text-home {
    font-size: 18px !important;      /* bigger text */
    line-height: 30px !important;    /* improves readability */
  }
  .main-text-home h1 {
    line-height: 1.1 !important;   /* or 1.4 if you want more space */
  }

}



  /* Let the home footer grow to fit all logos + text */
  .footer-bottom-home {
    height: auto;                 /* remove the fixed 150px cap */
    padding-bottom: 20px;         /* give the text some breathing room */
    background-color: #9C1C1F;    /* be sure the background stays red */
  }

  /* Optional: make the overall footer background red on mobile too */
  .footer {
    background-color: #9C1C1F;
  }



@media(max-width:768px) {
.telephon {
	background: #9d1c20;
	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%;
}
  /* Show the inline image only on small screens (mobiles) */
  .mobile-portrait-only-insert {
    display: block !important;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 15px auto 0;
  }

}


@media(max-width:480px) {
.team-col-1, .team-col-2 {
	text-align: center;
}
.team-pic {
	width: auto;
	float: none;
}
.team-info {
	width: auto;
	float: none;
}
.text-right-therapies {
	height: 30px;
}
}


/* ==========================
   ROOMS – MOBILE PORTRAIT ONLY
   ========================== */
@media only screen and (max-width: 767.98px) and (orientation: portrait) {

  /* Swap header background to a Rooms mobile logo image */
  .header {
    background-image: url('images/mobile-header.jpg'); /* <= your new image */
    background-repeat: no-repeat;
    background-position: center 60px;   /* pushes logo down a little from the red bar */
    background-size: 85% auto;          /* logo roughly 85% of screen width */

    width: 100%;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 20px 0 !important;     /* gives the logo some space under the bar */
    line-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Turn .telephon into a full-width red bar at the very top */
  .telephon {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 5px !important;

    background: #9C1C1F !important;     /* Rooms red */
    text-align: center !important;
  }

  /* Style the link inside so it fills the bar and is clearly tappable */
  .telephon .phone-link,
  .telephon .phone-link:link,
  .telephon .phone-link:visited,
  .telephon .phone-link:hover,
  .telephon .phone-link:active {
    display: block;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 22px;                   /* adjust up/down to taste */
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Optional: make sure navigation sits snugly below header on phones */
  .navigation {
    margin-top: 0 !important;
  }
}

/* ==========================
   ROOMS – MOBILE PORTRAIT ONLY 
   (matches The Children's Rooms method)
   ========================== */


 /* ROOMS – MOBILE PORTRAIT ONLY */
@media only screen and (max-width: 767.98px) and (orientation: portrait) {

  /* Header: show the mobile header image like on the Children's site */
  .header {
    background-image: url('images/mobile-header.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center 40px !important;  /* nudge image down a bit */
    background-size: 85% auto !important;         /* similar to Children's */

    width: 100%;
    aspect-ratio: 300 / 206;                      /* gives the header height */
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Red phone bar underneath/over the header image */
.telephon {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;

    width: 100% !important;
    margin: 0 !important;

    /* ❗ Increase height by 40% */
    padding: 22px 5px !important;    /* was 15px → now taller */

    background: #9C1C1F !important;
    text-align: center !important;
}

.telephon a,
.telephon a:link,
.telephon a:visited,
.telephon a:hover,
.telephon a:active {
    display: block;
    color: #ffffff !important;

    /* ❗ Bigger phone number */
    font-size: 28px !important;   /* was 22px */
    font-weight: 800 !important;

    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}

  /* Make sure the content sits snug under the header */
  .header + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
 /* Reduce space between header and mobile menu */
.navigation {
    margin-top: -20px !important;
    padding-top: 0 !important;
    padding-bottom: 0px !important;   /* keep menu tight but not touching */
} 
  
  
  
}

/* Make footer logos uniform height on mobile */
@media only screen and (max-width: 767.98px) and (orientation: portrait) {

  .footer-bottom-middle img {
    max-height: 55px !important;   /* adjust to taste (50–60px is ideal) */
    width: auto !important;
    height: auto !important;
    margin: 8px 10px !important;
    vertical-align: middle !important;
  }

}

@media only screen and (max-width: 767.98px) and (orientation: portrait) {

  /* Flex layout for perfect spacing */
  .footer-bottom-middle {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 22px 0px !important;     /* a little more gap since logos are bigger */
    padding-bottom: 30px !important; 
  }

  /* 50% larger logos */
  .footer-bottom-middle img {
    max-height: 80px !important;   /* was 55px — now 50% bigger */
    width: auto !important;
    height: auto !important;
    vertical-align: middle !important;
  }

}


/* ROOMS – MOBILE LANDSCAPE HEADER FIX */
@media only screen and (max-width: 1028px) and (orientation: landscape) {
  .header {
    width: 100% !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;

    /* Option A (recommended): keep the whole image visible */
    background-size: contain !important;

    /* If you prefer it to always fill the header (but may crop a bit), use this instead:
    background-size: cover !important;
    */
  }
}


/* ROOMS – iPad / tablet PORTRAIT header fix */
@media only screen and (min-width: 768px) and (max-width: 1028px) and (orientation: portrait) {
  .header {
    width: 100% !important;
    height: 239px !important;            /* force visible header */
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: contain !important;  /* stops right-side cropping */
  }
}

/* Team page mobile column order */
@media only screen and (max-width: 768px) {

  .team-page {
    display: flex;
    flex-direction: column;
  }

  .team-page .main-text {
    order: 1;
  }

  .team-page .team-col-2 {
    order: 2;
  }

  .team-page .team-col-1 {
    order: 3;
  }

}
