/*
 * -----------------------------------------------------------------------
 * @author     Akshari Solutions
 * @copyright  (c) 2026 Akshari Solutions. All rights reserved.
 * -----------------------------------------------------------------------
 *
 * Site corrections, loaded last so it wins over the theme.
 *
 * Three jobs:
 *   1. Let the hero heading be an h1 without changing how it looks.
 *   2. Visible keyboard focus, which the theme never defined.
 *   3. Fill the gap between the theme's two sets of breakpoints.
 */

/* ---------------------------------------------------------------------
   1. Hero heading
   The homepage carousel had no h1 at all; its main line was an h2 styled
   by tag name. The first slide's heading is now an h1 and inherits the
   same rules, so the page gains a heading level without changing shape.
   --------------------------------------------------------------------- */
.banner-area h1 {
    font-weight: 300;
    font-size: 80px;
    line-height: 1;
    margin-bottom: 25px;
}

.banner-area.heading-double h1 {
    margin-bottom: 30px;
}

.banner-area h1 strong {
    display: block;
}

/* ---------------------------------------------------------------------
   1a. Keep the hero's height chain intact
   The theme sizes the hero with "body, .banner-area { height: 100% }",
   which only works while every element between them has a height. Wrapping
   the page content in <main> for the accessibility landmark put a box with
   height:auto in the middle of that chain, so the banner fell back to its
   content height and the slide image was cropped to a thin strip.

   Giving the wrapper the same 100% restores the original geometry and
   keeps the landmark - display:contents would also work but can drop the
   element from the accessibility tree, which would defeat the point of
   adding it.
   --------------------------------------------------------------------- */
/* Giving the wrapper height:100% was the wrong way to do this: it pinned
   <main> to the viewport height while its content is far taller, so the
   content spilled out and the footer was painted on top of it - on every
   page. The banner gets its height directly instead, which needs no
   cooperation from its ancestors.

   100vh matches what the theme's "height: 100%" chain produced when
   .banner-area was a direct child of body, so the hero is the size it was
   designed to be. ".auto-height" is the theme's own opt-out and keeps it. */
.banner-area:not(.auto-height) {
    height: 100vh;
}

/* ---------------------------------------------------------------------
   2. Keyboard focus
   :focus-visible only shows for keyboard users, so mouse users see no
   change. Without this, tabbing through the site gives no indication of
   where you are.
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #dd1e26;
    outline-offset: 2px;
    border-radius: 2px;
}

/* The theme removes outlines on nav links; put one back for keyboards. */
.navbar nav a:focus-visible,
.attr-nav a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Skip link: visible only once focused. */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: #fff;
    color: #11212f;
    font-weight: 600;
    text-decoration: none;
}

.skip-to-content:focus {
    left: 0;
}

/* ---------------------------------------------------------------------
   3. Breakpoint gap
   responsive_update_1.css stops at max-width 991px and the main sheet
   picks up again at min-width 1000px, so 992-999px fell between them.
   The tablet-landscape range around 1024px also inherited desktop rules
   with nothing tuned for it.
   --------------------------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1024px) {
    .banner-area h1,
    .banner-area h2 {
        font-size: 52px;
    }

    .banner-area .content {
        padding-right: 0;
    }

    /* Keep long navigation from wrapping into the logo at this width. */
    .navbar nav.navbar-mobile ul li > a,
    .navbar.navbar-sticky nav li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ---------------------------------------------------------------------
   4. Overflow guard
   The theme has a number of fixed pixel widths that are wider than a
   small phone. Nothing should be able to push the page sideways.
   --------------------------------------------------------------------- */
/* The overflow guard that used to sit here (html, body { overflow-x:
   hidden }) has been removed. Combined with the theme's
   "body { height: 100% }", it forced body's overflow-y from visible to
   auto, which turned body into the scroll container instead of the
   window - breaking window.scrollY, and with it the sticky header and
   every scroll-triggered animation. Measurement across 12 pages and 15
   widths shows no horizontal overflow without it; the max-width rules
   below are what actually keep things in bounds. */

img,
iframe,
table {
    max-width: 100%;
}

/* Google renders the reCAPTCHA checkbox at a fixed 304px and will not go
   narrower. On a 320px phone, once the form's padding is taken off, there
   is not room for it and it pushes the page sideways. Scaling is the only
   lever available - the widget's own markup is not ours to change.

   The breakpoint is set just above the widget's own width so it only
   applies where the box genuinely does not fit. */
@media (max-width: 360px) {
    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: left top;
        /* Reclaim the space the scale leaves behind, so the elements
           below do not sit in a gap. */
        margin-bottom: -12px;
    }
}

/* The "core values" band on the about page puts a Bootstrap .row straight
   inside the section with no .container around it, so the row's -15px side
   margins have nothing to absorb them and it pokes 15px past the right
   edge of the page.

   Clipping the section is enough and changes nothing visually. "clip" is
   used in preference to "hidden" because hidden would force this element's
   overflow-y from visible to auto and make it a scroll container; clip
   leaves the vertical axis alone. The hidden line above it is the fallback
   for browsers that do not know clip. */
.choose-us-area {
    overflow-x: hidden;
    overflow-x: clip;
}

img {
    height: auto;
}

/* The embedded maps are given fixed width/height attributes in the
   markup; let them shrink on a phone. */
.footer-map iframe,
.contact-map iframe {
    width: 100%;
}

/* ---------------------------------------------------------------------
   5. Styles lifted out of the templates
   These replace style="..." attributes that sat outside every media
   query and so could not be adjusted responsively.
   --------------------------------------------------------------------- */
.site-footer-credit span {
    color: #f44336de;
}

/* These two replace inline styles on the Contact link and the phone number
   beside it. An inline style beats every selector, so moving the values to
   a plain class let the theme's own
   "nav.navbar.bootsnav ul.nav > li > a" rule win instead - which dropped
   the phone number onto its own line with a large gap above it. The
   selectors below carry enough weight to take the rule back. */
nav.navbar.bootsnav ul.nav > li > a.nav-contact-link {
    padding: 35px 0 0 0;
}

nav.navbar.bootsnav ul.nav > li > a.nav-phone-link {
    padding: 0;
}

/* The handset in front of the nav phone number. It is decorative - the
   number beside it already says what it is - so the markup marks it
   aria-hidden and the gap is a margin rather than a non-breaking space,
   which a screen reader would otherwise announce.

   The glyph comes from the theme's own flaticon set rather than Font
   Awesome: the footer and the contact page already use flaticon-call, and
   the outlined style matches them. Font Awesome's fa-phone is a solid
   handset and would be the odd one out. */
nav.navbar.bootsnav ul.nav > li > a.nav-phone-link .flaticon-call {
    margin-right: 7px;
    font-size: 1em;
    vertical-align: -1px;
}

/* ---------------------------------------------------------------------
   6. Form validation messages
   Rendered by forms.js. The theme had no styling for these because it had
   no client-side validation at all.
   --------------------------------------------------------------------- */
.field-error,
.captcha-error {
    display: block;
    margin-top: 6px;
    color: #c01822;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.form-control.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: #c01822;
}

/* The theme styles several inputs with only a bottom border. */
.contact-form .is-invalid,
.form-group .is-invalid {
    border-bottom-color: #c01822;
}

.intake-form-note {
    font-size: 14px;
    color: #6c757d;
}

/* ---------------------------------------------------------------------
   7. Page-scoped rules lifted out of templates
   These were <style> blocks inside the views. The container override in
   particular has to stay scoped: applied globally it would narrow every
   page on the site to 800px.
   --------------------------------------------------------------------- */
/* The intake templates also carried ".container { max-width: 800px }".
   It is deliberately not reproduced here. That block was emitted above the
   <head> stylesheets, so Bootstrap's own ".container { max-width: 1140px }"
   loaded afterwards and overrode it - the rule never took effect, and the
   pages have always been full width. Moving it into a stylesheet that
   loads last would switch it on for the first time and shrink the header
   and the form along with it. */

.red-star {
    color: #c01822;
}

.accordion-label {
    cursor: pointer;
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-label:hover {
    background-color: #e0e0e0;
}

.accordion-label::after {
    content: '+';
    font-size: 20px;
}

.accordion-label.active::after {
    content: '\2212';
}

.accordion-content {
    display: none;
    padding: 35px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
}

.accordion-content.active {
    display: block;
}

/* ---------------------------------------------------------------------
   8. Testimonial cards of equal height
   Owl Carousel sizes each slide to its own content, so the review cards
   ended up ragged. Someone had worked around it by giving each card a
   different hand-measured bottom padding - 226px, 165px, 135px and so on,
   written inline - which only matched at one particular window width and
   broke the moment any review was edited.

   Making the stage a flex row lets every card stretch to the tallest one,
   at any width and whatever the text says.
   --------------------------------------------------------------------- */
.testimonials-carousel .owl-stage {
    display: flex;
}

.testimonials-carousel .owl-item {
    display: flex;
    height: auto;
}

.testimonials-carousel .owl-item > .item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ---------------------------------------------------------------------
   9. Current page
   The footer link lists had no styling for .active at all, so even where
   the class was being set nothing showed. The header already styles its
   own active item; this covers the footer.
   --------------------------------------------------------------------- */
/* Items inside the Services and Patient forms dropdowns. The theme styles
   a top-level active item (#dd1e26) but never defined one for the menu
   that drops out of it, so the page you were actually on looked the same
   as the three you were not. The selector carries enough weight to beat
   the theme's own dropdown link rule. */
nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li.active > a,
nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li > a[aria-current="page"] {
    color: #dd1e26;
    font-weight: 700;
}

footer .link-list li.active > a,
footer .f-item li.active > a,
footer li.active > a,
footer [aria-current="page"] {
    color: #fff;
    font-weight: 700;
}

footer li.active > a::before,
footer [aria-current="page"]::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 2px;
    margin-right: 8px;
    vertical-align: middle;
    background: #dd1e26;
}

/* The article body uses unstyled lists. */
.blog-article .blog-content ul li,
.blog-article .single-blog ul li {
    list-style-type: none;
}

.intake-signature-field {
    font-family: "Brush Script MT", cursive;
    font-size: 22px;
}

/* The banner caption on the four service pages. It was an h3 sitting
   directly under the page h1, skipping a level; it is an h2 now and keeps
   the appearance it had from its inline style.

   The inline style set a black background but no colour, so the text fell
   back to the shared heading colour (#233645) - dark navy on black, a
   contrast ratio of 1.69:1 against the 3:1 that large text needs. White
   is what the black panel was always meant to carry. */
.service-banner-title {
    background: #000;
    color: #fff;
    font-size: 30px;
    display: inline-block;
    padding: 4px 14px;
}