/*
 * Flossem Child Theme — Responsive Styles
 * Mobile-first breakpoints. Loaded after style.css.
 */

/* ==========================================================================
   Small tablets and up (>= 600px)
   ========================================================================== */
@media (min-width: 600px) {
  body { font-size: 16px; }

  h1, .heading_1 { font-size: 2.25rem; }
  h2, .heading_2 { font-size: 1.85rem; }
  h3, .heading_3 { font-size: 1.45rem; }
}

/* ==========================================================================
   Tablets (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  .flossem-contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3em;
  }

  .flossem-service-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5em;
  }

  .flossem-cta-bar {
    padding: 3em 2em;
  }

  .flossem-cta-bar h2,
  .flossem-cta-bar h3 {
    font-size: 2rem;
  }

  .top_panel_title,
  .flossem-page-hero {
    padding: 4.5em 0;
  }
}

/* ==========================================================================
   Desktops (>= 1025px)
   ========================================================================== */
@media (min-width: 1025px) {
  body { font-size: 17px; }

  h1, .heading_1 { font-size: 2.75rem; }
  h2, .heading_2 { font-size: 2.15rem; }
  h3, .heading_3 { font-size: 1.6rem; }

  .sc_layouts_menu_nav > li > a,
  .menu_main_nav > li > a {
    padding: 1.25em 1.35em;
    font-size: 14px;
  }

  .flossem-map {
    height: 480px;
  }
}

/* ==========================================================================
   Large desktops (>= 1280px)
   ========================================================================== */
@media (min-width: 1280px) {
  .flossem-cta-bar {
    padding: 3.5em 2em;
  }
}

/* ==========================================================================
   Tablet downward (<= 1024px) - targeted overrides
   ========================================================================== */
@media (max-width: 1024px) {
  .sc_layouts_menu_nav > li > a,
  .menu_main_nav > li > a {
    padding: 1em 0.9em;
    font-size: 13px;
  }

  .flossem-service-layout {
    grid-template-columns: 1fr;
  }

  .flossem-service-sidebar {
    margin-top: 2em;
  }

  .top_panel_title,
  .flossem-page-hero {
    padding: 3em 0;
  }

  .top_panel_title h1,
  .sc_layouts_title h1 {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   Mobile (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  h1, .heading_1 { font-size: 1.65rem; }
  h2, .heading_2 { font-size: 1.4rem; }
  h3, .heading_3 { font-size: 1.2rem; }

  .top_panel_top,
  .sc_layouts_row_type_compact,
  .top_bar,
  .flossem-topbar {
    text-align: center;
    font-size: 13px;
    padding: 6px 0;
  }

  .top_panel_top .sc_layouts_item + .sc_layouts_item {
    margin-top: 4px;
  }

  .sc_button,
  button,
  input[type="submit"],
  .elementor-button,
  .wp-block-button__link,
  .btn,
  .button {
    padding: 0.75em 1.25em;
    font-size: 14px;
    width: 100%;
  }

  .flossem-cta-bar {
    padding: 2em 1em;
    margin: 1.5em 0;
  }

  .flossem-cta-bar h2,
  .flossem-cta-bar h3 {
    font-size: 1.35rem;
  }

  .flossem-cta-bar .flossem-cta-buttons {
    flex-direction: column;
    gap: 0.6em;
  }

  .flossem-cta-bar .flossem-btn-phone,
  .flossem-cta-bar .flossem-btn-appt {
    width: 100%;
  }

  .top_panel_title,
  .sc_layouts_title,
  .flossem-page-hero {
    padding: 2em 1em;
  }

  .top_panel_title h1,
  .sc_layouts_title h1 {
    font-size: 1.45rem;
  }

  .sc_layouts_title_breadcrumbs {
    font-size: 13px;
  }

  .footer_wrap,
  .footer_main,
  .flossem-footer {
    padding: 2em 1em 1em;
    text-align: center;
  }

  .footer_wrap .widget,
  .flossem-footer .widget {
    margin-bottom: 2em;
  }

  .sc_services_item,
  .flossem-service-card {
    padding: 1.5em 1em;
    margin-bottom: 1em;
  }

  .flossem-service-sidebar {
    padding: 1.25em 1em;
  }

  .flossem-service-sidebar .flossem-phone-large {
    font-size: 1.25rem;
  }

  .flossem-map {
    height: 280px;
  }

  .scroll_to_top,
  .flossem-scroll-top {
    width: 38px;
    height: 38px;
    bottom: 12px;
    right: 12px;
  }

  table th, table td {
    padding: 0.5em;
    font-size: 13px;
  }

  .flossem-office-hours li {
    flex-direction: column;
    gap: 2px;
  }
}

/* ==========================================================================
   Very small (<= 480px)
   ========================================================================== */
@media (max-width: 480px) {
  h1, .heading_1 { font-size: 1.45rem; }
  h2, .heading_2 { font-size: 1.25rem; }

  .top_panel_title h1,
  .sc_layouts_title h1 {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .top_panel_top,
  .sc_layouts_menu,
  .footer_wrap,
  .flossem-cta-bar,
  .scroll_to_top {
    display: none !important;
  }

  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}