/* Theme Name: Advance Dental New Windsor Theme URI: Description: Advance Dental New Windsor Author: OM Performance Marketing Author URI: https://www.growwithom.com/ Template: hello-elementor Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html /* == Add your own styles below this line == --------------------------------------------*/ :is([class*="heading-"], [class*="display-"]) em { color: var(--secondary-light); font-style: italic; } /* ========================================= ADVANCED DENTAL - SMOOTH SCROLL HEADER ========================================= */ .site-header { position: relative; width: 100%; z-index: 100; opacity: 1; transform: translate3d(0, 0, 0); will-change: transform, opacity; } /* Fixed header state */ .site-header.header-sticky { position: fixed; left: 0; right: 0; width: 100%; z-index: 99999; } /* Starting position before reveal */ .site-header.header-sticky.header-preparing { opacity: 0; transform: translate3d(0, -100%, 0); } /* Smooth reveal */ .site-header.header-sticky.header-visible { opacity: 1; transform: translate3d(0, 0, 0); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease; } /* Space occupied by header when it becomes fixed */ .header-placeholder { display: none; width: 100%; } .header-placeholder.is-active { display: block; } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .site-header.header-sticky.header-visible { transition: none; } } .post-reading-time { display: inline-flex; align-items: center; gap: 10px; } .post-reading-time::before { content: ""; width: 1px; height: 14px; background: currentColor; opacity: 0.4; margin: 0 10px; } /* ======================================== ADVANCED DENTAL BLOG POST CONTENT STYLES ======================================== */ /* ======================================== BLOG TYPOGRAPHY VARIABLES ======================================== */ :root { --blog-h2: clamp(28px, 1.65rem + 0.5vw, 34px); --blog-h3: clamp(23px, 1.35rem + 0.3vw, 27px); --blog-h4: clamp(19px, 1.1rem + 0.2vw, 22px); --blog-h5: 18px; --blog-h6: 16px; --blog-body: 16px; --blog-small: 14px; --blog-body-line-height: 1.7; } /* ======================================== BLOG CONTENT WRAPPER Add class: blog-content to the Post Content widget/container ======================================== */ .blog-content { color: var(--grey, #272727); font-family: var(--body, "Inter", sans-serif); font-size: var(--blog-body); line-height: var(--blog-body-line-height); } /* ======================================== HEADINGS H1 intentionally excluded ======================================== */ .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 { color: var(--primary, #15213A); margin-bottom: var(--space-12, 12px); text-wrap: balance; } /* H2 — Display Font */ .blog-content h2 { margin-top: var(--space-40, 40px); font-family: var(--display, "Cormorant Garamond", serif); font-size: var(--blog-h2); font-weight: 500; line-height: 1.15; } /* H3 */ .blog-content h3 { margin-top: var(--space-32, 32px); font-family: var(--body, "Inter", sans-serif); font-size: var(--blog-h3); font-weight: 600; line-height: 1.25; } /* H4 */ .blog-content h4 { margin-top: var(--space-28, 28px); font-family: var(--body, "Inter", sans-serif); font-size: var(--blog-h4); font-weight: 600; line-height: 1.3; } /* H5 */ .blog-content h5 { margin-top: var(--space-24, 24px); font-family: var(--body, "Inter", sans-serif); font-size: var(--blog-h5); font-weight: 600; line-height: 1.35; } /* H6 */ .blog-content h6 { margin-top: var(--space-20, 20px); font-family: var(--body, "Inter", sans-serif); font-size: var(--blog-h6); font-weight: 600; line-height: 1.4; } /* ======================================== PARAGRAPHS ======================================== */ .blog-content p { margin-top: 0; margin-bottom: var(--space-20, 20px); font-size: var(--blog-body); line-height: var(--blog-body-line-height); } /* ======================================== INLINE TEXT LINKS Excludes all button types ======================================== */ .blog-content a:not( .elementor-button, .button, [class*="button-"], .wp-block-button__link, .wp-element-button ) { color: var(--secondary-dark, #8A6E35); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: color 0.2s ease, text-decoration-color 0.2s ease; } .blog-content a:not( .elementor-button, .button, [class*="button-"], .wp-block-button__link, .wp-element-button ):hover, .blog-content a:not( .elementor-button, .button, [class*="button-"], .wp-block-button__link, .wp-element-button ):focus { color: var(--secondary, #AD8C45); } /* ======================================== LISTS ======================================== */ .blog-content ul, .blog-content ol { margin-top: var(--space-12, 12px); margin-bottom: var(--space-20, 20px); padding-left: var(--space-24, 24px); } .blog-content li { margin-bottom: var(--space-8, 8px); font-size: var(--blog-body); line-height: var(--blog-body-line-height); } .blog-content li::marker { color: var(--secondary, #AD8C45); } .blog-content ul ul, .blog-content ul ol, .blog-content ol ul, .blog-content ol ol { margin-top: var(--space-8, 8px); margin-bottom: var(--space-8, 8px); } /* ======================================== BLOG IMAGES ======================================== */ .blog-content img, .blog-content figure img, .blog-content .wp-caption img, .blog-content .wp-block-image img, .blog-content img.aligncenter, .blog-content img.alignleft, .blog-content img.alignright { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg, 16px) !important; box-shadow: var( --shadow-md, 0 4px 12px rgba(0, 0, 0, 0.10) ) !important; } /* Images directly inside content */ .blog-content > img { margin-top: var(--space-28, 28px); margin-bottom: var(--space-28, 28px); } /* ======================================== IMAGE / FIGURE WRAPPERS ======================================== */ .blog-content figure, .blog-content .wp-caption, .blog-content .wp-block-image { max-width: 100%; margin-top: var(--space-28, 28px); margin-bottom: var(--space-28, 28px); } /* Ensure figure images retain radius/shadow */ .blog-content figure img, .blog-content .wp-caption img, .blog-content .wp-block-image img { margin-top: 0; margin-bottom: 0; border-radius: var(--radius-lg, 16px) !important; box-shadow: var( --shadow-md, 0 4px 12px rgba(0, 0, 0, 0.10) ) !important; } /* ======================================== WORDPRESS IMAGE ALIGNMENT ======================================== */ .blog-content img.aligncenter, .blog-content figure.aligncenter, .blog-content .wp-caption.aligncenter { margin-left: auto; margin-right: auto; } .blog-content img.alignleft, .blog-content figure.alignleft, .blog-content .wp-caption.alignleft { float: left; margin-right: var(--space-24, 24px); margin-bottom: var(--space-20, 20px); } .blog-content img.alignright, .blog-content figure.alignright, .blog-content .wp-caption.alignright { float: right; margin-left: var(--space-24, 24px); margin-bottom: var(--space-20, 20px); } /* ======================================== IMAGE CAPTIONS ======================================== */ .blog-content figcaption, .blog-content .wp-caption-text, .blog-content .wp-element-caption { margin-top: var(--space-8, 8px); color: var(--grey-soft, #686868); font-size: var(--blog-small); line-height: 1.5; } /* ======================================== BLOCKQUOTES ======================================== */ .blog-content blockquote { margin-top: var(--space-32, 32px); margin-bottom: var(--space-32, 32px); padding: var(--space-16, 16px) var(--space-24, 24px); border-left: 3px solid var(--secondary, #AD8C45); color: var(--primary, #15213A); font-size: var(--blog-h5); line-height: 1.6; font-style: italic; } .blog-content blockquote p { font-size: inherit; } .blog-content blockquote p:last-child { margin-bottom: 0; } /* ======================================== HORIZONTAL RULE ======================================== */ .blog-content hr { margin-top: var(--space-40, 40px); margin-bottom: var(--space-40, 40px); border: 0; border-top: 1px solid var(--grey-lighter, #D8DEE8); } /* ======================================== TABLES ======================================== */ .blog-content table { width: 100%; margin-top: var(--space-28, 28px); margin-bottom: var(--space-28, 28px); border-collapse: collapse; font-size: var(--blog-small); line-height: 1.5; } .blog-content th, .blog-content td { padding: var(--space-12, 12px) var(--space-16, 16px); border: 1px solid var(--grey-lighter, #D8DEE8); text-align: left; vertical-align: top; } .blog-content th { color: var(--primary, #15213A); font-weight: 600; background: var(--primary-lightest, #E8E9EB); } .blog-content tbody tr:nth-child(even) { background: var(--secondary-lightest, #FAF4E5); } /* Gutenberg Table Wrapper */ .blog-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--space-28, 28px); margin-bottom: var(--space-28, 28px); } .blog-content .wp-block-table table { margin: 0; } /* ======================================== VIDEOS / EMBEDS ======================================== */ .blog-content iframe, .blog-content video { display: block; width: 100%; max-width: 100%; margin-top: var(--space-28, 28px); margin-bottom: var(--space-28, 28px); border: 0; border-radius: var(--radius-lg, 16px); box-shadow: var( --shadow-md, 0 4px 12px rgba(0, 0, 0, 0.10) ); } .blog-content .wp-block-embed, .blog-content .wp-block-video { margin-top: var(--space-28, 28px); margin-bottom: var(--space-28, 28px); } .blog-content .wp-block-embed__wrapper { overflow: hidden; border-radius: var(--radius-lg, 16px); } /* Responsive YouTube Embed */ .blog-content .wp-block-embed.is-type-video .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; } .blog-content .wp-block-embed.is-type-video iframe { width: 100%; height: 100%; margin: 0; border-radius: 0; } /* ======================================== STRONG / BOLD / EMPHASIS ======================================== */ .blog-content strong, .blog-content b { color: var(--grey-dark, #1F1F1F); font-weight: 600; } .blog-content em, .blog-content i { font-style: italic; } .blog-content s, .blog-content strike, .blog-content del { text-decoration-line: line-through; } /* ======================================== GUTENBERG BLOG BUTTONS Fully separated from inline links ======================================== */ .blog-content .wp-block-button__link, .blog-content .wp-element-button { display: inline-flex; align-items: center; justify-content: center; width: auto; padding: var(--space-12, 12px) var(--space-20, 20px); border-width: 1px; border-style: solid; border-color: var(--secondary-light, #C9A85C); border-radius: var(--radius-full, 9999px); background-color: var(--secondary-light, #C9A85C); color: var(--primary-darkest, #080D17); font-family: var(--accent, "Plus Jakarta Sans", sans-serif); font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none !important; text-decoration-line: none !important; box-shadow: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Gutenberg Button Hover */ .blog-content .wp-block-button__link:hover, .blog-content .wp-element-button:hover { border-color: var(--secondary, #AD8C45); background-color: var(--secondary, #AD8C45); color: var(--white, #fff); text-decoration: none !important; } /* Gutenberg Button Focus */ .blog-content .wp-block-button__link:focus, .blog-content .wp-element-button:focus { text-decoration: none !important; } /* ======================================== GUTENBERG BUTTON WRAPPER ======================================== */ .blog-content .wp-block-buttons { margin-top: var(--space-20, 20px); margin-bottom: var(--space-20, 20px); } .blog-content .wp-block-buttons .wp-block-button { width: auto; } .blog-content .wp-block-buttons .wp-block-button__link { width: auto; } /* ======================================== EXISTING BUTTON COMPONENT SAFETY ======================================== */ .blog-content .elementor-button, .blog-content .button, .blog-content [class*="button-"] { text-decoration: none !important; } /* ======================================== CODE ======================================== */ .blog-content code { padding: 0.15em 0.35em; border-radius: var(--radius-sm, 4px); background: var(--primary-lightest, #E8E9EB); font-size: 0.9em; } .blog-content pre { overflow-x: auto; margin-top: var(--space-28, 28px); margin-bottom: var(--space-28, 28px); padding: var(--space-16, 16px) var(--space-20, 20px); border-radius: var(--radius-lg, 16px); background: var(--primary-lightest, #E8E9EB); } .blog-content pre code { padding: 0; background: transparent; } /* ======================================== FIRST / LAST ELEMENT CLEANUP ======================================== */ .blog-content > :first-child { margin-top: 0; } .blog-content > :last-child { margin-bottom: 0; } /* ======================================== TABLET ======================================== */ @media (max-width: 1024px) { .blog-content { line-height: 1.65; } } /* ======================================== MOBILE ======================================== */ @media (max-width: 767px) { .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 { margin-bottom: var(--space-8, 8px); } .blog-content h2 { margin-top: var(--space-32, 32px); } .blog-content h3 { margin-top: var(--space-28, 28px); } .blog-content h4 { margin-top: var(--space-24, 24px); } .blog-content h5, .blog-content h6 { margin-top: var(--space-20, 20px); } .blog-content p { margin-bottom: var(--space-16, 16px); } .blog-content ul, .blog-content ol { padding-left: var(--space-20, 20px); } .blog-content blockquote { margin-top: var(--space-24, 24px); margin-bottom: var(--space-24, 24px); padding: var(--space-16, 16px) var(--space-20, 20px); } .blog-content .wp-block-table { width: 100%; overflow-x: auto; } .blog-content table { min-width: 600px; } .blog-content th, .blog-content td { padding: var(--space-8, 8px) var(--space-12, 12px); } .blog-content figure, .blog-content .wp-caption, .blog-content .wp-block-image, .blog-content .wp-block-table, .blog-content .wp-block-embed, .blog-content .wp-block-video { margin-top: var(--space-24, 24px); margin-bottom: var(--space-24, 24px); } .blog-content hr { margin-top: var(--space-32, 32px); margin-bottom: var(--space-32, 32px); } /* Remove image floats on mobile */ .blog-content img.alignleft, .blog-content img.alignright, .blog-content figure.alignleft, .blog-content figure.alignright, .blog-content .wp-caption.alignleft, .blog-content .wp-caption.alignright { float: none; margin-left: auto; margin-right: auto; } } /* ========================================================= ADVANCED DENTAL — GRAVITY FORMS CONTACT FORM Form Class: gf-contact-us Background: Primary Dark ========================================================= */ /* --------------------------------------------------------- FORM --------------------------------------------------------- */ .gf-contact-us { width: 100%; } /* --------------------------------------------------------- FIELD LAYOUT / SPACING --------------------------------------------------------- */ .gf-contact-us .gform_fields { row-gap: clamp(1.25rem, 1rem + 1vw, 2rem); } /* --------------------------------------------------------- FIELD LABELS --------------------------------------------------------- */ .gf-contact-us .gfield_label, .gf-contact-us .gform-field-label { color: var(--primary-lightest); font-family: var(--body-font-family, inherit); font-size: 0.9375rem; font-weight: 500; line-height: 1.4; } /* * Gravity Forms Foundation Theme * Actual label text is wrapped in this element. */ .gf-contact-us .gform-field-label__text { color: var(--primary-lightest); } /* --------------------------------------------------------- REQUIRED TEXT / ASTERISK --------------------------------------------------------- */ .gf-contact-us .gfield_required, .gf-contact-us .gfield_required_text { color: var(--secondary-light); font-size: 0.8125rem; font-weight: 500; } /* Hide visible Required text without disabling validation */ .gf-contact-us .gfield_required, .gf-contact-us .gfield_required_text { display: none !important; } /* --------------------------------------------------------- INPUTS --------------------------------------------------------- */ .gf-contact-us input[type="text"], .gf-contact-us input[type="email"], .gf-contact-us input[type="tel"], .gf-contact-us input[type="url"], .gf-contact-us input[type="number"], .gf-contact-us input[type="password"], .gf-contact-us input[type="date"], .gf-contact-us select, .gf-contact-us textarea { width: 100%; min-height: 52px; padding: 0.875rem 1rem; color: var(--primary-dark); background-color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); font-family: var(--body-font-family, inherit); font-size: 1rem; font-weight: 400; line-height: 1.5; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* --------------------------------------------------------- PLACEHOLDER --------------------------------------------------------- */ .gf-contact-us input::placeholder, .gf-contact-us textarea::placeholder { color: #667085; opacity: 1; } /* --------------------------------------------------------- TEXTAREA --------------------------------------------------------- */ .gf-contact-us textarea { min-height: 180px; resize: vertical; } /* --------------------------------------------------------- SELECT --------------------------------------------------------- */ .gf-contact-us select { cursor: pointer; } /* --------------------------------------------------------- FOCUS STATES --------------------------------------------------------- */ .gf-contact-us input[type="text"]:focus, .gf-contact-us input[type="email"]:focus, .gf-contact-us input[type="tel"]:focus, .gf-contact-us input[type="url"]:focus, .gf-contact-us input[type="number"]:focus, .gf-contact-us input[type="password"]:focus, .gf-contact-us input[type="date"]:focus, .gf-contact-us select:focus, .gf-contact-us textarea:focus { outline: none; border-color: var(--secondary-light); box-shadow: 0 0 0 3px color-mix( in srgb, var(--secondary-light) 20%, transparent ); } /* ========================================================= INPUT RADIUS ========================================================= */ /* Name, Last Name, Email, Phone, etc. */ .gf-contact-us input[type="text"], .gf-contact-us input[type="email"], .gf-contact-us input[type="tel"], .gf-contact-us input[type="url"], .gf-contact-us input[type="number"], .gf-contact-us input[type="password"], .gf-contact-us input[type="date"], .gf-contact-us select { border-radius: var(--radius-full, 9999px) !important; } /* Textarea */ .gf-contact-us textarea { border-radius: var(--radius-lg, 16px) !important; } /* --------------------------------------------------------- NAME FIELD — FIRST / LAST LABELS --------------------------------------------------------- */ .gf-contact-us .ginput_complex label, .gf-contact-us .ginput_complex .gform-field-label { color: var(--primary-lightest); font-size: 0.8125rem; font-weight: 400; } /* --------------------------------------------------------- FIELD DESCRIPTION --------------------------------------------------------- */ .gf-contact-us .gfield_description { color: var(--primary-lightest); font-size: 0.8125rem; line-height: 1.5; opacity: 0.8; } /* ========================================================= PHONE FIELD ========================================================= */ .gf-contact-us .iti { width: 100%; } .gf-contact-us .iti input { width: 100%; } /* Country / dial-code area */ .gf-contact-us .iti__selected-country, .gf-contact-us .iti__selected-flag { background-color: #fff; } /* --------------------------------------------------------- CHECKBOX / RADIO LABELS --------------------------------------------------------- */ .gf-contact-us .gchoice label, .gf-contact-us .gfield_checkbox label, .gf-contact-us .gfield_radio label { color: var(--primary-lightest); } /* --------------------------------------------------------- CONSENT FIELD --------------------------------------------------------- */ .gf-contact-us .gfield--type-consent label { color: var(--primary-lightest); } /* ========================================================= VALIDATION ========================================================= */ /* ========================================================= GRAVITY FORMS — VALIDATION / ERROR STATES ========================================================= */ /* ========================================================= GRAVITY FORMS — FORM 1 VALIDATION AFTER SUBMIT ========================================================= */ #gform_wrapper_1[data-form-index="0"].gform-theme .gform_validation_errors { background: transparent !important; border-color: var(--error-light) !important; color: var(--error-light) !important; } /* Main submission error heading */ #gform_wrapper_1[data-form-index="0"].gform-theme .gform_validation_errors .gform_submission_error { color: var(--error-light) !important; } /* Error icon */ #gform_wrapper_1[data-form-index="0"].gform-theme .gform_validation_errors .gform-icon { color: var(--error-light) !important; fill: var(--error-light) !important; } /* Error summary list */ #gform_wrapper_1[data-form-index="0"].gform-theme .gform_validation_errors ol, #gform_wrapper_1[data-form-index="0"].gform-theme .gform_validation_errors ul, #gform_wrapper_1[data-form-index="0"].gform-theme .gform_validation_errors li { color: var(--error-light) !important; } /* Error summary links */ #gform_wrapper_1[data-form-index="0"].gform-theme .gform_validation_errors a { color: var(--error-light) !important; text-decoration-color: var(--error-light) !important; } /* Individual field validation messages */ #gform_wrapper_1[data-form-index="0"].gform-theme .gfield_validation_message, #gform_wrapper_1[data-form-index="0"].gform-theme .validation_message { color: var(--error-light) !important; background: transparent !important; border: 0 !important; } /* Invalid field borders */ #gform_wrapper_1[data-form-index="0"].gform-theme .gfield_error input, #gform_wrapper_1[data-form-index="0"].gform-theme .gfield_error select, #gform_wrapper_1[data-form-index="0"].gform-theme .gfield_error textarea { border-color: var(--error-light) !important; } /* ========================================================= GRAVITY FORMS — SUBMISSION ERROR ========================================================= */ /* Top validation box */ .gf-contact-us .gform_validation_errors { margin-bottom: 2rem; padding: 1.25rem 1.5rem; background: transparent !important; border: 1px solid var(--error-light) !important; border-radius: 12px; box-shadow: none !important; } /* Main submission error heading */ .gf-contact-us .gform_validation_errors .gform_submission_error { --gf-form-validation-heading-color: var(--error-light) !important; color: var(--error-light) !important; } /* Error icon */ .gf-contact-us .gform_validation_errors .gform-icon { --gf-form-validation-heading-icon-color: var(--error-light) !important; --gf-form-validation-heading-icon-border-color: var(--error-light) !important; color: var(--error-light) !important; } /* Error summary list */ .gf-contact-us .gform_validation_errors ol { --gf-form-validation-summary-color: var(--error-light) !important; color: var(--error-light) !important; } /* Error summary items + links */ .gf-contact-us .gform_validation_errors li, .gf-contact-us .gform_validation_errors a { color: var(--error-light) !important; text-decoration-color: var(--error-light) !important; } /* ========================================================= INDIVIDUAL FIELD ERRORS ========================================================= */ .gf-contact-us .gfield_validation_message, .gf-contact-us .validation_message { margin-top: 0.5rem; padding: 0; color: var(--error-light) !important; background: transparent !important; border: 0 !important; font-size: 0.875rem; line-height: 1.5; box-shadow: none !important; } /* Invalid inputs */ .gf-contact-us .gfield_error input, .gf-contact-us .gfield_error select, .gf-contact-us .gfield_error textarea { border-color: var(--error-light) !important; } /* Keep normal labels light */ .gf-contact-us .gfield_error .gfield_label, .gf-contact-us .gfield_error .gform-field-label, .gf-contact-us .gfield_error .gform-field-label__text { color: var(--primary-lightest) !important; } /* Keep Required secondary */ .gf-contact-us .gfield_error .gfield_required, .gf-contact-us .gfield_error .gfield_required_text { color: var(--secondary-light) !important; } /* --------------------------------------------------------- INVALID FIELD BORDERS --------------------------------------------------------- */ .gf-contact-us .gfield_error input[type="text"], .gf-contact-us .gfield_error input[type="email"], .gf-contact-us .gfield_error input[type="tel"], .gf-contact-us .gfield_error input[type="url"], .gf-contact-us .gfield_error input[type="number"], .gf-contact-us .gfield_error input[type="password"], .gf-contact-us .gfield_error input[type="date"], .gf-contact-us .gfield_error select, .gf-contact-us .gfield_error textarea { border-color: var(--error-light) !important; } /* --------------------------------------------------------- ERROR FIELD FOCUS --------------------------------------------------------- */ .gf-contact-us .gfield_error input:focus, .gf-contact-us .gfield_error select:focus, .gf-contact-us .gfield_error textarea:focus { border-color: var(--error-light) !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--error-light) 20%, transparent ) !important; } /* --------------------------------------------------------- KEEP NORMAL LABELS LIGHT --------------------------------------------------------- */ .gf-contact-us .gfield_error .gfield_label, .gf-contact-us .gfield_error .gform-field-label, .gf-contact-us .gfield_error .gform-field-label__text { color: var(--primary-lightest) !important; } /* --------------------------------------------------------- KEEP REQUIRED TEXT SECONDARY --------------------------------------------------------- */ .gf-contact-us .gfield_error .gfield_required, .gf-contact-us .gfield_error .gfield_required_text { color: var(--secondary-light) !important; } /* ========================================================= FORM FOOTER ========================================================= */ .gf-contact-us .gform_footer { margin-top: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); padding: 0; } /* ========================================================= GRAVITY FORMS SUBMIT BUTTON — FULL WIDTH ========================================================= */ .gf-contact-us .gform-footer, .gf-contact-us .gform_footer { width: 100%; padding: 0; } .gf-contact-us .gform-footer .gform_button, .gf-contact-us .gform_footer .gform_button, .gf-contact-us input.gform_button[type="submit"], .gf-contact-us button.gform_button[type="submit"] { --gf-local-bg-color: var(--secondary-light); --gf-local-border-color: var(--secondary-light); --gf-local-color: var(--primary-dark); display: flex; align-items: center; justify-content: center; width: 100% !important; max-width: none !important; min-height: 52px; margin: 0; padding: 0.875rem 1.75rem; background: var(--secondary-light) !important; background-color: var(--secondary-light) !important; color: var(--primary-dark) !important; border: 1px solid var(--secondary-light) !important; border-radius: 999px !important; font-family: var(--body-font-family, inherit); font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none !important; box-shadow: none !important; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Hover */ .gf-contact-us .gform-footer .gform_button:hover, .gf-contact-us .gform_footer .gform_button:hover, .gf-contact-us input.gform_button[type="submit"]:hover, .gf-contact-us button.gform_button[type="submit"]:hover { background: var(--secondary) !important; background-color: var(--secondary) !important; border-color: var(--secondary) !important; color: var(--white) !important; } /* Focus */ .gf-contact-us .gform-footer .gform_button:focus-visible, .gf-contact-us .gform_footer .gform_button:focus-visible, .gf-contact-us input.gform_button[type="submit"]:focus-visible, .gf-contact-us button.gform_button[type="submit"]:focus-visible { outline: 2px solid var(--secondary-light); outline-offset: 3px; } /* ========================================================= GRAVITY FORMS SPINNER ========================================================= */ .gf-contact-us .gform_ajax_spinner { margin-left: 0.75rem; } /* ========================================================= TABLET / MOBILE ========================================================= */ @media (max-width: 767px) { .gf-contact-us .gform_fields { row-gap: 1.25rem; } /* Inputs */ .gf-contact-us input[type="text"], .gf-contact-us input[type="email"], .gf-contact-us input[type="tel"], .gf-contact-us input[type="url"], .gf-contact-us input[type="number"], .gf-contact-us input[type="password"], .gf-contact-us input[type="date"], .gf-contact-us select { min-height: 50px; } /* Textarea */ .gf-contact-us textarea { min-height: 160px; } /* Full-width submit on mobile */ .gf-contact-us .gform_footer input[type="submit"], .gf-contact-us .gform_footer button[type="submit"], .gf-contact-us .gform_button { width: 100%; } } /* Gravity Forms styles — generated. Target: :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) { width: 100%; max-width: 100%; } /* Question labels */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_label, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform-field-label, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform-field-label__text { color: #0f172a; font-size: 1rem; font-weight: 500; line-height: 1.4; font-family: inherit; } /* Helper text under a question */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_description { color: #64748b; font-size: 0.8125rem; line-height: 1.5; } /* Sub-labels (First name / Last name, etc.) */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .ginput_complex label, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .ginput_complex .gform-field-label { color: #0f172a; font-size: 0.8125rem; font-weight: 400; } /* Checkbox and radio choices */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gchoice label, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_checkbox label, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_radio label, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield--type-consent label { color: #0f172a; } /* Answer boxes */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="text"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="email"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="tel"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="url"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="number"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="password"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="date"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) select, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) textarea { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 52px; padding: 0.875rem 1rem; color: #0f172a; background-color: #ffffff; border: 1px solid #cbd5e1; font-size: 1rem; line-height: 1.5; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; font-family: inherit; } :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="text"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="email"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="tel"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="url"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="number"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="password"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="date"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) select { border-radius: 999px !important; } :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) textarea { min-height: 180px; border-radius: 16px !important; resize: vertical; } /* Greyed-out example text */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input::placeholder, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) textarea::placeholder { color: #667085; opacity: 1; } /* Clicked-into state */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="text"]:focus, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="email"]:focus, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="tel"]:focus, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="url"]:focus, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="number"]:focus, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="password"]:focus, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="date"]:focus, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) select:focus, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 20%, transparent); } /* Brand highlight on checkboxes, radios and links */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="checkbox"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input[type="radio"] { accent-color: #C9A85C; } /* Gap between questions */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_fields { row-gap: clamp(1.25rem, 1rem + 1vw, 2rem); } /* Send button */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_footer, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform-footer { width: 100%; margin-top: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); padding: 0; } :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_footer .gform_button, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform-footer .gform_button, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input.gform_button[type="submit"], :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) button.gform_button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100% !important; max-width: 100% !important; box-sizing: border-box; min-height: 60px; margin: 0; padding: 1.125rem 2.25rem; background: #C9A85C !important; color: #080D17 !important; border: 1px solid #C9A85C !important; border-radius: 999px !important; font-size: 1.125rem; font-weight: 600; line-height: 1; box-shadow: none !important; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; font-family: inherit; } :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_footer .gform_button:hover, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform-footer .gform_button:hover, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) input.gform_button[type="submit"]:hover, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) button.gform_button[type="submit"]:hover { background: #8A6E35 !important; border-color: #8A6E35 !important; color: #ffffff !important; } /* Error summary at the top of the form */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_validation_errors { margin-bottom: 2rem; padding: 1.25rem 1.5rem; background: transparent !important; border: 1px solid #dc2626 !important; border-radius: 12px; color: #dc2626 !important; } :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_validation_errors .gform_submission_error, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_validation_errors .gform-icon, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_validation_errors ol, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_validation_errors li, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_validation_errors a { color: #dc2626 !important; } /* Message under a question that needs fixing */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_validation_message, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .validation_message { margin-top: 0.5rem; color: #dc2626 !important; background: transparent !important; border: 0 !important; font-size: 0.875rem; } /* Outline of a box that needs fixing */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_error input, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_error select, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_error textarea { border-color: #dc2626 !important; } :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_error input:focus, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_error select:focus, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_error textarea:focus { border-color: #dc2626 !important; box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 20%, transparent) !important; } :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_error .gfield_label, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_error .gform-field-label, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_error .gform-field-label__text { color: #0f172a !important; } /* "Thanks, we got it" confirmation */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_confirmation_message, .gform_confirmation_wrapper .gform_confirmation_message { padding: 1.25rem 1.5rem; color: #065f46 !important; background: #ecfdf5 !important; border: 1px solid #065f46; border-radius: 12px; } /* Hidden parts */ :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gform_heading { display: none !important; } :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_description:not(.validation_message):not(.gfield_validation_message) { display: none !important; } :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_required, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_required_text, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gfield_required_asterisk { display: none !important; } /* ========================================= HORIZONTAL OVERFLOW CONTAINMENT ----------------------------------------- The Elementor entrance interactions slide blocks in along the X axis from +/-100px. Nothing in the page chain contains that, so until an animation has run its element sits 100px outside the container: the right-hand ones widen the document (a horizontal scrollbar) and the left-hand ones get cut off at the viewport edge. The 100px distance happens to equal the gap between `--container-wide` (1240px) and a 1440px viewport, so it lands flush at 1440px and overflows at every narrower width -- which is why it reads as a layout bug rather than an animation one. Containing the paint at the section boundary is the fix. `clip` rather than `hidden`: it contains the overflow without creating a scroll container, so scroll anchoring and any future sticky child still work, and it is the only value that may pair with `overflow-y: visible`, so drop shadows and other vertical bleed are untouched. ========================================= */ /* Section-level: the design-system boundary each animation belongs to. */ .elementor [class*="section-"] { overflow-x: clip; } /* * Page-level backstop. Two blocks on the home page animate on X without * a `section-*` wrapper, so the section rule alone would not catch them. * The header is a sibling of `main`, so the Services mega menu is * unaffected and can still escape its container. */ main.site-main, .elementor-location-footer { overflow-x: clip; } /* ========================================= SERVICES MEGA MENU ----------------------------------------- Reusable component keyed off the permanent WordPress menu CSS class `services-mega-menu` (Appearance > Menus > Services > CSS Classes). The panel is anchored to the Elementor header container class `.site-header`: on desktop the submenu is absolutely positioned against that container, so `top: calc(100% + var(--services-mega-menu-offset))` is always 10px below the full header height with no JavaScript measurement. Adjust that one variable to change the offset. Applies to the header only — the footer service list is untouched. ========================================= */ /* Icons are decorative in every context except the mega menu. */ .advanced-dental-menu-icon { display: none; } /* Desktop: Elementor's tablet breakpoint ends at 1024px. */ @media (min-width: 1025px) { /* * Make `.site-header` the containing block for the panel. * * Elementor sets `position: relative` on containers, the nav widget, * the menu list and the menu item. Neutralising those between the * submenu and `.site-header` is what replaces the old JS offsets. * Scoped by class + `:has()`, so no element IDs are referenced. */ .site-header .e-con:has(.services-mega-menu), .site-header .elementor-widget-nav-menu:has(.services-mega-menu), .site-header .elementor-nav-menu:has(> .services-mega-menu), .site-header .services-mega-menu { position: static; } /* Single knob for the panel's offset below the header. */ .site-header .services-mega-menu { --services-mega-menu-offset: 10px; } /* The panel escapes the header container box. */ .site-header, .site-header .e-con:has(.services-mega-menu), .site-header .elementor-widget-nav-menu:has(.services-mega-menu) { overflow: visible; } /* * Hover bridge. The panel is offset from the header, so the pointer has * to cross dead space on its way down. This extends the parent link's * hit area over that space, keeping `:hover` on the menu item. It is * only as wide as the link and only exists while the panel is open, so * nothing else on the page loses a hit area. */ .site-header .elementor-nav-menu > li.services-mega-menu:hover > a::after, .site-header .elementor-nav-menu > li.services-mega-menu:focus-within > a::after, .site-header .elementor-nav-menu > li.services-mega-menu > a[aria-expanded="true"]::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: calc(var(--space-32) + var(--services-mega-menu-offset)); background-color: var(--transparent); } /* * Panel: matches `.container-wide` exactly — full width up to * `--container-wide`, centred, with `--gutter` inline padding so no * content ever sits edge to edge. */ .site-header .elementor-nav-menu > li.services-mega-menu > .sub-menu { display: none !important; position: absolute; z-index: 2; top: calc(100% + var(--services-mega-menu-offset)) !important; inset-inline: 0 !important; /* Keep the panel within the approved 1200px desktop maximum. */ width: min(1200px, calc(100% - (var(--gutter) * 2))) !important; min-width: 0 !important; margin: 0 auto !important; padding: var(--space-24) var(--gutter) !important; border: 1px solid var(--grey-lighter) !important; border-radius: var(--radius-md) !important; background-color: var(--white) !important; /* Same elevation as the design system's `shadow-md` global class. */ box-shadow: 0 16px 32px -16px rgba(140, 153, 184, 0.6); /* Compact, evenly balanced grid. Three columns suits 3/6/9 items. */ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--space-4) var(--space-32) !important; } /* * Four columns where that divides more evenly than three: * 1-4 items (single row), 7-8 items, and 10 or more items. */ .site-header .elementor-nav-menu > li.services-mega-menu > .sub-menu:not(:has(> li:nth-child(5))), .site-header .elementor-nav-menu > li.services-mega-menu > .sub-menu:has(> li:nth-child(7)):not(:has(> li:nth-child(9))), .site-header .elementor-nav-menu > li.services-mega-menu > .sub-menu:has(> li:nth-child(10)) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } /* * Open on mouse hover, on keyboard focus, and on touch — SmartMenus * sets `aria-expanded` on the parent link when the item is tapped. */ .site-header .elementor-nav-menu > li.services-mega-menu:hover > .sub-menu, .site-header .elementor-nav-menu > li.services-mega-menu:focus-within > .sub-menu, .site-header .elementor-nav-menu > li.services-mega-menu > a[aria-expanded="true"] + .sub-menu { display: grid !important; } .site-header .elementor-nav-menu > li.services-mega-menu > .sub-menu > li { width: auto !important; margin: 0 !important; } /* Text-colour-only hover: no card border, no background. */ .site-header .elementor-nav-menu > li.services-mega-menu > .sub-menu > li > a { display: flex !important; align-items: center !important; gap: var(--space-8) !important; padding: var(--space-8) 0 !important; border: 0 !important; border-radius: var(--radius-none) !important; background-color: var(--transparent) !important; color: var(--primary) !important; font-family: var(--accent) !important; font-size: var(--size-14) !important; font-weight: 600 !important; line-height: var(--line-130) !important; text-align: start !important; white-space: normal !important; transition: color 200ms ease !important; } .site-header .elementor-nav-menu > li.services-mega-menu > .sub-menu > li > a:hover, .site-header .elementor-nav-menu > li.services-mega-menu > .sub-menu > li > a:focus-visible { background-color: var(--transparent) !important; color: var(--secondary) !important; } .site-header .services-mega-menu .advanced-dental-menu-icon { display: block; flex: 0 0 auto; width: var(--size-16); height: var(--size-16); object-fit: contain; } } /* Tablet and mobile: Elementor's own dropdown handles layout and toggling. */ @media (max-width: 1024px) { .site-header .services-mega-menu .advanced-dental-menu-icon { display: inline-block; width: var(--size-16); height: var(--size-16); margin-inline-end: var(--space-8); object-fit: contain; vertical-align: middle; } } /* ========================================= STANDARD HEADER DROPDOWNS (DESKTOP) ----------------------------------------- Match the visual treatment of the Services panel without affecting the custom Services mega menu or Elementor's tablet/mobile menu behavior. ========================================= */ @media (min-width: 1025px) { /* Use the site header as the containing block, just like Services. */ .site-header .e-con:has(.elementor-nav-menu > li.menu-item-has-children:not(.services-mega-menu)), .site-header .elementor-widget-nav-menu:has(.elementor-nav-menu > li.menu-item-has-children:not(.services-mega-menu)), .site-header .elementor-nav-menu:has(> li.menu-item-has-children:not(.services-mega-menu)), .site-header .elementor-nav-menu > li.menu-item-has-children:not(.services-mega-menu) { position: static; } .site-header .elementor-nav-menu > li.menu-item-has-children:not(.services-mega-menu) > .sub-menu { position: absolute; z-index: 3; top: var(--standard-dropdown-top, calc(100% + var(--services-mega-menu-offset, 10px))) !important; left: var(--standard-dropdown-left, 0) !important; right: auto !important; width: max-content !important; min-width: 14rem; max-width: calc(100vw - (var(--gutter) * 2)); margin: 0 !important; padding: var(--space-8) 0; border: 1px solid var(--grey-lighter); border-radius: var(--radius-md); background-color: var(--white); box-shadow: 0 16px 32px -16px rgba(140, 153, 184, 0.6); } .site-header .elementor-nav-menu > li.menu-item-has-children:not(.services-mega-menu) > .sub-menu > li > a { padding: var(--space-8) var(--space-16); color: var(--primary); font-family: var(--accent); font-size: var(--size-14); font-weight: 600; line-height: var(--line-130); white-space: nowrap; } .site-header .elementor-nav-menu > li.menu-item-has-children:not(.services-mega-menu) > .sub-menu > li > a:hover, .site-header .elementor-nav-menu > li.menu-item-has-children:not(.services-mega-menu) > .sub-menu > li > a:focus-visible { background-color: var(--transparent); color: var(--secondary); } } :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gf_progressbar_wrapper, :is(.gform-theme--framework.gf-online-booking_wrapper, .gform-theme--framework.gf-online-booking, .gform-theme--framework .gf-online-booking) .gf_page_steps { display: none !important; }