/*

Theme Name: RentML Car Rental

Theme URI: https://madeira-rental.org

Author: Cursor

Author URI: https://cursor.sh

Description: Modern car rental theme with multilingual support

Version: 2.5

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: rentml

*/



:root {

    --primary-color: #007bff;

    --primary-dark: #0056b3;

    --secondary-color: #28a745;

    --text-color: #333;

    --text-light: #666;

    --bg-color: #f8f9fa;

    --white: #ffffff;

    --dark: #343a40;

    --border-color: #dee2e6;

    --shadow: 0 2px 10px rgba(0,0,0,0.1);

    --shadow-lg: 0 4px 20px rgba(0,0,0,0.15);

    --transition: all 0.3s ease;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    margin: 0;

    padding: 0;

    background: var(--bg-color);

    color: var(--text-color);

    line-height: 1.7;

    font-size: 16px;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* Reset WordPress default styles that might interfere */

body .wp-block-group,

body .wp-block-columns,

body .wp-block-column {

    margin: 0;

    padding: 0;

}



body p {

    margin-bottom: 1.5em;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    width: 100%;

}



/* Header */

header {

    background: var(--white);

    box-shadow: var(--shadow);

    padding: 1rem 0;

    position: sticky;

    top: 0;

    z-index: 1000;

    transition: var(--transition);

}



header.scrolled {

    padding: 0.5rem 0;

}



/* Header Container - Centered Logo */

header .container.header-container {

    display: flex;

    justify-content: center; /* Center the logo */

    align-items: center;

}



.site-logo {

    text-align: center;

}



.site-logo a {

    display: inline-block;

    text-decoration: none;

    transition: var(--transition);

}



.site-logo img {

    height: 50px;

    width: auto;

    display: block;

    transition: var(--transition);

}



.site-logo a:hover {

    transform: translateY(-2px);

}



/* Hero Section */

.hero {

    background: linear-gradient(135deg, rgba(0,123,255,0.9) 0%, rgba(0,86,179,0.9) 100%), 

                url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1600&q=80');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    color: var(--white);

    padding: 120px 0;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: radial-gradient(circle at 30% 50%, rgba(0,123,255,0.3) 0%, transparent 50%);

}



.hero .container {

    position: relative;

    z-index: 1;

}



.hero h1 {

    font-size: clamp(2.5rem, 5vw, 4rem);

    margin-bottom: 20px;

    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

    font-weight: 700;

    line-height: 1.2;

    animation: fadeInUp 0.8s ease;

}



.hero p {

    font-size: clamp(1.1rem, 2vw, 1.5rem);

    margin-bottom: 40px;

    opacity: 0.95;

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

    animation: fadeInUp 1s ease;

}



/* Buttons */

.btn {

    display: inline-block;

    padding: 14px 35px;

    background: var(--white);

    color: var(--primary-color);

    text-decoration: none;

    border-radius: 50px;

    transition: var(--transition);

    font-weight: 600;

    font-size: 1.1rem;

    border: 2px solid transparent;

    cursor: pointer;

    animation: fadeInUp 1.2s ease;

    box-shadow: 0 4px 15px rgba(0,0,0,0.2);

}



.btn:hover {

    background: var(--primary-color);

    color: var(--white);

    transform: translateY(-3px);

    box-shadow: 0 6px 20px rgba(0,123,255,0.4);

}



.btn-primary {

    background: var(--primary-color);

    color: var(--white);

}



.btn-primary:hover {

    background: var(--primary-dark);

}



.btn-secondary {

    background: transparent;

    color: var(--white);

    border-color: var(--white);

}



.btn-secondary:hover {

    background: var(--white);

    color: var(--primary-color);

}



/* Main Content */

.site-content {

    flex: 1;

    padding: 60px 0;

}



/* Articles */

article {

    background: var(--white);

    padding: 50px;

    border-radius: 12px;

    box-shadow: var(--shadow);

    margin-bottom: 40px;

    transition: var(--transition);

    overflow: hidden;

}



article:hover {

    box-shadow: var(--shadow-lg);

    transform: translateY(-5px);

}



/* WordPress content wrapper */

.entry-content,

.site-content {

    width: 100%;

}



/* Better spacing for content blocks */

.entry-content > *:first-child {

    margin-top: 0;

}



.entry-content > *:last-child {

    margin-bottom: 0;

}



article h1,

article h2 {

    margin-top: 0;

    margin-bottom: 20px;

    color: var(--dark);

    font-weight: 700;

    line-height: 1.3;

}



article h1 {

    font-size: 2.5rem;

}



article h2 {

    font-size: 2rem;

    border-bottom: 3px solid var(--primary-color);

    padding-bottom: 10px;

}



article h3 {

    font-size: 1.5rem;

    margin-top: 30px;

    margin-bottom: 15px;

    color: var(--text-color);

}



article p {

    margin-bottom: 20px;

    color: var(--text-light);

    line-height: 1.8;

}



article a {

    color: var(--primary-color);

    text-decoration: none;

    transition: var(--transition);

    border-bottom: 1px solid transparent;

}



article a:hover {

    color: var(--primary-dark);

    border-bottom-color: var(--primary-dark);

}



article ul,

article ol {

    margin: 20px 0;

    padding-left: 30px;

}



article li {

    margin-bottom: 10px;

    color: var(--text-light);

}



article img {

    max-width: 100%;

    height: auto;

    border-radius: 8px;

    margin: 30px 0;

    box-shadow: var(--shadow);

}



article blockquote {

    border-left: 4px solid var(--primary-color);

    padding-left: 20px;

    margin: 30px 0;

    font-style: italic;

    color: var(--text-light);

}



/* Footer */

footer {

    background: var(--dark);

    color: #e9ecef;

    padding: 50px 0 30px;

    text-align: center;

    margin-top: auto;

}



footer .container {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



footer p {

    margin: 0;

    opacity: 0.8;

}



footer a {

    color: #e9ecef;

    text-decoration: none;

    transition: var(--transition);

}



footer a:hover {

    color: var(--primary-color);

}



/* Animations */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Responsive Design */

@media (max-width: 768px) {

    .hero {

        padding: 80px 0;

        background-attachment: scroll;

    }

    

    .hero h1 {

        font-size: 2rem;

    }

    

    .hero p {

        font-size: 1.1rem;

    }

    

    article {

        padding: 30px 20px;

    }

    

    article h1 {

        font-size: 1.8rem;

    }

    

    article h2 {

        font-size: 1.5rem;

    }

    

    .btn {

        padding: 12px 25px;

        font-size: 1rem;

    }

    

    .site-logo img {

        height: 40px;

    }

}



@media (max-width: 480px) {

    .container {

        padding: 0 15px;

    }

    

    article {

        padding: 25px 15px;

    }

    

    .entry-content {

        font-size: 1rem;

    }

}



/* Force theme styles to override WordPress defaults */

body.rentml-theme {

    background: var(--bg-color) !important;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;

}



body.rentml-theme .site-content {

    background: transparent !important;

}



/* Ensure proper container width */

body.rentml-theme .site-content .container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Better content display */

body.rentml-theme .entry-content {

    max-width: 100%;

    word-wrap: break-word;

}



/* Fix for WordPress blocks */

body.rentml-theme .wp-block-group__inner-container,

body.rentml-theme .wp-block-columns {

    max-width: 1200px;

    margin-left: auto;

    margin-right: auto;

    padding: 0 20px;

}



/* Utility Classes */

.text-center {

    text-align: center;

}



.mt-1 { margin-top: 1rem; }

.mt-2 { margin-top: 2rem; }

.mt-3 { margin-top: 3rem; }

.mb-1 { margin-bottom: 1rem; }

.mb-2 { margin-bottom: 2rem; }

.mb-3 { margin-bottom: 3rem; }



/* WordPress specific fixes */

.wp-block-group,

.wp-block-columns {

    margin-bottom: 2rem;

}



/* Better typography for multilingual content */

.entry-content {

    font-size: 1.1rem;

    line-height: 1.8;

}



.entry-content p {

    margin-bottom: 1.5em;

    color: var(--text-light);

}



/* Improve readability */

.entry-content h2,

.entry-content h3,

.entry-content h4 {

    margin-top: 2em;

    margin-bottom: 1em;

    color: var(--dark);

    font-weight: 700;

}



/* Better list styling */

.entry-content ul,

.entry-content ol {

    margin: 1.5em 0;

    padding-left: 2em;

}



.entry-content li {

    margin-bottom: 0.75em;

    line-height: 1.8;

}



/* Table Styling - High Specificity to Override Resets */

table,

.entry-content table,

body.rentml-theme table {

    width: 100% !important;

    border-collapse: collapse !important;

    margin: 2rem 0;

    background: var(--white);

    box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    border-radius: 8px;

    overflow: hidden;

    border: 1px solid #aaa !important; /* Outer border */

}



thead,

.entry-content thead,

body.rentml-theme thead {

    background: var(--primary-color);

    color: var(--white);

}



th,

.entry-content th,

body.rentml-theme th {

    padding: 15px !important;

    text-align: left;

    font-weight: 600;

    border: 1px solid #999 !important; /* Darker border for headers */

    background-color: var(--primary-color) !important;

    color: #fff !important;

}



td,

.entry-content td,

body.rentml-theme td {

    padding: 15px !important;

    border: 1px solid #ccc !important; /* Visible gray border for cells */

    color: var(--text-color);

}



/* Striped rows */

tr:nth-child(even),

.entry-content tr:nth-child(even) {

    background-color: #f2f2f2 !important; /* Slightly darker stripe */

}



tr:hover,

.entry-content tr:hover {

    background-color: #e0e0e0 !important; /* Highlight on hover */

}



/* Responsive Tables */

@media (max-width: 768px) {

    table {

        display: block;

        overflow-x: auto;

        white-space: nowrap;

    }

}



/* Front Page - Country Selector */

.front-page-content {

    padding: 40px 0;

}



.page-title {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--text-color);

    margin-bottom: 40px;

    text-align: center;

}



.country-selector {

    margin: 60px 0;

}



.section-title {

    font-size: 2rem;

    font-weight: 600;

    color: var(--text-color);

    margin-bottom: 20px;

    text-align: center;

}



.section-description {

    font-size: 1.2rem;

    color: #666;

    margin-bottom: 50px;

    text-align: center;

}



.countries-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    gap: 20px;

    margin: 40px 0;

}



.country-item {

    background: var(--white);

    border-radius: 12px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

    transition: all 0.3s ease;

    overflow: hidden;

}



.country-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.15);

}



.country-link {

    display: flex;

    align-items: center;

    padding: 20px 25px;

    text-decoration: none;

    color: var(--text-color);

    transition: background-color 0.3s ease;

}



.country-link:hover {

    background-color: #f8f9fa;

}



.country-flag {

    font-size: 2.5rem;

    margin-right: 15px;

    line-height: 1;

    display: inline-block;

    min-width: 40px;

    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;

}



.country-name {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--primary-color);

}



/* Responsive adjustments for country grid */

@media (max-width: 768px) {

    .countries-grid {

        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

        gap: 15px;

    }

    

    .page-title {

        font-size: 2rem;

    }

    

    .section-title {

        font-size: 1.5rem;

    }

    

    .country-link {

        padding: 15px 20px;

    }

    

    .country-flag {

        font-size: 2rem;

        margin-right: 12px;

    }

    

    .country-name {

        font-size: 1rem;

    }

}



@media (max-width: 480px) {

    .countries-grid {

        grid-template-columns: 1fr;

    }

}





/* Loading Animation */

.loading {

    opacity: 0;

    animation: fadeIn 0.5s ease forwards;

}



@keyframes fadeIn {

    to {

        opacity: 1;

    }

}



/* Custom Car Widget - Notion UI Style */

.custom-car-widget {

    margin: 40px 0;

    padding: 0;

}



.car-widget-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin: 0;

}



.car-card {

    background: var(--white);

    border-radius: 8px;

    overflow: hidden;

    transition: all 0.2s ease;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

    cursor: pointer;

    text-decoration: none;

    display: block;

    color: inherit;

}



.car-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

}



.car-card:focus {

    outline: 2px solid var(--primary-color);

    outline-offset: 2px;

}



.car-card-image {

    width: 100%;

    height: 200px;

    overflow: hidden;

    background: transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

}



.car-card-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    transition: transform 0.3s ease;

    margin: 0;

    box-shadow: none;

}



.car-card:hover .car-card-image img {

    transform: scale(1.05);

}



.car-card-content {

    padding: 16px 20px;

}



.car-card-title {

    font-size: 1rem;

    font-weight: 600;

    color: var(--text-color);

    margin: 0 0 8px 0;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}



.car-widget-load-more {

    margin-top: 30px;

    text-align: center;

}



.car-load-more-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #28a745;

    color: white;

    border: none;

    padding: 18px;

    font-size: 0;

    border-radius: 50%;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);

    width: 60px;

    height: 60px;

    text-decoration: none;

}



.car-load-more-btn:hover {

    background: #218838;

    transform: translateY(-2px) scale(1.05);

    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);

}



.car-load-more-btn:active {

    transform: translateY(0) scale(1);

}



.car-load-more-btn:focus {

    outline: 2px solid #28a745;

    outline-offset: 4px;

}



.load-more-icon {

    width: 28px;

    height: 28px;

}



/* Responsive Design for Car Widget */

@media (max-width: 768px) {

    .car-widget-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 16px;

    }

    

    .car-card-image {

        height: 160px;

        padding: 8px;

    }

    

    .car-card-content {

        padding: 12px 16px;

    }

    

    .car-card-title {

        font-size: 0.9rem;

    }

    

    .car-load-more-btn {

        width: 56px;

        height: 56px;

        padding: 16px;

    }

    

    .load-more-icon {

        width: 24px;

        height: 24px;

    }

}



@media (max-width: 480px) {

    .custom-car-widget {

        margin: 30px 0;

    }

    

    .car-widget-grid {

        gap: 12px;

    }

    

    .car-card-image {

        height: 140px;

        padding: 6px;

    }

    

    .car-load-more-btn {

        width: 52px;

        height: 52px;

        padding: 14px;

    }

    

    .load-more-icon {

        width: 22px;

        height: 22px;

    }

}