/* cn.css - crawl.news stylesheet */

/* === Variables & Base === */

:root {
    --cn-font: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --cn-color: #373c44;
    --cn-link: #0172ad;
    --cn-link-hover: #015887;
    --cn-link-underline: rgba(1, 114, 173, 0.5);
    --cn-link-focus: rgba(2, 154, 232, 0.5);
    --cn-border: #dbdbdb;
    --cn-radius: 3px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color: var(--cn-color);
    font-family: var(--cn-font);
    font-size: 100%;
    font-weight: 400;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    text-underline-offset: 0.1rem;
    overflow-wrap: break-word;
    tab-size: 4;
}

/* === Reset === */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/* === Typography === */

b, strong { font-weight: bolder; }
small { font-size: 0.875em; }

sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--cn-color);
    line-height: 1.2;
}

h1 { font-size: 2rem; font-weight: 700; line-height: 1.125; }
h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
h3 { font-size: 1.375rem; font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; }

p, ul, ol, dl, blockquote, pre, table, address {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--cn-color);
}

ul, ol {
    padding-left: 1.25em;
}

:where(ol, ul) li { margin-bottom: 0.15rem; }
:where(dl, ol, ul) :where(dl, ol, ul) { margin: 0; margin-top: 0.25rem; }

ul li { list-style: square; }

hr {
    border: none;
    border-top: 1px solid var(--cn-border);
    margin: 1.5rem 0;
}

blockquote {
    display: block;
    margin: 1rem 0;
    padding: 1rem;
    border-inline-start: 0.25rem solid #e7eaf0;
    border-inline-end: none;
}

mark {
    padding: 0.125rem 0.25rem;
    background-color: rgb(253, 231, 192);
    color: #0f1114;
    vertical-align: baseline;
}

::selection { background-color: rgba(2, 154, 232, 0.25); }

/* === Links === */

a {
    color: var(--cn-link);
    text-decoration: underline;
    text-decoration-color: var(--cn-link-underline);
    text-underline-offset: 0.125em;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

a:hover, a:active, a:focus {
    color: var(--cn-link-hover);
    text-decoration-color: var(--cn-link-hover);
}

a:focus-visible {
    outline: 2px solid var(--cn-link-focus);
    outline-offset: 2px;
}

/* === Layout === */

.container {
    max-width: 1344px;
    margin: 20px auto 0;
}

@media screen and (max-width: 1023px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.col, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 {
    padding: 0.75rem;
    min-width: 0;
}

.col    { flex: 1 1 0%; }
.col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3  { flex: 0 0 25%; max-width: 25%; }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6  { flex: 0 0 50%; max-width: 50%; }
.col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9  { flex: 0 0 75%; max-width: 75%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media screen and (max-width: 768px) {
    .col, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .cluster-row > .col + .col {
        margin-top: 10px;
    }
}

/* === Navbar === */

.navbar {
    display: flex;
    align-items: stretch;
    min-height: 3.25rem;
    background: #fff;
    box-shadow: 0 2px 0 0 #f5f5f5;
}

.navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.navbar-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
}

.navbar a.navbar-item,
.navbar a.navbar-link {
    text-decoration: none;
}

.navbar a.navbar-item:hover,
.navbar a.navbar-link:hover {
    text-decoration: none;
    background-color: #fafafa;
}

.navbar-burger {
    display: none;
    cursor: pointer;
    margin-left: auto;
    width: 3.25rem;
    height: 3.25rem;
    background: none;
    border: none;
    position: relative;
}

.navbar-burger span {
    display: block;
    height: 1px;
    width: 16px;
    background: #4a4a4a;
    position: absolute;
    left: calc(50% - 8px);
}

.navbar-burger span:nth-child(1) { top: calc(50% - 6px); }
.navbar-burger span:nth-child(2) { top: calc(50% - 1px); }
.navbar-burger span:nth-child(3) { top: calc(50% + 4px); }

.navbar-menu {
    display: flex;
    flex-grow: 1;
    align-items: stretch;
}

.navbar-end {
    display: flex;
    align-items: stretch;
    margin-left: auto;
}

.navbar .title {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.125;
    margin: 0;
    color: #373C44;
}

/* Dropdown */

.dropdown {
    position: relative;
}

.navbar-link {
    padding-right: 2.5em;
    position: relative;
}

.navbar .navbar-link:not(.is-arrowless):after {
    content: "";
    display: block;
    width: 0.625em;
    height: 0.625em;
    border: 3px solid transparent;
    border-color: #4a4a4a;
    border-radius: 2px;
    border-right: 0;
    border-top: 0;
    position: absolute;
    right: 1.125em;
    top: 50%;
    margin-top: -0.5em;
    transform: rotate(-45deg);
    pointer-events: none;
}

.navbar-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: #fff;
    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
    border-radius: 0 0 6px 6px;
    border-top: 2px solid var(--cn-border);
    padding: 0.5rem 0;
    z-index: 20;
}

.dropdown:hover > .navbar-dropdown {
    display: block;
}

.navbar-dropdown .navbar-item {
    display: block;
    padding: 0.375rem 1rem;
    white-space: nowrap;
}

/* Mobile navbar */

@media screen and (max-width: 1023px) {
    .navbar { flex-wrap: wrap; }

    .navbar-burger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-menu {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
        padding: 0.5rem 0;
    }

    .navbar-menu.is-active { display: flex; }

    .navbar-end { flex-direction: column; margin-left: 0; }

    .dropdown { flex-direction: column; padding: 0; align-items: stretch; }

    .navbar-brand { width: 100%; }

    .categories-label { display: none; }

    .navbar-link { padding: 0.5rem 0.75rem; }

    .navbar-dropdown {
        display: block;
        position: static;
        box-shadow: none;
        border-top: none;
        padding-left: 0;
    }

    .navbar-dropdown .navbar-item {
        padding: 0.5rem 0.75rem;
    }

    .navbar .navbar-link:not(.is-arrowless):after { display: none; }
}

/* === Components === */

/* Content */

img {
    max-width: 100%;
}

.content ul {
    margin-inline-start: 0;
}

.content ul li {
    padding-bottom: 0.35rem;
}

/* Tags */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    display: inline-block;
    background: #f5f5f5;
    color: #4a4a4a;
    font-size: 0.75rem;
    padding: 0.25em 0.75em;
    border-radius: 4px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.tag a {
    color: inherit;
    text-decoration: none;
}

.tag:hover {
    background: #e5e5e5;
    border-color: #d1d1d1;
}

/* Forms */

.input-group {
    display: flex;
}

.search-input {
    font-size: 0.875rem;
    padding: 0.25em 0.5em;
    border: 1px solid var(--cn-border);
    border-radius: 4px 0 0 4px;
    outline: none;
    line-height: 1.5;
}

.search-input:focus {
    border-color: var(--cn-link);
    box-shadow: 0 0 0 2px var(--cn-link-focus);
}

.search-btn {
    font-size: 0.875rem;
    padding: 0.25em 0.75em;
    background: #fff;
    border: 1px solid var(--cn-border);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    line-height: 1.5;
}

.search-input-lg {
    font-size: 1rem;
    padding: 0.5em 0.75em;
    border: 1px solid var(--cn-border);
    border-radius: 4px 0 0 4px;
    outline: none;
    line-height: 1.5;
    flex: 1;
    min-width: 0;
}

.search-input-lg:focus {
    border-color: var(--cn-link);
    box-shadow: 0 0 0 2px var(--cn-link-focus);
}

.btn-primary {
    font-size: 1rem;
    padding: 0.5em 1em;
    background: var(--cn-link);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    line-height: 1.5;
}

.btn-primary:hover {
    background: var(--cn-link-hover);
}

/* Tables */

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

td, th {
    border: 1px solid var(--cn-border);
    padding: 0.5em 0.75em;
    vertical-align: top;
}

th {
    text-align: inherit;
    font-weight: 700;
}

thead td, thead th {
    border-bottom-width: 2px;
}

tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* === Site-specific === */

/* Logo */

.logo {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #1687FB;
}

/* Site icon */

.si { width: 16px; height: 16px; vertical-align: middle; }
.si-large { width: 24px; height: 24px; }

/* Video indicator */

.vi { font-size: 0.8em; margin-right: 0.15em; }

/* Time link */

.time-link { color: inherit; text-decoration: none; }
.time-link:hover { color: inherit; text-decoration: underline; }

/* Cluster hooks */

.hook { display: inline-block; margin: 6px 0; }
.hook-lg { font-size: 1.5rem; }
.hook-md { font-size: 1.25rem; }
.hook-sm { font-size: 1rem; }

/* Thumbnails */

.thumb { border-radius: var(--cn-radius); }
.thumb-sm { max-width: 150px; }
.thumb-full { width: 100%; height: auto; border-radius: var(--cn-radius); }

/* Entity image with attribution */

.entity-image-wrap {
    display: block;
}

.entity-image-wrap .image-attribution {
    display: block;
    font-size: 0.65rem;
    line-height: 1.3;
    padding-top: 2px;
}

/* Video wrapper - 16:9 aspect ratio */

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Cluster layout */

.cluster-row { margin-top: 0; }
.cluster-row > .col { padding-top: 0; padding-bottom: 0; }
.c3-top-margin { margin-top: 15px; }

.teaser-row { display: flex; align-items: flex-start; }
.teaser-row > a { flex-shrink: 0; }
.teaser-row > p { flex: 1; min-width: 0; margin-top: 0; margin-bottom: 8px; }

.row .clearfix > ul.clear-left:last-child {
    margin-bottom: 0;
}

/* === Utilities === */

.clearfix::after { content: ""; display: table; clear: both; }
.clear-left { clear: left; }
.pull-left { float: left; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-6 { margin-bottom: 4.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }