/* Common Styles */
:root {
    /* Light mode colors */
    --text-rumor-paragraph: #212121;
    --color-card-borderbottom: #cfcfcf;
    --bg-color-bglist: #fafafa;
    --bg-color-listborder: #f2f2f2;
    --card-background: #f5f5f7;
    --bg-primary: #ffffff;
    --bg-mainprimary: #e4e2e2;
    --bg-mainlistgap: #ededed;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f8f9fa;
    --bg-color-button: #bbbbbb;
    --overview-text-color: #2b2b2b;
    --text-primary: #1d1d1f;
    --text-primary2: #000000;
    --text-secondary: #555;
    --text-color-brandlist: #444;
    --border-color: #717171;
    --accent-color: #007AFF;
    --hover-color: #d50000;
    --rumor-card-text: #555;
    --color-card-shadow: #cfcfcf;
    --bg-color-main: #efebe9;
    --bg-color-secondary: #f8f9fa;
    /* --bg-color-brandlist: #e2e2e2; */
    --bg-color-brandlist: #f2f2f2;
    --text-color-mainlist: #545454;
    /* --text-color-mainlist: #777; */
    /* Button tokens */
    --button-bg: #f8f9fa;
    --button-text: #495057;
    --button-border: #dee2e6;
    --button-hover-bg: #e9ecef;
    --button-hover-text: #212529;
    --button-hover-border: #adb5bd;
}

/* Dark mode colors */
[data-theme="dark"] {
    --color-card-borderbottom: #1a1a1a;
    --text-rumor-paragraph: #f4f4f4;
    --bg-color-bglist: #252525;
    --bg-color-listborder: #4d4d4d;
    --bg-mainlistgap: #000000;
    --color-card-shadow: #ffffff;
    --overview-text-color: #f3f3f3;
    --card-background: #2a2a2a;
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-primary2: #ffffff;
    --text-secondary: #dcdcdc;
    --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 tokens (dark) */
    --button-bg: #2a2a2a;
    --button-text: #e6e6e6;
    --button-border: #3a3a3a;
    --button-hover-bg: #3a3a3a;
    --button-hover-text: #ffffff;
    --button-hover-border: #4a4a4a;
}

/* 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%);
    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: var(--bg-color-brandlist);
     /* border-inline: 1px solid var(--border-color); */
    }
/* Multi-column list with full-height vertical rules */
.brand-list{
    margin:0;
    padding:0;
    list-style:none;
    column-count:4;
    column-gap:0;
    column-rule:1px solid var(--border-color);
    /* border-left:1px solid var(--border-color);
    border-right:1px solid var(--border-color); */
}
/* @media(max-width:1050px){
    .brand-list{ column-count:3; }
} */
.all-brands-link{
    display:block;
    height:clamp(20px, 4.5vw, 45px);
    text-align:center;
    color:var(--text-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
    background: var(--bg-color-button);
    align-content:center;
    /* border-width: 0 1px 1px; 
    border-style: solid; */

}
.all-brands-link:hover{ background:var(--hover-color); 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:6px 0px;
    font:550 11px Google-Oswald,sans-serif;
    text-align:center;
    opacity:0.9;
    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:var(--hover-color); color:#fff; }
/* 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; }


@media(max-width:900px){
    .brand-item a{
        font:400 9.5px Google-Oswald,sans-serif;
    }
}