/* BACKGROUND */

body{
background:
radial-gradient(circle at 20% 20%,#eaf2ff 0%,transparent 40%),
radial-gradient(circle at 80% 10%,#f3ecff 0%,transparent 40%),
radial-gradient(circle at 10% 80%,#e9fff6 0%,transparent 40%),
#ffffff;
margin:0;
font-family:Inter,Arial;
text-align:center;
}


/* HERO */

.hero{
background:linear-gradient(135deg,var(--theme-color) 0%,#f4f7fb 100%);
padding:100px 20px;
text-align:center;
color:#111;
}

.hero h1{font-size:42px;margin-bottom:10px}
.hero p{max-width:780px;margin:auto;font-size:18px}

/* GRID LAYOUT */

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

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

/* MAIN */

.section{width:100%;}

/* SIDEBAR */

.sidebar{
position:sticky;
top:120px;
height:fit-content;
}

/* ADS */

.ad300{
margin-bottom:30px;
padding:20px;
border:1px dashed #ccc;
border-radius:10px;
text-align:center;
background:#fff;
}

.ad728{
max-width:728px;
margin:40px auto;
padding:20px;
border:1px dashed #ccc;
border-radius:10px;
text-align:center;
background:#fff;
}

/* CALCULATOR */

.calc-box{
background:#f4f7fb;
padding:40px;
border-radius:10px;
text-align:center;
}

.calc-row{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content:center;
align-items:center;
}

.calc-row input,.calc-row select{
padding:10px;
font-size:16px;
}

/* TABLE */

table{
width:100%;
border-collapse:collapse;
margin-top:30px;
}

th{
background:var(--theme-color);
padding:12px;
}

td{
border:1px solid #ddd;
padding:10px;
text-align:center;
}

/* SVG ARROW ANIMATION */

.conversion-diagram{
max-width:900px;
width:100%;
margin:auto;
display:block;
}

.arrowLine{
stroke-dasharray:14;
animation:arrowMove 1.5s linear infinite;
}

@keyframes arrowMove{
to{
stroke-dashoffset:-28;
}
}

.svg-section{
margin-top:40px;
text-align:center;
}


/* PREMIUM SECTION */

.premium-section{
width:100%;
margin:80px auto;
padding:0;
background:transparent; /* 🔥 removes white */
box-shadow:none;        /* 🔥 removes shadow */
border:none;            /* 🔥 removes border */
max-width:850px;        /* 🔥 keeps text readable */
}

.premium-section p{
text-align:left;          /* 🔥 better readability */
font-size:16px;
color:#444;
line-height:1.8;
margin-bottom:18px;
}

.premium-section h2{
text-align:center;
margin-bottom:20px;
}

/* ===== FAQ (MATCH CONVERTER STYLE) ===== */

.faq{
max-width:850px;
margin:80px auto;
text-align:left;
}

.faq-item{
border-bottom:1px solid #eee;
}

.faq-question{
width:100%;
text-align:left;
padding:18px 10px;
font-size:16px;
font-weight:600;
border:none;
background:none;
cursor:pointer;
position:relative;
color: var(--theme-color);
}

.faq-item.active{
background:#f9fbff;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.faq-question::after{
content:"+";
position:absolute;
right:10px;
font-size:20px;
transition:0.3s;
color: var(--theme-color);
}

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

/* ANSWER */
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.4s ease;
padding:0 10px;
}

.faq-item.active .faq-answer{
padding:10px 10px 20px;
}

.faq-answer p{
margin:10px 0 20px;
color:#555;
line-height:1.7;
}

/* HOVER */
.faq-question:hover{
background: color-mix(in srgb, var(--theme-color) 12%, white) !important;
color: var(--theme-color) !important;
}

/* ACTIVE */
.faq-item.active .faq-question{
background: var(--theme-color) !important;
color:#fff !important;
border-radius:10px;
}

/* SEO CONVERSION GRID */

.seo-conversion-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:12px;

margin-top:30px;

}

.seo-link-card{

background:#ffffff;

padding:10px;

border-radius:8px;

text-decoration:none;

font-weight:600;

color:#111;

box-shadow:0 4px 12px rgba(0,0,0,0.07);

transition:0.2s;

text-align:center;

}

.seo-link-card{
  display:block;
  padding:12px;
  border-radius:10px;
  background:#f7f9fc;
  text-decoration:none;
  color:#111;
  transition:0.25s;
  font-weight:500;
}

.seo-link-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.seo-link-card:hover{

transform:translateY(-2px);

color:#fff;

}

/* hub colors */

.seo-link-card.length:hover{background:#1677d2;}

.seo-link-card.mass:hover{background:#16a34a;}

.seo-link-card.temperature:hover{background:#e25822;}

.seo-link-card.volume:hover{background:#7c3aed;}

.seo-link-card.area:hover{background:#f59e0b;}

.seo-link-card.time:hover{background:#0ea5e9;}


/* POPULAR CONVERSIONS */

.popular-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;
margin-top:30px;
}

.popular-card{
display:block;
background:#ffffff;
padding:14px;
border-radius:10px;
text-decoration:none;
font-weight:600;
color:#111;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:0.25s;
text-align:center;
}

.popular-card:hover{
background:var(--theme-color);
color:#fff;
transform:translateY(-3px);
}

/* CENTER ALL TEXT */

.section{
text-align:center;
}

.hero{
text-align:center;
}

.premium-section{
text-align:center;
}

.faq{
text-align:center;
}

table{
margin:auto;
}

.calc-row{
justify-content:center;
}

.section p,
.premium-section p,
.faq p{
max-width:850px;
margin:auto;
line-height:1.8;
}

h1,h2,h3{
margin-bottom:15px;
}

.premium-section{
margin:80px auto;
}

/* RELATED SEARCHES */

.related-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:12px;
margin-top:30px;
}

.related-card{
display:block;
background:#ffffff;
padding:10px;
border-radius:8px;
text-decoration:none;
font-weight:500;
color:#111;
box-shadow:0 4px 10px rgba(0,0,0,0.06);
transition:0.2s;
text-align:center;
}

.related-card:hover{
background:var(--theme-color);
color:#fff;
transform:translateY(-2px);
}


.luxury-box{
background:linear-gradient(145deg,#ffffff,#f4f7fb);
border-radius:18px;
padding:20px;
box-shadow:0 20px 60px rgba(0,0,0,0.08);
}

.luxury-box h3{
margin:0 0 15px;
font-size:16px;
font-weight:700;
color:#111;
}

/* GRID */
.luxury-links{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

/* LINK CARD */
.lux-links{
display:flex;
flex-direction:column;
}

/* THIS CREATES THE GAP */
.lux-link{
display:block;
padding:14px;
margin-bottom:12px; /* ✅ KEY FIX */
border-radius:14px;
background:#f4f7fb;
text-align:center;
font-weight:600;
text-decoration:none;
color:#111;
transition:all 0.25s ease;
}

/* remove gap on last item */
.lux-link:last-child{
margin-bottom:0;
}

/* HOVER */
.lux-link:hover{
transform:translateY(-3px);
background:linear-gradient(135deg,#1677d2,#4da3ff);
color:#fff;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

/* LENGTH */
.lux-link.length:hover{
background:#1677d2;
color:#fff;
}

/* MASS */
.lux-link.mass:hover{
background:#16a34a;
color:#fff;
}

/* TEMP */
.lux-link.temperature:hover{
background:#e25822;
color:#fff;
}

/* VOLUME */
.lux-link.volume:hover{
background:#7c3aed;
color:#fff;
}

/* SPEED */
.lux-link.speed:hover{
background:#10b981;
color:#fff;
}

@media(max-width:900px){

.sidebar{
position:relative !important; /* 🔥 remove sticky */
top:auto !important;
height:auto !important;
}

}

.sidebar{
padding-bottom:40px;
}

@media(max-width:900px){

.sidebar{
width:100%;
margin-top:30px;
}

}

.sidebar-box{
background:#ffffff;
padding:20px;
border-radius:18px;
box-shadow:0 20px 60px rgba(0,0,0,0.08);
}

/* optional spacing inside */
.sidebar-box h3{
margin-top:0;
margin-bottom:15px;
text-align:center;
}

.sidebar{
margin-top:10px;
}

.faq-item{
margin-bottom:10px;
border-radius:12px;
overflow:hidden;
}

@media(max-width:768px){

/* FIX MAIN LAYOUT OVERFLOW */
.layout{
padding:20px 12px;
box-sizing:border-box;
}

/* FORCE EVERYTHING INSIDE SCREEN */
.section{
width:100%;
max-width:100%;
overflow:hidden;
}

/* FIX TABLE PERFECT CENTER */
table{
width:100%;
max-width:100%;
table-layout:fixed;
margin:30px auto;
}

/* PREVENT TEXT PUSHING TABLE */
td, th{
word-break:break-word;
}

/* EXTRA SAFETY (kills side scroll completely) */
body{
overflow-x:hidden;
}

}

@media(max-width:768px){

.premium-section p,
.section p,
.faq p{
text-align:left;
max-width:600px;
margin:0 auto;
line-height:1.7;
}

}

/* DEFAULT = show full */
.faq-short{display:none;}
.faq-full{display:inline;}

/* MOBILE = show short */
@media(max-width:768px){

.faq-short{display:inline;}
.faq-full{display:none;}

.faq-question{
font-size:15px;
line-height:1.4;
}

}

.funfact-bar{
display:flex;
align-items:center;
gap:18px;

background:#ffffff;
border-radius:16px;
padding:20px 24px;
margin:50px auto;
max-width:900px;

box-shadow:0 15px 50px rgba(0,0,0,0.08);

transition:all 0.3s ease;
}

/* LEFT COLOR STRIP (thicker & rounded) */
.funfact-left{
width:6px;
height:60px;
border-radius:6px;
background:var(--theme-color);
flex-shrink:0;
}

/* CONTENT */
.funfact-content{
flex:1;
}

/* HEADER */
.funfact-header{
font-weight:700;
color:var(--theme-color);
margin-bottom:6px;
font-size:15px;
}

/* MAIN VALUE */
.funfact-main{
font-size:22px;
font-weight:700;
color:#111;
margin-bottom:4px;
}

/* SUBTEXT */
.funfact-sub{
font-size:14px;
color:#666;
}

/* HOVER */
.funfact-bar:hover{
transform:translateY(-3px);
box-shadow:0 20px 60px rgba(0,0,0,0.12);
}

.funfact-bar{
background:linear-gradient(
90deg,
color-mix(in srgb, var(--theme-color) 10%, white),
#ffffff
);
}

.category-split{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
max-width:1000px;
margin:50px auto;
padding:30px;
background:#ffffff;
border-radius:20px;
box-shadow:0 20px 60px rgba(0,0,0,0.08);
align-items:center;
}

.split-image img{
width:100%;
border-radius:12px;
}

.split-text{
text-align:left;
}

.split-text h3{
margin-bottom:15px;
}

.split-text li{
list-style:none;
margin-bottom:10px;
line-height:1.6;
}

/* highlight box */
.fact-highlight{
background:linear-gradient(135deg,#f4f7fb,#ffffff);
padding:15px 20px;
border-radius:12px;
margin-bottom:15px;
font-weight:600;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
transition:0.3s;
}

/* mobile */
@media(max-width:768px){
.category-split{
grid-template-columns:1fr;
text-align:center;
}

.split-text{
text-align:center;
}
}

/* ===== 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;
}

.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 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;
}

/* ===== SEO GRID HOVER COLORS ===== */

.seo-link-card.length:hover{background:#1677d2;color:#fff;}
.seo-link-card.mass:hover{background:#16a34a;color:#fff;}
.seo-link-card.temperature:hover{background:#e25822;color:#fff;}
.seo-link-card.volume:hover{background:#7c3aed;color:#fff;}
.seo-link-card.area:hover{background:#d97706;color:#fff;}
.seo-link-card.time:hover{background:#0ea5e9;color:#fff;}
.seo-link-card.speed:hover{background:#0f766e;color:#fff;}
.seo-link-card.data:hover{background:#4338ca;color:#fff;}
.seo-link-card.energy:hover{background:#ca8a04;color:#fff;}
.seo-link-card.power:hover{background:#0284c7;color:#fff;}

.calc-box{
  max-width:500px;
  margin:60px auto;
  padding:30px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  text-align:center;
}

.calc-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.calc-grid input,
.calc-grid select{
  width:100%;
  padding:14px;
  font-size:18px;
  border-radius:10px;
  border:1px solid #ddd;
  text-align:center;
}

.calc-grid input:focus,
.calc-grid select:focus{
  outline:none;
  border-color:var(--theme-color);
}

.result-box{
  font-size:32px;
  font-weight:700;
  color:var(--theme-color);
  padding:15px;
  background:#f4f7fb;
  border-radius:10px;
}

/* remove number arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
input[type=number]{-moz-appearance:textfield;}

/* ===== ARTICLE BASE ===== */
.article-content{
  max-width:820px;
  margin:60px auto;
  line-height:1.8;
  font-size:17px;
  color:#222;
  text-align:left; /* 🔥 IMPORTANT */
}

/* HEADINGS */
.article-content h2{
  font-size:30px;
  margin:50px 0 20px;
  border-left:5px solid var(--theme-color);
  padding-left:12px;
}

/* PARAGRAPHS */
.article-content p{
  margin-bottom:18px;
}

/* ===== CONTENT BLOCK ===== */
.content-block{
  background:#ffffff;
  padding:30px;
  border-radius:14px;
  margin-bottom:30px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

/* ===== UNIVERSAL LIST FIX (FINAL) ===== */

.pro-list{
  list-style:none;
  padding:0;
  margin:25px 0;
}

/* EACH ITEM */
.pro-list li{
  display:flex;
  align-items:flex-start;

  gap:12px;

  text-align:left;
  line-height:1.6;
  font-size:16px;

  background:#f4f7fb;
  padding:14px 16px;
  border-radius:12px;

  margin-bottom:14px;

  transition:all 0.2s ease;
}

/* CHECKMARK */
.pro-list li::before{
  content:"✔";
  color:var(--theme-color);
  font-weight:700;
  font-size:16px;

  flex-shrink:0;
  margin-top:3px;
}

/* TEXT SAFETY */
.pro-list li{
  white-space:normal;
  word-break:normal;
}

/* HOVER */
.pro-list li:hover{
background:color-mix(in srgb, var(--theme-color) 10%, white);
}

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

  .pro-list li{
    padding:14px;
    font-size:15px;
  }

}

/* ===== COMPARE GRID ===== */
.compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:25px 0;
}

.compare-card{
  background:#f9fbff;
  padding:20px;
  border-radius:12px;
}

/* MOBILE */
@media(max-width:768px){
  .compare-grid{
    grid-template-columns:1fr;
  }
}

.content-block{
  background:#ffffff;
  padding:32px;
  border-radius:16px;
  margin-bottom:30px;

  box-shadow:0 20px 60px rgba(0,0,0,0.06); /* 🔥 stronger depth */
  transition:0.2s;
}

.content-block:hover{
  transform:translateY(-2px);
  box-shadow:0 25px 70px rgba(0,0,0,0.08);
}

.divider{
  height:20px;
}

/* ===== RELATED HUB COLORS ===== */

.related-card.length:hover{
  background:#1677d2;
  color:#fff;
}

.related-card.mass:hover{
  background:#16a34a;
  color:#fff;
}

.related-card.temperature:hover{
  background:#e25822;
  color:#fff;
}

.related-card.volume:hover{
  background:#7c3aed;
  color:#fff;
}

.related-card.area:hover{
  background:#f59e0b;
  color:#fff;
}

.related-card.time:hover{
  background:#0ea5e9;
  color:#fff;
}

.related-card.data:hover{
  background:#06b6d4;
  color:#fff;
}

.related-card.power:hover{
  background:#ef4444;
  color:#fff;
}

.related-card.energy:hover{
  background:#f97316;
  color:#fff;
}

.related-card.speed:hover{
  background:#10b981;
  color:#fff;
}

.hero p{
  max-width:700px;
  margin:auto;
  line-height:1.6;
}