/* --- CSS Variables --- */
:root{
  --bg-color:#ffffff; --text-color:#000000; --primary-color:#007BFF;
  --header-bg:#007BFF; --header-text:#ffffff; --card-bg:#f5f5f5;
  --border-color:#ccc; --input-bg:#ffffff; --result-bg:#e9f2ff;
  --result-text:#000000; --summary-text-rest:#000000;
  --table-header-bg:#e9f2ff; --table-row-even-bg:#f9f9f9; --table-row-hover-bg:#e0f0ff;
  --info-section-bg:#f9fbfd; --info-section-border:#cce4ff;
  --info-heading-color:#0066cc; --info-heading-border:#66a3ff; --info-text-color:#0a2540;
  --category-btn-bg:#e6f0ff; --category-btn-text:#0056b3; --category-btn-border:#99c2ff;
  --category-btn-hover-bg:#d0e0ff; --category-btn-active-bg:#007BFF; --category-btn-active-text:#ffffff;
}

/* --- Dark Mode Variables --- */
body.dark-mode{
  --bg-color:#1a1a1a; --text-color:#ffffff; --primary-color:#6a9de9;
  --header-bg:#333; --header-text:#ffffff; --card-bg:#2a2a2a; --border-color:#555;
  --input-bg:#333; --result-bg:#223344; --result-text:#ffffff; --summary-text-rest:#ffffff;
  --table-header-bg:#3a3a3a; --table-row-even-bg:#2f2f2f; --table-row-hover-bg:#404040;
  --info-section-bg:#222c38; --info-section-border:#3b4e64;
  --info-heading-color:#8fb3e6; --info-heading-border:#6b8dc2; --info-text-color:#c0c0c0;
  --category-btn-bg:#3a4a5a; --category-btn-text:#a0c0e0; --category-btn-border:#5a6a7a;
  --category-btn-hover-bg:#4a5a6a; --category-btn-active-bg:#6a9de9; --category-btn-active-text:#1a1a1a;
}

/* --- Base & page frame --- */
html,body{height:100%;margin:0}
body{
  font-family:Arial, sans-serif;
  background:var(--bg-color); color:var(--text-color);
  transition:background-color .3s,color .3s;
}

/* PAGE LAYOUT — make footer stick to bottom */
.site-wrapper{min-height:100svh; display:flex; flex-direction:column;}
main.main-flex{flex:1 0 auto;}         /* grows to push footer down */

/* --- Header --- */
header{
  background:var(--header-bg); color:var(--header-text);
  display:flex; justify-content:center; align-items:center;
  height:55px; position:relative; width:100%; box-sizing:border-box; padding:1rem 0;
}
header .inner-container{max-width:1200px; margin:0 auto; width:100%; display:flex; align-items:center; gap:5px; justify-content:flex-start;}
header .title{flex-grow:1; text-align:center}
header .dark-mode-toggle{
  background:transparent; border:1px solid var(--header-text); color:var(--header-text);
  padding:.5rem 1rem; border-radius:5px; cursor:pointer; font-size:.9rem;
  transition:background-color .3s,color .3s; position:absolute; top:1rem; right:1rem;
}
header .dark-mode-toggle:hover{background-color:rgba(255,255,255,.2)}
header img[alt="Universal Unit Converter Logo"]{height:50px; width:auto}
header img[alt="Universal Unit Converter"]{width:165px; height:50px; margin-left:55px}

/* --- Top category nav --- */
#category-nav{display:flex; gap:8px; max-width:none; justify-content:flex-start}
#category-nav button{
  background:var(--category-btn-bg); color:var(--category-btn-text);
  border:1px solid var(--category-btn-border);
  padding:.3rem .6rem; border-radius:4px; cursor:pointer;
  font-size:.75rem; font-weight:bold; white-space:nowrap;
  transition:background-color .3s ease, color .3s ease;
}
#category-nav button:hover{background:var(--category-btn-hover-bg); box-shadow:0 2px 6px rgba(243,243,243,.1)}
#category-nav button.active{
  background:var(--category-btn-active-bg); color:var(--category-btn-active-text);
  border-color:var(--category-btn-active-bg); box-shadow:0 3px 8px rgba(255,255,255,.3);
}

/* --- MAIN CONTENT: stack converter + common conversions --- */
.main-flex{
  display:flex;
  flex-direction:column;          /* ⟵ stack */
  align-items:center;             /* center the card */
  gap:12px;
  max-width:1200px;
  margin:0 auto;
  padding:0 15px;
}

.main-header{
  width:100%;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.25rem; margin:0 auto;
}
.page-subtitle{font-size:1.2em; font-weight:bold; color:var(--primary-color); text-align:left; padding-top:0}
.main-header .page-subtitle{margin:0; margin-top:1rem}

.converter-column{
  width:100%; max-width:600px; margin:0 auto;
  background:var(--card-bg); padding:15px; border-radius:8px; box-sizing:border-box;
  transition:background-color .3s,color .3s; border:1px solid #a7a7a7; position:relative;
}

/* Common Conversions card sits UNDER converter with same width */
.common-conversions{
  width:100%;
  max-width:1200px;          /* allow rows so groups sit side by side */
  margin:16px auto 0;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0 15px;
  box-shadow:none;
}
.common-conversions ul{
  list-style:disc;
  list-style-position:outside;
  padding-left:18px;
  margin:6px 0 12px;
}
.common-conversions li{margin:2px 0;}
.common-conversions h2{margin:6px 0; color:var(--primary-color);}
.common-conversions h3{margin:6px 0; color:var(--text-color);}

.converter-list-wrapper{
  margin-top:16px;
  width:100%;
  display:flex;
  justify-content:center;
}

.converter-groups{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px 24px;
}
.ctx-panel{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--border-color);
  border-radius:10px;
  background:var(--card-bg);
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.ctx-header{display:flex; flex-direction:column; gap:4px; margin-bottom:8px;}
.ctx-title{font-weight:bold; color:var(--primary-color);}
.ctx-subtitle{color:var(--text-color); opacity:.8; font-size:.92rem;}
.ctx-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  align-items:end;
}
.ctx-field{display:flex; flex-direction:column; gap:4px; font-size:.95rem;}
.ctx-field span{font-weight:600;}
.ctx-field input,
.ctx-field select{
  padding:6px 8px;
  border:1px solid var(--border-color);
  border-radius:6px;
  background:var(--input-bg);
  color:var(--text-color);
}
.ctx-faq-link{
  display:inline-flex; margin-top:10px; font-weight:600; color:var(--primary-color); text-decoration:none;
}
.ctx-faq-link:hover{text-decoration:underline;}
.conversion-grid a{ text-decoration:underline; }

.about-section{
  max-width:1200px;
  margin:24px auto 32px;
  padding:0 15px;
  line-height:1.6;
  color:var(--text-color);
}
.about-section h2{color:var(--primary-color); margin:8px 0 6px;}
.about-section h3{margin:16px 0 8px;}
.about-section ul{padding-left:20px; margin:6px 0 12px;}
.about-section li{margin:4px 0;}
.about-section p{margin:10px 0;}

/* Inputs & result */
.input-group{display:flex; gap:10px; margin-bottom:1px; flex-wrap:nowrap; justify-content:center}
.input-group>div{flex:1 1 45%}
.value-input{
  border:1.4px solid #000; border-radius:4px; padding:5px; font-size:1.4em; margin-bottom:3px;
  width:100%; min-height:40px; box-sizing:border-box; background:var(--input-bg); color:var(--text-color);
  transition:background-color .3s,color .3s,border-color .3s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-shadow:3px 3px 3px rgba(0,0,0,.4);
}
#fromValueInput{font-size:1.4em; line-height:1.2}
#fromValueInput::placeholder{font-size:1em; line-height:1.2}
.input-group>div input.value-input:first-of-type{font-size:1.4em; line-height:1.2}
.input-group>div input.value-input:nth-of-type(2){font-size:1.4em; line-height:normal}
.value-input:focus{border-color:var(--primary-color); outline:none; box-shadow:0 0 5px rgba(0,123,255,.3)}

.result-display-box{
  border:1.5px solid #000; border-radius:4px; padding:5px; font-size:1.4em; margin-bottom:3px;
  width:100%; min-height:40px; box-sizing:border-box; background:var(--result-bg); color:var(--result-text);
  font-weight:bold; display:flex; align-items:center; transition:background-color .3s,color .3s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-shadow:3px 3px 3px rgba(0,0,0,.4);
  flex-grow:1; min-width:0;
}
.result-display-wrapper{display:flex; align-items:center; gap:10px; width:100%}
.result-summary{font-size:1.3em; font-weight:normal; text-align:center; margin-bottom:10px}
.result-summary .result-label{color:red; font-weight:bold}
.result-summary .result-value{color:var(--summary-text-rest); transition:font-size .25s ease-in-out; word-break:break-word; line-height:1.3}

/* Unit list */
.unit-list-box{
  border:1.5px solid #000; border-radius:4px; padding:5px 0; margin-top:5px; margin-bottom:1px;
  max-height:300px; overflow-y:auto; background:var(--input-bg); box-shadow:3px 3px 3px rgba(0,0,0,.4);
  display:block; width:100%; scrollbar-width:thin; scrollbar-color:var(--primary-color) var(--table-row-even-bg);
}
.unit-list-box::-webkit-scrollbar{width:8px}
.unit-list-box::-webkit-scrollbar-track{background:var(--table-row-even-bg); border-radius:4px}
.unit-list-box::-webkit-scrollbar-thumb{background:var(--primary-color); border-radius:4px}
.unit-list-box .unit-option{
  padding:4px 5px; font-size:1.06rem; line-height:1.2; cursor:pointer;
  white-space:normal; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--text-color); transition:background-color .3s,color .3s; font-weight:200;
}
.unit-list-box .unit-option.selected,
.unit-list-box .unit-option:hover{background:var(--table-row-hover-bg); color:var(--primary-color); font-weight:bold}
.unit-list-box .unit-option.selected::after{content:'✓'; position:absolute; right:15px; color:var(--header-text); font-size:1.2em}

/* Typography & misc */
h1{text-align:center; margin-bottom:25px; color:var(--primary-color)}
.converter-column h1{display:none}
label{font-weight:bold; display:block; margin-bottom:5px; color:var(--text-color)}
.copy-button{background:var(--primary-color); color:var(--header-text); border:none; padding:6px 10px; border-radius:4px; cursor:pointer; font-size:1.2em; transition:background-color .3s,opacity .3s; flex-shrink:0}
.copy-button:hover{opacity:.9}
.copy-button:active{opacity:.7}

/* Breadcrumb bits kept from your original */
#length-converter .page-subtitle{font-size:1.7rem; font-weight:bold}
.breadcrumb{font-size:.8rem; margin-top:3px; color:var(--primary-color)}
.breadcrumb a{color:var(--primary-color); text-decoration:underline}
.breadcrumb a:hover{text-decoration:none}
.breadcrumb span{color:var(--text-color); font-weight:bold}
#length-converter .main-header{gap:0 !important; padding-top:0 !important}
#length-converter .breadcrumb{font-size:.8rem; margin-top:6px !important}
#length-converter .main-flex{margin-top:3px !important}
#length-converter .main-header{gap:6px !important}

/* --- Footer pinned to bottom --- */
footer{
  text-align:center; padding:1rem; background:var(--header-bg); color:#fff;
  margin-top:auto; width:100%;
}
footer a{color:#fff; text-decoration:none}
footer a:hover{text-decoration:underline}
footer p{color:#fff}

/* Helpers */
.error-message{color:red; font-size:.9em; margin-top:5px; display:none}
.input-error{border-color:red !important; box-shadow:0 0 5px rgba(255,0,0,.3) !important}

.breadcrumb {
  animation:fade .35s ease both; max-width:1000px; margin:auto
}
@keyframes fade{from{opacity:0;transform:translateY(4px)}}

.trail {
  display:flex; align-items:center; gap:.25rem;
  list-style:none; margin:0; padding:0; flex-wrap:wrap
}
.trail li { display:flex; align-items:center }
.trail li+li::before {
  content:"›"; margin:0 .5rem; color:#64748b; opacity:.7
}

.crumb {
  position:relative; color:inherit; text-decoration:none;
  padding:6px 0; border-radius:6px; transition:transform .18s ease
}
.crumb:hover { transform:translateY(-1px); background:#f8fafc }
.crumb:focus-visible { outline:2px solid #2563eb; outline-offset:2px }

.crumb::after {
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:linear-gradient(90deg,#60a5fa,#3b82f6,#1d4ed8);
  background-size:200% 100%;
  border-radius:1px; transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease,background-position .6s linear
}
.crumb:hover::after { transform:scaleX(1); background-position:100% 0 }

.current {
  color:#64748b; font-weight:600; padding:6px 0
}


/* ===== Glass Blue theme for All Converters (auto light/dark) ===== */
.ac-wrap.ac-glass { position: relative; }

.ac-wrap.ac-glass .ac-panel{
  /* Light mode “glass” */
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 24px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.6);
  border-radius: 16px;
  padding: 14px;
}

/* Heading gradient text (light) */
.ac-wrap.ac-glass .ac-panel h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: .3px;

  /* gradient */
  background: linear-gradient(90deg,#1d4ed8,#60a5fa);

  /* ✅ standard + vendor */
  background-clip: text;              /* standard */
  -webkit-background-clip: text;      /* webkit/blink */

  /* ✅ make text transparent so the bg shows through */
  color: transparent;                  /* works in Firefox */
  -webkit-text-fill-color: transparent;/* required in Safari/Chrome */
}


/* Group separator (light) */
.ac-wrap.ac-glass .ac-cat + .ac-cat{ border-top:1px dashed rgba(15,23,42,.12) }

/* Tiles (links) — light glass */
.ac-wrap.ac-glass .ac-grid a{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px; border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.80));
  border:1px solid rgba(37,99,235,.20);
  color:#2563eb; font-weight:600; font-size:.92rem; text-decoration:none;
  box-shadow:0 2px 6px rgba(2,6,23,.06);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s, color .18s ease;
}
.ac-wrap.ac-glass .ac-grid a:hover{
  transform:translateY(-2px);
  border-color:#93c5fd;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
  box-shadow:0 8px 18px rgba(2,6,23,.08);
  color:#1d4ed8;
} 
  
/* .ac-wrap.ac-glass .ac-grid a.ac-active{
  color:#fff; 
  font-weight:700;
  background:linear-gradient(180deg,#93c5fd,#3b82f6);
  border-color:#3b82f6; 
  box-shadow:0 10px 24px rgba(59,130,246,.28);
} */


/* ===== Dark mode variant (uses your existing body.dark-mode) ===== */
body.dark-mode .ac-wrap.ac-glass .ac-panel{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
body.dark-mode .ac-wrap.ac-glass .ac-panel h3{
  -webkit-text-fill-color: initial;
  color:#cfe3ff;
  text-shadow:0 0 20px #0e66ff40;
}

/* Group separator (dark) */
body.dark-mode .ac-wrap.ac-glass .ac-cat + .ac-cat{
  border-top:1px dashed rgba(255,255,255,.14);
}

/* Tiles (links) — dark glass */
body.dark-mode .ac-wrap.ac-glass .ac-grid a{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.20);
  color:#5aa8ff;
  box-shadow:none;
}
body.dark-mode .ac-wrap.ac-glass .ac-grid a:hover{
  transform:translateY(-2px);
  border-color:#7fb5ff;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
  box-shadow:0 8px 20px rgba(14,102,255,.15);
  color:#7fb5ff;
}
/* body.dark-mode .ac-wrap.ac-glass .ac-grid a.ac-active{
  color:#07132b; 
  font-weight:700;
  background:linear-gradient(180deg,#7fb5ff,#3e8aff);
  border-color:#7aaaff; 
  box-shadow:0 10px 24px rgba(14,102,255,.35);
} */



@media(max-width:420px){
  .trail>li:not(:first-child):not(:last-child){display:none}
}


/* --- Responsive tweaks --- */
@media (max-width:768px){
  header{flex-direction:row; min-height:auto; padding-bottom:1rem; justify-content:center}
  .converter-column{width:100%; max-height:100vh; overflow-y:auto}
  .main-flex{padding-left:0 !important; margin-left:5px}
  header img[alt="Universal Unit Converter"]{position:static; height:50px; width:165px; margin:0 0 0 5px}
  header img[alt="Universal Unit Converter Logo"]{margin-bottom:0}
  header .dark-mode-toggle{position:absolute; top:1rem; right:1rem; margin:0}

  #category-nav{margin-left:0; justify-content:flex-start; flex-wrap:wrap}
  #category-nav button{font-size:.65rem; padding:.2rem .4rem}

  .unit-list-box{max-height:250px}
  .unit-list-box input[type="text"]::placeholder{font-size:.8rem}

  /* keep cards narrow on phones */
  .converter-column, .common-conversions{max-width:360px}
}

@media (max-width:480px){
  #category-nav button{font-size:.59rem; padding:.40rem .3rem}
  input[placeholder*="Search From Unit"]::placeholder,
  input[placeholder*="Search To Unit"]::placeholder{font-size:1.1rem}
  .unit-list-box .unit-option{font-size:1em; padding:2px 4px; line-height:1}
}
 
 /* ===== All Converters (accordion) ===== */
.ac-wrap{
  max-width:360px;
  margin:16px auto 24px;
  padding:0 10px;
}
.ac-panel{
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:10px;
  padding:10px;
}
.ac-panel h3{
  margin:0 0 6px;
  color:var(--primary-color);
  font-size:1rem;
}

/* group */
.ac-cat{ border-top:1px dashed var(--border-color) }
.ac-cat:first-of-type{ border-top:0 }

/* header */
.ac-h{
  display:flex; align-items:center; gap:6px;
  cursor:pointer; padding:8px 0;
  font-size:.9rem; background:none; border:none; color:inherit; text-align:left; width:100%;
}
.ac-h .ac-chev{ margin-left:auto; transition:transform .25s ease }
.ac-h.ac-active .ac-chev{ transform:rotate(90deg) }

/* content */
.ac-c{ overflow:hidden; max-height:0; transition:max-height .28s ease }

/* grid of links */
.ac-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px; padding:6px 0 10px; margin:0;
}
.ac-grid a{
  display:flex; gap:6px; align-items:center;
  padding:6px 7px; border:1px solid var(--border-color); border-radius:8px;
  background:#fafafa; color:var(--text-color); text-decoration:none; font-size:.9rem;
}
body.dark-mode .ac-grid a{ background:#262b33 }
.ac-grid a:hover{ background:var(--result-bg); border-color:#b9d0ff }


@media (max-width:480px){
  .ac-grid{ grid-template-columns:1fr; }
}
.ac-hint{ margin:.3rem 0 0; color:#556; opacity:.85; font-size:.85rem; }
body.dark-mode .ac-hint{ color:#aab; opacity:.9; }
 


/* ===== Layout for Converter + Sidebar ===== */
.content-row {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Main converter expands */
.content-row .converter-column {
  flex: 1 1 auto;
  max-width: none;      /* allow it to grow */
  min-width: 0;         /* prevents overflow issues */
}

/* Sidebar fixed width */
.ac-wrap {
  flex: 0 0 360px;      /* ~360px wide on desktop */
  margin: 0;            /* remove vertical margins when inside row */
}

/* Keep sidebar visible while scrolling */
@media (min-width: 992px) {
  .ac-wrap { position: sticky; top: 16px; }
}

/* Responsive: stack on smaller screens */
@media (max-width: 991.98px) {
  .content-row { flex-direction: column; }
  .ac-wrap {
    flex: 0 1 auto;
    max-width: 600px;   /* matches card width */
    margin: 8px auto 0;
  }
  .content-row .converter-column {
    max-width: 600px;   /* match your cards */
    margin: 0 auto;
  }
}
 /* Make All Converters use same background as main converter box */
.ac-wrap.ac-glass .ac-panel {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}