:root {
    --gray1:#F9F9F9;
    --gray2:#E7E7E7;
    --gray3:#CDCDCD;
    --gray4:#888;
    --gray5:#5B5B5B;

    --beige1:#F7F5F2;
    --beige2:#E5E1DA;
    --beige3:#ccc4b8;
    --beige4:#65615a;
    --gold: #89602d;

    --black1:#4c4c4c;
    --black2:#313030;
    --black3:#212121;

    --main-body-side-padding: 100px;

    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Space Grotesk", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

input {
    font-family: "Space Grotesk", sans-serif;
}

button {
    font-family: "Space Grotesk", sans-serif;
    border: none;
    color: var(--black3);
    background-color: var(--beige2);
    border-radius: 1000px;
    padding: 8px 16px;
}
button:hover {
    background-color: var(--beige3);
    cursor: pointer;
}

/* Base link colour. Any link a page/component stylesheet doesn't colour used to
   fall back to the browser-default blue; give it the site gold instead. This is
   an element selector (specificity 0,0,1), so every scoped rule (nav,
   breadcrumbs, footer, pagination, listings, …) overrides it and is unaffected.
   Author origin beats the UA stylesheet, so visited links go gold too instead of
   purple. Gold on white ≈ 5.6:1 → WCAG 2.1 AA (1.4.3); the UA underline is kept,
   so links remain distinguishable by more than colour (1.4.1). */
a {
    color: var(--gold);
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 10px;
    z-index: 100;
    transition: top 0.2s ease-in-out;
}
.skip-link:focus {
    top: 0;
}

/* Visible keyboard focus indicator for every interactive control (WCAG 2.4.7).
   Uses :focus-visible so mouse clicks don't show a ring, keyboard users do. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
/* Keyboard equivalents for hover-only affordances. */
button:focus-visible {
    background-color: var(--beige3);
}
#header_content input[type="submit"]:focus-visible {
    text-decoration: underline;
}
#for_publishers a:focus-visible {
    background-color: var(--gray3);
}

/* Screen-reader-only text: removed from view but kept in the accessibility tree. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

#header_content {
    display: flex;
    position: relative;
    overflow: hidden;
    background-color: var(--beige2);
    border-bottom: 1px solid var(--beige1);
    height: 140px;
}
/* #header_bar groups the slim mobile top row (logo + hamburger + a11y button).
   On desktop it is transparent (display:contents) so the original flex layout of
   #header_content is untouched; the mobile breakpoint turns it into the bar. */
#header_bar {
    display: contents;
}
#mobile_nav_btn {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}
#mobile_nav_btn > img {
    display: block;
    height: 28px;
    width: 28px;
}
#header_content input[type="submit"] {
    border: none;
    background: none;
    color: var(--black2);
    font-size: initial;
    padding: 0;
}
#header_content input[type="submit"]:hover {
    cursor: pointer;
}
#mhp_header_logo {
    height: 80px;
    padding: 30px;
    background-color: var(--beige1);
}
a:has(> #bazhum_header_logo) {
    display: block;
    width: fit-content;
}
#bazhum_header_logo {
    height: 50px;
    padding: 25px 0;
    display: block;
}

#subpages_list {
    padding: 0;
    margin: 0;
    display: flex;
}
#subpages_list > li {
    display: inline-block;
    padding-right: 40px;
}
#subpages_list > li > a {
    color: var(--black2);
    text-decoration: none;
}
#subpages_list > li:nth-child(1) {
    padding-left: 0;
}
#header_search {
    position: absolute;
    right: 100px;
    top: 0;
    padding: 12px 0;
    align-items: end;
}
#input_bar {
    justify-content: flex-end;
    display: flex;
    border-bottom: 1px solid var(--beige4);
    padding-bottom: 6px;
    margin: 0;
}
#input_bar > * {
    vertical-align: middle;
}
#input_bar > input[type=text] {
    border: none;
    background-color: transparent;
    width: 250px;
    font-weight: bold;
}
#input_bar > input::placeholder {
    color: var(--black2);
    font-family: "Space Grotesk", sans-serif;
}

#header_search {
    transition: 200ms ease-out top;
}
#header_search > a {
    font-size: smaller;
    text-decoration: none;
    color: var(--black2);
    float: right;
}
#header_search.hidden {
    top: -145px;
}

#header_nav {
    padding-left: 80px;
    position: absolute;
    left: 145px;
    top: 0;
    transition: 200ms ease-out top;
}
#header_nav.hidden {
    top: -145px;
}

#accessiblity_btn {
    position: absolute;
    top: 15px;
    right: 15px;
    transition: 200ms ease-out top;
}
#accessiblity_btn.hidden {
    top: -145px;
}

#close_accessiblity_menu {
    height: 1.5em;
    position: absolute;
    right: 15px;
    top: 15px;
}

#accessiblity_menu {
    position: absolute;
    left: 145px;
    top: 0;
    transition: 200ms ease-out top;
    display: flex;
    justify-content: space-around;
    width: calc(100% - 145px);
    height: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    background-color: white;
}
#accessiblity_menu.hidden {
    top: 145px;
}

#accessiblity_menu > div > span {
    font-weight: bold;
    display: block;
    padding: 15px 0;
}
#accessiblity_font_size > div {
    display: flex;
    align-items: center;
}
#accessiblity_font_size input[type="image"]:not(:last-of-type) {
    margin-right: 20px;
}
#accessiblity_font_size input[type="image"]:nth-of-type(1) {
    height: 2em;
}
#accessiblity_font_size input[type="image"]:nth-of-type(2) {
    height: 2.75em;
}
#accessiblity_font_size input[type="image"]:nth-of-type(3) {
    height: 3.25em;
}
#accessiblity_menu > div > button {
    padding: 4px 8px;
}
#accessiblity_menu > div > button.selected {
    background-color: var(--black3);
    color: var(--beige2);
}

#breadcrumbs {
    padding: 10px 50px;
    border-bottom: 1px solid var(--beige1);
    overflow-wrap: break-word;
}
#breadcrumbs > a {
    font-size: smaller;
    color: var(--black1);
    text-decoration: none;
    display: inline;
}
#breadcrumbs > a:not(:last-child)::after {
    content: "/";
    color: var(--gold);
    margin: 0 8px;
}
#breadcrumbs > a:last-child {
    font-weight: bold;
}

#main_content {
    padding: 30px var(--main-body-side-padding);
    padding-bottom: 50px;
    flex: 1;
    position: relative;
    /* Long unbreakable strings (titles, URLs, emails) wrap instead of forcing a
       horizontal scroll on narrow screens. */
    overflow-wrap: break-word;
}

.three_col_split {
    display: flex;
}
.three_col_split > * {
    display: inline-block;
}
.three_col_split > :nth-child(1) {
    width: 70%;
}
.three_col_split > :nth-child(2) {
    width: 15%;
}
.three_col_split > :nth-child(3) {
    width: 15%;
}

.four_col_split {
    display: flex;
}
.four_col_split > * {
    display: inline-block;
}
.four_col_split > :nth-child(1) {
    width: 50%;
}
.four_col_split > :nth-child(2) {
    width: 10%;
}
.four_col_split > :nth-child(3) {
    width: 25%;
}
.four_col_split > :nth-child(4) {
    width: 15%;
}

div.alphabet_carousel {
    width: 100%;
    padding-bottom: 40px;
}
.alphabet_carousel_elem {
    font-size: larger;
    font-weight: bold;
    text-decoration: none;
    color: var(--black2);
    background-color: var(--beige1);
    border: 1px solid var(--black1);
    padding: 7px;
    margin: 5px 5px;
    width: 1.1666em; /* this is a hack */
    text-align: center;
    display: inline-block;
}
.current_carousel_elem {
    color: white;
    background-color: var(--gold);
}

div#full_text {
    align-items: center;
    display: flex;
    position: relative;
}
div#full_text > label {
    color: var(--black2);
    font-weight: initial;
}
div#full_text > img {
    margin: 0 12px;
    height: 25px;
    user-select: none;
}
div#full_text > input[type=checkbox] {
    appearance:none;
    height: 26px;
    width: 26px;
    margin: 0;
    border: 1px solid var(--gray4);
}
div#full_text > input[type=checkbox]::before {
    clip-path: rect(12px 17px 14px 8px);
    width: 26px;
    height: 26px;
    background-color: var(--gold);
    content: "";
    display: block;
    position: absolute;
}
div#full_text > input[type=checkbox]:checked::before {
    clip-path: path("M9.00016 16.1698L4.83016 11.9998L3.41016 13.4098L9.00016 18.9998L21.0002 6.99984L19.5902 5.58984L9.00016 16.1698Z");
    width: 26px;
    height: 26px;
    background-color: var(--gold);
    content: "";
    display: block;
    position: absolute;
}

.a11y_main {
    max-width: 60%;
    margin: 0 auto;
}

#for_publishers {
    margin: 0 !important;
    padding: 100px;
    --gold_triple: 137, 96, 45;
    --opacity: 0.7;
    background: linear-gradient(0deg, rgba(var(--gold_triple), var(--opacity)), rgba(var(--gold_triple), var(--opacity))), url('/static/assets/bazhum-images-stock-3.png');
    background-size: cover;
    background-position: center;
    color: white;
    font-size: 1.33em;
}
#for_publishers a {
    background-color: white;
    color: var(--black3);
    border-radius: 1000px;
    padding: 8px 16px;
    text-decoration: none;
}
#for_publishers a:hover {
    cursor: pointer;
    background-color: var(--gray3);
}

footer {
    color: var(--beige3);
    background-color: var(--black2);
}
footer a {
    color: var(--beige3);
    margin-right: 30px;
    display: inline-block;
    text-decoration: none;
}
footer > div {
    padding: 40px 140px;
}
.footer_links > * {
    vertical-align: middle;
}
.footer_logos {
    background-color: var(--beige2);
}
.footer_logos img {
    max-height: 35px;
}

#back_top_btn > img {
    position: sticky;
    position: -webkit-sticky;
    bottom: 5vh;
    float: right;
    margin-right: calc(var(--main-body-side-padding)*-1);
    padding: 7px;
    background-color: var(--beige2);
    border-radius: 100px 100px 0px 0px;
    transform: rotate(-90deg);
}

.name_block > h1 {
    margin: 0;
}
.name_block > ul {
    margin: 5px 0;
    margin-bottom: 15px;
    padding-left: 10px;
    list-style: none;
}

/* Honour the OS "reduce motion" preference (WCAG 2.3.3): drop smooth scrolling
   and neutralise the slide/expand/rotate transitions used across the site. */
@media (prefers-reduced-motion: reduce) {
    :root {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Responsive reflow (WCAG 1.4.10): the layout must collapse to a single column
   down to 320px without horizontal scrolling. Two breakpoints, layered after
   the desktop rules so the wide-screen design is untouched.
   --------------------------------------------------------------------------- */

/* Medium: shave the oversized side paddings before the full mobile stack. */
@media (max-width: 1024px) {
    :root {
        --main-body-side-padding: 40px;
    }
    #main_content {
        padding-bottom: 32px;
    }
    #for_publishers {
        padding: 56px;
    }
    footer > div {
        padding: 30px 40px;
    }
}

/* Mobile: single column. */
@media (max-width: 640px) {
    :root {
        --main-body-side-padding: 16px;
    }

    /* Header becomes a slim sticky bar; nav + search drop down on demand. */
    html {
        scroll-padding-top: 64px;
    }
    #header_content {
        flex-direction: column;
        height: auto;
        overflow: visible;
        position: sticky;
        top: 0;
        z-index: 50;
    }
    #header_bar {
        display: flex;
        align-items: center;
        min-height: 56px;
        padding: 0 8px;
        box-sizing: border-box;
    }
    #mhp_header_logo {
        height: 32px;
        padding: 8px;
    }
    #mobile_nav_btn {
        display: inline-block;
        margin-left: auto;
    }
    #accessiblity_btn {
        position: static;
        top: auto;
        right: auto;
        height: 28px;
        padding: 8px;
        box-sizing: content-box;
    }
    #accessiblity_btn.hidden {
        display: none;
    }

    /* Nav + search collapse behind the hamburger; #header_content.nav-open (set
       by nav.js) reveals them as a drop-down panel below the bar. CSS hides them
       with display:none, so they leave the focus order while collapsed. */
    #header_nav,
    #header_search {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        padding-left: 0;
        box-sizing: border-box;
        display: none;
        border-top: 1px solid var(--beige1);
    }
    #header_content.nav-open #header_nav,
    #header_content.nav-open #header_search {
        display: block;
    }
    /* a11y.js still toggles .hidden when its overlay opens; keep that winning. */
    #header_nav.hidden,
    #header_search.hidden {
        display: none !important;
    }
    #header_nav {
        padding: 8px 16px;
    }
    #header_search {
        padding: 12px 16px;
    }
    #bazhum_header_logo {
        height: 36px;
        padding: 12px 0;
    }
    #subpages_list {
        flex-direction: column;
        gap: 4px;
    }
    #subpages_list > li {
        padding-right: 0;
    }
    #subpages_list > li > a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
    #subpages_list form input[type="submit"] {
        min-height: 44px;
        padding: 0 4px;
    }
    #input_bar > input[type=text] {
        width: 100%;
    }

    /* Accessibility menu becomes a full-screen overlay. It is fixed (not absolute)
       because the header now collapses to a slim bar, so an absolute inset:0 would
       only cover ~56px. z-index sits above the sticky header. */
    #accessiblity_menu {
        position: fixed;
        inset: 0;
        width: 100%;
        height: auto;
        min-height: 100%;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        z-index: 100;
        overflow-y: auto;
        box-sizing: border-box;
    }
    #accessiblity_menu.hidden {
        display: none;
    }

    /* Trim the remaining wide paddings. */
    #breadcrumbs {
        padding: 12px 16px;
        line-height: 1.6;
    }
    #main_content {
        padding-bottom: 24px;
    }
    footer > div {
        padding: 24px 16px;
    }
    /* Stack the footer rows so links and funding logos wrap tidily instead of
       relying on inline-block + margin-right (which wraps unevenly). */
    .footer_links,
    .footer_logos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
    }
    #for_publishers {
        padding: 48px 24px;
        box-sizing: border-box;
    }

    /* Multi-column rows stack (these back the article-list header/list rows). */
    .three_col_split,
    .four_col_split {
        flex-direction: column;
    }
    .three_col_split > *,
    .four_col_split > * {
        width: 100% !important;
    }

    /* Touch targets: bring dense controls up to a comfortable ≥44px tap size. */
    #accessiblity_menu > div > button {
        min-height: 44px;
    }
    .alphabet_carousel_elem {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }
    footer a {
        padding: 8px 0;
        margin-right: 0;
    }

    /* Keep text fields at ≥16px so iOS Safari doesn't auto-zoom on focus, without
       shrinking fields that are already larger (e.g. the homepage hero search). */
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
        font-size: max(16px, 1em);
    }
}