/* ===== GLOBAL ===== */
body{
font-family:Inter,Arial,sans-serif;
margin:0;
overflow-x:hidden;

background:
radial-gradient(circle at 20% 20%, #eaf2ff 0%, transparent 40%),
radial-gradient(circle at 80% 0%, #f3ecff 0%, transparent 40%),
linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
}

/* ===== LAYOUT ===== */
.layout{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 300px;
gap:40px;
padding:20px;
}

@media(max-width:900px){
.layout{grid-template-columns:1fr;}
}

/* ===== HERO ===== */
.hero{
max-width:900px;
margin:80px auto 40px;
text-align:center;
}

.hero h1{
font-size:48px;
margin-bottom:10px;
}

.hero p{
color:#555;
}

/* ===== SECTION ===== */
.spacer{
margin:60px 0 20px;
}

/* ===== GRID ===== */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;
}

/* ===== CARD ===== */
.card{
background:rgba(255,255,255,0.7);
backdrop-filter:blur(6px);
padding:14px;
border-radius:12px;
text-decoration:none;
color:#111;
border:1px solid rgba(255,255,255,0.6);
font-weight:600;
transition:0.25s;

display:flex;
align-items:center;
gap:10px;
}

/* ===== LABEL ===== */
.small{
display:inline-block;
font-size:11px;
padding:4px 10px;
border-radius:6px;
margin-right:0; /* FIX */
margin-bottom:0;
}

/* CATEGORY COLORS */
.small.length{background:#e7f1ff;color:#1677d2;}
.small.mass{background:#e9fbef;color:#16a34a;}
.small.temperature{background:#fff1ec;color:#e25822;}
.small.volume{background:#f3ecff;color:#7c3aed;}
.small.area{background:#fff4e6;color:#d97706;}
.small.time{background:#e6f6ff;color:#0ea5e9;}
.small.speed{background:#e6fff7;color:#0f766e;}
.small.data{background:#f0f0ff;color:#4338ca;}

/* HOVER COLORS */
.card[href*="/length/"]:hover{background:#1677d2;color:#fff;}
.card[href*="/mass/"]:hover{background:#16a34a;color:#fff;}
.card[href*="/temperature/"]:hover{background:#e25822;color:#fff;}
.card[href*="/volume/"]:hover{background:#7c3aed;color:#fff;}
.card[href*="/area/"]:hover{background:#d97706;color:#fff;}
.card[href*="/time/"]:hover{background:#0ea5e9;color:#fff;}
.card[href*="/speed/"]:hover{background:#0f766e;color:#fff;}
.card[href*="/data/"]:hover{background:#4338ca;color:#fff;}

/* ===== SIDEBAR ===== */
.sidebar{
  position:sticky;
  top:100px;

  display:flex;
  flex-direction:column;
  gap:20px;

  align-self:start;
  width:100%; /* ✅ FIX — match grid */
}



.sidebar-box{
  background:#fff;
  padding:20px;
  border-radius:16px;
  box-shadow:0 8px 25px rgba(0,0,0,0.05);

  text-align:center; /* ✅ CENTER EVERYTHING */
}

.sidebar-box h3{
  margin-bottom:10px;
}

.recent-item{
  display:block;
  padding:10px;
  border-radius:8px;
  margin-bottom:6px;
  background:#f7f9fc;
  text-decoration:none;
  color:#111;
  font-size:14px;
}

.recent-item:hover{
  background:#1677d2;
  color:#fff;
}


/* ===== FAQ ===== */
.faq-item{
margin-bottom:12px;
padding:12px;
border-radius:10px;
background:rgba(255,255,255,0.7);
backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,0.6);
}

.faq-question{
width:100%;
background:none;
border:none;
font-weight:600;
cursor:pointer;
text-align:left;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:0.3s;
color:#555;
}

.search-wrapper{
max-width:500px;
margin:30px auto;
position:relative;
}

.search-box{
display:flex;
gap:10px;
padding:12px;
border:1px solid #ccc;
border-radius:10px;
background:#fff;
}

#searchInput{
border:none;
outline:none;
width:100%;
font-size:16px;
}

/* CRITICAL */
#suggestions{
position:absolute;
top:100%;
left:0;
right:0;
background:#fff;
border:1px solid #ccc;
display:none;
z-index:9999;
}

.suggestion-item{
padding:10px;
cursor:pointer;
}


.suggestion-item:hover{
background:#f5f5f5;
}

/* MOBILE FIX */
@media(max-width:768px){

  .search-wrapper{
    width:100%;
    padding:0 16px; /* adds side space */
  }

  .search-box{
    width:100%;
    padding:14px;
    border-radius:14px;
  }

  .search-box input{
    font-size:16px;
  }

  #suggestions{
    left:16px;
    right:16px;
  }

}

@media(max-width:768px){

  .search-wrapper{
    max-width:100%;
    padding:0 18px;
  }

  .search-box{
    border-radius:16px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
  }

}



/* PREMIUM SEO BLOCK */
.seo-block{
max-width:1100px;
margin:80px auto;
padding:40px;
border-radius:20px;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
background:linear-gradient(135deg,#f8fbff,#eef5ff);
box-shadow:0 20px 60px rgba(0,0,0,0.08);
}

/* TEXT */
.seo-text h2{
font-size:28px;
margin-bottom:10px;
}

.seo-text p{
color:#555;
margin-bottom:20px;
line-height:1.6;
}

/* LINKS */
.seo-links{
display:flex;
flex-wrap:wrap;
gap:14px 12px; /* vertical + horizontal spacing */
margin-top:15px;
}

.seo-links a{
margin-bottom:6px;
background:#fff;
padding:10px 14px;
border-radius:8px;
text-decoration:none;
color:#111;
font-size:14px;
border:1px solid #e5e7eb;
transition:0.2s;
}

.seo-links a:hover{
background:#1677d2;
color:#fff;
}

/* IMAGE */
.seo-image img{
width:100%;
border-radius:14px;
}

/* MOBILE */
@media(max-width:768px){
.seo-block{
grid-template-columns:1fr;
padding:25px 18px;
}
}

/* FORCE CATEGORY COLORS */
.seo-links a.length-link{background:#e8f1ff !important;}
.seo-links a.length-link:hover{background:#1677d2 !important;color:#fff !important;}

.seo-links a.mass-link{background:#e9f8ef !important;}
.seo-links a.mass-link:hover{background:#16a34a !important;color:#fff !important;}

.seo-links a.volume-link{background:#f3ecff !important;}
.seo-links a.volume-link:hover{background:#7c3aed !important;color:#fff !important;}

.seo-links a.area-link{background:#fff4e5 !important;}
.seo-links a.area-link:hover{background:#d97706 !important;color:#fff !important;}

.seo-links a.time-link{background:#e6f6ff !important;}
.seo-links a.time-link:hover{background:#0ea5e9 !important;color:#fff !important;}

.seo-links a.temp-link{background:#ffece6 !important;}
.seo-links a.temp-link:hover{background:#e25822 !important;color:#fff !important;}

.seo-links a.speed-link{background:#e6fffa !important;}
.seo-links a.speed-link:hover{background:#0f766e !important;color:#fff !important;}

.seo-links a.energy-link{background:#fff7cc !important;}
.seo-links a.energy-link:hover{background:#ca8a04 !important;color:#fff !important;}

.seo-links a.power-link{background:#f0f9ff !important;}
.seo-links a.power-link:hover{background:#0284c7 !important;color:#fff !important;}

.seo-links a.data-link{background:#eef2ff !important;}
.seo-links a.data-link:hover{background:#4f46e5 !important;color:#fff !important;}


.seo-links a{
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}



.seo-links{
margin-bottom:20px !important;
}

.did-you-know{
margin-top:10px !important;
display:block;
}


/* ===== FAQ (FRONT PAGE STYLE) ===== */

/* ===== FAQ CLEAN STYLE ===== */

.faq-wrapper{
max-width:900px;
margin:80px auto;
clear:both;
position:relative;
z-index:1;
}

.faq{
text-align:left;
}

/* ITEM */
.faq-item{
margin-bottom:12px;
border-radius:14px;
overflow:hidden;
border:1px solid #eee;
background:#fff;
transition:0.3s;
}

/* QUESTION */
.faq-question{
width:100%;
padding:18px 20px;
font-size:16px;
font-weight:600;
border:none;
background:#fff;
cursor:pointer;
position:relative;
text-align:left;
transition:0.25s;
color:#111;
}

/* ICON */
.faq-question::after{
content:"+";
position:absolute;
right:20px;
font-size:20px;
transition:0.3s;
color:#1677d2;
}

.faq-question{
color:#111;
}



/* ACTIVE */
.faq-item.active .faq-question{
background:#1677d2; /* fixed safe color */
color:#fff;
}

/* ACTIVE ICON */
.faq-item.active .faq-question::after{
content:"–";
color:#fff;
}

/* ANSWER */
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.35s ease;
background:#f8fafc;
}

.faq-answer p{
margin:0;
padding:18px 20px;
color:#555;
line-height:1.6;
}

/* HOVER */
.faq-question:hover{
background:#f4f7fb;
color:#111; /* KEEP TEXT DARK */
}

.faq-item.active .faq-question:hover{
background:#1677d2;
color:#fff;
}

/* SHADOW */
.faq-item.active{
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.faq-question:hover{
transform:translateX(3px);
}
/* ===== FAQ HEADER ===== */

.faq-header{
text-align:center;
margin-bottom:40px; /* GAP BELOW */
}

.faq-header h2{
font-size:32px;
margin-bottom:10px;
}

.faq-header p{
color:#555;
max-width:600px;
margin:0 auto;
line-height:1.6;
font-size:15px;
}

.faq-header h2{
background:linear-gradient(90deg,#1677d2,#4da3ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.home-seo-block{
max-width:900px;
margin:60px auto;
padding:30px;
background:#ffffff;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
line-height:1.8;
text-align:left;
}

.home-seo-block h2{
margin-bottom:15px;
font-size:24px;
color:#1677d2;
}

.home-seo-block p{
color:#444;
margin-bottom:15px;
}

/* FINAL SAFETY FIX */


.faq-wrapper,
.faq,
.faq-item,
.faq-question,
.faq-answer{
width:100%;
max-width:100%;
box-sizing:border-box;
}

img{
max-width:100%;
height:auto;
}


.card span{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.trust-box{
max-width:900px;
margin:20px auto 50px;
padding:18px 22px;
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:14px;
box-shadow:0 8px 25px rgba(0,0,0,0.05);

display:flex;
flex-wrap:wrap;
gap:14px 24px;
font-size:14px;
color:#333;
}

.trust-box ul{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-wrap:wrap;
gap:12px 20px;
}

.trust-box li{
display:flex;
align-items:center;
gap:6px;
}

.trust-box li::before{
content:"✔";
color:#1677d2;
margin-right:6px;
}

.trust-box li{
opacity:0.9;
transition:0.2s;
}

.trust-box li:hover{
opacity:1;
transform:translateY(-1px);
}

.trust-box li:nth-child(-n+4){
font-weight:600;
color:#111;
}

.ad-box{
  width:100%;
  height:120px;
  margin:40px 0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:linear-gradient(180deg,#fafafa,#f3f4f6);
  border:2px dashed #ddd;
  border-radius:12px;

  color:#888;
  font-size:14px;

  box-shadow:0 8px 25px rgba(0,0,0,0.04);
}

/* optional nicer label */
.ad-box span{
  opacity:0.7;
  letter-spacing:0.5px;
}

/* SIDEBAR AD WRAPPER */
.ad-sidebar{
  background:#ffffff;
  border-radius:16px;
  padding:20px;
  box-shadow:0 8px 25px rgba(0,0,0,0.05);
}

/* INNER AD BOX */
.ad-box-sidebar{
  width:100%;
  height:250px; /* perfect sidebar size */

  display:flex;
  align-items:center;
  justify-content:center;

  background:#f9fafb;
  border:2px dashed #e5e7eb;
  border-radius:12px;

  color:#999;
  font-size:14px;
}

/* TEXT */
.ad-box-sidebar span{
  opacity:0.7;
}

@media(max-width:900px){
  .sidebar{
    position:static;
  }
}

/* SIDEBAR LINKS (NEW DESIGN) */
.side-link{
  display:block;
  padding:12px 14px;
  margin-bottom:10px;

  background:#f8fafc;
  border-radius:10px;

  text-decoration:none;
  color:#111;
  font-size:14px;

  transition:0.25s;

  text-align:center; /* ✅ center text */
}

.side-link:hover{
  background:#1677d2;
  color:#fff;
  transform:translateX(4px);
}

/* SIDEBAR TITLE */
.sidebar-box h3{
  font-size:16px;
  margin-bottom:12px;
}

/* AD SPACING */
.ad-sidebar{
  padding:16px;
}

/* OPTIONAL: make sidebar cleaner */
.sidebar-box{
  border:1px solid #f0f0f0;
}

/* LENGTH */
.side-link[href*="/length/"]:hover{
  background:#1677d2;
  color:#fff;
}

/* MASS */
.side-link[href*="/mass/"]:hover{
  background:#16a34a;
  color:#fff;
}

/* TEMP */
.side-link[href*="/temperature/"]:hover{
  background:#e25822;
  color:#fff;
}

/* VOLUME */
.side-link[href*="/volume/"]:hover{
  background:#7c3aed;
  color:#fff;
}

/* SPEED */
.side-link[href*="/speed/"]:hover{
  background:#0f766e;
  color:#fff;
}

/* DATA */
.side-link[href*="/data/"]:hover{
  background:#4338ca;
  color:#fff;
}

.side-link:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}