/*
Theme Name:   Seamlesslife Theme
Theme URI:    https://megaone.geeaig.com/projects/seamlesslife
Description:  A custom high-performance child theme tailored for the Seamlesslife platform.
Author:       Megaone Webservices
Author URI:   https://megaone.geeaig.com
Template:     hello-elementor
Version:      1.1.0
Text Domain:  seamlesslife-theme
*/

/* Import the font defined in the variables */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

:root {
    /* Primary Color is injected via functions.php, fallback provided here */
    --sl-primary: #CA0104; 
    --sl-primary-hover: #990003;
    
    /* Default to Dark Mode Variables (Common for this theme) */
    --sl-bg-dark: #000000;
    --sl-surface: #121212;
    --sl-border: #333333;
    --sl-text-main: #ffffff; /* Ensure white text on dark bg */
    --sl-text-muted: #d1d5db; /* Lighter gray for better visibility */
    
    /* Fonts */
    --sl-font-display: 'EB Garamond', serif; 
    --sl-font-body: 'EB Garamond', serif;
}

/* Light Mode Override Class */
.sl-light-mode {
    --sl-bg-dark: #ffffff !important;
    --sl-surface: #f8f9fa !important;
    --sl-border: #e5e7eb !important;
    --sl-text-main: #111827 !important;
    --sl-text-muted: #4b5563 !important;
}

/* --- GLOBAL RESETS & TYPOGRAPHY --- */
html { scroll-behavior: smooth; }

body {
    background-color: var(--sl-bg-dark);
    color: var(--sl-text-main);
    font-family: var(--sl-font-display);
    line-height: 1.5;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.2; color: var(--sl-text-main); }
p { margin: 0; font-family: var(--sl-font-body); color: var(--sl-text-muted); }
a { text-decoration: none; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }

.text-center { text-align: center; }
.text-primary { color: var(--sl-primary) !important; }

/* --- UTILITIES & LAYOUTS --- */
.sl-container {
    width: 100%;
    max-width: 1280px; 
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}
.sl-container-narrow { max-width: 900px; }

.sl-section {
    padding: 25px 0; /* Reduced by 75% from 100px */
    position: relative;
    border-top: 1px solid var(--sl-border);
}

/* --- BUTTONS --- */
.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 4px; /* Slightly sharper corners for editorial look */
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    font-family: var(--sl-font-display);
    font-size: 1.1rem;
    border: 1px solid transparent;
}
.btn-primary {
    background-color: var(--sl-primary);
    color: #ffffff;
    border-color: var(--sl-primary);
}
.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(202, 1, 4, 0.3);
}
.btn-block { display: block; width: 100%; }


/* --- EDITORIAL HERO --- */
.editorial-hero {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 0; /* Reduced top/bottom padding from 60px to 30px */
}
.hero-title {
    font-size: 4rem;
    font-weight: 800;
}
@media (min-width: 768px) {
    .hero-title { font-size: 6rem; }
}

/* --- BENTO GRID LAYOUT --- */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .bento-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- FAQ LAYOUT --- */
.faq-grid {
    display: grid;
    gap: 40px;
}
@media (min-width: 768px) {
    .faq-grid { grid-template-columns: 1fr 1fr; }
}

/* --- ANIMATIONS --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.sl-section { animation: fadeInUp 0.6s ease-out; }