/* ═══════════════════════════════════════════════════════════
   Unit Converter Pages — CSS Reskin (Orange/Amber Theme)
   
   Targets exact class names from converter page HTML:
   .converter-container, .leftlabelclass, .rightlabelclass,
   .resultClass, #resultText, input[type="number"]
   
   LOAD: After existing CSS, or replace it entirely.
   SCOPE: All 729 converter pages under /convert/
   ═══════════════════════════════════════════════════════════ */

/* ══ PAGE BACKGROUND ══ */
body {
  background: #0B1120 !important;
}

.site-main,
main,
.elementor,
.elementor-section,
.elementor-top-section,
.elementor-inner-section,
.elementor-element,
.elementor-widget-wrap,
.elementor-column-wrap,
.elementor-widget,
.elementor-container,
.elementor-row {
  background: transparent !important;
}

/* ══ CONVERTER WIDGET ══ */
.converter-container {
  background: #111B2E !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 32px 28px !important;
  border: 1px solid rgba(55,75,100,0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Rainbow top accent bar */
.converter-container::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #F59E0B, #F97316, #EF4444) !important;
  z-index: 1 !important;
}

/* Inner table layout fix */
.converter-container table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
}

.converter-container table tr {
  background: transparent !important;
}

.converter-container table td {
  padding: 8px 10px !important;
  border: none !important;
  border-bottom: none !important;
  background: transparent !important;
  vertical-align: middle !important;
}

.converter-container table tr:hover td {
  background: transparent !important;
}

/* ══ FROM/TO LABELS ══ */
.leftlabelclass {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #5A7090 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  float: right !important;
}

.rightlabelclass {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #C8D8E8 !important;
  float: left !important;
}

/* ══ INPUT FIELDS ══ */
.converter-container input[type="number"] {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  border-radius: 12px !important;
  border: 1px solid rgba(55,75,100,0.4) !important;
  background: #0B1120 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
  box-sizing: border-box !important;
}

.converter-container input[type="number"]:focus {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15) !important;
}

.converter-container input[type="number"]::placeholder {
  color: #5A7090 !important;
  font-weight: 400 !important;
}

/* Read-only (To field) — amber tinted */
.converter-container input[type="number"]:read-only {
  background: rgba(245,158,11,0.04) !important;
  border: 1px solid rgba(245,158,11,0.15) !important;
  color: #F59E0B !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* ══ RESULT TEXT ══ */
p.resultClass {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #F59E0B !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  display: inline !important;
}

p#resultText {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #FBBF24 !important;
  display: inline !important;
  margin: 0 !important;
}

/* ══ PAGE TITLE (H1) ══ */
h1,
.entry-title,
.elementor-heading-title {
  font-family: 'Laila', serif !important;
  color: #F59E0B !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 3.5vw, 32px) !important;
  line-height: 1.3 !important;
  margin-bottom: 24px !important;
}

/* ══ SECTION HEADINGS (H2) ══ */
h2,
.elementor-widget-heading h2 {
  font-family: 'Laila', serif !important;
  color: #F59E0B !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 2.5vw, 24px) !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid rgba(245,158,11,0.2) !important;
  margin-bottom: 20px !important;
  margin-top: 36px !important;
}

/* ══ H3 HEADINGS ══ */
h3,
.elementor-widget-heading h3 {
  font-family: 'DM Sans', sans-serif !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: clamp(16px, 2vw, 20px) !important;
}

/* ══ BODY TEXT ══ */
p:not(.resultClass):not(#resultText),
.elementor-widget-text-editor p,
.elementor-text-editor p {
  font-family: 'DM Sans', sans-serif !important;
  color: #8899AA !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
}

/* Bold text */
p strong, p b {
  color: #C8D8E8 !important;
}

/* Underlined labels (Definition:, History/Origin:, Current Uses:, Where to Use:) */
p u {
  color: #F59E0B !important;
  text-decoration-color: rgba(245,158,11,0.3) !important;
  text-underline-offset: 2px !important;
}

/* ══ CONVERSION TABLE (the data table below content) ══ */
table:not(.converter-container table) {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(55,75,100,0.3) !important;
  margin: 24px 0 !important;
}

/* Table headers */
table:not(.converter-container table) th,
table:not(.converter-container table) thead td,
table:not(.converter-container table) tr:first-child td {
  padding: 14px 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #F59E0B !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(55,75,100,0.3) !important;
  background: rgba(245,158,11,0.06) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Table data cells */
table:not(.converter-container table) tbody td,
table:not(.converter-container table) tr:not(:first-child) td {
  padding: 12px 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: #C8D8E8 !important;
  border-bottom: 1px solid rgba(55,75,100,0.12) !important;
  background: #111B2E !important;
}

table:not(.converter-container table) tr:nth-child(even) td {
  background: #0E1726 !important;
}

table:not(.converter-container table) tr:last-child td {
  border-bottom: none !important;
}

table:not(.converter-container table) tr:hover td {
  background: rgba(245,158,11,0.03) !important;
}

/* ══ SIDEBAR LINKS (Right Column — 27 unit links) ══ */
aside a,
.sidebar a,
.widget_nav_menu a,
.widget_nav_menu ul li a,
.elementor-nav-menu a,
.elementor-widget-wp-widget-nav_menu a {
  display: block !important;
  padding: 11px 16px !important;
  margin-bottom: 4px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #8899AA !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  border: 1px solid rgba(55,75,100,0.15) !important;
  background: #111B2E !important;
  transition: all 0.2s !important;
}

aside a:hover,
.sidebar a:hover,
.widget_nav_menu a:hover,
.widget_nav_menu ul li a:hover,
.elementor-nav-menu a:hover {
  color: #F59E0B !important;
  border-color: rgba(245,158,11,0.3) !important;
  background: rgba(245,158,11,0.04) !important;
  padding-left: 20px !important;
}

/* Active sidebar link */
.widget_nav_menu .current-menu-item a,
.current_page_item a {
  color: #F59E0B !important;
  border-color: rgba(245,158,11,0.4) !important;
  background: rgba(245,158,11,0.06) !important;
  font-weight: 600 !important;
}

/* Remove bullets */
.widget_nav_menu ul,
aside ul,
.sidebar ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ══ BODY TEXT LINKS ══ */
.entry-content a:not(.elementor-button),
.elementor-text-editor a,
article a:not([class]) {
  color: #F59E0B !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(245,158,11,0.25) !important;
  transition: all 0.2s !important;
}

.entry-content a:not(.elementor-button):hover,
.elementor-text-editor a:hover {
  color: #FBBF24 !important;
  border-bottom-color: #FBBF24 !important;
}

/* ══ DIVIDERS ══ */
.elementor-widget-divider .elementor-divider-separator,
.elementor-divider,
hr {
  border-color: rgba(55,75,100,0.2) !important;
  background: rgba(55,75,100,0.2) !important;
}

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar { width: 8px }
::-webkit-scrollbar-track { background: #0B1120 }
::-webkit-scrollbar-thumb { background: rgba(55,75,100,0.4); border-radius: 4px }
::-webkit-scrollbar-thumb:hover { background: rgba(245,158,11,0.3) }

/* ══ SELECTION ══ */
::selection { background: rgba(245,158,11,0.3); color: #FFFFFF }
::-moz-selection { background: rgba(245,158,11,0.3); color: #FFFFFF }

/* ══ MOBILE ══ */
@media (max-width: 768px) {
  .converter-container {
    padding: 24px 18px !important;
    margin: 0 10px !important;
  }
  .converter-container input[type="number"] {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }
  .leftlabelclass { font-size: 12px !important }
  .rightlabelclass { font-size: 13px !important }
}