/*
Theme Name: AOL Layout Clone
Theme URI: https://example.com/aol-clone-theme
Author: Gemini AI
Author URI: https://example.com
Description: A basic WordPress theme with layouts cloned from AOL.com's design, using Tailwind CSS.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aol-clone
Tags: one-column, two-columns, custom-header, custom-menu, featured-images, responsive-layout
*/

/*
This file primarily serves as the theme information header for WordPress.
All primary styling is handled by Tailwind CSS, loaded via CDN in functions.php,
and inline styles within the PHP template files.
*/

/*
* IMPORTANT: We are NOT using .wp-post-image { max-width: none !important; } globally anymore.
* Instead, we use highly specific classes to force fixed dimensions only where needed,
* allowing the top featured image to remain responsive via its Tailwind classes.
*/


/* Custom Logo SVG Support Styles */
/* These styles ensure the custom logo (especially SVGs) scales correctly */
.custom-logo-link {
    display: inline-flex; /* Allows custom-logo img to be flex item, for vertical centering if needed */
    align-items: center; /* Vertically centers the logo within its link */
    height: 100%; /* Ensures the link takes available height */
    padding: 0; /* Remove default padding if any from theme or WordPress */
}

.custom-logo {
    width: auto !important;     /* Let SVG width scale proportionally */
    height: 40px !important;    /* Force height to desktop header's typical logo height */
    max-width: 100% !important; /* Ensure it stays within its container */
    object-fit: contain !important; /* Ensures entire SVG is visible, not cropped */
    display: block;             /* Treat as block for consistent sizing */
    margin: 0 auto;             /* Center horizontally if container allows */
}

/* Adjust for smaller screens if needed (e.g., in mobile header) */
@media (max-width: 767px) {
    .custom-logo {
        height: 35px !important; /* Slightly smaller logo on mobile */
    }
}



/* 1. Base Responsive Image Rule (Often from browser/other styles - ensures images don't overflow their containers) */
img, video {
    max-width: 100%; /* Keep this to ensure large images are responsive */
    height: auto;    /* Keep this to maintain aspect ratio for responsive images */
}

p{
    margin-bottom: 15px !important;
}

/* 2. Specific Rules for Small Thumbnails (aol-thumb-small) */
/* This targets the <img> element specifically within the aol-thumb-small context */
.aol-thumbnail-small-force {
    max-width: 100px !important;
    height: 60px !important;
    object-fit: cover !important;
    display: block !important;
    flex-shrink: 0 !important;
    border-radius: 0.375rem !important; /* Tailwind's rounded-md */
}

/* 3. Specific Rules for Medium Thumbnails (aol-thumb-medium) */
/* This targets the <img> element specifically within the aol-thumb-medium context */
.aol-thumbnail-medium-force {
    max-width: 200px !important;
    height: 120px !important;
    object-fit: cover !important;
    display: block !important;
    flex-shrink: 0 !important;
    border-radius: 0.375rem !important; /* Tailwind's rounded-md */
}

/* Responsive adjustments for .aol-thumbnail-medium-force on smaller screens */
@media (max-width: 767px) { /* Targets devices up to 767px wide (mobile and small tablets) */
    .aol-thumbnail-medium-force {
        width: 100% !important; /* Make it fluid up to its max-width */
        height: auto !important; /* Maintain aspect ratio */
        max-width: 200px !important; /* Cap width for display on mobile */
        max-height: 120px !important; /* Cap height to maintain aspect ratio integrity */
    }
}