/* modern-2026.css — 2026 skin layered over Bootstrap 3 for the eurocontent sites.
   Loaded LAST (after bootstrap + main.css) so it wins. Light theme (safe on BS3). */
:root{
  color-scheme: light;
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f1f3f7;
  --text:#161a22; --muted:#5b6473; --border:#e4e7ee;
  --accent:#4f46e5; --accent-hover:#4338ca;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.05);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
body{
  font-family:var(--font)!important;
  background:var(--bg)!important; color:var(--text)!important;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.container{max-width:960px!important; width:auto!important; padding-left:16px; padding-right:16px;}
.navbar .container{padding-left:16px; padding-right:16px;}

h1,h2,h3,h4,h5{font-family:var(--font); letter-spacing:-.01em; line-height:1.28; color:var(--text);}
h1{font-weight:700; font-size:clamp(1.6rem,4vw,2.2rem);}
h2{font-weight:600; font-size:1.4rem;}
h3{font-weight:600; font-size:1.14rem;}
p{color:var(--text);}
a{color:var(--accent);}
a:hover,a:focus{color:var(--accent-hover);}
hr{border-top:1px solid var(--border);}

/* ---- top navbar -> modern header ---- */
.navbar.navbar-default{
  background:var(--surface)!important; border:0!important;
  border-bottom:1px solid var(--border)!important; border-radius:0!important;
  box-shadow:0 1px 2px rgba(16,24,40,.04); margin-bottom:26px; min-height:60px;
}
.navbar-default .navbar-brand{color:var(--text)!important; font-weight:700; font-size:1.15rem;}
.navbar-default .navbar-nav>li>a{
  color:var(--muted)!important; font-weight:500; border-radius:8px; margin:8px 2px; padding:8px 12px;
}
.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{
  background:var(--surface-2)!important; color:var(--text)!important;
}
.navbar-default .navbar-toggle{border-color:var(--border)!important;}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background:var(--surface-2)!important;}
.navbar-default .navbar-toggle .icon-bar{background:var(--muted)!important;}
.navbar-default .navbar-collapse{border-color:var(--border)!important;}

/* ---- buttons ---- */
.btn{
  border-radius:var(--radius-sm)!important; font-weight:600!important;
  border:1px solid transparent!important; padding:9px 18px; transition:background .15s,border-color .15s,transform .05s;
  box-shadow:none!important; text-shadow:none!important; background-image:none!important;
}
.btn:active{transform:translateY(1px);}
.btn-default{background:var(--surface)!important; color:var(--text)!important; border-color:var(--border)!important;}
.btn-default:hover,.btn-default:focus{background:var(--surface-2)!important; color:var(--text)!important;}
.btn-primary{background:var(--accent)!important; color:#fff!important;}
.btn-primary:hover,.btn-primary:focus{background:var(--accent-hover)!important;}
.btn-warning{background:#f59e0b!important; color:#fff!important;}
.btn-warning:hover,.btn-warning:focus{background:#d97706!important;}
.btn-info{background:#0ea5e9!important; color:#fff!important;}
.btn-info:hover,.btn-info:focus{background:#0284c7!important;}
.btn-success{background:#16a34a!important; color:#fff!important;}
.btn-success:hover,.btn-success:focus{background:#15803d!important;}
.btn-danger{background:#dc2626!important; color:#fff!important;}
.btn-lg{padding:12px 24px; font-size:1.05rem;}

/* ---- cards / panels / wells ---- */
.panel,.well{
  background:var(--surface)!important; border:1px solid var(--border)!important;
  border-radius:var(--radius)!important; box-shadow:var(--shadow)!important;
}
.panel-heading{background:var(--surface-2)!important; border-bottom:1px solid var(--border)!important; border-radius:var(--radius) var(--radius) 0 0!important;}
.panel-default>.panel-heading{color:var(--text)!important;}

/* ---- forms ---- */
.form-control,input[type=text],input[type=email],input[type=number],input[type=search],textarea,select{
  border-radius:var(--radius-sm)!important; border:1px solid var(--border)!important;
  box-shadow:none!important; background:var(--surface-2)!important; color:var(--text)!important;
  font-family:inherit;
}
.form-control:focus,textarea:focus,select:focus,input:focus{
  border-color:var(--accent)!important; box-shadow:0 0 0 3px rgba(79,70,229,.22)!important; outline:none;
}

/* ---- tables (quizzes) ---- */
.table{background:var(--surface); border-radius:12px;}
.table>thead>tr>th{border-bottom:2px solid var(--border); color:var(--muted); font-weight:600;}
.table>tbody>tr>td,.table>tbody>tr>th{border-top:1px solid var(--border);}
.table-striped>tbody>tr:nth-of-type(odd){background:var(--surface-2);}
.table-hover>tbody>tr:hover{background:color-mix(in srgb,var(--accent) 7%,var(--surface));}

/* ---- content media ---- */
.container img,#content img,#description img{max-width:100%; height:auto;}

/* ---- code ---- */
code{background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:.1em .4em; color:var(--text); font-family:var(--mono);}
pre{background:#0f172a; color:#e2e8f0; border-radius:var(--radius-sm); padding:14px 16px; overflow-x:auto; border:1px solid var(--border); font-family:var(--mono); font-size:.86rem;}

/* ---- modals ---- */
.modal-content{border-radius:var(--radius)!important; border:1px solid var(--border)!important; box-shadow:0 20px 60px rgba(0,0,0,.25)!important;}
.modal-header,.modal-footer{border-color:var(--border)!important;}

/* ---- footer ---- */
#footer{background:var(--surface)!important; border-top:1px solid var(--border); margin-top:40px; padding:24px 0; color:var(--muted); text-align:center;}
#footer a{color:var(--muted);}
#footer a:hover{color:var(--accent);}

/* ---- spacing helpers ---- */
.ad-holder{margin:18px auto; text-align:center;}
.center-block{margin-left:auto; margin-right:auto;}
.top-buffer{margin-top:20px;}

/* keep alerts readable */
.alert{border-radius:var(--radius-sm);}

/* --- sizeconversion.net specifics --- */
/* kill the old bright-green header banner -> clean modern hero */
#headerSection{background:var(--surface)!important;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 18px;margin:10px 0 20px;text-align:center}
#headerSection h1{margin:0 0 10px;font-style:normal;color:var(--text)}
#headerSection h1 i{font-style:normal}
#headerSection .fa{color:var(--accent);margin-right:8px}
#headerSection p{color:var(--muted);margin:.3rem 0}
.wrap{padding-top:6px}
/* category link grid -> cards */
.row .col-sm-4{margin-bottom:14px}
h2.media-heading{margin:0}
.media-heading a{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:15px 18px;box-shadow:var(--shadow);transition:border-color .15s,transform .1s;font-size:1.1rem;font-weight:600;color:var(--text)}
.media-heading a:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none;color:var(--accent)}
.media-heading + p{color:var(--muted);font-size:.85rem;padding:6px 4px 0}