@charset "utf-8";
/* ==========================================================================
   restore.css - chawladentalclinic.com

   The whole /wp-content/ tree is missing from the server, so all 23 external
   stylesheets 404 - chiefly Astra's frontend.min.css and Elementor's
   frontend/common CSS.

   The pages DO still carry ~138KB of inline <style> (Astra customizer output
   plus Elementor's per-page CSS), which supplies colours, fonts and spacing -
   637 rules apply without this file. What is missing is the structural
   FRAMEWORK: the Astra container/header/footer grid and Elementor's
   section/column layout. Without it every column is full width and the page
   overflows horizontally.

   This file supplies only that missing skeleton, and deliberately sets no
   colours or fonts - the inline CSS already handles those. It is an
   approximation of Astra + Elementor, not the originals. Delete it once
   /wp-content/ is restored.
   ========================================================================== */

/* ------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; }

.screen-reader-text,
.elementor-screen-only,
.ui-helper-hidden-accessible {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.skip-link:not(:focus) { position: absolute !important; left: -9999px; }

/* ---------------------------------------------------------- ASTRA ------ */

.ast-container,
.ast-container-fluid {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.ast-container-fluid { max-width: 100%; }

.ast-flex        { display: flex; flex-wrap: wrap; align-items: center; }
.ast-inline-flex { display: inline-flex; align-items: center; }
.ast-grid-right-section { margin-left: auto; justify-content: flex-end; }
.ast-grid-left-section  { margin-right: auto; }

/* header / footer builder rows ------------------------------------------ */
/* Astra builder rows carry a variable number of sections (left / centre /
   right, or 2-equal / 3-equal). A fixed grid template mis-sized them and the
   footer widget areas ended up overlapping each other, so use flex, which
   copes with 1, 2 or 3 children without being told which. */
.ast-builder-grid-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    width: 100%;
}
.ast-builder-grid-row > * { min-width: 0; flex: 0 1 auto; }
.ast-builder-grid-row-2-equal > *,
.ast-builder-grid-row-3-equal > * { flex: 1 1 220px; }
.ast-builder-grid-row-full > *   { flex: 1 1 100%; }

.site-header-section, .site-footer-section { display: flex; align-items: center; gap: 8px 18px; }
.site-header-section-left  { justify-content: flex-start; }
.ast-grid-right-section    { justify-content: flex-end; }

.ast-above-header-wrap,
.ast-main-header-wrap,
.ast-below-header-wrap { width: 100%; }
.ast-above-header-bar,
.main-header-bar { padding-top: 10px; padding-bottom: 10px; }

.site-header { position: relative; z-index: 20; }
.site-logo-img img, .custom-logo { max-height: 76px; width: auto; }

/* primary navigation ----------------------------------------------------- */
.main-header-menu, .ast-nav-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-header-menu > li, .ast-nav-menu > li { position: relative; }
.main-header-menu .menu-link, .ast-nav-menu .menu-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    line-height: 1.4;
    text-decoration: none;
}

/* sub-menus stay hidden until hover (the theme's JS is gone) */
.main-header-menu .sub-menu,
.ast-nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    display: none;
    min-width: 230px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .09);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
}
.main-header-menu li:hover > .sub-menu,
.ast-nav-menu li:hover > .sub-menu { display: block; }
.sub-menu .menu-link { padding: 8px 16px; }
.sub-menu .sub-menu { top: 0; left: 100%; }

/* the mobile drawer must not render inline on desktop */
.ast-mobile-popup-drawer:not(.active),
.ast-mobile-header-wrap .ast-mobile-popup-drawer { display: none; }

.ast-builder-layout-element[data-section] { display: flex; align-items: center; }

/* main content ----------------------------------------------------------- */
#content.site-content { display: block; overflow-x: hidden; }
.ast-container > .site-main { width: 100%; }
.entry-content > * { max-width: 100%; }

/* The header/footer wraps are legitimately full-bleed, but the content
   container must be centred. Scoped to #content so the header bars keep
   spanning the viewport, and specific enough to beat the inline CSS. */
#content.site-content > .ast-container {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

/* Elementor "stretched" sections deliberately break out of that container;
   without the theme's JS they can push a scrollbar, so cap them. */
#content .elementor-section-stretched { max-width: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }

/* footer ----------------------------------------------------------------- */
.site-footer { margin-top: 0; }
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap { padding: 22px 0; }
.site-footer .widget-area { min-width: 0; }
.ast-footer-row-stack .ast-builder-grid-row { grid-template-columns: 1fr; }

/* --------------------------------------------------------- ELEMENTOR --- */

.elementor,
.elementor-section { position: relative; }
.elementor *, .elementor *::before, .elementor *::after { box-sizing: border-box; }

.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1140px;
}
.elementor-section-full_width > .elementor-container,
.elementor-section-stretched > .elementor-container { max-width: 100%; }

.elementor-container {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.elementor-row { display: flex; width: 100%; flex-wrap: wrap; }

.elementor-column {
    position: relative;
    display: flex;
    min-height: 1px;
}
.elementor-column-wrap,
.elementor-widget-wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.elementor-element-populated { padding: 10px; }

/* column widths --------------------------------------------------------- */
.elementor-col-10  { width: 10%; }
.elementor-col-11  { width: 11.111%; }
.elementor-col-12  { width: 12.5%; }
.elementor-col-14  { width: 14.285%; }
.elementor-col-16  { width: 16.666%; }
.elementor-col-20  { width: 20%; }
.elementor-col-25  { width: 25%; }
.elementor-col-30  { width: 30%; }
.elementor-col-33  { width: 33.333%; }
.elementor-col-40  { width: 40%; }
.elementor-col-50  { width: 50%; }
.elementor-col-60  { width: 60%; }
.elementor-col-66  { width: 66.666%; }
.elementor-col-70  { width: 70%; }
.elementor-col-75  { width: 75%; }
.elementor-col-80  { width: 80%; }
.elementor-col-100 { width: 100%; }

.elementor-widget { position: relative; width: 100%; }
.elementor-widget:not(:last-child) { margin-bottom: 20px; }
.elementor-widget-container { width: 100%; }

/* common widgets --------------------------------------------------------- */
.elementor-widget-image { text-align: center; }
.elementor-widget-image img { display: inline-block; height: auto; }
.elementor-image-box-wrapper { display: flex; gap: 14px; align-items: flex-start; }
.elementor-icon-box-wrapper  { display: flex; gap: 12px; align-items: flex-start; }
.elementor-heading-title { margin: 0; }
.elementor-text-editor > :last-child { margin-bottom: 0; }

.elementor-button {
    display: inline-block;
    padding: 12px 24px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}
.elementor-button-content-wrapper { display: flex; align-items: center; gap: 8px; justify-content: center; }

.elementor-spacer-inner { height: var(--spacer-size, 50px); }
.elementor-divider { display: flex; }
.elementor-divider-separator { width: 100%; border-top: 1px solid rgba(0,0,0,.12); }

/* icon lists (used across the footer) ------------------------------------ */
.wp-block-uagb-icon-list, .uagb-icon-list__wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; }
.uagb-icon-list__source-wrap { display: inline-flex; align-items: center; }

/* forms ------------------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="url"], input[type="search"], select, textarea {
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, .18);
    font: inherit;
}
textarea { min-height: 120px; }
.wpcf7-form p { margin: 0 0 14px; }
input[type="submit"], button { cursor: pointer; }

/* floating WhatsApp / chat widgets must not sit in the flow -------------- */
.wa__stt, .wa__popup_content, .wa__btn_popup { z-index: 60; }

/* ------------------------------------------------------- responsive ---- */

@media (max-width: 1024px) {
    .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100%; }
    [class*="elementor-col-"] { width: 100%; }
    .elementor-col-50 { width: 50%; }
    .ast-builder-grid-row-3-equal { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .ast-container { padding-left: 14px; padding-right: 14px; }
    [class*="elementor-col-"] { width: 100%; }
    .elementor-container { flex-wrap: wrap; }
    .ast-builder-grid-row,
    .ast-builder-grid-row-2-equal,
    .ast-builder-grid-row-3-equal { grid-template-columns: 1fr; }
    .main-header-menu, .ast-nav-menu { flex-direction: column; align-items: stretch; }
    .main-header-menu .sub-menu, .ast-nav-menu .sub-menu {
        position: static; display: block; box-shadow: none; border: 0; padding-left: 14px;
    }
    .site-logo-img img, .custom-logo { max-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   HOMEPAGE (index.html) - the 2011 "Rejuvenate" theme
   --------------------------------------------------------------------------
   index.html predates the rest of the site: WordPress 3.2.1, the Rejuvenate
   theme and the wp-uber-menu plugin, with a completely different class
   vocabulary from Astra/Elementor. It carries only 105 characters of inline
   CSS, so the framework rules above did nothing for it and the page rendered
   as plain unstyled text.

   Everything below is scoped to that page's own ids/classes.
   ========================================================================== */

body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

#top, #header, #content, #footer { box-sizing: border-box; }

/* --- header ------------------------------------------------------------- */
#header {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 18px 20px 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 30px;
}
#header .logo { order: 1; margin-right: auto; }
#header .logo img { max-height: 78px; width: auto; display: block; }
#header .blog-description { margin: 0; }

#header .call_now {
    order: 2;
    font-size: 13px;
    line-height: 1.5;
    color: #444;
    text-align: right;
}
#header .call_now span { display: block; font-size: 20px; font-weight: 700; color: #0a5c9e; }
#header .call_now a {
    display: inline-block;
    margin-top: 6px;
    padding: 7px 16px;
    border-radius: 3px;
    background: #0a5c9e;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
#header .address {
    order: 3;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    text-align: right;
}

/* --- mega menu ---------------------------------------------------------- */
#menu-navigation, #megaMenu { background: #0a5c9e; }
.megaMenuContainer { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

#megaMenu ul, #menu-navigation ul { list-style: none; margin: 0; padding: 0; }
#megaMenu > ul, .megaMenuHorizontal > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
#megaMenu li { position: relative; }
#megaMenu a, #menu-navigation a {
    display: block;
    padding: 13px 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
#megaMenu > ul > li > a:hover { background: rgba(255, 255, 255, .14); }

/* sub-menus stay closed until hover - the mega-menu JS is gone */
#megaMenu .sub-menu, #megaMenu .sub-menu-1 {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    display: none;
    min-width: 250px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #dfe4e8;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
#megaMenu li:hover > .sub-menu,
#megaMenu li:hover > .sub-menu-1 { display: block; }
#megaMenu .sub-menu a, #megaMenu .sub-menu-1 a { color: #333; padding: 8px 16px; font-weight: 500; }
#megaMenu .sub-menu a:hover { background: #f4f7fa; color: #0a5c9e; }

/* category thumbnails inside the mega menu */
.ss-nav-menu-with-img img { width: 34px; height: 34px; object-fit: cover; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.ss-nav-menu-with-img a { display: flex; align-items: center; gap: 8px; }
.wpmega-link-title { display: inline-block; }

/* --- slider ------------------------------------------------------------- */
/* Nivo Slider hid every slide inline and revealed them with JS. That JS is
   gone, so show the first slide as a static hero and keep the rest hidden. */
#slider {
    position: relative;
    max-width: 1000px;
    margin: 0 auto 26px;
    overflow: hidden;
    background: #eef2f5;
    border-radius: 4px;
}
#slider .nivo-imageLink { display: none !important; }
#slider .nivo-imageLink:first-of-type { display: block !important; }
#slider .nivo-imageLink:first-of-type img { display: block !important; width: 100%; height: auto; }

/* --- content + sidebar -------------------------------------------------- */
#content {
    max-width: 1000px;
    margin: 22px auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}
#content > #slider { flex: 1 1 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
#content > *:not(#slider):not(#sidebar) { flex: 1 1 600px; min-width: 0; }

/* #sidebar is a SIBLING of #content (both sit in #wrapper), not a child, so
   the flex rules above don't reach it. Constrain it to the same container
   width instead of restructuring the page. */
#sidebar {
    max-width: 1000px;
    margin: 0 auto 24px;
    padding: 0 20px;
}
#sidebar .widget { max-width: 100%; }
#sidebar .widget, #footer .widget { margin: 0 0 26px; }
#sidebar h3, #footer h3 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0a5c9e;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #1f2933;
}

/* --- contact form ------------------------------------------------------- */
.wpcf7-form p { margin: 0 0 12px; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-text, .wpcf7-textarea, .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea {
    width: 100%;
    max-width: 460px;
    padding: 9px 12px;
    border: 1px solid #cfd6dd;
    border-radius: 3px;
    font: inherit;
    font-size: 14px;
}
.wpcf7-form textarea { min-height: 130px; }
.wpcf7-submit {
    padding: 10px 26px;
    border: 0;
    border-radius: 3px;
    background: #0a5c9e;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* --- footer ------------------------------------------------------------- */
#footer {
    margin-top: 30px;
    padding: 28px 20px;
    background: #1f2933;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
}
#footer .first_col, #footer .second_col, #footer .third_col, #footer .fourth_col {
    display: inline-block;
    vertical-align: top;
    width: 24%;
    min-width: 220px;
    padding-right: 20px;
}
#footer a { color: #fff; }
#footer h3 { color: #fff; border-bottom-color: rgba(255, 255, 255, .3); }
#footer img { max-width: 26px; height: auto; }

#deviceSwitcher { display: none; }

@media (max-width: 860px) {
    #header { justify-content: center; text-align: center; }
    #header .logo { margin-right: 0; }
    #header .call_now, #header .address { text-align: center; }
    #megaMenu > ul, .megaMenuHorizontal > ul { flex-direction: column; }
    #megaMenu .sub-menu, #megaMenu .sub-menu-1 { position: static; display: block; box-shadow: none; border: 0; }
    #content { flex-direction: column; }
    #sidebar { flex: 1 1 100%; }
    #footer [class$="_col"] { width: 100%; padding-right: 0; }
}

/* ==========================================================================
   Empty Elementor columns
   --------------------------------------------------------------------------
   Elementor marks a column that holds widgets with .elementor-element-populated.
   A column WITHOUT it holds only a background image, applied at runtime by
   Elementor's JS. With that JS gone such a column renders as dead space - on
   /about-us/ one sat 480px wide and 503px tall beside the body copy.

   restore.js re-applies the background where the image exists and tags the
   column .restored-bg-missing where it does not. Only in that second case do
   we collapse the column and let its sibling take the full row.
   ========================================================================== */

.elementor-column.restored-bg-missing { display: none; }
.elementor-container:has(> .elementor-column.restored-bg-missing)
  > .elementor-column:not(.restored-bg-missing) { width: 100%; }

/* a background-only column still needs a sensible minimum on small screens */
@media (max-width: 767px) {
    .elementor-column > .elementor-widget-wrap:not(.elementor-element-populated) {
        min-height: 180px;
    }
}

/* footer widget columns were cramping into narrow strips */
/* keep every footer row inside the same container as the rest of the page,
   otherwise a wide widget row pushes a horizontal scrollbar */
.site-footer .ast-builder-grid-row-container,
.site-footer .site-above-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.site-footer { overflow-x: hidden; }
.site-footer .elementor-column,
.site-footer .widget-area { min-width: 0; max-width: 100%; }
.site-footer .ast-builder-grid-row { gap: 16px 30px; align-items: flex-start; }
.site-footer .site-footer-section { flex: 1 1 220px; display: block; }
.site-footer .footer-widget-area { position: static; width: auto; }