/*
Theme Name: CarsMiddleEast
Theme URI: https://carsmiddleeast.example
Author: CarsMiddleEast
Author URI: https://carsmiddleeast.example
Description: Car listings, prices, specifications and comparisons for the Gulf. Includes a Cars post type with Make and Body Type taxonomies, search and filters, side-by-side comparison, GCC currency conversion and RTL support.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carsmiddleeast
Tags: custom-menu, featured-images, translation-ready, rtl-language-support, custom-logo, one-column
*/

:root{--bg:#fff;--surface:#f4f6f8;--border:#d3dae0;--text:#13202b;--muted:#4b5a67;--primary:#0b5f6b;--on-primary:#fff;--accent:#b8400f;--success:#1b6b3a;--warning:#8a5a00;--danger:#b3261e;--radius:12px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;font-size:16px;line-height:1.6}
a{color:var(--primary);text-decoration:none}
img{max-width:100%;height:auto}
button,input,select{font:inherit}
button{cursor:pointer}
.container{width:min(1120px,calc(100% - 40px));margin:auto}
.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;width:1px;word-wrap:normal!important}
.screen-reader-text:focus,.skip-link:focus{background:#fff;color:#000;clip:auto;clip-path:none;height:auto;width:auto;left:8px;top:8px;padding:10px 16px;z-index:100000}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Header */
.topbar{background:#303135;color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px #0002}
.admin-bar .topbar{top:32px}
@media(max-width:782px){.admin-bar .topbar{top:46px}}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:23px;color:#fff;letter-spacing:-.7px}
.logo span{color:#7fc0c7}
.custom-logo{max-height:42px;width:auto}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav select{height:40px;background:#3b3c40;color:#fff;border:1px solid #666;border-radius:8px;padding:0 10px}
.menu-btn{height:40px;width:44px;border:1px solid #666;border-radius:8px;background:#3b3c40;color:#fff}
.mobile-nav{display:none;padding:8px 20px 14px;border-top:1px solid #444}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none;margin:0;padding:0}
.mobile-nav a{display:block;color:#fff;padding:8px}

/* Hero + search */
.hero{padding:58px 0 42px;background:linear-gradient(180deg,#f4f6f8 0,#fff 100%)}
.hero-copy{text-align:center;max-width:750px;margin:auto}
.eyebrow{margin:0 0 4px;color:var(--primary);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.hero h1{font-size:clamp(30px,5vw,46px);line-height:1.15;margin:5px 0 12px}
.hero-copy p:last-child{color:var(--muted);margin-top:0}
.search-card{background:#fff;border:1px solid #e2e6e9;border-radius:12px;padding:16px;margin:28px auto 0;max-width:980px;box-shadow:0 4px 20px #13202b10}
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tab{display:inline-block;border:0;background:none;padding:8px 2px;color:var(--muted);font-weight:600}
.tab.active{color:var(--primary);border-bottom:2px solid var(--primary)}
.search-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end}
.search-grid label{font-size:13px;font-weight:600}
.search-grid input,.search-grid select,.compare-controls select{width:100%;height:44px;margin-top:5px;padding:0 12px;border:1px solid var(--border);border-radius:8px;color:var(--text);background:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;border:0;border-radius:8px;padding:0 20px;font-weight:700;min-width:110px;text-align:center}
.btn.primary{background:var(--primary);color:#fff}
.btn.accent{background:var(--accent);color:#fff}
.outline{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.chips{display:flex;gap:8px;overflow:auto;padding-top:14px}
.chips a{display:inline-flex;align-items:center;white-space:nowrap;border:1px solid var(--border);background:#fff;border-radius:999px;height:36px;padding:0 14px;color:var(--muted)}
.chips a.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* Sections */
.section{padding:48px 0}
.tinted{background:var(--surface)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}
.section-head h2,.page-title{font-size:28px;line-height:1.25;margin:0}
.shortcut-row{display:flex;gap:10px;overflow:auto}
.shortcut{flex:0 0 180px;min-height:130px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px;display:flex;flex-direction:column;justify-content:center}
.shortcut:first-letter{font-size:28px}
.shortcut b{color:var(--text);font-size:17px;margin-top:5px}
.shortcut small{color:var(--muted)}

/* Cars */
.car-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.car-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;overflow:hidden}
.car-image{aspect-ratio:16/9;border-radius:10px;background:linear-gradient(135deg,#dce5eb,#f5f7f8);display:grid;place-items:center;font-size:62px;margin-bottom:14px;overflow:hidden}
.car-image img{width:100%;height:100%;object-fit:cover}
.car-card h3{margin:0;font-size:20px}
.car-card h3 a{color:var(--text)}
.price{font-size:22px;font-weight:700;color:var(--primary);margin:4px 0}
.specs{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.spec{background:var(--surface);padding:3px 8px;border-radius:6px}
.card-actions{display:flex;gap:8px;margin-top:14px}
.card-actions .btn{flex:1}
.empty{padding:30px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);text-align:center;grid-column:1/-1}
.sort-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 18px;color:var(--muted);font-size:14px}
.sort-row a{border:1px solid var(--border);border-radius:999px;padding:2px 12px;color:var(--muted)}
.sort-row a.active{background:var(--primary);border-color:var(--primary);color:#fff}
.pagination{margin-top:28px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pagination .page-numbers{border:1px solid var(--border);border-radius:8px;padding:6px 14px;color:var(--text)}
.pagination .current{background:var(--primary);border-color:var(--primary);color:#fff}

/* Single car */
.breadcrumb{font-size:14px;color:var(--muted);margin-bottom:18px}
.car-detail{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
.car-image.large{font-size:120px;margin:0}
.car-info h1{font-size:32px;line-height:1.2;margin:4px 0 8px}
.spec-table{width:100%;border-collapse:collapse;margin:14px 0 20px}
.spec-table th,.spec-table td{padding:10px 0;border-bottom:1px solid var(--border);text-align:start}
.spec-table th{color:var(--muted);font-weight:600;width:40%}
.entry-content{max-width:780px;margin:32px auto 0}
.entry-content>*:first-child{margin-top:0}
.alignleft{float:left;margin:0 1em 1em 0}
.alignright{float:right;margin:0 0 1em 1em}
.aligncenter{display:block;margin:0 auto 1em}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{font-size:14px;color:var(--muted)}
.sticky .page-title:after{content:" ★"}
.post-card{border-bottom:1px solid var(--border);padding:20px 0}
.post-card h2{margin:0 0 6px;font-size:24px}

/* Compare */
.compare-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;max-width:850px}
.compare-wrap{margin-top:20px;overflow:auto}
.compare-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border)}
.compare-table th,.compare-table td{padding:12px 16px;border-bottom:1px solid var(--border);text-align:start}
.compare-table th{background:var(--surface);color:var(--primary)}
.compare-table td:first-child{font-weight:600;color:var(--muted);width:25%}

/* News */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.news{display:grid;grid-template-columns:120px 1fr;gap:14px;border:1px solid var(--border);border-radius:11px;padding:12px}
.news-img{aspect-ratio:4/3;background:var(--surface);border-radius:9px;display:grid;place-items:center;font-size:38px;overflow:hidden}
.news-img img{width:100%;height:100%;object-fit:cover}
.news h3{font-size:18px;line-height:1.3;margin:4px 0}
.news h3 a{color:var(--text)}
.news p,.news small{color:var(--muted);font-size:13px;margin:0}

/* Footer */
footer.site-footer{background:#13202b;color:#dfe7eb;padding:40px 0 0}
.footer{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:30px}
.footer .logo{margin-bottom:8px;display:inline-block}
.footer p{color:#aebbc4}
.footer div:not(:first-child){display:flex;flex-direction:column;gap:6px}
.footer b{color:#fff;margin-bottom:5px}
.footer a,.footer span{color:#b9c5cc}
.copyright{text-align:center;border-top:1px solid #33414b;padding:14px;font-size:13px;color:#9eabb3}

@media(max-width:800px){
.container{width:min(100% - 28px,600px)}
.search-grid{grid-template-columns:1fr 1fr}
.search-grid .btn{grid-column:1/-1}
.car-grid{grid-template-columns:1fr 1fr}
.news-grid{grid-template-columns:1fr}
.footer{grid-template-columns:1fr 1fr}
.shortcut{flex-basis:155px}
.car-detail{grid-template-columns:1fr}
}
@media(max-width:560px){
.nav{height:58px}
.nav select{height:38px}
.hero{padding:38px 0 30px}
.hero h1{font-size:31px}
.search-grid,.compare-controls{grid-template-columns:1fr}
.car-grid{grid-template-columns:1fr}
.section{padding:36px 0}
.section-head h2,.page-title{font-size:24px}
.footer{grid-template-columns:1fr}
.news{grid-template-columns:100px 1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}