/* Precious Smiles v1.1.39 safe hardening/responsive overrides.
   No original colours, fonts, imagery or animation rules are changed. */

/* Responsive embedded Google registration form */
.ps-register-form-col {
    width: 100%;
    float: none;
}
.ps-register-form-col iframe[src*="docs.google.com/forms"] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 0;
}

/* Keep the Bootstrap navigation collapsed through tablet widths so the
   full desktop menu cannot crowd or wrap between 768px and 991px. */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-header { float: none; }
    .navbar-toggle { display: block; }
    .navbar-collapse {
        width: auto;
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    }
    .navbar-collapse.collapse { display: none !important; height: auto !important; overflow: hidden !important; }
    .navbar-collapse.collapse.in { display: block !important; overflow-y: auto !important; }
    .navbar-nav { float: none !important; margin: 7.5px -15px; }
    .navbar-nav > li { float: none; }
    .navbar-nav > li > a { padding: 15px; }
    .navbar-right { float: none !important; }
    .navbar-nav .open .dropdown-menu,
    .navbar .dropdown-menu {
        position: relative;
        float: none;
        width: 100%;
        margin: 0 0 10px;
        display: block !important;
        opacity: 1;
    }
    .container > .navbar-header,
    .container > .navbar-collapse { margin-right: -15px; margin-left: -15px; }
}

/* On phones the embedded form stays inside the viewport/container. */
@media (max-width: 767px) {
    .ps-register-form-col { padding-left: 0; padding-right: 0; }
    .ps-register-form-col iframe[src*="docs.google.com/forms"] { width: 100% !important; }
}

/* v1.1.33 mobile/tablet navigation flow fix.
   Scope: collapsed navigation only (<=991px). Desktop styling is untouched. */
@media (max-width: 991px) {
    /* Keep every primary menu item in one clean vertical column. */
    #bs-example-navbar-collapse-1 {
        clear: both;
        width: 100%;
    }
    #bs-example-navbar-collapse-1 .navbar-nav,
    #bs-example-navbar-collapse-1 .navbar-nav.navbar-right {
        float: none !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
    }
    #bs-example-navbar-collapse-1 .navbar-nav > li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        clear: both;
    }
    #bs-example-navbar-collapse-1 .navbar-nav > li > a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Theme CSS forces dropdowns visible on small screens; undo that.
       A submenu appears only when Bootstrap marks its parent .open. */
    #bs-example-navbar-collapse-1 .navbar-nav .dropdown > .dropdown-menu,
    #bs-example-navbar-collapse-1 .navbar-nav .dropdown > .ps-about-menu {
        display: none !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 0 8px !important;
        box-sizing: border-box;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
    }
    #bs-example-navbar-collapse-1 .navbar-nav .dropdown.open > .dropdown-menu,
    #bs-example-navbar-collapse-1 .navbar-nav .dropdown.open > .ps-about-menu {
        display: block !important;
    }

    /* Prevent legacy desktop hover rules from re-opening menus on touch devices. */
    #bs-example-navbar-collapse-1 .navbar-nav .dropdown:hover > .dropdown-menu,
    #bs-example-navbar-collapse-1 .navbar-nav .dropdown:hover > .ps-about-menu {
        display: none !important;
    }
    #bs-example-navbar-collapse-1 .navbar-nav .dropdown.open:hover > .dropdown-menu,
    #bs-example-navbar-collapse-1 .navbar-nav .dropdown.open:hover > .ps-about-menu {
        display: block !important;
    }

    /* Keep submenu cards inside the viewport with consistent inset spacing. */
    #bs-example-navbar-collapse-1 .navbar-nav .open > .dropdown-menu,
    #bs-example-navbar-collapse-1 .navbar-nav .open.ps-about-dropdown > .ps-about-menu {
        width: calc(100% - 20px) !important;
        margin: 4px 10px 10px !important;
    }
}

/* v1.1.34 mobile/tablet overlay navigation.
   Keep the hero/content in place while the collapsed menu floats above it. */
@media (max-width: 991px) {
    /* The navbar remains the positioning context; the open menu is removed from document flow. */
    .navbar.navbar-default {
        position: relative;
        z-index: 9999;
    }

    #bs-example-navbar-collapse-1 {
        position: absolute !important;
        top: 100% !important;
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 10px 12px 12px !important;
        background: rgba(255, 255, 255, 0.97) !important;
        border: 1px solid rgba(140, 70, 0, 0.20) !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
        max-height: 58vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 10000 !important;
    }

    /* Keep Bootstrap's closed/open behaviour while the panel is positioned as an overlay. */
    #bs-example-navbar-collapse-1.collapse {
        display: none !important;
    }
    #bs-example-navbar-collapse-1.collapse.in {
        display: block !important;
        height: auto !important;
    }
    #bs-example-navbar-collapse-1.collapsing {
        display: block !important;
        position: absolute !important;
        height: 0;
        overflow: hidden !important;
    }

    #bs-example-navbar-collapse-1 .navbar-nav,
    #bs-example-navbar-collapse-1 .navbar-nav.navbar-right {
        margin: 0 !important;
    }

    #bs-example-navbar-collapse-1 .navbar-nav > li > a {
        padding: 12px 14px !important;
        line-height: 1.35 !important;
        border-radius: 10px;
    }

    /* Submenus stay inside the overlay panel and never cover sibling primary items. */
    #bs-example-navbar-collapse-1 .navbar-nav .open > .dropdown-menu,
    #bs-example-navbar-collapse-1 .navbar-nav .open.ps-about-dropdown > .ps-about-menu {
        width: calc(100% - 16px) !important;
        margin: 2px 8px 8px !important;
        padding: 4px 0 !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.94) !important;
    }

    #bs-example-navbar-collapse-1 .navbar-nav .open > .dropdown-menu > li > a,
    #bs-example-navbar-collapse-1 .navbar-nav .open.ps-about-dropdown > .ps-about-menu > li > a {
        padding: 11px 14px !important;
    }
}

@media (max-width: 480px) {
    #bs-example-navbar-collapse-1 {
        left: 10px !important;
        right: 10px !important;
        max-height: 56vh !important;
        border-radius: 14px !important;
    }
}


/* v1.1.37 — restore the polished homepage hero Register CTA.
   Uses the existing theme background/text colour; only shape, spacing and finish are refined. */
.flexslider.std-slider .ps-hero-register-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 16px !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    white-space: nowrap;
    line-height: 1.25;
}
.flexslider.std-slider .ps-hero-register-cta .fa {
    margin-left: 2px;
}
@media (max-width: 767px) {
    .flexslider.std-slider .ps-hero-register-cta {
        padding: 11px 16px !important;
        border-radius: 14px !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
    }
}


/* v1.1.38 — mobile Safari scroll continuity on homepage feature tabs.
   Do not let legacy clickable/tab elements interfere with normal vertical page panning. */
@media (max-width: 991px) {
    .sub-menu,
    .sub-menu .nav-tabs,
    .sub-menu .nav-tabs > li,
    .sub-menu .nav-tabs > li > a,
    .sub-menu .nav-tabs > li > a img {
        touch-action: pan-y !important;
    }

    .sub-menu .nav-tabs > li > a img {
        -webkit-user-drag: none;
        user-select: none;
        -webkit-user-select: none;
    }

    /* The legacy fixed navbar is intentionally disabled on touch/tablet widths.
       This prevents layout jumps while the user is swiping. */
    .navbar.navbar-default.navbar-fixed-top {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
    }
}


/* v1.1.39 — decorative parallax artwork must never capture touch/scroll.
   Visual animation is preserved; only pointer hit-testing is disabled. */
.parallax-viewport,
.parallax-viewport .parallax-layer,
.parallax-viewport .parallax-layer img {
    pointer-events: none !important;
}

@media (max-width: 991px) {
    .sub-menu .nav-tabs,
    .sub-menu .nav-tabs > li,
    .sub-menu .nav-tabs > li > a,
    .sub-menu .nav-tabs > li > a > * {
        touch-action: pan-y !important;
    }
}


/* v1.1.41 — PageSpeed-safe hero stabilisation.
   Reserve the slider's existing 300px design height before JS initialises it.
   The first slide is visible immediately; FlexSlider takes over normally afterwards. */
.ps-hero-slider,
.ps-hero-slider > .container,
.ps-hero-slider .slides,
.ps-hero-slider .slides > li,
.ps-hero-slider .slides > li > .inner {
    min-height: 300px;
}
.ps-hero-slider .slides > li:first-child {
    display: block;
}


/* v1.1.42 — immediate first mobile hero paint for LCP.
   Only the initial first slide bypasses the old opacity gate; later slider
   transitions/animations continue through the existing theme JS. */
@media (max-width: 991px) {
    .withAnimation .ps-hero-slider .slides > li:first-child .animated {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
    }
}



/* v1.1.46 LOCKED MOBILE HERO:
   Approved mobile composition from v1.1.45 is preserved.
   Only title/artwork scale was increased to use spare space and improve prominence.
   Do not change positions/hierarchy unless explicitly requested. */

/* v1.1.45 — mobile hero composition mirrors the desktop hierarchy.
   Mobile only: title is kept in a clear upper-right zone, artwork sits lower-left,
   and the Register CTA stays lower-right. Existing images/colours/fonts/animations remain intact. */
@media (max-width: 767px) {
    .ps-hero-slider,
    .ps-hero-slider > .container,
    .ps-hero-slider .slides,
    .ps-hero-slider .slides > li,
    .ps-hero-slider .slides > li > .inner {
        min-height: 300px !important;
        height: 300px !important;
    }

    .ps-hero-slider .slides > li > .inner {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Main illustration — lower-left, matching desktop composition. */
    .ps-hero-slider .slides > li .object:nth-child(1) {
        left: 5% !important;
        right: auto !important;
        top: auto !important;
        bottom: 0 !important;
        width: 63% !important;
        max-width: 248px !important;
        z-index: 2 !important;
    }
    .ps-hero-slider .slides > li .object:nth-child(1) img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
    }

    /* Precious Smiles / slide title — clear upper-right reading zone. */
    .ps-hero-slider .slides > li .object:nth-child(2) {
        left: auto !important;
        right: 4% !important;
        top: 20px !important;
        bottom: auto !important;
        width: 64% !important;
        max-width: 248px !important;
        z-index: 4 !important;
    }
    .ps-hero-slider .slides > li .object:nth-child(2) img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
    }

    /* CTA — separate from both title and artwork. */
    .ps-hero-slider .slides > li .object:nth-child(3) {
        left: auto !important;
        right: 6% !important;
        top: auto !important;
        bottom: 26px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 6 !important;
    }

    .ps-hero-slider .ps-hero-register-cta {
        font-size: 20px !important;
        padding: 10px 14px !important;
    }

    /* Slide-specific artwork proportions keep the same desktop visual balance. */
    .ps-hero-slider .slides > li:nth-child(1) .object:nth-child(1) {
        width: 57% !important;
        max-width: 220px !important;
    }
    .ps-hero-slider .slides > li:nth-child(2) .object:nth-child(1) {
        width: 59% !important;
        max-width: 228px !important;
        bottom: 8px !important;
    }
    .ps-hero-slider .slides > li:nth-child(3) .object:nth-child(1) {
        width: 53% !important;
        max-width: 205px !important;
        bottom: -18px !important;
    }
    .ps-hero-slider .slides > li:nth-child(3) .object:nth-child(2) {
        width: 58% !important;
        max-width: 224px !important;
        top: 28px !important;
    }
}

@media (max-width: 390px) {
    .ps-hero-slider .slides > li .object:nth-child(1) {
        left: 3% !important;
    }
    .ps-hero-slider .slides > li .object:nth-child(2) {
        right: 3% !important;
        width: 56% !important;
    }
    .ps-hero-slider .slides > li .object:nth-child(3) {
        right: 4% !important;
        bottom: 24px !important;
    }
    .ps-hero-slider .ps-hero-register-cta {
        font-size: 18px !important;
        padding: 9px 12px !important;
    }
}


/* v1.1.47 — mobile hero sizing correction.
   The previous change made the visible title/artwork too small because image-level widths
   were constrained. Keep the approved mobile composition, but enlarge the actual visible
   title/logo and artwork so both sides stand out evenly. */
@media (max-width: 767px) {
    /* Parent object boxes — this controls the real visible size on the slide. */
    .ps-hero-slider .slides > li .object:nth-child(1) {
        width: 63% !important;
        max-width: 255px !important;
    }

    .ps-hero-slider .slides > li .object:nth-child(2) {
        width: 58% !important;
        max-width: 230px !important;
        top: 18px !important;
    }

    /* Slide-specific artwork scaling while preserving layout balance. */
    .ps-hero-slider .slides > li:nth-child(1) .object:nth-child(1) {
        width: 64% !important;
        max-width: 255px !important;
    }

    .ps-hero-slider .slides > li:nth-child(2) .object:nth-child(1) {
        width: 60% !important;
        max-width: 236px !important;
        bottom: 6px !important;
    }

    .ps-hero-slider .slides > li:nth-child(3) .object:nth-child(1) {
        width: 54% !important;
        max-width: 212px !important;
        bottom: -14px !important;
    }

    .ps-hero-slider .slides > li:nth-child(3) .object:nth-child(2) {
        width: 60% !important;
        max-width: 232px !important;
        top: 24px !important;
    }

    /* Ensure the images fully use the enlarged parent box. */
    .ps-hero-slider .slides > li .object:nth-child(1) img,
    .ps-hero-slider .slides > li .object:nth-child(2) img {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
    }
}

@media (max-width: 420px) {
    .ps-hero-slider .slides > li .object:nth-child(1) {
        width: 61% !important;
        max-width: 240px !important;
    }

    .ps-hero-slider .slides > li .object:nth-child(2) {
        width: 56% !important;
        max-width: 220px !important;
        right: 3% !important;
    }

    .ps-hero-slider .slides > li:nth-child(1) .object:nth-child(1) {
        width: 62% !important;
        max-width: 242px !important;
    }

    .ps-hero-slider .slides > li:nth-child(2) .object:nth-child(1) {
        width: 58% !important;
        max-width: 226px !important;
    }

    .ps-hero-slider .slides > li:nth-child(3) .object:nth-child(1) {
        width: 52% !important;
        max-width: 202px !important;
    }

    .ps-hero-slider .slides > li:nth-child(3) .object:nth-child(2) {
        width: 58% !important;
        max-width: 224px !important;
    }
}


/* v1.1.48 — restore compact Education Programmes calendar navigation.
   Keep date + previous/TODAY/next controls, but hide the empty day-view body
   so the old large blank space does not return. */
#tab-1 .ps-education-calendar-nav {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 18px !important;
}
#tab-1 .ps-education-calendar-nav .fc-view-container {
    display: none !important;
}
#tab-1 .ps-education-calendar-nav .fc-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    margin: 0 0 12px !important;
}
#tab-1 .ps-education-calendar-nav .fc-toolbar .fc-left,
#tab-1 .ps-education-calendar-nav .fc-toolbar .fc-right {
    float: none !important;
}
#tab-1 .ps-education-calendar-nav .fc-toolbar h2 {
    margin: 0 !important;
}

@media (max-width: 767px) {
    #tab-1 .ps-education-calendar-nav .fc-toolbar {
        flex-direction: column !important;
        justify-content: center !important;
        gap: 12px;
    }
    #tab-1 .ps-education-calendar-nav .fc-toolbar .fc-left,
    #tab-1 .ps-education-calendar-nav .fc-toolbar .fc-right {
        width: 100%;
        text-align: center;
    }
    #tab-1 .ps-education-calendar-nav .fc-toolbar .fc-left h2 {
        float: none !important;
        text-align: center;
    }
}


/* v1.1.51 — desktop CLS prevention for the locked hero.
   These are the exact existing data-* positions already applied by main.js.
   Defining them before JS runs prevents the first visible slide from jumping. */
@media (min-width: 992px) {
    .ps-hero-slider .slides > li:first-child .object:nth-child(1) {
        left: 100px;
        bottom: 0;
    }
    .ps-hero-slider .slides > li:first-child .object:nth-child(2) {
        right: 150px;
    }
    .ps-hero-slider .slides > li:first-child .object:nth-child(3) {
        right: 140px;
        bottom: 40px;
    }
}


/* v1.1.58 — preserve the original logo aspect ratio in the compact desktop sticky header.
   The source image is 250x125 (2:1); legacy max-height alone was visually squashing it. */
@media (min-width: 992px) {
    .navbar-default.navbar-fixed-top .navbar-brand img {
        width: auto !important;
        height: 50px !important;
        max-width: none !important;
        max-height: 50px !important;
    }
}


/* v1.1.68 — branch page title typography only.
   Friendly premium system-font stack; no external font request.
   Desktop is 15% smaller than the legacy 36px h1. */
.ps-branch-page-title {
    font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    font-size: 29.99px !important;
    line-height: 1.18 !important;
    font-weight: 600 !important;
    letter-spacing: -0.25px;
}

@media (max-width: 767px) {
    .ps-branch-page-title {
        font-size: 24.5px !important;
        line-height: 1.22 !important;
        letter-spacing: -0.1px;
    }
}


/* v1.1.69 — sitewide large page-title refinement.
   Desktop is exactly 5% smaller than the legacy Bootstrap 36px h1.
   Branch titles remain independently tuned by .ps-branch-page-title. */
h1.color-motive:not(.ps-branch-page-title):not(.h4) {
    font-size: 34.2px !important;
    line-height: 1.16 !important;
    overflow-wrap: anywhere;
}

@media (max-width: 991px) {
    h1.color-motive:not(.ps-branch-page-title):not(.h4) {
        font-size: 31px !important;
        line-height: 1.18 !important;
    }
}

@media (max-width: 767px) {
    h1.color-motive:not(.ps-branch-page-title):not(.h4) {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-top: 14px;
        margin-bottom: 9px;
    }
}

@media (max-width: 420px) {
    h1.color-motive:not(.ps-branch-page-title):not(.h4) {
        font-size: 26px !important;
    }
}

/* v1.1.70 — Register Interest CTA: compact brown button with white text. */
.flexslider.std-slider .ps-hero-register-cta {
    background: #8c4600 !important;
    border: 1px solid #8c4600 !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
}
.flexslider.std-slider .ps-hero-register-cta:hover,
.flexslider.std-slider .ps-hero-register-cta:focus {
    background: #8c4600 !important;
    border-color: #8c4600 !important;
    color: #ffffff !important;
}
@media (max-width: 767px) {
    .flexslider.std-slider .ps-hero-register-cta {
        padding: 8px 12px !important;
    }
}

/* v1.1.79 — navigation focus refinement.
   Remove the legacy Bootstrap focus rectangle after mouse/touch clicks,
   while retaining a compact visible focus treatment for keyboard users. */
.navbar .nav > li > a:focus {
    outline: none !important;
}
.navbar .nav > li > a:focus-visible {
    outline: 2px solid rgba(140, 70, 0, 0.55) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}


/* v1.1.88 — precise Precious® Smiles® trademark placement matching approved visual. */
.ps-brand-registered {
    position: relative;
}
.ps-brand-registered .ps-registered-mark {
    position: absolute;
    color: #ffe518;
    font-family: Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,.16);
    pointer-events: none;
}
/* Full-size header logo: immediately after each word and slightly raised. */
.ps-brand-registered .ps-registered-mark-first {
    top: 0;
    left: 124px;
    font-size: 10px;
}
.ps-brand-registered .ps-registered-mark-last {
    top: 0;
    left: 243px;
    font-size: 10px;
}
/* Compact sticky header is a 100px-wide rendering of the 250px source logo. */
.navbar-default.navbar-fixed-top .ps-brand-registered .ps-registered-mark-first {
    top: -2px;
    left: 49px;
    font-size: 6px;
}
.navbar-default.navbar-fixed-top .ps-brand-registered .ps-registered-mark-last {
    top: -2px;
    left: 97px;
    font-size: 6px;
}
.ps-hero-brand-registered .ps-hero-registered-mark {
    position: absolute;
    color: #ffe518;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0,0,0,.16);
    pointer-events: none;
}
/* text2.webp is 394px wide: Precious ends near 204px, Smiles near 392px. */
.ps-hero-brand-registered .ps-hero-registered-mark-first {
    top: 1px;
    left: 51.5%;
}
.ps-hero-brand-registered .ps-hero-registered-mark-last {
    top: 1px;
    left: 97.5%;
}
@media (max-width: 767px) {
    .ps-brand-registered .ps-registered-mark-first {
        top: 1px;
        left: 99px;
        font-size: 8px;
    }
    .ps-brand-registered .ps-registered-mark-last {
        top: 1px;
        left: 195px;
        font-size: 8px;
    }
    .ps-hero-brand-registered .ps-hero-registered-mark {
        font-size: 8px;
    }
    .ps-hero-brand-registered .ps-hero-registered-mark-first {
        top: 0;
        left: 51.5%;
    }
    .ps-hero-brand-registered .ps-hero-registered-mark-last {
        top: 0;
        left: 97.5%;
    }
}