/* HUROM Brand Tone – UI Polish (drop-in CSS)
   Save as: /css/hurom-theme.css
   Load after your base styles.
*/

/* ---------------------------
   Brand Tokens
----------------------------*/
:root{
  --hurom-green:#1aa34a;
  --hurom-green-2:#0f8a3b;
  --bg-tint:#f4fbf6;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e6edf0;
  --shadow: 0 14px 40px rgba(15,23,42,.08);
  --shadow-soft: 0 10px 26px rgba(15,23,42,.06);
  --radius:18px;
  --radius-sm:14px;
  --focus: rgba(26,163,74,.22);
}

/* ---------------------------
   Global Base
----------------------------*/
html,body{
  background: linear-gradient(180deg, var(--bg-tint) 0%, #ffffff 55%);
  color:var(--text);
}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Apple SD Gothic Neo", Arial, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: var(--hurom-green-2); }
a:hover{ color: var(--hurom-green); }
::selection{ background: rgba(26,163,74,.18); }

/* ---------------------------
   Header (Typography + Layout)
   - Fixes logo/status overlap
----------------------------*/
header.site-header{
  padding: 8px 0 16px !important;
  gap: 18px !important;
}
header.site-header h1{
  font-size: 22px !important;
  font-weight: 650 !important;
  letter-spacing: -0.4px !important;
}
header.site-header h1 span{
  font-weight: 450;
  color: var(--muted);
}
header.site-header .sub{
  margin-top: 7px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}

/* Right cluster: keep in one row (prevents overlap) */
.header-right{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}

/* Logo: smaller + max width cap */
.brand-logo{
  height:20px !important;
  width:auto !important;
  max-width:140px !important;
  object-fit:contain !important;
  filter: drop-shadow(0 8px 16px rgba(15,23,42,.10)) !important;
}

/* Status pill */
.topHint{
  flex:0 0 auto !important;
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(26,163,74,.18) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
  color: #2b3a4a !important;
}
.topHint b, .topHint strong{ color: var(--hurom-green-2); }

/* ---------------------------
   Hero (Contrast + Premium)
----------------------------*/
.hero{
  border-radius: calc(var(--radius) + 4px) !important;
  box-shadow: var(--shadow) !important;
  overflow:hidden;
  position:relative;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(2,6,23,.38) 0%, rgba(2,6,23,.18) 35%, rgba(2,6,23,.00) 70%);
  pointer-events:none;
}
.hero *{ position:relative; z-index:1; }
.hero h2{
  font-weight: 700 !important;
  letter-spacing: -0.3px;
}
.hero p{ opacity: .95; }

/* ---------------------------
   Cards (Filters / Downloads)
----------------------------*/
.card, .panel, .section, .box{
  border-radius: var(--radius) !important;
}
.card{
  background: var(--card) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: var(--shadow-soft) !important;
}
.card h3, .card h4{
  font-weight: 650;
  letter-spacing: -0.2px;
}

/* Filters header accent */
.filtersTitle, .filters h3, .filters .title{
  display:flex;
  align-items:center;
  gap:10px;
}
.filtersTitle::before, .filters h3::before, .filters .title::before{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background: var(--hurom-green);
  box-shadow: 0 0 0 6px rgba(26,163,74,.10);
}

/* ---------------------------
   Inputs (Selects / Buttons)
----------------------------*/
select, input{
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 12px !important;
  background: #fbfcfd !important;
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}
select:focus, input:focus{
  outline: none !important;
  border-color: rgba(26,163,74,.45) !important;
  box-shadow: 0 0 0 4px var(--focus) !important;
}
button, .btn{
  border-radius: 999px !important;
  border: 1px solid rgba(26,163,74,.28) !important;
  background: rgba(26,163,74,.08) !important;
  color: var(--hurom-green-2) !important;
  font-weight: 650;
  letter-spacing: -0.1px;
}
button:hover, .btn:hover{
  background: rgba(26,163,74,.14) !important;
  transform: translateY(-1px);
}
button:active, .btn:active{ transform: translateY(0); }

/* ---------------------------
   Downloads (Card split)
----------------------------*/
.downloads .group, .downloads .panel, .downloads .box{
  border: 1px dashed rgba(26,163,74,.18) !important;
  background: rgba(244,251,246,.65) !important;
}
.downloads h3, .downloads h4{ color: #0b2f1b; }

/* ---------------------------
   Footer
----------------------------*/
footer{ color: var(--muted); }

/* ---------------------------
   Responsive Polish
----------------------------*/
@media (max-width:720px){
  header.site-header h1{ font-size: 18px !important; }
  header.site-header .sub{ font-size: 12px !important; }
  .topHint{ font-size: 11px !important; }

  /* keep header clean: hide logo earlier to avoid wrapping */
  .brand-logo{ display:none !important; }
  .hero{ border-radius: var(--radius) !important; }
}



/* ---------------------------
   Header layout update (no Ready/items pill)
   - Desktop: logo sits at top-right
   - Mobile: logo moves to top-left above headline
----------------------------*/
.header-right{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  gap:0 !important;
}

.brand-logo{
  height:20px !important;
  max-width:140px !important;
}

/* Mobile: logo above copy, left aligned */
@media (max-width:720px){
  header.site-header{ gap:12px !important; }
  .header-right{
    order:-1 !important;
    width:100% !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
  }
  .brand-logo{
    display:block !important;
    height:22px !important;
    max-width:160px !important;
  }
}