/* Common Styles */
:root {

    /* Light mode colors */
    --bg-mainprimary: #eeebe9;
    --bg-primary: #ffffff;
    --bg-main-heading: #7c7c7c;


    --bg-big-border: #ffffff;
    --bg-bg-rumorcard: #ffffff;
    --bg-layer2: #eee;
    --bg-sidebar-section-bg-layer: #f2f2f2;
    --hover-text-color: #000000;
    --bg-maincontent: #cfcfcf;
    --com-border-color: #ddd;
    /* --com-border-color: #cacaca; */
    --text-secondary: #262626;
    --text-primary: #000000;
    
   
   
  --bg-index-rumor: #eeeeee;
    --text-rumor-paragraph: #212121;
    --color-card-borderbottom: #cfcfcf;
    --bg-color-bglist: #fafafa;
    --bg-color-listborder: #f2f2f2;
    --card-background: #f5f5f7;
    
    --bg-mainlistgap: #ededed;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f8f9fa;
    --bg-color-button: #bbbbbb;
    --overview-text-color: #2b2b2b;
    --text-primary2: #ffffff;
    --text-color-brandlist: #444;
    --border-color: #717171;
    --accent-color: #1991ff;
    --hover-color: #d50000;
    --rumor-card-text: #555;
    --color-card-shadow: #cfcfcf;
    --color-maincontent-shadow: #cfcfcf;
    --bg-color-main: #efebe9;
    --bg-color-secondary: #f8f9fa;
    --bg-color-brandlist: #f2f2f2;
    --text-color-mainlist: #545454;
    --button-bg: #f8f9fa;
    --button-text: #495057;
    --button-border: #dee2e6;
    --button-hover-bg: #e9ecef;
    --button-hover-text: #212529;
    --button-hover-border: #adb5bd; 
    
    /* Benchmark colors */
    --bench-score-bg: #43a047;
    --bench-current-bg: #d00;
    --bench-sub-container-bg: #e0e0e0;
    --bench-bar-fill: #43a047;
    --bench-bar-base: #ffffff;

    /* Battery row colors (light) */
    --battery-row-orange: #ffe6cc; /* light orange */
    --battery-row-green: #e6f4ea;  /* light green */
    --battery-row-current: #ff0000; /* bright red for current */
}

/* Dark mode colors */
[data-theme="dark"] {
    --bg-mainprimary: #000000;
    --bg-primary: #1a1a1a;
    --bg-big-border: #878585;
    --bg-bg-rumorcard: #1b1b1b;
    --bg-layer2: #303030;
    --bg-sidebar-section-bg-layer: #000000;
    --hover-text-color: #ff0404;
    --bg-maincontent: #555555;
    --com-border-color: #4d4d4d;
    --text-secondary: #dcdcdc;
    --text-primary: #ffffff;



    --bg-index-rumor: #171717;
    --bg-color-button: #3e3e3e;
    --color-card-borderbottom: #1a1a1a;
    --text-rumor-paragraph: #f4f4f4;
    --bg-color-bglist: #252525;
    --bg-color-listborder: #4d4d4d;
    --bg-mainlistgap: #000000;
    --color-card-shadow: #ffffff;
    --color-maincontent-shadow: #555555;

    --overview-text-color: #f3f3f3;
    --card-background: #2a2a2a;
    --bg-secondary: #2d2d2d;
    --text-primary2: #000000;
    --bg-color-brandlist: #505050;
    --text-color-brandlist: #ffffff;
    --border-color: #ececec;
    --accent-color: #4da6ff;
    --hover-color: #ff6666;
    --bg-color-main: #1a1a1a;
    --bg-color-secondary: #2d2d2d;
    --text-color-mainlist: #fcfcfc;
    --button-bg: #2a2a2a;
    --button-text: #e6e6e6;
    --button-border: #3a3a3a;
    --button-hover-bg: #3a3a3a;
    --button-hover-text: #ffffff;
    --button-hover-border: #4a4a4a; 
    
    /* Benchmark colors - dark mode */
    --bench-score-bg: #1a1a1a;
    --bench-current-bg: #d00;
    --bench-sub-container-bg: #1a1a1a;
    --bench-bar-fill: #43a047;
    --bench-bar-base: #2a2a2a;

    /* Battery row colors (dark) */
    --battery-row-orange: #4a3a1f; /* muted orange base */
    --battery-row-green: #203a29;  /* muted green base */
    --battery-row-current: #ff0000; /* bright red for current */
}

/* Self-hosted webfonts (local first) */
/* Oswald (Google-Oswald) - variable TTF, with discrete TTF fallbacks */
@font-face {
    font-family: 'Google-Oswald';
    src: local('Oswald'), local('Oswald Regular'),
         url('./fonts/Oswald-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google-Oswald';
    src: url('./fonts/Oswald-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google-Oswald';
    src: url('./fonts/Oswald-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google-Oswald';
    src: url('./fonts/Oswald-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google-Oswald';
    src: url('./fonts/Oswald-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google-Oswald';
    src: url('./fonts/Oswald-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Google-Oswald';
    src: url('./fonts/Oswald-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Arimo - variable TTF, with Regular/Bold TTF fallbacks */
@font-face {
    font-family: 'Arimo';
    src: local('Arimo'), local('Arimo Regular'),
         url('./fonts/Arimo-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arimo';
    src: local('Arimo Regular'),
         url('./fonts/Arimo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arimo';
    src: local('Arimo Bold'),
         url('./fonts/Arimo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Ensure smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Common text styles */
body {
   
    padding: 0;
    /* width: clamp(70%, calc(35.7142857% + 493.7142857px), 100%); */
    width: clamp(70%, calc(-10.7692308% + 1163.0769231px), 100%);
    margin: 0 auto;
    font-family: Arimo,Arial,sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-mainprimary);
    transition: all 0.3s ease;
}   
body, body * {
    color: var(--text-primary); 
    /* font-size: var(--text-size-base); */ 
    font-family: Arimo,Arial,sans-serif;
    /* font-family: serif; */
}

/* ==================== SCROLLBARS (global) ==================== */
html{
	scrollbar-color: var(--border-color) var(--bg-color-button);
	scrollbar-width: thin;
}
/* WebKit-based browsers */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: var(--bg-color-button); }
::-webkit-scrollbar-thumb{ background-color: var(--border-color); border-radius: 8px; border: 2px solid var(--bg-color-button); }

/* Horizontal scroll containers (mobile lists) */
.horizontal-scroll-container{
	scrollbar-color: var(--border-color) var(--bg-color-button);
}
.horizontal-scroll-container::-webkit-scrollbar-track{ background: var(--bg-color-button) !important; }
.horizontal-scroll-container::-webkit-scrollbar-thumb{ background: var(--border-color) !important; }

/* ==================== BRAND GRID (shared) ==================== */
.brand-grid{  
    overflow:hidden;
    background: linear-gradient(180deg,hsla(180,3%,92%,.9) 16%,hsla(180,4%,89%,.9) 87%);
    }

/* Dark mode override for brand grid background */
[data-theme="dark"] .brand-grid{
    background: #000000;
}
.brand-list{
    margin:0;
    padding:0;
    list-style:none;
    column-count:4;
    column-gap:0;
    column-rule:1px solid var(--com-border-color);
}
rand-list{ column-count:3; }

/* Shared Favorite / Top Hit list styles (canonicalized from index.php) */
.favorite-list {
    background-color: var(--bg-color-brandlist);
    width: 100%;
    box-sizing: border-box;
}

.favorite-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding intentionally left to page CSS */
    background-color: var(--bg-color-button);
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.favorite-item:nth-child(odd) { background-color: #ffffff; }
.favorite-item:nth-child(even) { background-color: #e8f5e8; }

/* Top Hit section uses light blue for even rows */
.sidebar-section:nth-of-type(4) .favorite-item:nth-child(odd) { background-color: #ffffff; }
.sidebar-section:nth-of-type(4) .favorite-item:nth-child(even) { background-color: #e3f2fd; }

.favorite-item:hover { background-color: var(--bg-color-button-hover); transform: translateY(-1px); text-decoration: none; }

/* Dark mode overrides */
[data-theme="dark"] .favorite-item { background-color: #2a2a2a !important; }
[data-theme="dark"] .favorite-item:nth-child(even) { background-color: #232323 !important; }
[data-theme="dark"] .favorite-item:hover, [data-theme="dark"] .comparison-item:hover { background-color: #3a3a3a !important; }

.favorite-model { font-size: 14px; font-weight: 500; color: var(--text-primary); flex: 1; text-align: left; }
.favorite-number { font-size: 14px; font-weight: 600; padding: 4px 8px; border-radius: 4px; min-width: 40px; text-align: center; }

.all-brands-link{
    display:block;
    height:40px;
    align-items:center;
    background: var(--bg-main-heading);
    justify-content:center;
    display:flex;
    gap:10px;
    text-decoration:none;
    align-content:center;

}
.all-brands-link-text{
    color:#ffffff;
    font-weight: 500;
    font-size: 17px;
}
.section-title-text{
    border-left:10px solid #7c7c7c;
    padding-left:10px;
    font-weight: 600;
    align-content:center;
    height: 30px;
}

/* Ensure sidebar section titles have consistent styling across pages.
   Moved here so pages that include commonstyle.css inherit the same rules
   and to avoid later inline styles unintentionally overriding them. */
.sidebar .section-title {
    margin-top: 10px;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 0px;
    display: flex;
    gap: 8px;
}
.sidebar .section-title svg {
    width: 18px;
    height: 18px;
}
.all-brands-link:hover .all-brands-link-text{ color:#fff; }
.all-brands-link:hover{ background:#d80000; color:#fff; }

.brand-item{
    letter-spacing:.35px;
    line-height:140%;
    /* padding:2px 0; */
    text-align:center;
    cursor:pointer;
    text-decoration:none;
    transition:color .2s;   
    /* text-transform:capitalize; */
    display:block;
    margin:0;
    /* column layout specifics */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:auto;
    border:none !important;
}
.brand-item a{
    display:block;
    letter-spacing:.65px;
    line-height:115%;
    padding:clamp(2px, 0.8vw, 8px) 0px;
    font:400 13px poppins,sans-serif;
    text-align:center;
    cursor:pointer;
    text-decoration:none;
    transition: background-color .2s ease, color .2s ease;
    text-transform:capitalize;
    
    color: var(--text-color-brandlist);
}
.brand-item a:hover{ background:#ea0000; color:#fff;text-shadow: 1px 1px 2px rgba(0, 0, 0, .4) }
/* Keyboard focus for accessibility */
.brand-item a:focus-visible{
    outline: 2px solid var(--hover-color);
    outline-offset: 2px;
}
/* Limit to max 10 rows (4 cols => 40 items) */
.brand-list .brand-item:nth-child(n+41){ display:none; }