/* Vocea Diasporei: a community portal for Romanians abroad. Open Sans, navy and red, practical and dense. */
:root { --wrap: 1160px; --nv: #12355b; --rd: #c8102e; --yl: #f2c300; --g: #5f6b7a; --hl: #e3e7ec; --soft: #f3f5f8; --os: "Open Sans", Arial, sans-serif; }
body { background: #fff; color: #1c1c1c; font: 15px/1.55 var(--os); }
/* @logo Vocea Diasporei: a speech bubble holding the tricolour, the name in bold sentence case */
.rt-logo { display: inline-flex; align-items: center; font-size: 26px; }
.rt-logo .lg-m { display: block; margin-right: .3em; width: 1.5em; height: 1.36em; color: #12355b; }
.rt-logo .lg-m svg { display: block; width: 100%; height: 100%; }
.rt-logo .lg-a { font: 800 1em/1 "Open Sans", Arial, sans-serif; color: #12355b; letter-spacing: -.01em; }
.rt-logo .lg-b { font: 800 1em/1 "Open Sans", Arial, sans-serif; color: #c8102e; letter-spacing: -.01em; margin-left: .22em; }
/* @end-logo */
a:hover b, a:hover h2 { color: var(--rd); }


/* Header */
.vd-clocks { background: var(--soft); border-bottom: 1px solid var(--hl); font-size: 12px; color: var(--g); }
.vd-clocks .wrap { display: flex; align-items: center; gap: 16px; min-height: 30px; }
.rt-clock b { color: var(--nv); font-weight: 600; }
.vd-clocks .rt-rates { margin-left: auto; display: flex; gap: 12px; }
.rt-rate b { color: var(--nv); font-weight: 600; }
.vd-head-row { display: flex; align-items: center; gap: 20px; height: 78px; }
.vd-claim { margin: 0 0 0 6px; font-size: 13px; color: var(--g); padding-left: 16px; border-left: 1px solid var(--hl); }
.vd-head-row .header-actions { margin-left: auto; color: var(--nv); }
.vd-nav { background: var(--nv); border-bottom: 3px solid var(--rd); }
.vd-nav .nav a { color: #fff; font: 700 13px/1 var(--os); text-transform: uppercase; letter-spacing: .3px; padding: 13px 14px; }
.vd-nav .nav a:hover, .vd-nav .nav a[aria-current="page"] { background: var(--rd); }

/* Common */
.vd-k { display: block; font: 700 11px/1 var(--os); text-transform: uppercase; letter-spacing: .4px; color: var(--rd); margin-bottom: 5px; }
.vd-h { font: 800 16px/1.2 var(--os); text-transform: uppercase; color: var(--nv); border-bottom: 2px solid var(--nv); padding-bottom: 6px; margin: 30px 0 10px; }
.vd-sum { color: #4a5563; font-size: 14px; }

/* Top: main story and the right column */
.vd-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; margin-top: 22px; align-items: start; }
.vd-lead { display: grid; gap: 8px; }
.vd-lead .thumb { aspect-ratio: 16 / 9; margin-bottom: 4px; }
.vd-lead h2 { font: 800 31px/1.18 var(--os); color: var(--nv); }
.vd-lead p { margin: 0; color: #333; font-size: 16px; }
.vd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.vd-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hl); align-items: start; }
.vd-row .thumb { aspect-ratio: 4 / 3; }
.vd-row b { display: block; font: 700 15px/1.3 var(--os); margin-bottom: 4px; }

/* Useful links */
.vd-guide { border: 1px solid var(--hl); border-top: 4px solid var(--rd); }
.vd-guide h2 { font: 800 15px/1 var(--os); text-transform: uppercase; color: var(--nv); padding: 12px 14px 8px; }
.vd-guide li a { display: grid; gap: 1px; padding: 9px 14px; border-top: 1px solid var(--hl); }
.vd-guide b { color: var(--nv); font-size: 14px; }
.vd-guide span { color: var(--g); font-size: 12.5px; }
.vd-guide a:hover { background: var(--soft); }
.vd-guide a:hover b { color: var(--rd); }
.vd-side { display: grid; gap: 24px; }
.vd-box .vd-h { margin-top: 0; }
.vd-most { counter-reset: vd; }
.vd-most li { counter-increment: vd; }
.vd-most a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hl); font-weight: 600; font-size: 14px; line-height: 1.35; }
.vd-most a::before { content: counter(vd); width: 22px; height: 22px; background: var(--nv); color: #fff; font-size: 12px; display: grid; place-items: center; }
.vd-most a:hover { color: var(--rd); }

/* Three topics side by side */
.vd-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.vd-bar { background: var(--nv); color: #fff; font: 700 13px/1 var(--os); text-transform: uppercase; letter-spacing: .3px; padding: 9px 12px; margin-bottom: 12px; }
.vd-bar a:hover { text-decoration: underline; }
.vd-card { display: grid; gap: 6px; }
.vd-card .thumb { aspect-ratio: 16 / 10; }
.vd-card b { font: 700 17px/1.3 var(--os); }
.vd-card time { font-size: 12px; color: var(--g); }
.vd-topics ul { margin-top: 8px; }
.vd-topics li a { display: block; padding: 7px 0 7px 12px; border-top: 1px solid var(--hl); font-size: 14px; position: relative; }
.vd-topics li a::before { content: ""; position: absolute; left: 0; top: 14px; width: 5px; height: 5px; background: var(--rd); }
.vd-topics li a:hover { color: var(--rd); }

/* Archives */
.archive-head h1, .archive-head .section-title { font: 800 26px/1.2 var(--os); text-transform: uppercase; color: var(--nv); border-bottom: 3px solid var(--nv); padding-bottom: 8px; }
.side-col .box h2 { font: 800 15px/1 var(--os); text-transform: uppercase; color: var(--nv); border-bottom: 2px solid var(--nv); padding-bottom: 6px; }
.latest a { display: block; padding: 8px 0; border-bottom: 1px solid var(--hl); font-size: 14px; font-weight: 600; }
.latest time { color: var(--rd); margin-right: 6px; }
.crumbs { color: var(--g); margin-bottom: 8px; }
.crumbs a { color: var(--nv); }

/* Article */
.vd-article h1 { font: 800 34px/1.2 var(--os); color: var(--nv); margin-bottom: 8px; }
.vd-meta { font-size: 13px; color: var(--g); margin: 0 0 12px; }
#share.vd-share { margin-bottom: 18px; }
#share.vd-share a, #share.vd-share button { background: var(--soft); color: var(--nv); font-weight: 600; }
#share.vd-share a:first-child { background: #25d366; color: #fff; padding: 0 16px; height: 42px; font-size: 15px; }
.vd-lede { font: 600 18px/1.5 var(--os); margin: 0 0 16px; }
.vd-fig figcaption { font-size: 12.5px; color: var(--g); padding: 6px 0; }
.vd-article .prose { font: 17px/1.7 var(--os); margin-top: 18px; }
.vd-article .prose a { color: var(--rd); }
.vd-article .prose h2 { color: var(--nv); font-size: 23px; }
.vd-more { margin-top: 30px; }

/* Footer */
.vd-foot { background: var(--nv); color: #c3cfdd; margin-top: 54px; border-top: 6px solid transparent; border-image: linear-gradient(90deg, #002b7f 0 33.3%, #fcd116 33.3% 66.6%, #ce1126 66.6%) 1; padding: 30px 0 18px; font-size: 14px; }
.vd-foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 26px; }
.vd-foot h4 { color: #fff; font: 700 13px/1 var(--os); text-transform: uppercase; margin: 4px 0 10px; }
.vd-foot li { margin-bottom: 6px; }
.vd-foot a { color: #fff; }
.vd-foot a:hover { text-decoration: underline; }
.vd-foot p { margin: 10px 0 0; }
.vd-foot-bottom { border-top: 1px solid #2a4b72; margin-top: 18px; padding-top: 12px; font-size: 12px; }

.rt-soon b { font: 800 28px/1.2 var(--os); color: var(--nv); }

@media (max-width: 960px) {
  .vd-claim { display: none; }
  .vd-head-row { height: 62px; }
  .vd-nav { height: 6px; border-bottom: 0; background: linear-gradient(90deg, #002b7f 0 33.3%, #fcd116 33.3% 66.6%, #ce1126 66.6%); }
  .vd-top { grid-template-columns: 1fr; }
  .vd-topics { grid-template-columns: 1fr; }
  .vd-foot-cols { grid-template-columns: 1fr 1fr; }
  .vd-clocks .rt-clock:nth-child(n+4) { display: none; }
}
@media (max-width: 640px) {
  .vd-two { grid-template-columns: 1fr; }
  .vd-lead h2 { font-size: 24px; }
  .vd-article h1 { font-size: 26px; }
  .vd-foot-cols { grid-template-columns: 1fr; }
  .vd-clocks .rt-rates { display: none; }
}

/* Logo placement */
.vd-foot .rt-logo .lg-a, .vd-foot .rt-logo .lg-b { color: #fff; }
.vd-foot .rt-logo .lg-m { color: #fff; }
@media (max-width: 640px) { .vd-head .rt-logo { font-size: 21px; } }
