/*
  IRB Submission Portal — Indico Custom CSS
  Styled to match the KFUPM Institutional Review Board portal
  Colors: Dark teal #1a3a35, Gold #b8922a, Off-white #f5f4ef
  Typography: Serif headings, clean sans-serif body
*/

/* ── Google Fonts import (Playfair Display + Inter) ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ══════════════════════════════════════
   GLOBAL
══════════════════════════════════════ */
body,
.conf {
  background: #f5f4ef !important;
  font-family: 'Inter', 'Liberation Sans', Arial, sans-serif !important;
  color: #1a2e28 !important;
  width: 100% !important;
  border: none !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════
   TOP TOOLBAR (icons bar)
══════════════════════════════════════ */
.page-header,
.page-header-dark,
.event-page-header {
  background: #0d1f1b !important;
  border-bottom: none !important;
  padding: 6px 32px !important;
}

.page-header a,
.page-header span,
.page-header-dark a,
.event-page-header a {
  color: rgba(255,255,255,0.75) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
}

.page-header a:hover,
.event-page-header a:hover {
  color: #c9a84c !important;
}

/* ══════════════════════════════════════
   CONFERENCE HEADER — top title block
══════════════════════════════════════ */
.confTitleBox {
  background: #1a3a35 !important;
  border-top: none !important;
  border-bottom: 3px solid #b8922a !important;
  min-height: 110px !important;
  padding: 0 !important;
}

.confTitle {
  width: 960px !important;
  margin: 0 auto !important;
  padding: 28px 0 22px 0 !important;
}

/* ── Logo box ── */
.confLogoBox {
  float: left !important;
  padding-right: 16px !important;
  padding-top: 4px !important;
}

/* ── Main title text ── */
.conference-title-link,
.conference-title-link span,
.confTitle h1,
.confTitle h1 a {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 26pt !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  display: block !important;
  padding: 0 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
}

/* ── Subtitle line under title ── */
.confTitleBox .confSubTitle,
.confTitleBox .subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 11pt !important;
  color: rgba(255,255,255,0.7) !important;
  margin-top: 6px !important;
  font-weight: 300 !important;
}

/* ══════════════════════════════════════
   SUBTITLE BAR — dates / search bar
══════════════════════════════════════ */
.confSubTitleBox {
  background: #122b26 !important;
  border-bottom: 1px solid rgba(184,146,42,0.3) !important;
  border-top: none !important;
  padding: 10px 0 !important;
}

.confSubTitleContent {
  width: 960px !important;
  margin: 0 auto !important;
  font-size: 11pt !important;
  color: rgba(255,255,255,0.7) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 300 !important;
}

.confSubTitle a,
.confSubTitleContent a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 11pt !important;
}

.datePlace {
  font-size: 11pt !important;
  color: rgba(255,255,255,0.65) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── Search box ── */
.search-box {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 6px !important;
}
.search-box input {
  background: transparent !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
}
.search-box input::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

/* ══════════════════════════════════════
   ANNOUNCEMENT BAR
══════════════════════════════════════ */
.simpleTextAnnouncement {
  background: #b8922a !important;
  border-top: none !important;
  border-bottom: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 10pt !important;
  text-align: center !important;
  color: #ffffff !important;
  padding: 10px 0 !important;
  letter-spacing: 0.02em !important;
}

/* ══════════════════════════════════════
   MAIN LAYOUT WRAPPER
══════════════════════════════════════ */
#confSectionsBox {
  width: 960px !important;
  margin: 32px auto !important;
}

/* ══════════════════════════════════════
   LEFT NAVIGATION MENU
══════════════════════════════════════ */
.conf_leftMenu {
  float: left !important;
  width: 210px !important;
  background: #ffffff !important;
  border: 1px solid #e0ddd4 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(26,58,53,0.08) !important;
  padding: 6px 0 !important;
}

#outer {
  border: none !important;
  background: transparent !important;
}

#outer li a {
  font-family: 'Inter', sans-serif !important;
  font-size: 10pt !important;
}

#outer li a:hover {
  background: #f0ede4 !important;
}

/* ── Menu item — default ── */
.menuConfTitle {
  text-align: left !important;
  border-left: 3px solid transparent !important;
}

.menuConfTitle a {
  color: #2a4a40 !important;
  padding: 9px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10pt !important;
  font-weight: 500 !important;
  display: block !important;
  text-decoration: none !important;
  border-bottom: 1px solid #f0ede4 !important;
  transition: all 0.15s ease !important;
}

.menuConfTitle a:hover {
  background: #f0ede4 !important;
  color: #1a3a35 !important;
  border-left-color: #b8922a !important;
  text-decoration: none !important;
}

/* ── Menu item — selected / active ── */
.menuConfTitle.selected > a,
.menuConfMiddleCell.selected > a,
.menuConfSelected .menuConfTitle a,
li.menuConfSelected > a.menuConfTitle {
  color: #1a3a35 !important;
  background: #f0ede4 !important;
  border-left: 3px solid #1a3a35 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #e0ddd4 !important;
  border-top: none !important;
}

/* ── Sub-menu items ── */
li ul.inner li a {
  padding: 6px 16px 6px 28px !important;
  font-size: 9.5pt !important;
  color: #4a6a60 !important;
  background: transparent !important;
  font-family: 'Inter', sans-serif !important;
}

li ul.inner li a:hover {
  color: #1a3a35 !important;
  background: #f0ede4 !important;
}

/* ── Support box ── */
.support_box {
  background: #ffffff !important;
  border: 1px solid #e0ddd4 !important;
  border-radius: 10px !important;
  margin-top: 16px !important;
  overflow: hidden !important;
}

.support_box > h3 {
  color: #ffffff !important;
  background: #1a3a35 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10pt !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ══════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════ */
.confBodyBox {
  margin-left: 240px !important;
  background: #ffffff !important;
  border: 1px solid #e0ddd4 !important;
  border-radius: 10px !important;
  padding: 28px 32px !important;
  box-shadow: 0 2px 8px rgba(26,58,53,0.06) !important;
  min-height: 320px !important;
}

/* ── Page headings inside content ── */
.confBodyBox h1,
.confBodyBox h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #1a3a35 !important;
  font-weight: 700 !important;
}

.confBodyBox h3,
.confBodyBox h4 {
  font-family: 'Inter', sans-serif !important;
  color: #1a3a35 !important;
  font-weight: 600 !important;
}

/* ── Section label (uppercase small caps) ── */
.confBodyBox .section-label,
.confBodyBox p.label {
  font-family: 'Inter', sans-serif !important;
  font-size: 9pt !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #b8922a !important;
}

/* ── Body text ── */
.confBodyBox p,
.confBodyBox li,
.confBodyBox span {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5pt !important;
  color: #2a3a35 !important;
  line-height: 1.7 !important;
}

/* ── Links ── */
.confBodyBox a {
  color: #1a3a35 !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.confBodyBox a:hover {
  color: #b8922a !important;
}

/* ── Info grid (dates block) ── */
.infogrid,
.infoline {
  background: #f5f4ef !important;
  border: 1px solid #e0ddd4 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5pt !important;
  color: #2a3a35 !important;
  margin-bottom: 16px !important;
}

.infoline .label {
  font-weight: 600 !important;
  color: #1a3a35 !important;
}

/* ── Materials / attachments ── */
.attachments,
.material-list {
  background: #f5f4ef !important;
  border: 1px solid #e0ddd4 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin-top: 16px !important;
  font-size: 10pt !important;
  color: #6a7a70 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── Buttons ── */
.i-button,
input[type="submit"],
button.i-button {
  background: #1a3a35 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 10pt !important;
  padding: 9px 20px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.i-button:hover {
  background: #b8922a !important;
  color: #ffffff !important;
}

/* ── Action bar ── */
.main-action-bar {
  background: transparent !important;
  border: none !important;
  padding: 0 0 18px 0 !important;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
#footer,
.footer {
  background: #f5f4ef !important;
  border-top: 1px solid #e0ddd4 !important;
  color: #6a7a70 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 9pt !important;
  padding: 18px 32px !important;
  margin-top: 24px !important;
  text-align: center !important;
}

#footer a,
.footer a {
  color: #1a3a35 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

#footer a:hover,
.footer a:hover {
  color: #b8922a !important;
}

/* ══════════════════════════════════════
   GOLD ACCENT DIVIDER UTILITY
══════════════════════════════════════ */
.confBodyBox hr {
  border: none !important;
  border-top: 2px solid #b8922a !important;
  width: 48px !important;
  margin: 10px 0 20px 0 !important;
}