/* =====================================================================
   ICMET 2027 — Modern Academic Conference Theme (full redesign)
   Loaded AFTER css/style.css on every page, so it has override priority.
   ONLY styling changes. All text / links / images are untouched.
   Strategy: neutralize the old template skeleton (fixed 1000px box, image
   nav, dated textures, float columns) and rebuild a clean, professional
   layout with CSS overrides + !important (the template uses heavy IDs).
   ===================================================================== */

:root{
  --navy:#163a4f;        /* deep slate-navy: header / footer / table heads */
  --navy-2:#0f2c3c;      /* darker band edge */
  --accent:#0e8a9e;      /* teal accent */
  --accent-d:#0b6f7f;    /* accent hover */
  --ink:#1d2c36;         /* headings */
  --text:#3c4a52;        /* body */
  --muted:#6b7a83;       /* secondary */
  --bg:#eef1f3;          /* page background */
  --card:#ffffff;
  --soft:#f3f7f9;        /* sidebar / soft card */
  --line:#e2e9ec;        /* borders */
  --maxw:1160px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Arial,sans-serif;
}

/* ---------- 0. Reset dated template textures & base type ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg) !important;
  color:var(--text) !important;
  font:16px/1.85 var(--font) !important;
}
/* kill random inline <font> colors for a unified, professional look */
font[color]{ color:inherit !important; }

a{ color:var(--accent-d); text-decoration:none; transition:color .18s linear; }
a:hover{ color:var(--accent); text-decoration:underline; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font); color:var(--ink); font-weight:700; line-height:1.3;
}
h1{font-size:30px} h2{font-size:23px} h3{font-size:18px} h4{font-size:16px}

p{ font-size:16px !important; line-height:1.85 !important; color:var(--text) !important;
    margin:0 0 14px !important; }
img{ max-width:100%; }

/* ---------- 1. Header / top nav (full-width band, clean bar) ---------- */
#top{
  width:100% !important; height:auto !important; min-height:66px;
  background:var(--navy) !important;
  border-bottom:3px solid var(--accent) !important;
  border-top:none !important;
}
.top-inner{
  width:100% !important; max-width:var(--maxw); margin:0 auto !important;
  height:auto !important; min-height:66px;
  display:flex !important; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px 18px;
  padding:8px 22px !important; box-sizing:border-box;
}
#logo{ float:none !important; padding:0 !important; display:flex; align-items:center; }
#logo img{ display:block; }

#primary-nav{ float:none !important; height:auto !important; margin:0 !important; }
#primary-nav ul{
  display:flex !important; align-items:center; flex-wrap:wrap;
  gap:2px; margin:0 !important; padding:0 !important; line-height:1 !important;
}
#primary-nav ul li{
  float:none !important; position:relative; margin:0 !important; z-index:60;
}
#primary-nav ul a{
  float:none !important; height:auto !important; line-height:1 !important;
  display:block !important; padding:12px 14px !important;
  color:#dcebef !important; font-size:15px !important; font-weight:500 !important;
  letter-spacing:0 !important; border-bottom:2px solid transparent !important;
  background:none !important; margin-bottom:0 !important;
}
#primary-nav ul a:hover,
#primary-nav ul li.sfHover > a,
#primary-nav ul li.current > a,
#primary-nav ul li.current-menu-item > a{
  color:#ffffff !important; background:none !important;
  border-bottom:2px solid var(--accent) !important;
  text-decoration:none !important;
}
/* dropdowns — hidden by default, revealed on hover / sfHover (works without JS) */
#primary-nav ul ul{
  position:absolute !important; top:100% !important; left:0 !important;
  width:auto !important; min-width:210px !important;
  background:var(--navy) !important;
  border:1px solid var(--navy-2) !important; border-top:2px solid var(--accent) !important;
  border-radius:0 0 9px 9px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.22) !important;
  padding:6px 0 !important; margin:0 !important; z-index:600;
  opacity:0 !important; visibility:hidden !important;
  transform:translateY(8px) !important;
  transition:opacity .18s ease, transform .18s ease, visibility .18s !important;
  pointer-events:none !important;
}
#primary-nav ul li:hover > ul,
#primary-nav ul li.sfHover > ul{
  opacity:1 !important; visibility:visible !important;
  transform:translateY(0) !important; pointer-events:auto !important;
}
#primary-nav ul ul li{ width:100% !important; float:none !important; }
#primary-nav ul ul li a{
  float:none !important; height:auto !important; line-height:1.4 !important;
  color:#dcebef !important; font-size:14px !important; font-weight:400 !important;
  padding:9px 16px !important; white-space:nowrap !important;
  border-bottom:none !important;
}
#primary-nav ul ul li a:hover{
  color:#ffffff !important; background:rgba(255,255,255,.09) !important;
  border-bottom:none !important; padding-left:20px !important;
}

/* ---------- 2. Banner (self-contained, CDN-free fade carousel) ---------- */
#banner{
  width:auto !important; max-width:var(--maxw); margin:26px auto 0 !important;
  padding:0 22px !important; background:none !important;
}
.banner-inner{
  position:relative !important; width:100% !important; height:380px !important;
  border:none !important; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 30px rgba(20,40,55,.16);
}
.banner-inner .flexslider{ position:relative !important; height:100% !important; margin:0 !important; }
.banner-inner .slides{
  position:relative !important; height:100% !important;
  margin:0 !important; padding:0 !important; list-style:none !important;
}
.banner-inner .slides li{
  position:absolute !important; inset:0 !important; margin:0 !important; padding:0 !important;
  opacity:0 !important; z-index:1 !important;
  transition:opacity .8s ease !important;
}
.banner-inner .slides li > div{ margin:0 !important; padding:0 !important; height:100% !important; }
#banner .banner-inner img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  display:block !important; border:none !important;
}
/* fallback: if JS is disabled, show the first slide */
.banner-inner .slides li:first-child{ opacity:1 !important; z-index:2 !important; }
.banner-inner .flexslider.carousel-on .slides li:first-child{ opacity:0 !important; }
.banner-inner .flexslider.carousel-on .slides li.is-active{ opacity:1 !important; z-index:2 !important; }
/* dot indicators */
.banner-dots{
  position:absolute !important; bottom:14px !important; left:0 !important; right:0 !important;
  display:flex !important; justify-content:center; gap:8px !important; z-index:5 !important;
}
.banner-dots button{
  width:10px !important; height:10px !important; padding:0 !important; border:none !important;
  border-radius:50% !important; cursor:pointer !important;
  background:rgba(255,255,255,.55) !important; transition:background .2s, transform .2s !important;
}
.banner-dots button.active{ background:#ffffff !important; transform:scale(1.25) !important; }
.pattern{ display:none !important; }

/* ---------- 3. Title bar (inner pages) ---------- */
.title-outer{
  width:100% !important; height:auto !important; padding:0 !important;
  background:var(--navy) !important; border-bottom:3px solid var(--accent) !important;
}
.title{
  width:100% !important; max-width:var(--maxw); height:auto !important;
  margin:0 auto !important; line-height:1.3 !important;
  font-size:25px !important; color:#ffffff !important; text-shadow:none !important;
  letter-spacing:0 !important; font-weight:700;
  padding:20px 22px !important; box-sizing:border-box;
}
.title span{ color:#bfe2ea !important; }

/* ---------- 4. Content shell (full-width bands, centered white card) ---------- */
#middle-sdo1, #sdo2{
  width:auto !important; margin:0 !important; padding:0 !important;
  background:none !important; display:block !important;
}
#middle{
  display:flex !important; flex-wrap:wrap; align-items:flex-start; gap:44px;
  width:auto !important; max-width:var(--maxw); margin:26px auto !important;
  background:var(--card) !important;
  border:1px solid var(--line) !important; border-radius:14px;
  padding:38px 42px !important;
  box-shadow:0 6px 26px rgba(20,40,55,.07);
}
.clearfix{ display:none !important; }

/* main column(s) */
.who-home, .leftsec, .blogleft, .entry-content.clearfix{
  flex:1 1 560px !important; min-width:0 !important;
  float:none !important; width:auto !important; margin:0 !important;
  padding:0 !important;
}
/* sidebar column */
.tweet, .rightsec{
  flex:0 0 300px !important; width:auto !important;
  float:none !important; margin:0 !important; padding:0 !important;
  background:var(--soft) !important; border:1px solid var(--line) !important;
  border-radius:12px; padding:22px 20px !important; align-self:flex-start;
}

/* ---------- 5. Section headings ---------- */
h2.patrn, h2.blue{
  font-size:23px !important; color:var(--navy) !important; font-weight:700 !important;
  font-family:var(--font) !important; letter-spacing:0 !important;
  padding:0 0 10px !important; margin:0 0 20px !important;
  border-bottom:2px solid var(--accent) !important;
  background:none !important; text-align:left !important;
}
.tweet h2.blue, .rightsec h2.blue{
  font-size:18px !important; margin:26px 0 14px !important;
  border-bottom:2px solid var(--accent) !important;
}
.tweet h2.blue:first-of-type{ margin-top:0; }

/* ---------- 6. Committee / detail lists ---------- */
.detail h3{
  font-size:17px !important; color:var(--navy) !important; font-weight:700 !important;
  border-left:3px solid var(--accent) !important; padding-left:12px !important;
  margin:24px 0 10px !important; line-height:1.4 !important;
}
.detail h3:first-child{ margin-top:0; }
.detail p{ margin:0 0 11px !important; color:var(--text) !important; }

/* ---------- 7. Tables (registration / schedule / inclusions) ---------- */
#middle table{
  border-collapse:collapse !important; width:100% !important;
  margin:0 0 22px !important; font-size:14.5px !important; line-height:1.7 !important;
  color:var(--text) !important;
}
#middle table td, #middle table th{
  padding:11px 14px !important; border:1px solid var(--line) !important;
  vertical-align:top !important; text-align:left !important;
}
#middle table th{
  background:var(--navy) !important; color:#ffffff !important; font-weight:600 !important;
}
#middle table tr:nth-child(even) td{ background:#fafcfc; }
#middle table p{ margin:0 !important; }
/* button-like links used as row labels -> clean bold labels */
#middle table a.btn, #middle table a.green_btn, #middle table a.readmore.flleft{
  background:transparent !important; background-image:none !important;
  color:var(--navy) !important; font-weight:700 !important; font-size:15px !important;
  padding:0 !important; margin:0 0 8px !important; display:block !important;
  float:none !important; box-shadow:none !important; border:none !important; text-shadow:none !important;
}

/* ---------- 8. Buttons (flat, accent) ---------- */
a.black_btn, a.blue-btn, a.readmore, a.btn, a.green_btn{
  background:var(--accent) !important; background-image:none !important;
  border:none !important; border-radius:7px !important;
  color:#ffffff !important; font-size:14px !important; font-weight:600 !important;
  font-family:var(--font) !important;
  padding:11px 20px !important; text-shadow:none !important; box-shadow:none !important;
  float:none !important; display:inline-block !important; margin:6px 0 16px !important;
}
a.black_btn:hover, a.blue-btn:hover, a.readmore:hover, a.btn:hover, a.green_btn:hover{
  background:var(--accent-d) !important; color:#ffffff !important; text-decoration:none !important;
}
/* label-style anchors (Submission Method / Publication on home) */
.who-home a.black_btn, .who-home a.btn{
  display:inline-block !important; background:var(--soft) !important;
  color:var(--navy) !important; border:1px solid var(--line) !important;
  border-left:3px solid var(--accent) !important; border-radius:6px !important;
  padding:9px 14px !important; margin:4px 0 14px !important; font-weight:700 !important;
}

/* ---------- 9. Alert boxes ---------- */
.alert{
  height:auto !important; min-height:0 !important; width:auto !important;
  float:none !important; padding:13px 16px !important; text-align:left !important;
  line-height:1.7 !important; margin-bottom:16px !important; border-radius:8px !important;
  font-size:14.5px !important;
}

/* ---------- 10. Accordion / toggle ---------- */
#accordion{ width:100% !important; margin-bottom:30px !important; }
.toggle h4{
  font-size:15px !important; font-family:var(--font) !important;
  color:var(--navy) !important; font-weight:600 !important;
  background:var(--soft) !important; border:1px solid var(--line) !important;
  border-radius:8px !important; padding:13px 15px !important; cursor:pointer !important;
}
.toggle h4.ui-state-active{ background:#fff !important; border-bottom:none !important; border-radius:8px 8px 0 0 !important; }
.toggle-inner{
  padding:15px 17px !important; border:1px solid var(--line) !important;
  border-top:none !important; border-radius:0 0 8px 8px !important;
  font-size:15px !important; line-height:1.85 !important;
}
.toggle-inner span[style]{ font-size:15px !important; color:var(--text) !important; }

/* ---------- 11. Message band (cfp top info) ---------- */
.message{
  font-family:var(--font) !important; font-size:18px !important; font-weight:600 !important;
  color:var(--navy) !important; text-align:center !important;
  padding:22px 30px !important; border-bottom:3px solid var(--accent) !important;
  background:var(--soft) !important; line-height:1.6 !important;
}

/* ---------- 12. Sidebar cards (Important Date / Contact / logos) ---------- */
.tweet-box{
  background:#fff !important; border:1px solid var(--line) !important;
  border-left:3px solid var(--accent) !important; border-bottom:1px solid var(--line) !important;
  border-radius:8px !important; float:none !important; width:auto !important;
  margin-bottom:12px !important; padding:12px 14px !important; font-size:14.5px !important;
  line-height:1.6 !important; color:var(--text) !important;
}
.tweet-box a{ border-bottom:none !important; color:var(--accent-d) !important; }
.tweet-box a:hover{ color:var(--accent) !important; }
.tweet-box b, .tweet-box strong{ color:var(--navy); }
.tweet-box img{ vertical-align:middle; margin-right:4px; }
/* sponsor / partner logos grid */
.tweet img[width="200"]{
  display:inline-block !important; width:118px !important; height:auto !important;
  max-height:56px !important; object-fit:contain !important;
  margin:6px 8px 6px 0 !important; background:#fff !important; padding:8px !important;
  border:1px solid var(--line) !important; border-radius:8px !important; vertical-align:middle !important;
}

/* ---------- 13. Contact detail ---------- */
.detail p img{ vertical-align:middle; margin-right:4px; }

/* ---------- 14. Keynote speakers ---------- */
.talk-title{ color:var(--navy) !important; font-size:16px !important; font-weight:700 !important; }
.speaker-item{ border-bottom:1px solid var(--line) !important; align-items:flex-start !important; padding:14px 0 !important; }
.speaker-name{ color:var(--ink) !important; font-weight:700 !important; }
.speaker-uni{ color:#5a6b72 !important; }
.speaker-img{ border-radius:10px !important; box-shadow:0 3px 12px rgba(0,0,0,.12) !important; }

/* ---------- 15. Venue page ---------- */
.entry-content.clearfix{ max-width:100% !important; margin:0 !important; padding:0 !important; background:transparent !important; }
.entry-content.clearfix h2{ font-size:26px !important; color:var(--navy) !important; text-align:center !important; margin:0 0 12px !important; }
.entry-content.clearfix h3{ font-size:21px !important; color:var(--accent-d) !important; text-align:center !important; margin:0 0 14px !important; }
.entry-content.clearfix h4{ font-size:18px !important; color:var(--navy) !important; text-align:center !important; margin:0 0 16px !important; }
.entry-content.clearfix p{ font-size:16px !important; text-align:left !important; line-height:1.85 !important; }
.entry-content.clearfix img{
  max-width:100% !important; height:auto !important;
  border:1px solid var(--line) !important; border-radius:10px !important;
  box-shadow:0 3px 14px rgba(0,0,0,.08) !important; margin:6px 0 16px !important;
}

/* ---------- 16. Footer ---------- */
#footer{
  width:100% !important; height:auto !important; min-height:0 !important;
  background:var(--navy) !important; border-top:3px solid var(--accent) !important;
  padding:0 !important; float:none !important; margin-top:30px !important;
}
.Finfo{
  width:100% !important; max-width:var(--maxw); height:auto !important;
  line-height:1.7 !important; color:#cfe1e8 !important;
  background:none !important; margin:0 auto !important;
  padding:20px 22px !important; border-radius:0 !important; font-size:13.5px !important;
  box-sizing:border-box;
}
.Finfo a{ color:#ffffff !important; }
.copyright, .designby{ float:none !important; display:inline; }
.designby{ margin-left:14px; opacity:.85; }

/* ---------- 8b. Venue page ---------- */
.venue-name{ text-align:center; margin:2px 0 26px; }
.venue-name h3{ font-size:23px !important; color:var(--navy) !important; font-weight:700 !important; margin:0 0 8px !important; line-height:1.4 !important; }
.venue-jp{ font-size:16px !important; color:var(--muted) !important; margin:0 !important; }

.venue-card{
  background:var(--soft) !important; border:1px solid var(--line) !important;
  border-left:4px solid var(--accent) !important; border-radius:10px !important;
  padding:18px 22px !important; margin:0 0 30px !important; text-align:center !important;
}
.venue-label{ font-size:15px !important; color:var(--accent-d) !important; font-weight:700 !important; margin:0 0 8px !important; }
.venue-card p{ margin:0 0 4px !important; font-size:15.5px !important; color:var(--text) !important; }

.venue-gallery{ display:flex !important; flex-wrap:wrap !important; gap:18px !important; margin:0 0 32px !important; }
.venue-thumb{
  flex:1 1 220px !important; display:block !important; overflow:hidden !important;
  border-radius:12px !important; box-shadow:0 6px 18px rgba(20,40,55,.10) !important;
  border:1px solid var(--line) !important; background:#fff !important;
}
.venue-thumb img{ width:100% !important; height:200px !important; object-fit:cover !important; display:block !important; transition:transform .4s ease !important; }
.venue-thumb:hover img{ transform:scale(1.05) !important; }

.venue-sub{
  font-size:19px !important; color:var(--navy) !important; font-weight:700 !important;
  border-left:3px solid var(--accent) !important; padding-left:12px !important;
  margin:30px 0 14px !important; line-height:1.4 !important;
}

.venue-map{
  position:relative !important; padding-bottom:56.25% !important; height:0 !important;
  border-radius:12px !important; overflow:hidden !important;
  border:1px solid var(--line) !important; box-shadow:0 6px 18px rgba(20,40,55,.08) !important;
}
.venue-map iframe{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; border:0 !important; }

.venue-transport{ list-style:none !important; margin:0 0 10px !important; padding:0 !important; }
.venue-transport li{
  position:relative !important; padding:9px 0 9px 30px !important;
  border-bottom:1px dashed var(--line) !important; font-size:15.5px !important; color:var(--text) !important;
}
.venue-transport li:last-child{ border-bottom:none !important; }
.venue-transport li::before{
  content:"" !important; position:absolute !important; left:6px !important; top:16px !important;
  width:9px !important; height:9px !important; border-radius:50% !important; background:var(--accent) !important;
}
.venue-note{ font-size:14.5px !important; color:var(--muted) !important; margin:4px 0 0 !important; line-height:1.7 !important; }

.venue-alert{
  margin:30px 0 0 !important; padding:16px 18px !important;
  background:#fff7f2 !important; border:1px solid #f3c9b4 !important;
  border-left:4px solid #d9582b !important; border-radius:10px !important;
}
.venue-alert strong{ color:#c0431c !important; }
.venue-alert p{ margin:6px 0 0 !important; font-size:14px !important; color:#7a3b25 !important; line-height:1.7 !important; }

.venue-more{ text-align:center !important; margin:28px 0 0 !important; font-size:15px !important; }
.venue-link{
  display:inline-block !important; margin:8px 0 0 !important;
  background:var(--accent) !important; color:#fff !important; font-weight:600 !important;
  padding:10px 18px !important; border-radius:7px !important; text-decoration:none !important;
}
.venue-link:hover{ background:var(--accent-d) !important; color:#fff !important; text-decoration:none !important; }

/* ---------- 17. Responsive ---------- */
@media (max-width:980px){
  .top-inner{ padding:10px 16px !important; }
  #primary-nav{ width:100% !important; }
  #primary-nav ul{ justify-content:flex-start; line-height:1 !important; }
  #primary-nav ul a{ padding:10px 12px !important; }
  #primary-nav ul ul{ position:static !important; box-shadow:none !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
    pointer-events:auto !important;
    border:1px solid var(--navy-2) !important; border-radius:8px !important; margin:4px 0 8px !important; }
  #banner{ padding:0 14px !important; margin-top:18px !important; }
  #banner .banner-inner{ height:220px !important; }
  #middle{ flex-direction:column !important; gap:26px !important;
    margin:18px 14px !important; padding:26px 20px !important; }
  .who-home, .leftsec, .blogleft, .entry-content.clearfix,
  .tweet, .rightsec{ flex:1 1 auto !important; width:100% !important; }
  .title{ padding:16px 18px !important; font-size:22px !important; }
}
@media (max-width:560px){
  #banner .banner-inner{ height:170px !important; }
  #middle{ padding:22px 16px !important; }
  h2.patrn, h2.blue{ font-size:20px !important; }
}