:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --text:#111827;
    --muted:#6b7280;
    --bg:#f8fafc;
    --card:#ffffff;
    --border:#e5e7eb;
    --hero-gradient-start:rgba(219,234,254,0.5);
    --hero-gradient-end:transparent;
    --hero-overlay:var(--card);
    --navbar-bg:var(--card);
    --navbar-brand:var(--text);
    --navbar-link:var(--muted);
    --section-border:var(--border);
    --navbar-toggler-bg:var(--card);
    --navbar-toggler-border:var(--border);
    --navbar-toggler-color:var(--text);
    --navbar-toggler-hover-bg:var(--primary);
    --navbar-toggler-hover-color:#ffffff;
    --input-bg:#ffffff;
    --input-border:#d1d5db;
    --input-text:#111827;
    --input-placeholder:#6b7280;
    --button-text:#ffffff;
    --featured-card-bg:linear-gradient(135deg,#ffffff 0%,#eff6ff 100%);
}

html[data-theme="dark"], body[data-theme="dark"] {
    --primary:#60a5fa;
    --primary-dark:#2563eb;
    --text:#e2e8f0;
    --muted:#94a3b8;
    --bg:#0f172a;
    --card:#111827;
    --border:#1f2937;
    --hero-gradient-start:rgba(96,165,250,0.2);
    --hero-gradient-end:transparent;
    --hero-overlay:var(--card);
    --navbar-bg:var(--card);
    --navbar-brand:#e2e8f0;
    --navbar-link:#94a3b8;
    --section-border:var(--border);
    --navbar-toggler-bg:var(--card);
    --navbar-toggler-border:#374151;
    --navbar-toggler-color:#e2e8f0;
    --navbar-toggler-hover-bg:var(--primary);
    --navbar-toggler-hover-color:#ffffff;
    --input-bg:#111827;
    --input-border:#374151;
    --input-text:#e2e8f0;
    --input-placeholder:#94a3b8;
    --button-text:#ffffff;
}

* {
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.7;
    margin:0;
    padding:0;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

[data-theme="dark"] body {
    background: var(--bg);
    color: var(--text);
}

.navbar{
    background:var(--navbar-bg) !important;
    border-bottom:1px solid var(--section-border);
    padding:1rem 0;
}

.navbar-toggler{
    width:2.9rem;
    height:2.9rem;
    padding:.35rem;
    border-radius:1rem;
    border:1px solid var(--navbar-toggler-border);
    background:var(--navbar-toggler-bg);
    color:var(--navbar-toggler-color);
    transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    background:var(--navbar-toggler-hover-bg);
    color:var(--navbar-toggler-hover-color);
    border-color:var(--navbar-toggler-hover-bg);
    transform:translateY(-1px);
}

.navbar-toggler-icon {
    filter: brightness(0) invert(0);
}

[data-theme="dark"] .navbar-toggler-icon {
    filter: brightness(1) invert(1);
}

.nav-link{
    color:var(--muted) !important;
}

.nav-link:hover{
    color:var(--primary) !important;
}

.theme-switcher {
    min-width: 5.5rem;
    cursor: pointer;
    display: inline-block;
    margin-top: 0.45rem;
}

.theme-switcher:focus {
    /* outline: 2px solid var(--primary);
    outline-offset: 2px; */
    border-radius: 6px;
}

/* Theme icon (sun <-> moon) */
.theme-switcher .theme-icon{
    width:20px;
    height:20px;
    display:inline-block;
    vertical-align:middle;
    margin-right:.6rem;
    transition:transform .3s ease;
    color:var(--muted);
}

.theme-switcher .theme-icon .sun,
.theme-switcher .theme-icon .moon{
    transition:opacity .25s ease, transform .3s ease;
    transform-origin:center;
}

/* default: show sun, hide moon */
.theme-switcher .theme-icon .sun{opacity:1; transform:scale(1);} 
.theme-switcher .theme-icon .moon{opacity:0; transform:scale(.8) translateX(2px);} 

.theme-switcher.is-dark .theme-icon{ color:var(--text); transform: rotate(18deg); }
.theme-switcher.is-dark .theme-icon .sun{opacity:0; transform:scale(.6) rotate(-20deg);} 
.theme-switcher.is-dark .theme-icon .moon{opacity:1; transform:scale(1);} 

/* Ensure visibility follows actual page theme regardless of timing */
html[data-theme="dark"] .theme-switcher .theme-icon .sun{opacity:0; transform:scale(.6) rotate(-20deg);} 
html[data-theme="dark"] .theme-switcher .theme-icon .moon{opacity:1; transform:scale(1);} 
html:not([data-theme="dark"]) .theme-switcher .theme-icon .sun{opacity:1; transform:scale(1);} 
html:not([data-theme="dark"]) .theme-switcher .theme-icon .moon{opacity:0; transform:scale(.8) translateX(2px);} 

/* Make the theme switch look like a nav link on desktop */
.navbar .theme-switcher {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0 .5rem;
    min-width: auto;
    margin-left: 1rem;
    color: var(--navbar-link) !important;
    font-weight: 500;
}

.navbar .theme-switcher:hover {
    color: var(--primary) !important;
    background: transparent;
}

/* On mobile (collapsed), make it a full-width themed button at the bottom */
.navbar-collapse .theme-switcher {
    display: block;
    width: 100%;
    margin-top: .45rem;
    padding: .0;
    border: 0 !important;
    background: var(--card);
    color: var(--text) !important;
    text-align: left;
}

a{
    text-decoration:none !important;
    color:inherit;
    transition:all .2s ease;
}

a:hover{
    color:var(--primary);
}

p{
    margin-bottom:0;
}

.container{
    max-width:1240px;
}

/* NAVBAR */

.navbar-brand{
    font-weight:800;
    font-size:1.35rem;
    letter-spacing:-0.5px;
    color:var(--navbar-brand) !important;
}

.nav-link{
    font-weight:500;
    color:var(--navbar-link) !important;
    margin-left:1rem;
}

.nav-link:hover{
    color:var(--primary) !important;
}

/* HERO */

.hero-section{
    padding:5rem 0;
    background:
        radial-gradient(circle at top left, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 40%),
        var(--hero-overlay);
    border-bottom:1px solid var(--section-border);
}

.hero-title{
    font-size:3rem;
    line-height:1.1;
    font-weight:800;
    max-width:850px;
    margin:auto;
    letter-spacing:-1.5px;
    color:var(--text);
}

.hero-title b{
    color:var(--primary);
}

.hero-subtitle{
    color:var(--muted);
    font-size:1.15rem;
    margin-top:1.2rem;
}

/* ARTICLE CARDS */

.article-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:24px;
    padding:2rem;
    height:100%;
    transition:all .25s ease;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.article-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.featured-card{
    padding:3rem;
    background:
        radial-gradient(circle at top left, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 40%),
        var(--hero-overlay);
}

.article-title{
    font-weight:800;
    line-height:1.2;
    letter-spacing:-0.5px;
    color:var(--text);
    margin-bottom:1rem;
}

.article-title a{
    color:var(--text) !important;
}

.article-title a:hover{
    color:var(--primary) !important;
}

.article-excerpt{
    color:var(--muted);
    font-size:1rem;
    line-height:1.8;
}

.read-more{
    display:inline-flex;
    align-items:center;
    
    font-weight:700;
    color:var(--primary) !important;
}

.read-more:hover{
    color:var(--primary-dark) !important;
}

.article-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:1.5rem;
    color:var(--muted);
    font-size:0.95rem;
    font-weight:600;
}

.article-footer .views{
    color:var(--muted);
    font-weight:600;
}

/* SIDEBAR */

.sidebar-widget{
    border:1px solid var(--border);
    border-radius:20px;
    padding:1rem;
    min-height:250px;
}

/* NEWSLETTER */

.newsletter-box{
    border:1px solid var(--border);
    border-radius:28px;
    padding:3rem;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
    background: var(--card)
}

.form-control,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
    border-radius:14px !important;
    padding:1rem !important;
    border:1px solid var(--input-border) !important;
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    font-size:1rem;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder) !important;
    opacity:1;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    box-shadow:0 0 0 0.15rem rgba(59,130,246,0.18) !important;
    border-color:var(--primary) !important;
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
}

.btn-primary-modern{
    background:var(--primary);
    border:none;
    color:var(--button-text) !important;
    padding:1rem 1.5rem;
    border-radius:14px;
    font-weight:700;
    width:100%;
    transition:.2s ease;
}

.btn-primary-modern:hover{
    background:var(--primary-dark);
    color:var(--button-text) !important;
}

.btn-primary-modern{
    background:var(--primary);
    border:none;
    color:#fff !important;
    padding:1rem 1.5rem;
    border-radius:14px;
    font-weight:700;
    width:100%;
    transition:.2s ease;
}

.btn-primary-modern:hover{
    background:var(--primary-dark);
    color:#fff !important;
}

/* FOOTER */

footer{
    background:#0f172a !important;
}

footer h5{
    color:#fff;
}

footer p{
    color:#cbd5e1;
}

/* PAGE LOADER */

#fadein{
    position:fixed;
    width:100%;
    height:100%;
    background:var(--bg); 
    z-index:9999;
    animation:fadeOut .7s forwards;
    animation-delay:.2s;
}

@keyframes fadeOut{
    to{
        opacity:0;
        visibility:hidden;
    }
}

/* MOBILE */

@media(max-width:768px){

    .navbar-toggler{
        background: transparent !important;
        border: none !important;
    }

    .hero-title{
        font-size:2rem;
    }

    .hero-section{
        padding:3rem 0;
    }

    .article-card{
        padding:1.5rem;
    }

    .featured-card{
        padding:2rem;
    }

    .newsletter-box{
        padding:2rem;
    }
}


.page-article {
    max-width: 100%;
}

.article-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding-bottom: 1rem;
}

.article-header p {
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    margin-bottom: 0.6rem;
    color: #64748b;
}

.content {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.85;
    word-wrap: break-word;
    max-width: 78ch;
    /* margin: 0 auto 2rem;*/
}

.content p {
    margin: 1.25rem 0;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    /* text-align: justify; */
    color: var(--text);
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    margin: 2.5rem 0 1rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text);
}

.content h1 {
    font-size: 2.4rem;
}

.content h2 {
    font-size: 2rem;
	color: var(--primary)
}

.content h3 {
    font-size: 1.75rem;
}

.content h4 {
    font-size: 1.45rem;
}

.content h5,
.content h6 {
    font-size: 1.25rem;
}

.content ul,
.content ol {
    margin: 1rem 0 1.5rem 1.5rem;
    padding-left: 1rem;
    color: var(--text);
}

.content li {
    margin: 0.65rem 0;
}

.content blockquote {
    margin: 1.75rem 0;
    padding: 1.15rem 1.5rem;
    border-left: 4px solid rgba(59, 130, 246, 0.25);
    background: #f8fafc;
    color: #475569;
}

.content img,
.content figure {
    max-width: 100%;
    height: auto;
    margin: 1.5rem auto;
    display: block;
}

.content a {
    color: var(--primary);
    text-decoration: underline;
}

.content strong,
.content b {
    font-weight: 700;
}

#share-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

#share-links a,
#share-links button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

#share-links img {
  width: 48px;
  height: 48px;
  opacity: 0.7;
  display: block;
  transition: all 0.5s;
}

#share-links a img:hover {
    scale: 1.2;
    opacity: 1;
}

.content-placement {
  min-height: 250px;
  border: 2px dashed #ff6c00;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
  font-family: Arial, sans-serif;
  position: relative;
  border-radius:10px;
}

/* Only show label if it's truly empty */
.content-placement:empty::before {
  content: "Ad space";
  opacity: 0.7;
}

/* TRENDING WIDGET */
.trending-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.trending-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}

.trending-flame {
  display: inline-block;
  font-size: 1.3rem;
  animation: flicker 1.5s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.trending-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.trending-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.trending-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.trending-item:hover {
  background: rgba(37, 99, 235, 0.05);
  padding-left: 1.25rem;
}

.trending-item:hover::before {
  opacity: 1;
}

.trending-item:last-child {
  border-bottom: none;
}

.trending-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8rem;
  width: 2.8rem;
  height: 2.8rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.trending-rank::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  pointer-events: none;
}

.trending-item:hover .trending-rank {
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
  transform: translateY(-2px);
}

.rank-number {
  font-weight: 800;
  color: #ffffff;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
  letter-spacing: -0.5px;
}

.trending-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.trending-item-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.trending-item:hover .trending-item-title {
  color: var(--primary);
}

.trending-meta {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.trending-views {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted);
  transition: color 0.3s ease;
}

.trending-views svg {
  opacity: 0.7;
}

.trending-item:hover .trending-views {
  color: var(--primary);
}

.trending-item:hover .trending-views svg {
  opacity: 1;
}

.content blockquote{
    position:relative;
    margin:2rem 0;
    padding:1.5rem 1.75rem;
    background:var(--card);
    border:1px solid var(--border);
    border-left:4px solid var(--primary);
    border-radius:16px;
    color:var(--text);
}

.content blockquote p:first-child{
    margin-top:0;
}

.content blockquote p:last-child{
    margin-bottom:0;
}

.content blockquote::before{
    content:"❝";
    position:absolute;
    top:.5rem;
    right:1rem;
    font-size:3rem;
    line-height:1;
    color:var(--primary);
    opacity:.15;
}

.content pre{
    font-family:
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:.9em;
    padding:.15rem .45rem;
    border-radius:8px;
    white-space: pre;         /* keep original formatting by default */
    max-width: 100%;
    background:var(--card);
    border:1px solid var(--border);
    color:var(--primary);
}


/* but for very long tokens inside pre, allow breaks: */
.content pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.content table{
    max-width:100%;
    margin:2rem 0;
    border-collapse:collapse;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    display:inline-block;
    overflow-x:auto;

    background:var(--card);
}

.content thead{
    background:rgba(37,99,235,.08);
}

.content th{
    padding:1rem;
    text-align:left;
    font-weight:700;
    color:var(--text);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}

.content td{
    padding:1rem;
    color:var(--text);
    border-bottom:1px solid var(--border);
}

.content tbody tr:last-child td{
    border-bottom:none;
}

.content tbody tr:nth-child(even){
    background:rgba(148,163,184,.05);
}

.content tbody tr:hover{
    background:rgba(37,99,235,.06);
}

.content hr{
    border:none;
    height:1px;
    background:var(--border);
}

.content ul li::marker{
    color:var(--primary);
}

.content ol li::marker{
    color:var(--primary);
    font-weight:700;
}

.content img{
    border-radius:18px;
    border:1px solid var(--border);
}

#cookieConsent {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    display: flex;
    justify-content: center;
}

.cc-card {
    width: 100%;
    max-width: 760px;
    background: var(--bg);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,.15);
    border: 1px solid var(--border);
}

.cc-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.cc-card p {
    margin-bottom: 20px;
    color: var(--muted);
}

.cc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cc-btn {
    border: none;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
}

.cc-btn-primary {
    background: var(--primary);
    color: white;
}

.cc-btn-secondary {
    background: #f3f4f6;
}

.cc-btn-outline {
    background: white;
    border: 1px solid #d1d5db;
}

.cc-preferences {
    display: none;
    margin-top: 20px;
}

.cc-preferences.open {
    display: block;
}

.cc-category {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.cc-description {
    color: #666;
    font-size: 14px;
}

.cc-switch input {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    #cookieConsent {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .cc-actions {
        flex-direction: column;
    }

    .cc-btn {
        width: 100%;
    }
}

.accordion {
    background: transparent;
}

/* each item */
.accordion-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
}

/* remove Bootstrap default spacing line */
.accordion-item:not(:first-of-type) {
    border-top: 1px solid var(--border);
}

/* button/header */
.accordion-button {
    background: var(--card);
    color: var(--text);
    font-weight: 600;
    padding: 1rem 1.25rem;
    box-shadow: none;
    transition: background .2s ease, color .2s ease;
}

/* collapsed state */
.accordion-button.collapsed {
    background: var(--card);
    color: var(--text);
}

/* hover */
.accordion-button:hover {
    background: rgba(37, 99, 235, 0.05);
}

/* focus */
.accordion-button:focus {
    box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.18);
    border-color: var(--primary);
}

/* remove Bootstrap arrow background hack */
.accordion-button::after {
    filter: none;
    opacity: 0.7;
}

/* open state */
.accordion-button:not(.collapsed) {
    color: var(--primary);
    background: rgba(37, 99, 235, 0.06);
}

/* body */
.accordion-body {
    background: var(--card);
    color: var(--text);
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
}

/* dark mode subtle tuning (optional but improves contrast) */
html[data-theme="dark"] .accordion-button:hover {
    background: rgba(96, 165, 250, 0.08);
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background: rgba(96, 165, 250, 0.10);
}