/* 
 * LHelp Theme Main Stylesheet
 * This file contains custom styles for the LHelp theme
 */

/* Import base layout system */
@import url("base/grid.css");
@import url("base/spacing.css");
@import url("base/utilities.css");

/* Import component styles */
@import url("components/header.css");
@import url("components/hero.css");
@import url("components/buttons.css");
@import url("components/footer.css");
@import url("components/how-we-help.css");
@import url("components/testimonials.css");
@import url("components/cta-section.css");
@import url("components/inner-pages.css");
@import url("components/how-to-act.css");
@import url("components/contacts-page.css");
@import url("components/damage-registration.css");
@import url("components/contract-signing.css");
@import url("components/insurance-claim.css");
@import url("components/about.css");
@import url("components/contact-component.css");
@import url("components/contact-cta.css");
@import url("components/paslaugos-single.css");
@import url("components/404.css");
@import url("template-page-main.css");

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-color);
    font-size: 16px;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes bottom space under images */
}

ul, ol {
    list-style-position: inside;
    padding-left: 20px;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75em;
    color: var(--secondary-color);
    line-height: 1.3;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }

p {
    margin-bottom: 1em;
}

/* Accessibility */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Site branding (logo) */
.site-branding .site-title a,
.site-branding .custom-logo-link {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 1.8em;
    font-weight: bold;
}

/* Header-specific logo sizing moved to components/header.css */
/*
.site-branding .custom-logo {
    max-height: calc(var(--header-height) - 40px); 
    width: auto;
}
*/

/* Content styles */
.site-content {
    padding: 40px 0 0;
    /* Desktop: Content padding handled normally */
}

/* Mobile: Adjust content padding to work with fixed header */
@media (max-width: 991px) {
    .site-content {
        /* No need for additional top padding since we added it to the body */
        /* The body padding-top handles the space needed for the fixed header */
        padding-top: 60px; /* Reduced padding since body already has header height padding */
        padding-left: 12px;
        padding-right: 12px;
    }
    
}

/*--------------------------------------------------------------
# Content Area & Main Content Styling
--------------------------------------------------------------*/
.content-area-wrapper {
    min-height: 90vh; /* Ensure content area takes at least 90% of viewport height */
    padding-top: var(--space-8);
    padding-bottom: var(--space-8); 
}

.site-main .entry-header {
    padding-top: var(--space-8);
    margin-bottom: var(--space-8); /* 32px */
}

.site-main .entry-title {
    font-size: var(--font-size-xxl); /* Example: 36px or similar */
    color: var(--heading-color);
    margin-bottom: var(--space-4); /* 16px */
}

.page-header .page-title,
.archive-header .page-title {
    font-size: var(--font-size-xxl);
    color: var(--heading-color);
    margin-bottom: var(--space-8); /* More space for archive titles */
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content table,
.entry-content blockquote {
    margin-bottom: var(--space-4); /* 16px */
    font-size: var(--font-size-md); /* Example: 16px */
    line-height: var(--line-height-base);
    color: var(--text-color);
}

.entry-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.entry-content a:hover {
    text-decoration: underline;
}

.entry-summary p {
    font-size: var(--font-size-base);
    color: var(--text-color-light);
}

.read-more.btn {
    margin-top: var(--space-4);
}

/* Add specific styles for single post/page meta if needed */
.entry-meta {
    font-size: var(--font-size-sm);
    color: var(--text-color-light);
    margin-bottom: var(--space-4);
}

/* No results styling */
.no-results .entry-title {
    margin-bottom: var(--space-4);
}

.no-results .page-content p {
    font-size: var(--font-size-lg);
}

/* Responsive adjustments for padding */
@media (max-width: 767.98px) {
    .content-area-wrapper {
        padding-top: var(--space-4); /* 32px padding for mobile */
        padding-bottom: var(--space-4); /* 32px padding for mobile */
    }
    .site-main .entry-title,
    .page-header .page-title,
    .archive-header .page-title {
        font-size: var(--font-size-xl); /* Adjust title size for mobile */
    }
}

/* Basic Responsive Media Queries */
/* For tablets and larger */
@media (min-width: 768px) {
    /* Add tablet specific styles here */
    h1 { font-size: 3em; }
    h2 { font-size: 2.25em; }
}

/* Mobile navigation (placeholder, will need JS) */
.mobile-nav-toggle {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    font-size: 24px;
    color: var(--secondary-color);
    cursor: pointer;
}

@media (max-width: 767px) {
    .main-navigation ul {
        display: none; /* Hide desktop nav */
        flex-direction: column;
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--background-color);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .main-navigation ul.active {
        display: flex; /* Show when active */
    }
    .header-inner-wrap {
        position: relative; /* For mobile menu positioning if needed */
    }
    .main-navigation {
        order: 3; /* Push nav below logo/toggle on mobile flex order */
        width: 100%; /* Make nav take full width for dropdown */
    }
    .header-cta {
        order: 2; /* CTA button after logo/toggle before nav items in flex */
        margin-left: auto; /* Push CTA to the right, next to toggle */
        padding-left: 10px; /* Space from toggle */
    }
    .site-branding {
        order: 1;
    }
    .mobile-nav-toggle {
        /* order: 2; */ /* Kept within main-navigation so it's handled there */
        margin-left: 10px; /* If nav is not full width initially */
    }
    .main-navigation ul li {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .main-navigation ul li a {
        display: block;
        padding: 15px;
        border-bottom: 1px solid var(--light-gray-color);
    }
    .main-navigation ul li a:hover,
    .main-navigation ul li.current-menu-item > a {
        border-bottom: 1px solid var(--light-gray-color); /* Keep consistent for mobile */
    }
    .mobile-nav-toggle {
        display: block;
    }
    .site-branding .custom-logo {
        max-height: calc(var(--header-height) - 30px); /* Smaller logo on mobile */
    }
}