/*
Theme Name:   Lan & Song CPAs Child Theme
Theme URI:    https://lansongcpa.com
Description:  Sky-blue child theme for Lan & Song CPAs. Works with any parent theme (Astra, Hello Elementor, OceanWP, GeneratePress, etc.)
Author:       Lan & Song CPAs
Author URI:   https://lansongcpa.com
Version:      1.0.0
Template:     astra
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  lansong-child
Tags:         sky-blue, professional, cpa, accounting

IMPORTANT: Change "Template: astra" above to match your actual parent theme folder name.
Common values:
  - Hello Elementor → Template: hello-elementor
  - OceanWP         → Template: oceanwp
  - GeneratePress   → Template: generatepress
  - Astra           → Template: astra
  - Kadence         → Template: kadence

To find your parent theme folder name:
  WordPress Admin → Appearance → Themes → click your active theme → note the "Template" or folder name
*/

/* ============================================================
   COLOUR PALETTE
   --sky       #0ea5e9   Primary sky blue (buttons, highlights)
   --sky-dark  #0284c7   Hover / darker sky blue
   --sky-dk    #0c4a6e   Deep navy (headings, footer bg)
   --sky-lt    #e0f2fe   Light sky tint (section backgrounds)
   --sky-mid   #bae6fd   Border / divider colour
   --amber     #f59e0b   Accent for Escrow "New" badges
   --white     #ffffff
   --slate     #475569   Body text
   --slate-lt  #64748b   Secondary text
   ============================================================ */

/* ── Import Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ============================================================
   1. GLOBAL BASE STYLES
   ============================================================ */
body {
  font-family: 'DM Sans', sans-serif !important;
  color: #1c2b3a !important;
  background-color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title {
  font-family: 'Lora', serif !important;
  color: #0c4a6e !important;
  line-height: 1.25 !important;
}

p, li, td, th, span, div {
  font-family: 'DM Sans', sans-serif;
}

a {
  color: #0ea5e9 !important;
  transition: color 0.18s ease;
}
a:hover {
  color: #0284c7 !important;
  text-decoration: none;
}

/* ============================================================
   2. TOP UTILITY BAR (above main nav)
   ============================================================ */
.ast-above-header,
.top-bar,
.header-bar,
.site-top-bar,
#topbar,
.oceanwp-top-bar {
  background-color: #e0f2fe !important;
  border-bottom: 1px solid #bae6fd !important;
  color: #0369a1 !important;
  font-size: 12px !important;
}

.ast-above-header a,
.top-bar a,
.header-bar a,
#topbar a {
  color: #0369a1 !important;
  font-weight: 500 !important;
}

.ast-above-header a:hover,
.top-bar a:hover {
  color: #0c4a6e !important;
}

/* ============================================================
   3. MAIN NAVIGATION
   ============================================================ */

/* Nav wrapper */
#site-navigation,
.main-navigation,
.ast-main-header-wrap,
.site-header,
#masthead,
.header-main,
header.site-header,
.ast-header-custom-sticky {
  background-color: #ffffff !important;
  border-bottom: 3px solid #0ea5e9 !important;
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.08) !important;
}

/* Site logo / title */
.site-title,
.site-title a,
.ast-site-title,
.custom-logo-link,
.site-branding .site-title {
  font-family: 'Lora', serif !important;
  color: #0c4a6e !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.site-description,
.ast-site-description {
  color: #7ab5d4 !important;
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

/* Nav links */
.main-navigation ul li a,
.ast-main-navigation > ul > li > a,
.nav-menu > li > a,
#site-navigation a,
.primary-navigation a,
.menu-item > a,
.ast-primary-header-bar .ast-main-header-wrap .main-header-menu > .menu-item > a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 8px 14px !important;
  transition: color 0.15s !important;
}

.main-navigation ul li a:hover,
.ast-main-navigation > ul > li > a:hover,
.nav-menu > li > a:hover,
.menu-item > a:hover,
.current-menu-item > a,
.current_page_item > a {
  color: #0ea5e9 !important;
  background: transparent !important;
}

/* Active nav item underline */
.current-menu-item > a,
.current_page_item > a {
  color: #0ea5e9 !important;
  border-bottom: 2px solid #0ea5e9 !important;
}

/* Dropdown menus */
.main-navigation ul ul,
.ast-main-navigation .sub-menu,
.nav-menu .sub-menu,
.menu-item .sub-menu {
  background-color: #0c4a6e !important;
  border: none !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  min-width: 220px !important;
}

.main-navigation ul ul li a,
.ast-main-navigation .sub-menu li a,
.menu-item .sub-menu li a {
  font-size: 12px !important;
  color: rgba(255,255,255,0.85) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 9px 18px !important;
  font-weight: 400 !important;
  border: none !important;
}

.main-navigation ul ul li a:hover,
.ast-main-navigation .sub-menu li a:hover {
  color: #38bdf8 !important;
  background: rgba(56,189,248,0.15) !important;
}

/* Book Appointment button in nav */
.menu-item-appointment > a,
.menu-item.nav-cta > a,
a[href*="wp-booking-calendar"].nav-link {
  background-color: #0ea5e9 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
}
.menu-item-appointment > a:hover,
.menu-item.nav-cta > a:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

/* Mobile hamburger */
.menu-toggle,
.ast-mobile-menu-buttons,
button.ast-menu-toggle {
  color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
}

/* ============================================================
   4. HERO / PAGE HEADER SECTION
   ============================================================ */
.ast-hero-section,
.page-hero,
.hero-section,
.elementor-section.hero,
.entry-header,
.page-header {
  background: linear-gradient(160deg, #f0f9ff 0%, #e0f2fe 55%, #f0f9ff 100%) !important;
  border-bottom: 1px solid #bae6fd !important;
}

.entry-title,
.page-title,
h1.page-title {
  color: #0c4a6e !important;
  font-family: 'Lora', serif !important;
}

/* ============================================================
   5. BUTTONS — GLOBAL
   ============================================================ */
.wp-block-button__link,
.button,
button,
input[type="submit"],
input[type="button"],
.btn,
.ast-button,
.elementor-button,
.elementor-button-wrapper .elementor-button {
  background-color: #0ea5e9 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease !important;
}

.wp-block-button__link:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.btn:hover,
.ast-button:hover,
.elementor-button:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

/* Secondary / outline button */
.button.button-secondary,
.btn-outline,
.elementor-button.elementor-size-sm {
  background-color: transparent !important;
  color: #0ea5e9 !important;
  border: 2px solid #bae6fd !important;
}
.button.button-secondary:hover,
.btn-outline:hover {
  background-color: #0ea5e9 !important;
  color: #ffffff !important;
}

/* ============================================================
   6. CONTENT SECTIONS & CARDS
   ============================================================ */

/* Alternating section backgrounds */
.elementor-section:nth-child(even),
.wp-block-group:nth-child(even) {
  background-color: #f8fbff;
}

/* General card / box styling */
.elementor-widget-wrap,
.astra-block,
.service-card,
.wp-block-column {
  border-radius: 8px;
}

/* Horizontal rule / divider */
hr,
.elementor-divider-separator {
  border-color: #bae6fd !important;
}

/* ── Highlight box for Escrow Audit ── */
.escrow-highlight-box,
.elementor-widget-text-editor.escrow-box .elementor-widget-container {
  background: #f0f9ff !important;
  border: 2px solid #0ea5e9 !important;
  border-radius: 12px !important;
  padding: 24px !important;
}

/* ── Amber "New" badge helper class ── */
/* Add CSS class "ls-new-badge" to any Elementor element */
.ls-new-badge::before {
  content: '★ New Service';
  display: inline-block;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* ============================================================
   7. TYPOGRAPHY — BODY & POSTS
   ============================================================ */
.entry-content p,
.entry-content li,
article p,
.wp-block-paragraph {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #475569 !important;
}

.entry-content h2,
.entry-content h3,
.wp-block-heading {
  color: #0c4a6e !important;
  font-family: 'Lora', serif !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.5em !important;
}

/* Blockquote */
blockquote,
.wp-block-quote {
  border-left: 4px solid #0ea5e9 !important;
  background: #f0f9ff !important;
  padding: 16px 20px !important;
  border-radius: 0 8px 8px 0 !important;
  color: #334155 !important;
  font-style: italic !important;
}

/* ============================================================
   8. INDUSTRY / CATEGORY PILLS
   ============================================================ */
.ast-breadcrumbs span,
.cat-links a,
.tags-links a,
.wp-block-tag-cloud a,
.tax-label {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 0.15s !important;
}
.cat-links a:hover,
.tags-links a:hover,
.wp-block-tag-cloud a:hover {
  background: #0ea5e9 !important;
  color: #fff !important;
  border-color: #0ea5e9 !important;
}

/* ============================================================
   9. FORMS & INPUTS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select,
.elementor-field-type-text input,
.elementor-field-type-email input,
.elementor-field-type-textarea textarea {
  border: 1.5px solid #bae6fd !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: #1c2b3a !important;
  background: #fff !important;
  transition: border-color 0.18s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: #0ea5e9 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.12) !important;
}

/* Form labels */
label,
.elementor-field-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0c4a6e !important;
  margin-bottom: 4px !important;
  display: block !important;
}

/* ============================================================
   10. SIDEBAR WIDGETS
   ============================================================ */
.widget-title,
.widgettitle {
  font-family: 'Lora', serif !important;
  font-size: 16px !important;
  color: #0c4a6e !important;
  border-bottom: 2px solid #0ea5e9 !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
}

.widget a {
  color: #0ea5e9 !important;
}
.widget a:hover {
  color: #0284c7 !important;
}

/* Search widget */
.search-form .search-submit {
  background: #0ea5e9 !important;
  color: #fff !important;
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.site-footer,
#colophon,
footer.site-footer,
.footer-widget-area,
.ast-footer-overlay,
.footer-bottom {
  background-color: #083344 !important;
  color: rgba(255,255,255,0.55) !important;
  border-top: 3px solid #0ea5e9 !important;
}

.site-footer a,
#colophon a,
footer.site-footer a {
  color: rgba(255,255,255,0.65) !important;
}
.site-footer a:hover,
#colophon a:hover {
  color: #38bdf8 !important;
}

.site-footer .widget-title,
.footer-widget-area .widget-title {
  color: #38bdf8 !important;
  border-bottom-color: rgba(56,189,248,0.3) !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Footer copyright bar */
.footer-bar,
.ast-footer-copyright,
.site-info {
  background-color: #052433 !important;
  color: rgba(255,255,255,0.3) !important;
  font-size: 12px !important;
  text-align: center !important;
  padding: 12px 20px !important;
}

.footer-bar a,
.site-info a {
  color: rgba(255,255,255,0.45) !important;
}
.footer-bar a:hover,
.site-info a:hover {
  color: #38bdf8 !important;
}

/* ============================================================
   12. WOOCOMMERCE (if ever added)
   ============================================================ */
.woocommerce-info,
.woocommerce-message {
  border-top-color: #0ea5e9 !important;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
  background-color: #0ea5e9 !important;
  color: #fff !important;
}

/* ============================================================
   13. RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  body {
    font-size: 14px !important;
  }
  h1, .entry-title, .page-title {
    font-size: 26px !important;
  }
  h2 {
    font-size: 22px !important;
  }
  .site-footer .widget-area,
  .footer-widget-area {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  h1, .entry-title {
    font-size: 22px !important;
  }
  .elementor-button,
  .button,
  button {
    font-size: 13px !important;
    padding: 9px 18px !important;
  }
}

/* ============================================================
   14. ELEMENTOR-SPECIFIC OVERRIDES
   ============================================================ */

/* Section backgrounds */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1200px;
}

/* Heading widget */
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Lora', serif !important;
  color: #0c4a6e !important;
}

/* Text editor widget */
.elementor-widget-text-editor {
  color: #475569 !important;
  font-family: 'DM Sans', sans-serif !important;
  line-height: 1.8 !important;
}

/* Icon box widget */
.elementor-icon-box-title {
  color: #0c4a6e !important;
  font-family: 'Lora', serif !important;
}
.elementor-icon-box-description {
  color: #64748b !important;
}
.elementor-icon i,
.elementor-icon svg {
  color: #0ea5e9 !important;
  fill: #0ea5e9 !important;
}

/* Button widget */
.elementor-widget-button .elementor-button {
  background-color: #0ea5e9 !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}
.elementor-widget-button .elementor-button:hover {
  background-color: #0284c7 !important;
}

/* Elementor button — outline style */
.elementor-button.elementor-button-link {
  background: transparent !important;
  color: #0ea5e9 !important;
  border: 2px solid #0ea5e9 !important;
}
.elementor-button.elementor-button-link:hover {
  background: #0ea5e9 !important;
  color: #fff !important;
}

/* Image widget */
.elementor-widget-image img {
  border-radius: 8px !important;
}

/* Accordion / Toggle */
.elementor-accordion .elementor-tab-title,
.elementor-toggle .elementor-tab-title {
  color: #0c4a6e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #bae6fd !important;
}
.elementor-accordion .elementor-tab-title.elementor-active,
.elementor-toggle .elementor-tab-title.elementor-active {
  color: #0ea5e9 !important;
}

/* Progress bar */
.elementor-progress-bar {
  background-color: #0ea5e9 !important;
}
.elementor-progress-wrapper {
  background-color: #e0f2fe !important;
}

/* Testimonial */
.elementor-testimonial__name {
  color: #0ea5e9 !important;
  font-weight: 600 !important;
}

/* Divider */
.elementor-divider-separator {
  border-color: #bae6fd !important;
}

/* ============================================================
   15. SPECIAL ESCROW AUDIT SECTION STYLING
   Add CSS class "escrow-section" to any Elementor section
   ============================================================ */
.escrow-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border-top: 3px solid #0ea5e9 !important;
  border-bottom: 3px solid #0ea5e9 !important;
}

.escrow-section .elementor-heading-title {
  color: #0c4a6e !important;
}

/* Amber accent for "New" labels — add class "amber-accent" */
.amber-accent .elementor-heading-title,
.amber-accent {
  color: #f59e0b !important;
}

.amber-accent-bg,
.elementor-section.amber-accent-bg {
  background-color: #fffbeb !important;
  border-left: 4px solid #f59e0b !important;
}

/* ============================================================
   16. UTILITY HELPER CLASSES
   These can be assigned in Elementor → Advanced → CSS Classes
   ============================================================ */

/* Sky blue card */
.ls-card-sky {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 10px !important;
  padding: 20px !important;
}

/* Deep navy card */
.ls-card-dark {
  background: #0c4a6e !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 20px !important;
}
.ls-card-dark .elementor-heading-title {
  color: #fff !important;
}
.ls-card-dark .elementor-widget-text-editor {
  color: rgba(255,255,255,0.75) !important;
}

/* Pill / badge */
.ls-badge {
  display: inline-block !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

.ls-badge-amber {
  display: inline-block !important;
  background: #f59e0b !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

/* Section label (small uppercase above heading) */
.ls-section-label {
  font-size: 11px !important;
  color: #0284c7 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Highlight text in sky blue */
.ls-highlight {
  color: #0ea5e9 !important;
}

/* Dark navy bg section */
.ls-section-dark {
  background-color: #0c4a6e !important;
}
.ls-section-dark .elementor-heading-title {
  color: #ffffff !important;
}
.ls-section-dark .elementor-widget-text-editor {
  color: rgba(255,255,255,0.72) !important;
}
.ls-section-dark .elementor-icon i,
.ls-section-dark .elementor-icon svg {
  color: #38bdf8 !important;
  fill: #38bdf8 !important;
}