/*
Theme Name: Bravada Plus Child
Theme URI: http://www.cryoutcreations.eu/
Description: Bravada Plus base child theme - use for your theme customizations
Author: Cryout Creations
Author URI: http://www.cryoutcreations.eu
Version: 0.5
Template: bravada-plus
*/

/* place your custom css and customizations below */


/*
 * Child Theme Styles
 * Natural Health Centre — Bravada Child Theme
 *
 * Table of Contents
 * -----------------
 * 1. Colour & Branding
 * 2. Navigation
 * 3. Clean Header / Title Banner
 * 4. Layout & Backgrounds
 * 5. Landing Page Overrides
 * 6. Slider
 * 7. Practitioners
 * 8. Modality Single Page
 * 9. Services Page
 * 10. FAQ Page
 * 11. Practitioner Contact List
 */


/* =============================================================================
   1. Colour & Branding
   ============================================================================= */

/* Site title colour and remove the default background pseudo-element */
.bravada-over-menu .header-fixed.site-header-bottom #site-title a {
    color: #3f7f65;
}
.bravada-over-menu .header-fixed.site-header-bottom #site-title a::before {
    background: none;
}

/* Site title background colour used in non-overlay contexts */
#site-title a::before {
    background: #3f7f65;
}

/* Site title removed on landing page over menu */
.bravada-landing-page .site-header-bottom #branding {
	display:none;
}
.bravada-landing-page .site-header-bottom.header-fixed #branding {
	display:block;
}

/* =============================================================================
   2. Navigation
   ============================================================================= */

/* Top-level nav links — bold and slightly larger on all pages */
.bravada-over-menu #access > div > ul > li > a {
    font-weight: 700;
    font-size: 1.1rem;
    color: #5A4A3F;
}

/* Hide all navigation except hamburger on landing page header - only show sticky */
.bravada-landing-page .site-header-bottom #access {
	display:none;
}
.bravada-landing-page .site-header-bottom.header-fixed #access {
	display:block;
}

/* Landing page — over menu (hero area): all links white 
.bravada-landing-page.bravada-over-menu #access > div > ul > li > a {

    color: #F2EFEA;
}*/

/* Current page highlight — all pages except landing page */
body:not(.bravada-landing-page) #access > div > ul > li.current-menu-ancestor > a,
body:not(.bravada-landing-page) #access > div > ul > li.current-menu-item > a {
    color: #C9A44A;
}

/* reduce padding between menu items to prevent nav dropping below branding */
#access a {
	padding: 0 1.3em;}

/* =============================================================================
   3. Clean Header / Title Banner
   ============================================================================= */

/* Full-width title banner used on pages with get_header('clean').
 * Uses the monstera tile as a subtle background with a light gradient overlay.
 */
.clean-title-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 20px;
    background:
        linear-gradient(rgba(242, 239, 234, 1), rgba(242, 239, 234, 0.50))
}
lp
/* Constrain the header image height within the clean banner */
.clean-title-banner #header-image-main-inside {
    height: 180px !important;
}

/* Title text within the clean banner */
.clean-title-wrap {
    text-align: center;
    padding: 2rem 1rem;
}

.clean-page-title {
    margin: 0;
    color: #1f4d3a;
    letter-spacing: 0.06em;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
}

/* Minimal header band for pages where the title is suppressed.
 * Just enough height to provide visual separation from the nav.
 */

.no-title-banner {
    background:
        linear-gradient(rgba(242, 239, 234, 1), rgba(242, 239, 234, 0.5));
    height: 130px;
}

/*padding at top of clean pages*/
.entry-content, .entry-summary, article.hentry {
    padding-top: 2em;
    padding-bottom: 2em;
}

/* =============================================================================
   4. Layout & Backgrounds
   ============================================================================= */

/* LP sections semi-transparency*/
#lp-text-zero,
#lp-text-one,
#lp-boxes-1,
#lp-boxes-3 {
    background-color: transparent;
} 

/* Interior pages — full width semi-transparency via #content which sits outside max-width 
body:not(.blog):not(.page-template-template-blog):not(.search):not(.bravada-landing-page) #content {
    background-color: #f9f7f5a6;
}*/

/* Keep .main transparent on interior pages to avoid double layering */
body:not(.blog):not(.page-template-template-blog):not(.search):not(.bravada-landing-page) #container:not(.bravada-landing-page) .main {
    background-color: transparent;
}

/* Remove the default bottom margin on one-column layouts inside landing pages */
.cryout #container[class*="one-"]:not(.bravada-landing-page) .main {
    margin-bottom: 0;
}

/* White background and padding for the About page (ID 354). */
body.page-id-354 article.hentry {
    background-color: #fff;
    padding: 20px;
}

h2.float{
    clear:none;
        margin-top: 0.5em;
}

/* =============================================================================
   5. Landing Page Overrides
   ============================================================================= */

/* Increase font weight and size on LP Header */
#header-page-title .byline {
    font-weight: 400;
	font-size:1.3em;
}

/* Reduce margin above first set of pratition boxes on LP */
#lp-boxes-1 .lp-boxes .lp-boxes-inside, .lp-boxes .lp-boxes-margins {
	margin: 1em auto;
}						

/* Hide feature image in LP boxes 3 - Offices */
.lp-boxes-3 .lp-box .lp-box-image {
    display: none;
}

.lp-box-image {
    height: auto !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.lp-box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Clear image at rest — remove overlay but keep border and animation */
.lp-boxes-static.lp-boxes-static2 .lp-box-imagelink {
    background: transparent;
}

/* Remove excess margin from h2 headings inside the About the Centre text block */
#lp-text-zero .lp-text-content h2 {
    margin: 0;
}

/* White background for the Contact Us text block */
#lp-text-one .lp-text-background {
    background-color: #fff;
}

/* =============================================================================
   6. Slider
   ============================================================================= */




/* =============================================================================
   7. Practitioners
   ============================================================================= */

/* Bravada hides the article header globally for its fancy title treatment.
 * Re-enable it for single practitioner pages since we use the no-title header
 * and output the title ourselves inside the template.
 */
.single-practitioner .main .article-inner > header {
    display: block;
}

.single-practitioner .practitioner {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Practitioner name — disable uppercase, reduce size, and set font.
 * The theme's singular-title is sized and styled for full-page headers.
 */
.single-practitioner .entry-title {
    text-transform: none;
    font-family: 'Noto Sans', sans-serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
}

/* Credentials line beneath the practitioner name */
.practitioner-credentials {
    font-size: 0.95rem;
    color: #5A4A3F;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.practitioner-organization {
    font-size: 0.95rem;
    color: #5A4A3F;
    font-style: italic;
    margin-top: -0.4rem;
    margin-bottom: 0.5rem;
}

/* --- Images --- */

/* Individual practitioner photo: floated right, square crop */
.person-image {
    float: right;
    margin: 0 0 1.5rem 1.5rem;
    max-width: 280px;
}

.person-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Office logo/image: not floated, displayed inline above description.
 * Max-height prevents tall logos from dominating the page.
 */
.office-image {
    float: none;
    max-width: 300px;
    max-height: 200px;
    overflow: hidden;
    margin: 0 0 1.5rem 0;
}

.office-image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 200px;
    height: auto;
}


/* Office description does not need to clear since the image is not floated */
.practitioner-description {
    clear: none;
}

/* --- Modalities and contact --- */

.practitioner-modalities {
    margin-bottom: 0.4rem;
    max-width: 600px;
}

.practitioner-contact {
    margin-bottom: 1rem;
}

.practitioner-phone a,
.practitioner-website a {
    color: #3f7f65;
    text-decoration: none;
}

.practitioner-phone a:hover,
.practitioner-website a:hover {
    text-decoration: underline;
}

/* --- Staff section (offices only) --- */

.practitioner-staff {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.staff-section-heading {
    margin-bottom: 1rem;
}

/* Staff photo uses the same square crop as individual practitioners */
.staff-photo {
    float: left;
    margin: 0 1.5rem 1rem 0;
    max-width: 200px;
    clear: left;
}

.staff-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Staff photo floated left so bio wraps beside it.
 * Name sits ABOVE the float (before the photo div in the template)
 * so it appears on its own line, then photo and bio flow together below.
 */
.staff-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    clear: left;  /* ensures name sits below any previous float, on its own line */
}

.staff-certifications {
    font-weight: 400;
    color: #5A4A3F;
}

/* Staff bio wraps beside the photo */
.staff-bio {
    clear: none;
}
/* After the staff section is done, clear everything */
.practitioner-rates,
.practitioner-payment,
.practitioner-appointment,
.practitioner-booking {
    clear: both;
}

/* --- Office Hours --- */

/* Ensure booking div doesn't collapse when staff photo is floated */
.practitioner-booking {
    clear: both;
    min-height: 80px;
}



/* Ensure hours section clears all floats and respects max-width */
.practitioner-hours {
    clear: both;
    max-width: 340px;
    margin-top: 1.5rem;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.hours-day {
    font-weight: 600;
    min-width: 100px;
}

.hours-time {
    text-align: right;
    color: #5A4A3F;
}

/* --- Booking button --- */

.practitioner-booking {
    margin: 1.5rem 0;
    clear: both;
}

/* --- Responsive --- */

/* Stack images above content on small screens */
@media ( max-width: 600px ) {
    .person-image,
    .staff-photo {
        float: none;
        margin: 0 0 1.5rem 0;
        max-width: 100%;
    }
}

/* =============================================================================
   8. Modality Single Page
   ============================================================================= */

/* Modality description — only shown for modalities with content */
.modality-description {
    margin-bottom: 2rem;
}

/* Heading above the practitioner grid */
.modality-practitioners-heading {
    text-transform: none;
    color: #1f4d3a;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

/* Four-column responsive grid */
.modality-practitioner-grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 1.5rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.modality-practitioner-card {
    text-align: center;
    max-width: 200px;
    margin: 0 auto;
}

/* Card link — remove default link styling */
.modality-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.modality-card-link:hover .modality-card-name {
    color: #3f7f65;
    text-decoration: underline;
}

/* Square image */
.modality-card-image {
    margin-bottom: 0.75rem;
}

.modality-card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

/* Practitioner name below image */
.modality-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1f4d3a;
    line-height: 1.3;
}

/* Office name shown as a subtitle under staff name */
.modality-card-subtitle {
    font-size: 0.85rem;
    color: #5A4A3F;
    margin-top: 0.25rem;
}

/* Text-only offices list at the bottom */
.modality-offices-list {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.modality-offices-list h6 {
    color: #1f4d3a;
    margin-bottom: 0.5rem;
}

.modality-offices-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modality-offices-list li {
    margin-bottom: 0.3rem;
}

.modality-offices-list a {
    color: #3f7f65;
    text-decoration: none;
}

.modality-offices-list a:hover {
    text-decoration: underline;
}

/* No practitioners message */
.modality-no-practitioners {
    color: #5A4A3F;
    font-style: italic;
}

/* Responsive — two columns on tablet, one on mobile */
@media ( max-width: 768px ) {
    .modality-practitioner-grid {
        grid-template-columns: repeat( 3, 1fr );
    }
}

@media ( max-width: 480px ) {
    .modality-practitioner-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   9. Services Page
   ============================================================================= */

.services-content {
    padding-top: 2rem;
}

/* Each modality section */
.services-modality {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.services-modality:last-child {
    border-bottom: none;
}

/* Modality heading */
.services-modality-title {
    color: #1f4d3a;
    text-transform: none;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    margin-bottom: 1rem;
}

/* Modality description */
.services-modality-description {
    margin-bottom: 1.25rem;
    max-width: 720px;
}

/* Practitioner list */
.services-practitioner-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services-practitioner-item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

.services-practitioner-item:last-child {
    border-bottom: none;
}

/* Practitioner name link */
.services-practitioner-name {
    font-weight: 600;
    color: #1f4d3a;
    text-decoration: none;
    min-width: 200px;
}

.services-practitioner-name:hover {
    text-decoration: underline;
    color: #3f7f65;
}

/* Organization name */
.services-practitioner-org {
    font-size: 0.9rem;
    color: #5A4A3F;
    font-style: italic;
}

/* Phone number */
.services-practitioner-phone {
    font-size: 0.9rem;
    color: #5A4A3F;
    text-decoration: none;
    margin-left: auto;
}

.services-practitioner-phone:hover {
    color: #3f7f65;
    text-decoration: underline;
}

/* Responsive — stack phone below name on small screens */
@media ( max-width: 600px ) {
    .services-practitioner-item {
        flex-direction: column;
        gap: 0.2rem;
    }

    .services-practitioner-phone {
        margin-left: 0;
    }
}

/* =============================================================================
   10. FAQ Page
   ============================================================================= */

.faq-content {
    padding-top: 1.5rem;
}

.faq-accordion {
    max-width: 620px;
    margin: 0 auto;
}
/* Each FAQ item */
.faq-item {
    border-bottom: 1px solid rgba(63, 127, 101, 0.12);
}

.faq-item:first-child {
    border-top: 1px solid rgba(63, 127, 101, 0.12);
}

/* Hide borders on open item to avoid conflict with radius */
.faq-question[aria-expanded="true"] {
    border-top: none;
}

.faq-item:has(.faq-question[aria-expanded="true"]) {
    border-bottom: none;
}

/* Each FAQ item — borders via pseudo-elements so they indent away from radius 
.faq-item {
    position: relative;
}

.faq-item::after {
    content: '';
    display: block;
    height: 1px;
    background-color: rgba(63, 127, 101, 0.12);
    margin: 0 0.75rem;
}

.faq-item:first-child::before {
    content: '';
    display: block;
    height: 1px;
    background-color: rgba(63, 127, 101, 0.12);
    margin: 0 0.75rem;
}
*/
/* Hide borders on and around the open item 
.faq-item:has(.faq-question[aria-expanded="true"])::after,
.faq-item:has(.faq-question[aria-expanded="true"])::before,
.faq-item:first-child:has(.faq-question[aria-expanded="true"])::before {
    display: none;
}
*/


/* Question button */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    text-transform: none;
    text-align: left;
    font-family: 'Noto Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #1f4d3a;
    gap: 1rem;
}

.faq-question:hover {
    background-color: rgba(180, 190, 175, 0.7);
    color: #1f4d3a;
}

.faq-question[aria-expanded="true"] {
    color: #1f4d3a;
    background-color: rgba(63, 127, 101, 0.12);
 /*   border-radius: 8px 8px 0 0;*/
}

/* +/− icon */
.faq-icon {
    font-size: 1.4rem;
    font-weight: 300;
    flex-shrink: 0;
    line-height: 1;
    color: #3f7f65;
}

/* Answer panel */
.faq-answer {
    padding: 0.75rem 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 0 0 8px 8px;
    color: #5A4A3F;
    line-height: 1.7;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   11. Practitioner Contact List
   ============================================================================= */

.practitioner-name {
  /* name styles */
}

.practitioner-phone {
  color: inherit; /* or whatever matches your link color */
  white-space: nowrap;
}

.practitioner-list {
  padding: 0 1.5rem;
  max-width: 800px;
  margin: 0 auto;
  list-style: none;
}