/* ==========================================================
   BESTQUEST
   Global Design System
   Version 1.0
   ========================================================== */


/* ==========================================================
   BESTQUEST GLOBAL DESIGN SYSTEM
   ========================================================== */


/* ----------------------------------------------------------
   01. DESIGN TOKENS
   ---------------------------------------------------------- */

:root {

    /* Brand */
    --bq-navy: #12263a;
    --bq-navy-dark: #0c1a28;
    --bq-blue: #1769aa;
    --bq-blue-dark: #12588f;

    /* Text */
    --bq-heading: #16202a;
    --bq-text: #425466;
    --bq-muted: #6b7785;

    /* Surfaces */
    --bq-white: #ffffff;
    --bq-page: #f7f8fa;
    --bq-soft: #eef2f5;
    --bq-soft-blue: #eef5fa;

    /* Borders */
    --bq-border: #dde3e8;
    --bq-border-strong: #c9d2d9;

    /* Typography */
    --bq-font-sans:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --bq-font-serif:
    Georgia,
    "Times New Roman",
    serif;

    /* Layout */
    --bq-site: 1200px;
    --bq-wide: 1040px;
    --bq-reading: 760px;

    /* Radius */
    --bq-radius-small: 4px;
    --bq-radius: 8px;
    --bq-radius-large: 12px;

    /* Shadows */
    --bq-shadow:
        0 1px 2px rgba(15, 35, 50, 0.04),
        0 6px 20px rgba(15, 35, 50, 0.05);

    /* Animation */
    --bq-transition: 180ms ease;
}


/* ----------------------------------------------------------
   02. GLOBAL RESET / BASE
   ---------------------------------------------------------- */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;

    background: var(--bq-white);
    color: var(--bq-text);

    font-family: var(--bq-font-sans);
    font-size: 17px;
    line-height: 1.72;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ----------------------------------------------------------
   03. GENERATEPRESS FOUNDATION
   ---------------------------------------------------------- */

.grid-container {
    max-width: var(--bq-site);
}

body,
.site,
.site-content,
.inside-article {
    background: var(--bq-white);
}

.site-content {
    padding-top: 0;
    padding-bottom: 0;
}

.inside-article {
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
}


/* ----------------------------------------------------------
   04. TYPOGRAPHY
   ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--bq-heading);
}

h1,
h2 {
    font-family: var(--bq-font-serif);
    font-weight: 700;
    letter-spacing: -0.025em;
}

h3,
h4,
h5,
h6 {
    font-family: var(--bq-font-sans);
    font-weight: 700;
    letter-spacing: -0.015em;
}

h1 {
    margin: 0 0 28px;

    font-size: clamp(44px, 5vw, 64px);
    line-height: 1.04;
}

h2 {
    margin: 64px 0 22px;

    font-size: clamp(32px, 3.5vw, 42px);
    line-height: 1.15;
}

h3 {
    margin: 44px 0 16px;

    font-size: 25px;
    line-height: 1.28;
}

h4 {
    margin: 34px 0 12px;

    font-size: 20px;
    line-height: 1.35;
}

p {
    margin-top: 0;
    margin-bottom: 1.45em;
}

strong {
    color: var(--bq-heading);
    font-weight: 700;
}


/* ----------------------------------------------------------
   05. LINKS
   ---------------------------------------------------------- */

a {
    color: var(--bq-blue);

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition: color var(--bq-transition);
}

a:hover {
    color: var(--bq-blue-dark);
}


/* ----------------------------------------------------------
   06. STANDARD WIDTH CLASSES
   ---------------------------------------------------------- */

.bq-container {
    width: min(calc(100% - 48px), var(--bq-site));
    margin-inline: auto;
}

.bq-wide {
    width: min(calc(100% - 48px), var(--bq-wide));
    margin-inline: auto;
}

.bq-reading {
    width: min(calc(100% - 48px), var(--bq-reading));
    margin-inline: auto;
}


/* ----------------------------------------------------------
   07. STANDARD SECTIONS
   ---------------------------------------------------------- */

.bq-section {
    padding: 80px 0;
}

.bq-section--compact {
    padding: 56px 0;
}

.bq-section--soft {
    background: var(--bq-page);
}

.bq-section--blue {
    background: var(--bq-soft-blue);
}

.bq-section--dark {
    background: var(--bq-navy);
    color: rgba(255,255,255,.82);
}


/* ----------------------------------------------------------
   08. SITE HEADER
   ---------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--bq-border);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.admin-bar .site-header {
    top: 32px;
}

.inside-header {
    max-width: var(--bq-site);
    min-height: 82px;

    margin-inline: auto;
    padding: 14px 24px;

    display: flex;
    align-items: center;
}

.site-branding {
    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-right: 44px;
}

.site-title {
    margin: 0;

    font-family: var(--bq-font-sans);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.site-title a,
.site-title a:hover,
.site-title a:focus {
    color: var(--bq-heading);
    text-decoration: none;
}

.site-description {
    margin: 7px 0 0;

    color: var(--bq-muted);

    font-family: var(--bq-font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.025em;
}


/* ----------------------------------------------------------
   09. PRIMARY NAVIGATION
   ---------------------------------------------------------- */

.main-navigation {
    margin-left: auto;

    background: transparent;
}

.main-navigation .inside-navigation {
    min-height: 52px;
}

.main-navigation .main-nav > ul {
    display: flex;
    align-items: center;
    gap: 4px;
}

.main-navigation .main-nav > ul > li > a {
    position: relative;

    padding: 0 15px;

    color: var(--bq-text);
    background: transparent;

    font-family: var(--bq-font-sans);
    font-size: 14px;
    font-weight: 650;
    line-height: 52px;
    letter-spacing: 0.005em;

    text-decoration: none;

    transition: color var(--bq-transition);
}

.main-navigation .main-nav > ul > li > a::after {
    content: "";

    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 8px;

    height: 2px;

    background: var(--bq-blue);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform var(--bq-transition);
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
    color: var(--bq-heading);
    background: transparent;
}

.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}


/* Dropdowns */

.main-navigation ul ul {
    min-width: 220px;

    padding: 8px;

    background: var(--bq-white);

    border: 1px solid var(--bq-border);
    border-radius: var(--bq-radius);

    box-shadow: var(--bq-shadow);
}

.main-navigation ul ul li a {
    padding: 11px 14px;

    color: var(--bq-text);
    background: transparent;

    font-size: 14px;
    line-height: 1.4;

    border-radius: var(--bq-radius-small);
}

.main-navigation ul ul li a:hover {
    color: var(--bq-heading);
    background: var(--bq-page);
}


/* ----------------------------------------------------------
   09A. MOBILE NAVIGATION
   ---------------------------------------------------------- */

.menu-toggle {
    padding: 10px 12px;

    background: transparent;
    color: var(--bq-heading);

    border: 1px solid var(--bq-border);
    border-radius: var(--bq-radius-small);

    font-size: 14px;
    font-weight: 700;
}

.menu-toggle:hover,
.menu-toggle:focus {
    background: var(--bq-page);
    color: var(--bq-heading);
}

@media (max-width: 782px) {

    .admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 768px) {

    .site-header {
        position: sticky;
    }

    .inside-header {
        min-height: 70px;

        padding: 12px 18px;
    }

    .site-branding {
        margin-right: 16px;
    }

    .site-title {
        font-size: 24px;
    }

    .site-description {
        display: none;
    }

    .main-navigation .main-nav > ul {
        display: block;
    }

    .main-navigation.toggled .main-nav {
        margin-top: 10px;

        background: var(--bq-white);

        border-top: 1px solid var(--bq-border);
    }

    .main-navigation .main-nav > ul > li > a {
        padding: 13px 20px;

        line-height: 1.4;

        border-bottom: 1px solid var(--bq-border);
    }

    .main-navigation .main-nav > ul > li > a::after {
        display: none;
    }
}
/* ----------------------------------------------------------
   10. BUTTON SYSTEM
   ---------------------------------------------------------- */

.bq-button,
.wp-block-button__link,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 11px 22px;

    border: 1px solid var(--bq-blue);
    border-radius: var(--bq-radius-small);

    background: var(--bq-blue);
    color: #fff;

    font-family: var(--bq-font-sans);
    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        background var(--bq-transition),
        border-color var(--bq-transition);
}

.bq-button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--bq-blue-dark);
    border-color: var(--bq-blue-dark);
    color: #fff;
}

.bq-button--outline {
    background: transparent;
    color: var(--bq-heading);
    border-color: var(--bq-border-strong);
}

.bq-button--outline:hover {
    background: var(--bq-page);
    color: var(--bq-heading);
}


/* ----------------------------------------------------------
   11. CARD SYSTEM
   ---------------------------------------------------------- */

.bq-card {
    background: var(--bq-white);

    border: 1px solid var(--bq-border);
    border-radius: var(--bq-radius);

    box-shadow: var(--bq-shadow);
}

.bq-card__body {
    padding: 28px;
}


/* ----------------------------------------------------------
   12. EDITORIAL LABEL
   ---------------------------------------------------------- */

.bq-kicker {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--bq-blue);

    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .13em;

    text-transform: uppercase;
}


/* ----------------------------------------------------------
   13. ARTICLE FOUNDATION
   ---------------------------------------------------------- */

.entry-content {
    color: var(--bq-text);
}

.entry-meta {
    color: var(--bq-muted);

    font-size: 13px;
}

.entry-meta a {
    color: inherit;
}

.entry-content blockquote {
    margin: 42px 0;
    padding: 8px 0 8px 26px;

    border-left: 3px solid var(--bq-blue);

    color: var(--bq-heading);

    font-family: var(--bq-font-serif);
    font-size: 22px;
    line-height: 1.55;
}


/* ----------------------------------------------------------
   14. LISTS
   ---------------------------------------------------------- */

.entry-content ul,
.entry-content ol {
    margin-bottom: 30px;
}

.entry-content li {
    margin-bottom: 9px;
}


/* ----------------------------------------------------------
   15. TABLES
   ---------------------------------------------------------- */

table {
    width: 100%;

    margin: 36px 0;

    border-collapse: collapse;

    font-size: 15px;
}

th,
td {
    padding: 14px 16px;

    border: 1px solid var(--bq-border);

    text-align: left;
    vertical-align: top;
}

th {
    background: var(--bq-page);

    color: var(--bq-heading);

    font-weight: 700;
}


/* ----------------------------------------------------------
   16. FORMS
   ---------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--bq-border-strong);
    border-radius: var(--bq-radius-small);

    background: #fff;
    color: var(--bq-heading);

    font: inherit;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;

    border-color: var(--bq-blue);

    box-shadow: 0 0 0 3px rgba(23,105,170,.12);
}


/* ----------------------------------------------------------
   17. DISCLOSURE / NOTICE
   ---------------------------------------------------------- */

.bq-notice {
    padding: 20px 22px;

    background: var(--bq-page);

    border-left: 3px solid var(--bq-blue);

    color: var(--bq-text);

    font-size: 14px;
    line-height: 1.6;
}


/* ----------------------------------------------------------
   18. FOOTER FOUNDATION
   ---------------------------------------------------------- */

.site-footer {
    background: var(--bq-navy-dark);
    color: rgba(255,255,255,.68);
}

.footer-widgets {
    background: var(--bq-navy);
    color: rgba(255,255,255,.72);
}

.site-footer a {
    color: rgba(255,255,255,.84);
}

.site-footer a:hover {
    color: #fff;
}

.site-info {
    background: var(--bq-navy-dark);

    color: rgba(255,255,255,.58);

    font-size: 13px;
}


/* ----------------------------------------------------------
   19. MOBILE
   ---------------------------------------------------------- */

@media (max-width: 768px) {

    body {
        font-size: 16px;
        line-height: 1.68;
    }

    .bq-container,
    .bq-wide,
    .bq-reading {
        width: calc(100% - 36px);
    }

    .bq-section {
        padding: 56px 0;
    }

    .bq-section--compact {
        padding: 40px 0;
    }

    .inside-header {
        padding: 17px 20px;
    }

    .site-title {
        font-size: 24px;
    }

    h1 {
        font-size: clamp(38px, 11vw, 48px);
    }

    h2 {
        margin-top: 48px;
        font-size: 30px;
    }

    h3 {
        margin-top: 36px;
        font-size: 22px;
    }

    .bq-card__body {
        padding: 22px;
    }
}