/*
 * GetFonts 2026 refresh: visual-only overrides on top of Bootstrap 3 + style.css.
 * No markup changes depend on this file; drop the <link> in main.twig to roll back.
 */
:root {
    --gf-accent: #563d7c;
    --gf-accent-2: #7b55b8;
    --gf-accent-soft: #f1ecf9;
    --gf-bg: #f6f5fa;
    --gf-card: #ffffff;
    --gf-border: #e7e3ef;
    --gf-text: #1f1d2b;
    --gf-muted: #6b6880;
    --gf-link: #5b3fa0;
    --gf-radius: 14px;
    --gf-radius-sm: 9px;
    --gf-shadow: 0 1px 2px rgba(31, 29, 43, .05), 0 6px 20px rgba(31, 29, 43, .06);
    --gf-shadow-hover: 0 2px 4px rgba(31, 29, 43, .06), 0 12px 28px rgba(86, 61, 124, .16);
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--gf-text);
    background: var(--gf-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

a { color: var(--gf-link); transition: color .15s ease; }
a:hover, a:focus { color: var(--gf-accent-2); }
a:focus-visible, .btn:focus-visible, input:focus-visible {
    outline: 2px solid var(--gf-accent-2);
    outline-offset: 2px;
}

h1 { font-weight: 700; letter-spacing: -.015em; }
h2, h3, .fontpage__header_lilac { font-weight: 650; letter-spacing: -.01em; }

/* Header */
.bs-docs-nav {
    background: var(--gf-accent);
    border: 0;
    box-shadow: 0 2px 14px rgba(31, 29, 43, .18);
}
.bs-docs-nav .navbar-nav > li > a { border-radius: 8px; margin: 8px 2px; padding: 7px 12px; transition: background .15s ease; }
.bs-docs-nav .navbar-nav > li > a:hover { background: rgba(255, 255, 255, .12); }
.bs-docs-nav .navbar-nav > .active > a,
.bs-docs-nav .navbar-nav > .active > a:hover,
.bs-docs-nav .navbar-nav > .active > a:focus { background: rgba(255, 255, 255, .18); color: #fff; }
.bs-docs-nav .dropdown-menu { border: 0; border-radius: var(--gf-radius-sm); box-shadow: var(--gf-shadow-hover); padding: 6px; }
.bs-docs-nav .dropdown-menu > li > a { border-radius: 6px; padding: 6px 12px; }

.main-search-input {
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    padding: 5px 40px 5px 14px;
    transition: background .15s ease, box-shadow .15s ease;
}
.main-search-input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.main-search-submit { border-radius: 0 999px 999px 0; background: transparent; }

/* Main column and sidebar as cards */
.bs-docs-container > .row > .col-md-9 {
    background: var(--gf-card);
    border-radius: var(--gf-radius);
    box-shadow: var(--gf-shadow);
    padding-top: 18px;
    padding-bottom: 24px;
    margin-bottom: 30px;
}
.bs-sidebar {
    background: var(--gf-card);
    border-radius: var(--gf-radius);
    box-shadow: var(--gf-shadow);
    padding: 10px 8px;
}
.bs-sidenav { margin: 0; padding: 0; background: transparent; }
.bs-sidenav > li > a {
    border: 0 !important;
    border-radius: 8px;
    color: #4a4760;
    padding: 6px 12px;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
.bs-sidenav > li > a:hover,
.bs-sidenav > li > a:focus { background: var(--gf-accent-soft); color: var(--gf-accent); }
.bs-sidenav > .active > a,
.bs-sidenav > .active > a:hover,
.bs-sidenav > .active > a:focus { background: var(--gf-accent); color: #fff; font-weight: 600; }

/* Hero */
.jumbotron2 {
    border-radius: var(--gf-radius);
    background-color: var(--gf-accent);
    background-image: url("../img/bg-header.png"), linear-gradient(135deg, #563d7c 0%, #7b55b8 100%);
    box-shadow: 0 10px 30px rgba(86, 61, 124, .25);
}

/* "Support the project" share box floats inside the intro text: keep it narrow so the text beside it stays readable */
.jumbotron2:has(.likeus_block) { max-width: 340px; }
@media (max-width: 767px) {
    .pull-right:has(.likeus_block) { float: none !important; }
    .jumbotron2:has(.likeus_block) { max-width: none; margin: 0 0 20px 0 !important; }
}

.breadcrumbs, .breadcrumbs a { color: var(--gf-muted); font-size: 13px; }
blockquote { border-left: 4px solid var(--gf-accent-soft); color: #3b3850; }
hr { border-top-color: var(--gf-border); }

/* Buttons */
.btn { border-radius: var(--gf-radius-sm); transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.btn-default { border-color: var(--gf-border); color: #3b3850; }
.btn-default:hover, .btn-default:focus { border-color: var(--gf-accent-2); color: var(--gf-accent); background: var(--gf-accent-soft); }
.btn-group > .btn:first-child:not(:last-child) { border-radius: var(--gf-radius-sm) 0 0 var(--gf-radius-sm); }
.btn-group > .btn:last-child:not(:first-child) { border-radius: 0 var(--gf-radius-sm) var(--gf-radius-sm) 0; }
.btn-group > .btn.active,
.btn-group > .btn.active:hover {
    background: var(--gf-accent);
    border-color: var(--gf-accent);
    color: #fff;
    box-shadow: none;
}

/* Font previews: lists, home grid, "same family" blocks */
.btn:has(> img) {
    background: #fff;
    border: 1px solid var(--gf-border);
    border-radius: var(--gf-radius);
    padding: 8px;
    box-shadow: 0 1px 2px rgba(31, 29, 43, .04);
}
.btn:has(> img):hover,
.btn:has(> img):focus {
    background: #fff;
    border-color: #d8cdee;
    box-shadow: var(--gf-shadow-hover);
    transform: translateY(-2px);
}
.btn > img { border-radius: 6px; max-width: 100%; height: auto; }
#fonts_list h2 .btn { font-weight: 600; color: var(--gf-accent); }
#fonts_list h2 .btn:hover { background: var(--gf-accent); border-color: var(--gf-accent); color: #fff; }
#fonts_list p b { color: var(--gf-muted); font-weight: 500; }

/* Pagination */
.pagination > li > a, .pagination > li > span { border-color: var(--gf-border); color: var(--gf-link); margin: 0 2px; border-radius: 8px !important; }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover { background: var(--gf-accent); border-color: var(--gf-accent); }
.pagination > li > a:hover { background: var(--gf-accent-soft); color: var(--gf-accent); }

/* Font page */
.nav-tabs { border-bottom-color: var(--gf-border); }
.nav-tabs > li > a { border-radius: var(--gf-radius-sm) var(--gf-radius-sm) 0 0; color: var(--gf-muted); }
.nav-tabs > li > a:hover { background: var(--gf-accent-soft); border-color: transparent; color: var(--gf-accent); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { color: var(--gf-accent); border-color: var(--gf-border) var(--gf-border) transparent; box-shadow: inset 0 3px 0 var(--gf-accent-2); }
.table { border-radius: var(--gf-radius-sm); overflow: hidden; }
.table > tbody > tr > td, .table > tbody > tr > th { border-top-color: #f0edf5; }
.table-hover > tbody > tr:hover { background: #faf8fd; }
pre, code { border-radius: var(--gf-radius-sm); }
pre { background: #faf9fc; border-color: var(--gf-border); }
.form-control { border-radius: var(--gf-radius-sm); border-color: var(--gf-border); box-shadow: none; }
.form-control:focus { border-color: var(--gf-accent-2); box-shadow: 0 0 0 3px rgba(123, 85, 184, .15); }

/* Footer */
#footer {
    background: #fff;
    border-top: 1px solid var(--gf-border);
    color: var(--gf-muted);
}
#footer a { color: var(--gf-muted); }
#footer a:hover { color: var(--gf-accent); }

/* Cookie banner (cookieconsent v1) */
.cc_banner-wrapper .cc_banner {
    background: rgba(31, 29, 43, .94) !important;
    color: #f2f0f7 !important;
    font-family: inherit !important;
    backdrop-filter: blur(6px);
}
.cc_banner-wrapper .cc_banner .cc_message { color: #f2f0f7 !important; }
.cc_banner-wrapper .cc_banner .cc_more_info { color: #c9b8ec !important; }
.cc_banner-wrapper .cc_banner .cc_btn {
    background: #fff !important;
    color: var(--gf-accent) !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
}

@media (max-width: 991px) {
    .bs-docs-container > .row > .col-md-9 { border-radius: 0; box-shadow: none; }
    .bs-sidebar { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .btn:has(> img):hover { transform: none; }
}

/* "About the font" block (font_descriptions) */
.font-about { margin: 10px 0 30px; }
.font-about h2 { margin-top: 30px; margin-bottom: 14px; font-size: 22px; }
/* Same text style as the intro paragraph above it (.font_description inside blockquote) */
.font-about p,
.blockquote_normal p.font_description { font-size: 16px; line-height: 1.5; color: var(--gf-text); }