/* CFA Society Doha v2.0 preview.
   Approximates the CFA Institute society template on Higher Logic so pages look as they will live.
   Template fonts (Azo Sans, Flecha) are licensed to CFA Institute; Lato and Source Serif 4 stand in. */

:root {
  --navy: #06005A;
  --blue: #2A60F2;
  --blue-dark: #1D46B8;
  --ink: #000000;
  --text: #3B3D40;
  --muted: #666666;
  --line: #E1E1E1;
  --band: #E8E8E8;
  --white: #FFFFFF;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: Lato, "Helvetica Neue", Arial, sans-serif;
  --arabic: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 15px rgba(0,0,0,.05);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 18px/1.5 var(--sans); }
img { max-width: 100%; height: auto; }
a { color: var(--blue); }
a:hover { color: var(--navy); }
sup { font-size: .55em; line-height: 0; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ---------- header ---------- */
.site-header { background: var(--white); position: relative; z-index: 20; }
.header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 8px; }
.logo { display: inline-block; line-height: 0; }
.logo img { width: 203px; height: auto; }
.logo-text { font: 900 26px/1.1 var(--sans); color: var(--navy); line-height: 1.1; }
.logo-text.light { color: #fff; font-size: 22px; }
.util { display: flex; align-items: center; gap: 18px; }
.util nav { display: flex; gap: 22px; }
.util nav a { font: 900 11px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; color: #333; text-decoration: none; }
.util nav a:hover { color: var(--blue); }
.util nav a.lang { text-transform: none; font: 700 14px/1 var(--arabic); color: var(--navy); }
.search { position: relative; width: 230px; }
.search input { width: 100%; height: 32px; border: 0; border-radius: 16px; background: #F2F2F2; padding: 0 36px 0 14px; font: inherit; font-size: 14px; }
.search-ico { position: absolute; right: 12px; top: 8px; width: 13px; height: 13px; border: 2px solid var(--navy); border-radius: 50%; }
.search-ico::after { content: ""; position: absolute; width: 2px; height: 7px; background: var(--navy); right: -4px; bottom: -6px; transform: rotate(-45deg); }
.nav-toggle { display: none; }

.mainnav .nav-root { list-style: none; margin: 0; padding: 14px 0 22px; display: flex; flex-wrap: wrap; gap: 6px 30px; }
.mainnav .nav-root > li { position: relative; }
.mainnav .nav-root > li > a { display: inline-flex; align-items: center; gap: 8px; color: #333; font-size: 16px; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.mainnav .nav-root > li > a:hover, .mainnav .nav-root > li.current > a { border-bottom-color: var(--navy); color: var(--navy); }
.chev { width: 7px; height: 7px; border-right: 1.5px solid #999; border-bottom: 1.5px solid #999; transform: rotate(45deg) translateY(-3px); }
.sub { list-style: none; margin: 0; padding: 10px 0; position: absolute; left: -12px; top: 100%; min-width: 280px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.14); border-top: 3px solid var(--navy); border-radius: 0 0 6px 6px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s ease; }
.nav-root > li:hover > .sub, .nav-root > li:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: 8px 18px; color: #222; font-size: 15px; text-decoration: none; }
.sub a:hover, .sub a[aria-current="page"] { background: #F2F4FB; color: var(--navy); }
.sub a.ext::after { content: " ↗"; color: #999; font-size: 12px; }

/* ---------- hero (home) ---------- */
.hero { background-color: var(--navy);
  background-image:
    repeating-radial-gradient(circle at 34% 58%, rgba(255,255,255,.06) 0 1px, transparent 1px 46px),
    linear-gradient(100deg, #06005A 0%, #0B0E78 45%, #1F45D6 100%);
  color: #fff; }
.hero-inner { display: grid; grid-template-columns: 1fr 460px; gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 48px; min-height: 420px; }
.hero h1 { font: 800 46px/1.18 var(--serif); margin: 0 0 26px; letter-spacing: .3px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.btn-hero { display: inline-block; padding: 11px 22px; border-radius: 100px; font: 900 16px/1.2 var(--sans); text-decoration: none; border: 2px solid #fff; }
.btn-hero.solid { background: #fff; color: var(--navy); }
.btn-hero.ghost { color: #fff; }
.btn-hero:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.hero-card { background: #fff; color: #222; border-radius: 6px; padding: 26px 28px; box-shadow: var(--shadow); }
.hero-card h2 { font: 700 20px/1.3 var(--serif); margin: 4px 0 12px; color: #111; }
.hero-card p { font-size: 16px; color: var(--text); margin: 0 0 8px; }
.eyebrow { font: 600 12px/1.4 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }

/* ---------- interior title banner ---------- */
.page-title { background: var(--navy); color: #fff; }
.page-title h1 { font: 800 48px/1.2 var(--serif); letter-spacing: 1.5px; margin: 0; padding: 60px 0; }

/* ---------- content bands and grid ---------- */
.band { padding: 40px 0 20px; }
.band + .band { padding-top: 10px; }
.band-gray { background: var(--band); padding: 50px 0 40px; }
.band-gray + .band, .band + .band-gray { padding-top: 50px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row > [class^="col-md-"] { padding: 0 15px; width: 100%; display: flex; flex-direction: column; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-9 { flex: 0 0 75%; max-width: 75%; }
.col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.ContentItemHtml { margin: 0 0 30px; }

.HtmlContent { color: var(--ink); }
.HtmlContent h1 { font: 800 36px/1.2 var(--serif); color: var(--navy); margin: 0 0 16px; }
.HtmlContent h2 { font: 800 30px/1.22 var(--serif); color: var(--navy); margin: 8px 0 14px; }
.HtmlContent h3 { font: 800 21px/1.2 var(--serif); color: #292929; margin: 0 0 10px; }
.HtmlContent h3 a { color: inherit; text-decoration: none; }
.HtmlContent h3 a:hover { color: var(--blue); text-decoration: underline; }
.HtmlContent p { margin: 5px 10px 20px 0; }
.HtmlContent ul, .HtmlContent ol { margin: 0 0 20px; padding-left: 24px; }
.HtmlContent li { margin: 0 0 6px; }
.HtmlContent table { font-size: 16px; }
.HtmlContent blockquote { margin: 0 0 20px; padding: 6px 0 6px 18px; border-left: 4px solid var(--blue); font-style: italic; color: var(--text); }

/* Template classes set in the Higher Logic "CSS class" field of a content item */
.flex-box { background: #fff; border-top: 5px solid var(--blue); border-radius: 5px; box-shadow: var(--shadow); padding: 20px; flex: 1; margin-bottom: 30px; display: flex; flex-direction: column; }
.flex-box .HtmlContent { flex: 1; display: flex; flex-direction: column; }
.flex-box .HtmlContent p:last-child { margin-bottom: 0; }
.make-buttons a { display: inline-block; background: var(--blue); color: #fff; font: 900 16px/1.5 var(--sans); padding: 10px 20px; border-radius: 100px; border: 2px solid transparent; margin: 0 5px 5px 0; text-decoration: none; }
.make-buttons a:hover { background: var(--navy); color: #fff; }
.flex-box.make-buttons .HtmlContent > p:last-child { margin-top: auto; padding-top: 10px; }

/* Home quick links (template widget) */
.quick-links { background: #fff; border-radius: 5px; box-shadow: var(--shadow); padding: 22px 20px 14px; }
.quick-links h3 { font: 600 13px/1.4 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; }
.quick-links ul { list-style: none; padding: 0; margin: 0; }
.quick-links li { margin: 0 0 10px; }
.quick-links li a { display: flex; justify-content: space-between; align-items: center; border: 2px solid var(--navy); border-radius: 100px; padding: 6px 16px; color: var(--navy); font: 900 15px/1.4 var(--sans); text-decoration: none; }
.quick-links li a::after { content: "→"; font-weight: 400; }
.quick-links li a:hover { background: var(--navy); color: #fff; }

/* Arabic content blocks */
[lang="ar"] { font-family: var(--arabic); line-height: 1.85; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 24px; }
[dir="rtl"] p { margin: 5px 0 20px 10px; }
[dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--arabic); letter-spacing: 0; }
[dir="rtl"] td, [dir="rtl"] th { text-align: right !important; }
.lang-ar .page-title h1 { font-family: var(--arabic); letter-spacing: 0; }

/* Widget note (preview only) */
.widget-note { font-size: 13px; color: var(--muted); font-style: italic; margin: 6px 0 0; }

/* ---------- footer ---------- */
.site-footer { background: #000; color: #fff; padding: 44px 0 26px; margin-top: 20px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr; gap: 32px; align-items: start; }
.cfai-logo { width: 200px; margin-top: 10px; }
.site-footer .eyebrow { color: #ccc; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 48px; font-size: 15px; }
.footer-links a { color: #fff; }
.social { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.social .soc { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; background: #fff; color: #000; border-radius: 4px; font: 900 15px/1 var(--sans); text-decoration: none; }
.social .tbc { color: #5A4500; }
.legal { text-align: center; font-size: 15px; margin-top: 26px; }
.legal p { margin: 4px 0; }

/* ---------- review markers ---------- */
.hero .draft { background: rgba(255,255,255,.10) !important; border-bottom: 3px dotted #9DB5FF !important; }
.tbc { white-space: normal; }
.ph { border-radius: 6px; }
body.hide-markers .tbc, body.hide-markers .draft { background: none !important; border: 0 !important; padding: 0 !important; color: inherit !important; }
body.hide-markers .tbc { visibility: hidden; }
body.hide-markers .ph { background: #EEF0F5 !important; border-style: solid !important; color: transparent !important; }
body.hide-markers .widget-note { display: none; }
a[href^="#to-confirm"] { outline: 2px dashed #C99A00; outline-offset: 2px; }
body.hide-markers a[href^="#to-confirm"] { outline: 0; }

.preview-bar { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 12px; background: #15151A; color: #fff; padding: 9px 14px; border-radius: 100px; font: 400 13px/1.2 var(--sans); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.preview-bar a { color: #9DB5FF; }
.pb-count { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.pb-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tbc-dot { background: #FFD43B; }
.draft-dot { background: #7FA0FF; }
.pb-toggle { font: 700 12px/1 var(--sans); background: #2E2E36; color: #fff; border: 1px solid #44444E; border-radius: 100px; padding: 6px 10px; cursor: pointer; }
.pb-toggle[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .container { padding: 0 16px; }
  .header-top { align-items: center; padding-top: 14px; }
  .logo img { width: 150px; }
  .util { display: none; }
  .nav-toggle { display: inline-block; font: 900 14px/1 var(--sans); color: var(--navy); background: #fff; border: 2px solid var(--navy); border-radius: 100px; padding: 9px 16px; cursor: pointer; }
  .mainnav { display: none; border-top: 1px solid var(--line); }
  .mainnav.open { display: block; }
  .mainnav .nav-root { flex-direction: column; gap: 0; padding: 6px 0 14px; }
  .mainnav .nav-root > li > a { width: 100%; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: none; padding: 0 0 8px 12px; min-width: 0; }
  .nav-root > li.open > .sub { display: block; }
  .mobile-util { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 0 16px; }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding-top: 36px; padding-bottom: 36px; }
  .hero h1 { font-size: 34px; }
  .page-title h1 { font-size: 34px; padding: 36px 0; letter-spacing: .5px; }
  .row > [class^="col-md-"] { flex: 0 0 100%; max-width: 100%; }
  .HtmlContent h2 { font-size: 26px; }
  .footer-grid { grid-template-columns: 1fr; }
  .social { justify-content: flex-start; }
  .footer-links { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .HtmlContent table { display: block; overflow-x: auto; }
  .preview-bar { left: 12px; right: 12px; bottom: 10px; justify-content: space-between; flex-wrap: wrap; border-radius: 14px; }
}
@media (min-width: 992px) { .mobile-util { display: none; } }

/* ---------- forms (live site) ---------- */
.site-form { background: #fff; border-top: 5px solid var(--blue); border-radius: 5px; box-shadow: var(--shadow); padding: 20px 22px; margin: 10px 0 30px; scroll-margin-top: 16px; }
.site-form h3 { margin: 0 0 14px; }
.site-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.site-form label { font: 700 15px/1.3 var(--sans); color: var(--ink); }
.site-form input, .site-form select, .site-form textarea { font: 400 16px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1px solid #C9CCD6; border-radius: 6px; padding: 10px 12px; width: 100%; }
.site-form input:focus, .site-form select:focus, .site-form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.site-form button { font: 900 16px/1.5 var(--sans); color: #fff; background: var(--blue); border: 0; border-radius: 100px; padding: 10px 24px; cursor: pointer; }
.site-form button:hover { background: var(--navy); }
.site-form .form-note { font-size: 14px; color: var(--muted); }
.site-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.footer-contact { font-size: 15px; color: #ddd; margin: 14px 0 0; line-height: 1.6; }
.footer-contact a { color: #fff; }
.cfai-logo { width: 180px; height: auto; }