/* Root Colour Variables */
:root {
    --ps-purple: #663366;
    --ps-olive: #999966;
    --ps-lilac: #996699;
    --ps-light: #ffffff;
    --dk-50: rgba(0, 0, 0, 0.5);
    --shadows: 0px 0.5px 4px rgba(0, 0, 0, 0.2);
    --transitions: all 0.5s ease;
}
/* Typographic overrides */
h2 {
    padding-bottom: 0.25rem;
}
/* Generic block styling */
/* Hide on Mobile */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}
/* Resetting the spacer height */
/* Force all spacer blocks to 64px unless a user specifically drags them otherwise */
.wp-block-spacer[style*="height:100px"] {
    height: 64px !important;
}
/* class for creating circular images */
.widget-background {
    background-position: top right;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
.circle-image img {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover;
    border-radius: 50%;
}
/* Buttons */
.wp-block-button__link,
.wp-element-button {
    transition: var(--transitions);
}
.wp-block-button__link:hover {
    background-color: var(--ps-olive);
    transform: scale(0.95);
}
.outline-button .wp-block-button__link{
    background-color: transparent;
    border: solid 0.2rem var(--ps-light);
    color: var(--ps-light);
}
/* Table styling */
/* Force Striped tables to respect the font size set in the editor */
.wp-block-table.is-style-stripes--2 td, 
.wp-block-table.is-style-stripes--2 th {
    font-size: inherit !important;
}
/* Custom list styling */
ul {
  list-style: none; /* Hide default bullets */
  padding-left: 1rem;
}

li {
  position: relative;
  padding-left: 32px; /* Space for the SVG */
  margin-bottom: 10px;
}
/* Add widget to Page list */
li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* Vertical centering */
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' viewBox='0 0 428 428' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g transform='matrix(1,0,0,1,-185.670394,-65.685039)'><g transform='matrix(1.026379,0,0,1.026379,177.459363,54.394872)'><path d='M216.5,11C331.574,11 425,104.426 425,219.5C425,334.574 331.574,428 216.5,428C101.426,428 8,334.574 8,219.5C8,104.426 101.426,11 216.5,11ZM216.5,45.611C312.472,45.611 390.389,123.528 390.389,219.5C390.389,315.472 312.472,393.389 216.5,393.389C120.528,393.389 42.611,315.472 42.611,219.5C42.611,123.528 120.528,45.611 216.5,45.611Z' style='fill:rgb(102,51,102);fill-opacity:0.99;'/></g><g transform='matrix(0.972973,0,0,1,-63.951228,0.000194)'><path d='M458,297.685L369.611,297.685L369.611,261.685L458,261.685L458,175.685L495,175.685L495,261.685L583.389,261.685L583.389,297.685L495,297.685L495,383.685L458,383.685L458,297.685Z' style='fill:rgb(102,51,102);fill-opacity:0.99;'/></g></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
/* Remove widget from Main NAV and other areas*/
footer li::before, .wp-block-navigation-item::before, .wp-block-navigation__mobile-menu-content .wp-block-navigation-item::before, .person::before, .wp-block-social-link::before, .wp-block-post::before, .wp-block-outermost-social-sharing__social-placeholder::before {
    position: relative;
    background-image: none;
    height: 0;
    width: 0;
    padding-left: none;
}
/* Navigation Styling */
@media (max-width: 768px) {
    .wp-block-navigation__mobile-menu-content ul {
        padding: 0 !important;
        li {
            padding:0 !important;
        }
    }
    .wp-block-navigation__mobile-menu-content ul.wp-block-navigation__submenu-container li.has-child:first-child {
        font-weight: bold;

    }
}
/* Creates the gap while maintaining the hover connection */
.wp-block-navigation__submenu-container {
    border-top: 15px solid transparent !important; /* This creates the visual gap */
    background-clip: padding-box !important;      /* Prevents background from bleeding into the gap */
    margin-top: 0 !important;          /* Ensures no real gap exists to break hover */
}
/* Hero Section Styling */

.hero-section-circle-image img {
    position: relative;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}
@keyframes element-reveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes element-resize {
  0%{
    transform: scale(0);
  }
  100%  {
    transform: scale(1.3);
  }
}
.hero-logo {
  opacity: 0;
  transform: scale(0);
  transform-origin: bottom left;
  animation: element-resize 0.5s ease-in-out 0.5s forwards, element-reveal 0.5s ease-in-out 0.5s forwards;
  filter:drop-shadow(0px 0px 6px var(--dark-50));
}
.hero-portrait {
  opacity: 0;
  transform: scale(0);
  transform-origin: center left;
  animation: element-resize 0.75s ease-in-out 0.5s forwards, element-reveal 0.75s ease-in-out 0.5s forwards;
  filter:drop-shadow(0px 0px 6px var(--dark-50));
}
.hero-strapline {
  opacity: 0;
  animation: element-reveal 1.5s ease-in-out 0.5s forwards;
  filter:drop-shadow(0px 0px 6px var(--dark-50));
}
@media (max-width: 768px) {
    .home-hero-section .wp-block-cover__inner-container {
        padding-top: 120px;
    }
    .hero-portrait {
    transform: scale(1.2);
    transform-origin: top left;
    animation: element-reveal 0.75s ease-in-out 0.5s forwards;
    filter:drop-shadow(0px 0px 6px var(--dark-50));
    }
}
/* Media and text block styling */
.bkgrnd-section-image > .wp-block-group {
    position: relative;
     z-index: 2;
     isolation: isolate;
     
}
.wp-block-media-text .wp-block-media-text__media > img {
    position: relative;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 32px;
    box-shadow: var(--shadows);
}
/* Background image blur */
.bkgrnd-section-image {
    position: relative;
    overflow: hidden;
}
.bkgrnd-section-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;

    /* ⭐ Key Step 2: Apply the Blur ⭐ */
    backdrop-filter: blur(8px);
    z-index: 1;
    overflow: hidden;
}
.blurred img.wp-block-cover__image-background {
    filter: blur(3px);
}
/* Custom people fields */
li.person {
    padding-left: 0;
}
.job-title-container h3 {
    margin-block: 0 !important;
}
.person-quals-container h4 {
    margin-top: 0 !important;
    font-weight: 100 !important;
}

/* Bento Grid */
@media (min-width: 960px) {
    .bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr) !important;
grid-template-rows: repeat(3, 1fr) !important;
grid-column-gap: 32px !important;
grid-row-gap: 32px !important;
}

.bento-grid div:nth-child(1) { grid-area: 1 / 1 / 3 / 2 !important;  }
.bento-grid div:nth-child(2) { grid-area: 1 / 2 / 2 / 4 !important;  }
.bento-grid div:nth-child(3) { grid-area: 2 / 2 / 3 / 3 !important;  }
.bento-grid div:nth-child(4) { grid-area: 2 / 3 / 3 / 4 !important;  }
.bento-grid div:nth-child(5) { grid-area: 3 / 1 / 4 / 3 !important;  }
.bento-grid div:nth-child(6) { grid-area: 3 / 3 / 4 / 4 !important;  } 
}
/* Bento List */
@media (min-width: 1023px) {
/* 1. PARENT GRID SETUP */
.bento-list {
    display: grid;
    /* Define 3 columns for the layout */
    grid-template-columns: repeat(3, 1fr) !important;
    /* Allow rows to grow automatically */
    grid-auto-rows: minmax(320px, auto) !important; /* Adjust row height as needed */
}
.bento-list li {
    padding-left: 0;
}
/* 2. INITIAL BENTO LAYOUT (Items 1-6) */
/* Using !important to reliably override existing WordPress block styles */
.bento-list li:nth-child(1) { grid-area: 1 / 1 / 3 / 2 !important; }
.bento-list li:nth-child(2) { grid-area: 1 / 2 / 2 / 4 !important; }
.bento-list li:nth-child(3) { grid-area: 2 / 2 / 3 / 3 !important; }
.bento-list li:nth-child(4) { grid-area: 2 / 3 / 3 / 4 !important; }
.bento-list li:nth-child(5) { grid-area: 3 / 1 / 4 / 3 !important; }
.bento-list li:nth-child(6) { grid-area: 3 / 3 / 4 / 4 !important; }


/* 3. REPEATING / AUTO-PLACED ITEMS (From item 7 onwards) */
/* This section resets the placement properties, allowing them to flow normally */
.bento-list li:nth-child(n + 7) {
    /* Critical: Unset the specific grid-area placement from the block styles */
    grid-area: unset !important; 
    
    /* Ensure default size is 1x1 cell */
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    
    /* You may need to reset other specific grid properties if they are inherited */
    grid-row-start: unset !important;
    grid-row-end: unset !important;
    grid-column-start: unset !important;
    grid-column-end: unset !important;
}
}
/* 1. Establish LI as the Grid Item and Positioning Context */
.bento-list .wp-block-post.patient_service {
    position: relative; 
    z-index: 1; 
    cursor: pointer;
    border-radius: 32px;
    box-shadow: var(--shadows);
    min-height:240px;
    padding-left: 0;
}

/* 2. Create the Full-Area Pseudo-Element Overlay */
.bento-list .wp-block-post.patient_service::before {
    content: ''; 
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    /* CRITICAL: Must be higher than ALL content layers */
    z-index: 10; 
    
    /* Make the layer invisible but functional */
    opacity: 0; 
}

/* 3. Ensure the actual text link is clickable and on top */
.bento-list .wp-block-post.patient_service h2 a {
    position: relative; 
    z-index: 15; /* Higher than the ::before overlay */
}

/* 4. Apply Hover Effects (Triggered by the full LI area being hovered) */
.bento-list .wp-block-post.patient_service:hover .wp-block-cover__background {
    opacity: 0;
    transition: var(--transitions);
}
.bento-list .wp-block-post.patient_service:hover h2 {
    display: block;
    background-color: #663366;
}


.bento-list .wp-block-post.patient_service:hover h2 a {
    display: block;
    width: 100%;
    text-decoration: none;
}
/* Mail chip styling */
/* Replace .your-custom-class with your actual class or the plugin selector */
.mc_signup_submit_button {
    background-color: var(--ps-purple); /* Change to your brand color */
    color: #ffffff;
    border-radius: 5px;
    padding: 10px 20px;
    border: none;
    font-weight: bold;
    font-size: var(--step-2);
    text-transform: uppercase;
}
.mc_signup_submit_button:hover {
    background-color: var(--ps-olive); /* Change to your brand color */
    color: #ffffff;
    border-radius: 5px;
    padding: 10px 20px;
    border: none;
    font-weight: bold;
}