/*
Theme Name: Medhin Teklay / Billodig
Description: Custom theme for the Medhin Teklay group site and its Billodig engineering-equipment subsidiary. Network-activated across the Multisite install.
Author: Interact International (for Medhin Teklay)
Version: 1.0
*/

:root{
  --ink: oklch(18% 0.02 260);
  --ink-soft: oklch(46% 0.02 260);
  --surface: oklch(99% 0.003 90);
  --line: oklch(90% 0.006 260);
  --blue: oklch(38% 0.15 262);
  --blue-dark: oklch(24% 0.09 262);
  --red: oklch(56% 0.21 27);
  --mt-navy: oklch(22% 0.035 255);
  --mt-navy-2: oklch(30% 0.04 255);
  --mt-fog: oklch(93% 0.008 255);
}
*{box-sizing:border-box;}
html{margin:0;}
body{margin:0;font-family:"Work Sans", system-ui, sans-serif;background:var(--surface);color:var(--ink);}
h1,h2,h3,.navlink,.wordmark,.kicker{font-family:"Oswald","Work Sans",sans-serif;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--red);}
img{max-width:100%;display:block;}
.wrap{width:100%;max-width:1440px;margin:0 auto;background:var(--surface);}
.row{display:flex;align-items:center;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:2px;font-family:"Oswald",sans-serif;font-weight:600;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;}
.btn-primary{background:var(--red);color:#fff;}

/* Nav */
.site-nav{display:flex;align-items:center;justify-content:space-between;padding:0 56px;height:88px;background:#fff;border-bottom:1px solid var(--line);}
.site-nav .navlinks{display:flex;gap:38px;}
.navlink{font-size:14px;font-weight:600;letter-spacing:0.03em;color:var(--ink-soft);text-decoration:none;}
.navlink:hover{color:var(--blue);}
.navlink.active{color:var(--blue);border-bottom:2px solid var(--red);padding-bottom:28px;}
.mt-nav .navlink{font-size:14px;}
.mt-nav .navlink.active{color:var(--ink);border-bottom-color:var(--red);}

/* Page header band (inner pages) */
.page-header{position:relative;width:100%;min-height:190px;background:linear-gradient(120deg, var(--blue-dark) 0%, var(--blue) 100%);overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:40px 56px;}
.page-header .crumb{position:relative;font-size:12px;color:oklch(85% 0.02 262);margin-bottom:10px;}
.page-header h1{position:relative;margin:0;font-size:38px;font-weight:600;color:#fff;}
.page-header .sub{position:relative;margin-top:8px;font-size:13px;color:oklch(85% 0.02 262);}

/* Cards / grids */
.grid-5{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px;}
.grid-2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px;}
.card{border:1px solid var(--line);border-radius:4px;padding:32px 26px;background:#fff;display:block;text-decoration:none;color:inherit;transition:border-color 0.15s, box-shadow 0.15s;}
.card:hover{border-color:var(--blue);box-shadow:0 4px 16px oklch(38% 0.15 262 / 0.1);}
.tile{border:1px solid var(--line);border-radius:4px;padding:28px 12px;display:block;text-decoration:none;color:inherit;transition:border-color 0.15s, box-shadow 0.15s;}
.tile:hover{border-color:var(--blue);box-shadow:0 4px 16px oklch(38% 0.15 262 / 0.1);}
.card .thumb{height:140px;margin:-32px -26px 20px;border-radius:4px 4px 0 0;background:oklch(95% 0.01 262);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.kicker{font-size:13px;letter-spacing:0.2em;font-weight:600;color:var(--blue);margin-bottom:6px;}

.pcard{border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden;display:flex;flex-direction:column;}
.pcard.hot{border-color:var(--red);position:relative;}
.pcard .thumb{height:170px;background:oklch(95% 0.01 262);display:flex;align-items:center;justify-content:center;}
.pcard.hot .thumb{background:oklch(20% 0.01 262);}
.pcard .body{padding:22px 22px 24px;}
.specrow{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);padding:3px 0;border-bottom:1px solid var(--line);}
.specrow:last-child{border-bottom:none;}
.hot-badge{position:absolute;top:14px;left:14px;background:var(--red);color:#fff;font-size:11px;font-weight:700;letter-spacing:0.06em;padding:4px 10px;border-radius:2px;z-index:2;}

/* Spec table (detail page) */
.specgrid{display:grid;grid-template-columns:110px 1fr auto;font-size:13px;}
.specgrid.narrow{grid-template-columns:1fr auto;}
.specgrid > div{padding:9px 12px;border-bottom:1px solid var(--line);}
.catcell{font-weight:600;color:var(--blue);background:oklch(96% 0.01 262);}
.labelcell{color:var(--ink-soft);}
.valcell{font-weight:600;text-align:right;}
.sechead{background:var(--blue);color:#fff;padding:12px 16px;font-family:"Oswald";font-weight:600;font-size:14px;letter-spacing:0.05em;border-radius:3px 3px 0 0;}

/* Footer */
.site-footer{background:var(--blue-dark);color:oklch(88% 0.01 260);padding:44px 56px 28px;}
.site-footer.mt{background:var(--mt-navy);}
.footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:28px;border-bottom:1px solid oklch(42% 0.06 262);}
.footer-bottom{display:flex;gap:80px;padding-top:28px;font-size:13px;line-height:2;}
.wordmark-dark{font-family:"Oswald";font-size:22px;font-weight:700;color:#fff;font-style:italic;}
.wordmark-dark .tri{color:var(--red);}

/* Contact form */
.field{margin-bottom:20px;}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:0.04em;color:var(--ink-soft);margin-bottom:8px;}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:3px;padding:13px 14px;font-family:"Work Sans";font-size:14px;color:var(--ink);background:#fff;}
.infoline{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid oklch(40% 0.06 262);}

/* Responsive */
@media (max-width: 900px){
  .grid-5{grid-template-columns:repeat(2, minmax(0,1fr));}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .site-nav .navlinks{display:none;}
  .page-header{padding:24px;}
  .site-footer{padding:32px 24px;}
  .footer-bottom{flex-direction:column;gap:16px;}
}