/*
 * Number.Net Category Pages Styles
 * Additional styles for category pages
 */

/* === Fix for header positioning === */
/* Make header fixed at the top without overlapping content */
header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--color-border);
}

/* Add padding to body to account for fixed header */
body {
    padding-top: 80px; /* Assuming header height is 80px */
}

/* Active nav item */
.nav-link.active {
    background-color: var(--color-card-hover);
    color: var(--color-primary);
    font-weight: 600;
}

/* === Enhanced Category Hero Section === */
.category-hero {
    color: var(--color-white);
    padding: var(--spacing-xl) 0; /* Adjust padding as needed */
    text-align: center;
    box-shadow: var(--shadow-md);
    position: relative;
    height: calc(80px * 2.5); /* 2.5x the height of header (80px * 2.5 = 200px) */
    display: flex;
    flex-direction: column; /* Stack title and subtitle vertically */
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
}

.category-hero h1 {
    font-size: 2.5em; /* Current text size * 2.5. Base 'em' refers to parent or browser default. Adjust if needed. For example, if current is 1.4em, this would be 3.5em. Or use a fixed value like 3.0rem or 3.5rem if preferred. */
    font-weight: 700;
    margin-bottom: var(--spacing-sm); /* Reduced margin for tighter grouping with subtitle */
    color: var(--color-white);
    text-align: center;
}

.category-hero h1 i {
    margin-right: var(--spacing-sm);
    font-size: 0.9em; /* Relative to the h1 font size */
    vertical-align: middle;
}

.category-hero .subtitle {
    font-size: 1.25em; /* Adjust as needed, ensure it's legible */
    opacity: 0.95;
    margin: 0 auto var(--spacing-md); /* Add some margin at the bottom */
    max-width: 800px;
    color: var(--color-white);
    text-align: center;
}

/* === Subcategory Styling === */
.subcategory-container {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin: var(--spacing-xl) auto;
    padding: var(--spacing-xl) var(--spacing-xl);
    max-width: 1100px;
}

/* Alternating shades for subsections - Generic Grey */
.subcategory-container:nth-child(odd) {
    background-color: #f8f9fa; /* Light grey */
}

.subcategory-container:nth-child(even) {
    background-color: #e9ecef; /* Slightly darker grey */
}

/*
 IF YOU PREFER CATEGORY-TINTED ALTERNATING BACKGROUNDS,
 UNCOMMENT THE SECTIONS BELOW AND COMMENT OUT THE GENERIC GREY ONES ABOVE.
*/
/*
.converters-page .subcategory-container:nth-child(odd) {
    background-color: rgba(76, 175, 80, 0.05);
}
.converters-page .subcategory-container:nth-child(even) {
    background-color: rgba(76, 175, 80, 0.1);
}

.calculators-page .subcategory-container:nth-child(odd) {
    background-color: rgba(249, 168, 38, 0.05);
}
.calculators-page .subcategory-container:nth-child(even) {
    background-color: rgba(249, 168, 38, 0.1);
}

.generators-page .subcategory-container:nth-child(odd) {
    background-color: rgba(156, 39, 176, 0.05);
}
.generators-page .subcategory-container:nth-child(even) {
    background-color: rgba(156, 39, 176, 0.1);
}

.telephone-page .subcategory-container:nth-child(odd) {
    background-color: rgba(33, 150, 243, 0.05);
}
.telephone-page .subcategory-container:nth-child(even) {
    background-color: rgba(33, 150, 243, 0.1);
}
*/

.subcategory-container h2 { /* Renamed from .tool-grid-container h2 for clarity if it's the subcategory title */
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: calc(var(--spacing-xl) * 1.5); /* Increased space */
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text);
    text-align: center;
}

/* Add more space between subcategory title and tool cards */
.tool-grid {
    margin-top: var(--spacing-lg); /* Ensure this doesn't conflict if .subcategory-container h2 already has large margin-bottom */
                                  /* If .subcategory-container h2 margin-bottom is sufficient, this might not be needed or can be smaller */
}

/* Tool card action button styling */
.tool-card .card-action {
    opacity: 1;
    transform: translateX(0);
}

/* === Color schemes for different categories === */
/* Converters - Green */
.converters-page .category-hero {
    background-color: #2E7D32; /* Solid dark green */
}
.converters-page .tool-icon { /* Button color */
    background-color: #4CAF50;
}
.converters-page .card-action { /* Button color for arrow */
    color: #4CAF50;
}
.converters-page .subcategory-container h2 { /* Subcategory title color if desired */
    color: #2E7D32;
}


/* Calculators - Orange */
.calculators-page .category-hero {
    background-color: #F57C00; /* Solid dark orange */
}
.calculators-page .tool-icon { /* Button color */
    background-color: #F9A826;
}
.calculators-page .card-action { /* Button color for arrow */
    color: #F9A826;
}
.calculators-page .subcategory-container h2 { /* Subcategory title color if desired */
    color: #F57C00;
}

/* Generators - Purple */
.generators-page .category-hero {
    background-color: #7B1FA2; /* Solid dark purple */
}
.generators-page .tool-icon { /* Button color */
    background-color: #9C27B0;
}
.generators-page .card-action { /* Button color for arrow */
    color: #9C27B0;
}
.generators-page .subcategory-container h2 { /* Subcategory title color if desired */
    color: #7B1FA2;
}

/* Telephone - Blue */
.telephone-page .category-hero {
    background-color: #0D47A1; /* Solid dark blue */
}
.telephone-page .tool-icon { /* Button color */
    background-color: #2196F3;
}
.telephone-page .card-action { /* Button color for arrow */
    color: #2196F3;
}
.telephone-page .subcategory-container h2 { /* Subcategory title color if desired */
    color: #0D47A1;
}


/* Media Queries */
@media (max-width: 576px) {
    body {
        padding-top: 70px; /* Smaller padding for mobile if header height changes */
    }

    .category-hero {
        padding: var(--spacing-lg) 0; /* Adjusted padding for smaller screens */
        height: auto; /* Auto height for smaller screens */
        min-height: calc(70px * 2); /* Or adjust based on mobile header height */
    }

    .category-hero h1 {
        font-size: 1.8em; /* Adjusted for smaller screens */
    }

    .category-hero h1 i {
        font-size: 0.8em; /* Adjusted for smaller screens */
    }

    .category-hero .subtitle {
        font-size: 1em; /* Adjusted for smaller screens */
    }

    .subcategory-container {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .subcategory-container h2 {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-lg); /* Adjusted for smaller screens */
    }
}

@media (min-width: 768px) {
    /* Re-affirm desktop hero height if it wasn't overridden by auto in smaller queries */
    .category-hero {
         height: calc(80px * 2.5); /* Ensure this is maintained for larger screens */
    }
    /*
    Font sizes for .category-hero h1, h1 i, .subtitle are handled by 'em' relative to their context
    or can be explicitly set here if needed for larger screens.
    The base font-size of h1 in category-hero is already 2.5em.
    If specific overrides are needed for tablets/desktops, add them here.
    For example:
    .category-hero h1 {
        font-size: 3.0rem;
    }
    .category-hero .subtitle {
        font-size: 1.5rem;
    }
    */
}