/*
Theme Name: Flossem Child Theme
Theme URI: https://www.flossem.com/
Template: stomatology
Description: Flossem Dental child theme for Dr. Steven W. Haywood DDS, Timonium MD. Custom brand styling, schema, redirects, and SEO optimizations built on top of the Stomatology parent theme.
Author: Flossem Dental
Author URI: https://www.flossem.com/
Version: 1.0.0
Tested up to: 6.8
Requires at least: 5.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments, translation-ready
Text Domain: flossem-child
*/

/* ==========================================================================
   1. Google Fonts - Montserrat
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   2. CSS Custom Properties (Brand Variables)
   ========================================================================== */
:root {
  --flossem-purple:        #7B4FA6;
  --flossem-purple-dark:   #6B3D96;
  --flossem-purple-darker: #3d1f60;
  --flossem-lavender:      #C9A8E0;
  --flossem-lavender-bg:   #f3ecfa;
  --flossem-light-bg:      #f8f4fc;
  --flossem-grey:          #9EA8B0;
  --flossem-body:          #333333;
  --flossem-white:         #ffffff;
  --flossem-card-border:   #efe8f7;
  --flossem-shadow:        rgba(123, 79, 166, 0.15);
  --flossem-font:          'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   3. Global Typography (Mobile First)
   ========================================================================== */
html,
body,
button,
input,
select,
textarea,
.sc_layouts_title_caption,
.sc_layouts_menu_nav,
.menu_main_nav,
.widget,
.elementor-widget,
.post_content,
.entry-content {
  font-family: var(--flossem-font) !important;
  color: var(--flossem-body);
}

body {
  font-weight: 400;
  line-height: 1.65;
  font-size: 16px;
  background-color: var(--flossem-white);
}

h1, h2, h3, h4, h5, h6,
.heading_1, .heading_2, .heading_3, .heading_4, .heading_5, .heading_6,
.sc_title,
.post_title,
.elementor-heading-title {
  font-family: var(--flossem-font) !important;
  color: var(--flossem-purple-dark) !important;
  font-weight: 700;
  line-height: 1.25;
}

h1, .heading_1 { font-size: 2rem; font-weight: 800; }
h2, .heading_2 { font-size: 1.625rem; }
h3, .heading_3 { font-size: 1.35rem; font-weight: 600; }
h4, .heading_4 { font-size: 1.15rem; font-weight: 600; }
h5, .heading_5 { font-size: 1rem;    font-weight: 600; }
h6, .heading_6 { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

p { margin: 0 0 1em; }

/* ==========================================================================
   4. Links & Accent Colors
   ========================================================================== */
a {
  color: var(--flossem-purple);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--flossem-purple-dark);
  text-decoration: underline;
}

.scheme_main a,
.scheme_dark a:hover,
.post_meta a,
.post_meta_item:hover,
.post_meta_item:hover a {
  color: var(--flossem-purple);
}

/* Accent color hooks used by parent theme */
.color_style_link1,
.scheme_self .color_style_link1,
.scheme_dark .color_style_link1 {
  color: var(--flossem-purple) !important;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.sc_button,
.sc_button_default,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.elementor-button,
.wp-block-button__link,
.btn,
.button {
  background-color: var(--flossem-purple) !important;
  color: var(--flossem-white) !important;
  font-family: var(--flossem-font) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid var(--flossem-purple) !important;
  border-radius: 4px;
  padding: 0.85em 1.75em;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(123, 79, 166, 0.18);
}

.sc_button:hover,
.sc_button_default:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.elementor-button:hover,
.wp-block-button__link:hover,
.btn:hover,
.button:hover,
.sc_button:focus,
button:focus {
  background-color: var(--flossem-purple-dark) !important;
  border-color: var(--flossem-purple-dark) !important;
  color: var(--flossem-white) !important;
  box-shadow: 0 4px 12px var(--flossem-shadow);
  transform: translateY(-1px);
  text-decoration: none;
}

.sc_button_simple,
.sc_button.sc_button_simple {
  background-color: transparent !important;
  color: var(--flossem-purple) !important;
  border-color: var(--flossem-purple) !important;
  box-shadow: none;
}

.sc_button_simple:hover {
  background-color: var(--flossem-purple) !important;
  color: var(--flossem-white) !important;
}

/* ==========================================================================
   6. Top Bar (Header Above Main Nav)
   ========================================================================== */
.top_panel_top,
.sc_layouts_row_type_compact,
.top_bar,
.flossem-topbar {
  background-color: var(--flossem-purple) !important;
  color: var(--flossem-white) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 0;
}

.top_panel_top a,
.sc_layouts_row_type_compact a,
.top_bar a,
.flossem-topbar a {
  color: var(--flossem-white) !important;
}

.top_panel_top a:hover,
.flossem-topbar a:hover {
  color: var(--flossem-lavender) !important;
  text-decoration: none;
}

.top_panel_top .sc_layouts_item_icon,
.flossem-topbar .icon {
  color: var(--flossem-lavender);
  margin-right: 6px;
}

/* ==========================================================================
   7. Main Navigation
   ========================================================================== */
.sc_layouts_menu,
.sc_layouts_menu_nav,
.menu_main_nav_area,
.menu_main_nav {
  font-family: var(--flossem-font) !important;
}

.sc_layouts_menu_nav > li > a,
.menu_main_nav > li > a {
  font-family: var(--flossem-font) !important;
  font-weight: 600 !important;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--flossem-body);
  padding: 1em 1.1em;
  transition: color 0.2s ease;
}

.sc_layouts_menu_nav > li > a:hover,
.menu_main_nav > li > a:hover,
.sc_layouts_menu_nav > li.current-menu-item > a,
.sc_layouts_menu_nav > li.current_page_item > a,
.sc_layouts_menu_nav > li.current-menu-ancestor > a,
.menu_main_nav > li.current-menu-item > a {
  color: var(--flossem-purple) !important;
}

/* Dropdowns */
.sc_layouts_menu_nav ul,
.menu_main_nav ul {
  background-color: var(--flossem-white) !important;
  border-top: 3px solid var(--flossem-purple) !important;
  box-shadow: 0 8px 20px var(--flossem-shadow);
  border-radius: 0 0 4px 4px;
  padding: 0.5em 0;
}

.sc_layouts_menu_nav ul li a,
.menu_main_nav ul li a {
  color: var(--flossem-body) !important;
  padding: 0.6em 1.25em;
  font-weight: 500;
  text-transform: none;
  font-size: 14px;
}

.sc_layouts_menu_nav ul li a:hover,
.sc_layouts_menu_nav ul li.current-menu-item > a,
.menu_main_nav ul li a:hover {
  background-color: var(--flossem-lavender-bg) !important;
  color: var(--flossem-purple) !important;
}

/* ==========================================================================
   8. Page Title Banner (Page Hero)
   ========================================================================== */
.top_panel_title,
.sc_layouts_title,
.flossem-page-hero {
  background-color: var(--flossem-purple) !important;
  background-image: linear-gradient(135deg, var(--flossem-purple) 0%, var(--flossem-purple-dark) 100%) !important;
  color: var(--flossem-white) !important;
  padding: 3.5em 0;
}

.top_panel_title .sc_layouts_title_caption,
.top_panel_title h1,
.sc_layouts_title h1,
.flossem-page-hero h1 {
  color: var(--flossem-white) !important;
  font-weight: 700;
  margin: 0;
}

.top_panel_title .sc_layouts_title_breadcrumbs a,
.sc_layouts_title_breadcrumbs a,
.flossem-page-hero .breadcrumbs a {
  color: var(--flossem-lavender) !important;
}

.top_panel_title .sc_layouts_title_breadcrumbs a:hover {
  color: var(--flossem-white) !important;
}

.sc_layouts_title_breadcrumbs .breadcrumbs_delimiter {
  color: var(--flossem-lavender);
  margin: 0 0.5em;
}

/* ==========================================================================
   9. Service Cards
   ========================================================================== */
.sc_services_item,
.sc_blogger_item,
.flossem-service-card {
  background-color: var(--flossem-white);
  border: 1px solid var(--flossem-card-border);
  border-radius: 6px;
  padding: 2em 1.5em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sc_services_item:hover,
.sc_blogger_item:hover,
.flossem-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px var(--flossem-shadow);
  border-color: var(--flossem-lavender);
}

.sc_services_item .sc_services_item_icon,
.sc_services_item .sc_icons,
.flossem-service-card .icon {
  color: var(--flossem-purple) !important;
  font-size: 2.5em;
  margin-bottom: 0.5em;
}

.sc_services_item .sc_services_item_title a,
.flossem-service-card .title a {
  color: var(--flossem-purple-dark);
}

.sc_services_item .sc_services_item_title a:hover {
  color: var(--flossem-purple);
}

/* ==========================================================================
   10. Team Members
   ========================================================================== */
.sc_team_item .sc_team_item_position,
.sc_team_item_subtitle,
.flossem-team-subtitle {
  color: var(--flossem-purple) !important;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sc_team_item .sc_team_item_title a {
  color: var(--flossem-purple-dark);
}

.sc_team_item .sc_team_item_socials a {
  color: var(--flossem-purple);
}

.sc_team_item .sc_team_item_socials a:hover {
  color: var(--flossem-purple-dark);
}

/* ==========================================================================
   11. Testimonials
   ========================================================================== */
.sc_testimonials_item,
.sc_testimonial,
.flossem-testimonial {
  background-color: var(--flossem-lavender-bg) !important;
  border-left: 4px solid var(--flossem-purple) !important;
  padding: 1.5em 1.75em;
  border-radius: 0 4px 4px 0;
  margin-bottom: 1.5em;
}

.sc_testimonials_item_content,
.sc_testimonial blockquote,
.flossem-testimonial blockquote {
  color: var(--flossem-body);
  font-style: italic;
  font-size: 1.05em;
  line-height: 1.6;
}

.sc_testimonials_item_author_title,
.flossem-testimonial cite {
  color: var(--flossem-purple-dark);
  font-weight: 700;
  font-style: normal;
}

/* ==========================================================================
   12. Counters / Stats
   ========================================================================== */
.sc_skills_total,
.sc_counter_value,
.sc_counter_number,
.flossem-counter {
  color: var(--flossem-purple) !important;
  font-weight: 800;
  font-size: 3em;
  line-height: 1;
}

/* ==========================================================================
   13. Forms (CF7 + native)
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select,
.wpcf7-form-control:not(.wpcf7-submit) {
  font-family: var(--flossem-font);
  border: 1px solid var(--flossem-lavender) !important;
  background-color: var(--flossem-white);
  color: var(--flossem-body);
  padding: 0.75em 1em;
  border-radius: 4px;
  width: 100%;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus,
.wpcf7-form-control:not(.wpcf7-submit):focus {
  border-color: var(--flossem-purple) !important;
  box-shadow: 0 0 0 3px rgba(123, 79, 166, 0.2);
  outline: none;
}

label {
  font-weight: 600;
  color: var(--flossem-purple-dark);
  margin-bottom: 0.4em;
  display: block;
}

.wpcf7-response-output {
  border-radius: 4px;
  border-width: 2px !important;
  padding: 1em !important;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--flossem-purple) !important;
  background-color: var(--flossem-lavender-bg);
  color: var(--flossem-purple-dark);
}

/* ==========================================================================
   14. Footer
   ========================================================================== */
.footer_wrap,
.footer_main,
.scheme_dark .footer_wrap,
.flossem-footer {
  background-color: var(--flossem-purple-dark) !important;
  color: var(--flossem-white);
  padding: 3em 0 1em;
}

.footer_wrap *,
.footer_main *,
.flossem-footer * {
  color: var(--flossem-white);
}

.footer_wrap a,
.footer_main a,
.flossem-footer a {
  color: var(--flossem-lavender) !important;
}

.footer_wrap a:hover,
.flossem-footer a:hover {
  color: var(--flossem-white) !important;
  text-decoration: underline;
}

.footer_wrap h1,
.footer_wrap h2,
.footer_wrap h3,
.footer_wrap h4,
.footer_wrap h5,
.footer_wrap h6,
.footer_wrap .widget-title,
.flossem-footer .widget-title {
  color: var(--flossem-white) !important;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--flossem-lavender);
}

.copyright_wrap,
.footer_copyright,
.flossem-copyright {
  background-color: var(--flossem-purple-darker) !important;
  color: var(--flossem-white);
  padding: 1em 0;
  font-size: 13px;
}

.copyright_wrap a,
.footer_copyright a {
  color: var(--flossem-lavender) !important;
}

/* ==========================================================================
   15. Scroll To Top
   ========================================================================== */
.scroll_to_top,
#scroll-to-top,
.flossem-scroll-top {
  background-color: var(--flossem-purple) !important;
  color: var(--flossem-white) !important;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px var(--flossem-shadow);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.scroll_to_top:hover {
  background-color: var(--flossem-purple-dark) !important;
  transform: translateY(-3px);
}

/* ==========================================================================
   16. Mobile Menu
   ========================================================================== */
.menu_mobile,
.menu_mobile_inner,
.sc_layouts_menu_mobile_button_wrap {
  background-color: var(--flossem-purple-dark) !important;
  color: var(--flossem-white);
}

.menu_mobile_nav_area ul li a,
.menu_mobile a {
  color: var(--flossem-white) !important;
  font-family: var(--flossem-font);
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0.75em 1em;
}

.menu_mobile_nav_area ul li a:hover,
.menu_mobile_nav_area ul li.current-menu-item > a {
  background-color: var(--flossem-purple) !important;
  color: var(--flossem-white) !important;
}

.menu_mobile_close,
.menu_mobile_button_close {
  color: var(--flossem-white) !important;
}

/* ==========================================================================
   17. Before / After Compare Labels
   ========================================================================== */
.flossem-before,
.flossem-after,
.compare-label,
.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
  background-color: var(--flossem-purple) !important;
  color: var(--flossem-white) !important;
  font-family: var(--flossem-font);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 0.4em 0.85em;
  border-radius: 3px;
}

/* ==========================================================================
   18. Alternate Section Backgrounds
   ========================================================================== */
.scheme_alter,
.bg_alter,
.section-alt,
.flossem-section-alt,
.elementor-section.flossem-alt {
  background-color: var(--flossem-lavender-bg) !important;
}

.scheme_light_bg,
.flossem-section-light {
  background-color: var(--flossem-light-bg) !important;
}

/* ==========================================================================
   19. Flossem CTA Bar (template-parts/cta-bar.php)
   ========================================================================== */
.flossem-cta-bar {
  background-color: var(--flossem-purple);
  background-image: linear-gradient(135deg, var(--flossem-purple) 0%, var(--flossem-purple-dark) 100%);
  color: var(--flossem-white);
  padding: 2.5em 1.5em;
  text-align: center;
  border-radius: 6px;
  margin: 2em 0;
}

.flossem-cta-bar h2,
.flossem-cta-bar h3 {
  color: var(--flossem-white) !important;
  margin: 0 0 0.75em;
  font-size: 1.75rem;
}

.flossem-cta-bar p {
  color: var(--flossem-white);
  margin: 0 0 1.25em;
  opacity: 0.95;
}

.flossem-cta-bar .flossem-cta-buttons {
  display: flex;
  gap: 1em;
  justify-content: center;
  flex-wrap: wrap;
}

.flossem-cta-bar .flossem-btn-phone,
.flossem-cta-bar .flossem-btn-appt {
  background-color: var(--flossem-white) !important;
  color: var(--flossem-purple-dark) !important;
  border-color: var(--flossem-white) !important;
  font-weight: 700 !important;
}

.flossem-cta-bar .flossem-btn-phone:hover,
.flossem-cta-bar .flossem-btn-appt:hover {
  background-color: var(--flossem-lavender) !important;
  color: var(--flossem-purple-darker) !important;
  border-color: var(--flossem-lavender) !important;
}

/* ==========================================================================
   20. Service Sidebar
   ========================================================================== */
.flossem-service-sidebar {
  background-color: var(--flossem-lavender-bg);
  padding: 1.75em 1.5em;
  border-radius: 6px;
  border-top: 4px solid var(--flossem-purple);
  margin-bottom: 1.5em;
}

.flossem-service-sidebar h3 {
  font-size: 1.15rem;
  margin-top: 0;
}

.flossem-service-sidebar .flossem-phone-large {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--flossem-purple);
  margin: 0.5em 0;
  text-decoration: none;
}

.flossem-service-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.flossem-service-sidebar ul li {
  padding: 0.4em 0;
  border-bottom: 1px solid rgba(123, 79, 166, 0.15);
}

.flossem-service-sidebar ul li:last-child { border-bottom: none; }

.flossem-office-hours {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  font-size: 14px;
}

.flossem-office-hours li {
  display: flex;
  justify-content: space-between;
  padding: 0.35em 0;
  border-bottom: 1px solid rgba(123, 79, 166, 0.15);
}

.flossem-office-hours li span:first-child { font-weight: 600; color: var(--flossem-purple-dark); }

/* ==========================================================================
   21. Contact Page
   ========================================================================== */
.flossem-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  margin: 2em 0;
}

.flossem-contact-info h3 {
  margin-top: 0;
}

.flossem-contact-info p,
.flossem-contact-info a {
  font-size: 1rem;
  line-height: 1.7;
}

.flossem-map {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 4px 12px var(--flossem-shadow);
  margin-bottom: 2em;
}

/* ==========================================================================
   22. Misc Polish
   ========================================================================== */
hr {
  border: 0;
  border-top: 2px solid var(--flossem-lavender);
  margin: 2em 0;
}

::selection {
  background-color: var(--flossem-purple);
  color: var(--flossem-white);
}

blockquote {
  border-left: 4px solid var(--flossem-purple);
  background-color: var(--flossem-lavender-bg);
  padding: 1em 1.25em;
  margin: 1.5em 0;
  font-style: italic;
  color: var(--flossem-body);
}

img { max-width: 100%; height: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

table th {
  background-color: var(--flossem-purple);
  color: var(--flossem-white);
  font-weight: 600;
  text-align: left;
  padding: 0.75em;
}

table td {
  padding: 0.75em;
  border-bottom: 1px solid var(--flossem-card-border);
}

table tr:nth-child(even) td {
  background-color: var(--flossem-light-bg);
}

/* Skip link / accessibility */
.skip-link:focus {
  background-color: var(--flossem-purple);
  color: var(--flossem-white);
}

/* WP block editor compatibility */
.has-flossem-purple-color { color: var(--flossem-purple) !important; }
.has-flossem-purple-background-color { background-color: var(--flossem-purple) !important; }
.has-flossem-purple-dark-color { color: var(--flossem-purple-dark) !important; }
.has-flossem-purple-dark-background-color { background-color: var(--flossem-purple-dark) !important; }
.has-flossem-lavender-color { color: var(--flossem-lavender) !important; }
.has-flossem-lavender-background-color { background-color: var(--flossem-lavender) !important; }

/* Sticky header state (added via JS) */
.top_panel.scrolled,
.flossem-header.scrolled {
  box-shadow: 0 2px 12px var(--flossem-shadow);
  transition: box-shadow 0.25s ease;
}

/* Tablet & desktop refinements moved to responsive.css */