/* ==========================================================================
   Base — Reset, Typography & Layout Skeleton (Ruki theme)
   ========================================================================== */

/* ---- Web Fonts: self-hosted Mulish ----
   Downloaded from Google Fonts (fonts.gstatic.com), latin + latin-ext
   subsets, static per-weight woff2 files. latin-ext is required: the site's
   Azerbaijani text uses ə, ğ, ı, ö, ü, ş, ç, which fall outside plain latin.
   Self-hosted so the CSP can be `default-src 'self'` with no third-party
   font host, and so the page does not block on a render-blocking
   cross-origin request. */
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/mulish-400-latin-ext.550a07da739a.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/mulish-400-latin.7ef9dd981bae.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/mulish-600-latin-ext.4d4bf2aa2e9e.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/mulish-600-latin.9b22febd2ee0.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/mulish-700-latin-ext.aa7f7df147f5.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/mulish-700-latin.37c0b6908762.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/mulish-900-latin-ext.2647af376c29.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/mulish-900-latin.b1fcf0995d33.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Mulish';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/mulish-400italic-latin-ext.89924061828d.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Mulish';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/mulish-400italic-latin.eb38f6f61790.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Root ----
   Base font-size: 100% (16px), no 62.5% trick
   ------------------------------------------------------------------------ */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img:not(.custom-logo) {
    max-width: 100%;
    height: auto;
}

img {
    display: block;
}

/* ---- Body ---- */
body {
    font-family: var(--font-sans);
    font-size: var(--text-size-body);
    font-weight: var(--weight-regular);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background: var(--canvas-warm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    direction: ltr;
    overflow-x: hidden;
}

/* ---- Links ---- */
a {
    color: var(--link-color);
    text-decoration: underline;
    transition: var(--transition-color), var(--transition-bg);
}

a:hover {
    color: var(--link-hover-color);
}

/* ---- Keyboard focus (WCAG 2.4.7) ----
   Every interactive element gets a visible ring when reached by keyboard
   (focus-visible skips it for mouse/touch activation). */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-deep);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-family: var(--font-title);
    margin: 30px 0;
    font-weight: var(--weight-black);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--text-heading);
    line-height: var(--line-height-compact);
}

h1 {
    font-size: var(--text-size-h1);
}

h2 {
    font-size: var(--text-size-h2);
}

h3 {
    font-size: var(--text-size-h3);
    line-height: var(--line-height-normal);
}

h4 {
    font-size: var(--text-size-h4);
}

h5 {
    font-size: var(--text-size-h5);
}

h6 {
    font-size: var(--text-size-h6);
}

strong, b {
    font-weight: var(--weight-bold);
}

em, i {
    font-style: italic;
}

p {
    margin-bottom: var(--space-3);
}

p:last-child {
    margin-bottom: 0;
}

ul {
    margin: 30px 10px 30px 40px;
    padding: 0;
    list-style: none;
}

ol {
    margin-top: 30px;
    margin-bottom: 30px;
}

ol li,
ul li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 15px;
}

li > ul,
li > ol {
    margin-bottom: 10px;
    margin-left: 30px;
    margin-top: 10px;
}

blockquote {
    font-family: var(--font-title);
    font-size: 2.25rem;
    line-height: var(--line-height-compact);
    font-weight: var(--weight-black);
    margin: 50px 0;
    color: var(--brand-red);
    letter-spacing: var(--letter-spacing-heading);
    padding: 0 30px;
    border: none;
    font-style: normal;
}

blockquote strong {
    font-weight: var(--weight-black);
}

blockquote cite,
blockquote p cite {
    display: block;
    font-size: var(--text-size-body);
    color: var(--medium-grey);
    font-weight: var(--weight-bold);
    font-style: normal;
    margin-top: 10px;
}

blockquote cite::before {
    content: "\2015";
    margin-right: 5px;
    color: var(--medium-grey);
    font-weight: 500;
}

hr {
    border: 0;
    height: 1px;
    background: var(--light-border-color);
    margin: 30px 0;
}

/* ---- Container ---- */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--outer-gutter);
}

.container-narrow {
    max-width: var(--column-narrow);
    margin: 0 auto;
    padding: 0 var(--outer-gutter);
}

/* ---- Content Area (Ruki .content-area) ----
   Below --container-max-width the centring margin collapses to zero, so this
   needs its own horizontal padding or text touches the screen edge. */
.content-area {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-max-width);
    padding-inline: var(--outer-gutter);
}

@media (min-width: 768px) {
    .content-area {
        padding-inline: var(--outer-gutter-lg);
    }
}

/* ---- The Post wrapper (Ruki .the-post) ---- */
.the-post {
    margin: 0;
}

/* ---- Translation Note ----
   Base rule and `.translation-note a` live in components.css:184-196 (they
   were duplicated here and the later definition was winning); this hover
   rule is the only one, so it stays. */
.translation-note a:hover {
    color: var(--link-hover-color);
}

/* ---- Site Header (Ruki: full-width white bg, content centered at 1280px) ---- */
.site-header {
    padding: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    margin: 0 0 30px 0;
    background: var(--custom-header-bg);
    transition: var(--transition-bg);
    position: relative;
    z-index: 100;
}

.header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-top: 15px;
}

/* ---- Logo ---- */
.site-logo {
    display: flex;
    padding: 15px 0 0 0;
    text-decoration: none;
}

.site-logo img {
    max-height: 57px;
    width: auto;
    max-width: 270px;
    transition: var(--transition-sticky);
    image-rendering: -webkit-optimize-contrast;
}

.site-logo-text {
    margin: auto;
    color: var(--text-heading);
    font-size: 5.125rem;
    font-family: var(--font-title);
    font-weight: var(--weight-black);
    letter-spacing: -3px;
    text-decoration: none;
    transition: var(--transition-sticky);
    line-height: var(--line-height-compact);
}

/* ---- Tagline ---- */
.tagline {
    text-align: center;
    color: var(--medium-grey);
    margin-top: 15px;
}

/* ---- Header Right (lang + nav + toggle) ---- */
.header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.primary-menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    width: 100%;
}

/* ---- Language Switcher ---- */
.lang-switch {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: var(--text-size-small);
}

.lang-btn {
    padding: 4px 10px;
    border-radius: var(--radius-misc);
    font-size: var(--text-size-small);
    font-weight: var(--weight-black);
    color: var(--medium-grey);
    transition: var(--transition-btn);
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: none;
}

.lang-btn:hover {
    text-decoration: none;
    color: var(--link-hover-color);
}

.lang-btn.active {
    background: var(--brand-red);
    color: var(--white);
}

/* Mobile fallback (rendered inside #mainNav; see templates/base.html) */
.lang-switch-mobile {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--light-border-color);
}

/* ---- Main Navigation ----
   Geometry, type and the dropdown panel are taken from the live site's own
   `.menu-primary-navigation-container` / `.primary-nav` rules, read off
   bsulawreview.org rather than eyeballed: a 55px row, 20px/15px links at
   14px/700, and a fixed 200px submenu flush with the left edge of its parent
   whose items sit on 15px/30px padding.

   One rule is deliberately not copied. Ruki paints the hovered and current
   item in `--primary-nav-link-hover-color` (#f67280), which reaches only
   2.8:1 on white and fails WCAG AA for text; --brand-red (#dd3333, 4.6:1)
   keeps the same role in the palette and stays readable. Swap the two
   declarations below if an exact colour match matters more. */
.main-nav {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 5px 0;
}

.main-nav > ul {
    display: flex;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    min-height: 55px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.main-nav > ul > li {
    margin: 0;
    padding: 0;
    position: relative;
    line-height: var(--line-height-compact);
}

.main-nav > ul > li > a,
.main-nav > ul > li > button.dropdown-toggle {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    font-size: var(--text-size-small);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    color: var(--nav-link-color);
    text-decoration: none;
    transition: var(--transition-btn);
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-title);
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li > button.dropdown-toggle:hover,
.main-nav > ul > li:hover > a,
.main-nav > ul > li:hover > button.dropdown-toggle {
    color: var(--nav-link-hover-color);
    text-decoration: none;
}

/* Caret. Ruki draws this with a fontello glyph; a bordered box needs no font
   file, which matters under a `font-src 'self'` CSP. `.dropdown-arrow` still
   carries the character in the markup for anything that reads the DOM, so it
   is hidden by indent rather than removed. */
.dropdown-arrow {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-left: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    overflow: hidden;
    text-indent: 2em;
    flex: none;
}

/* Nested items open sideways, so their caret points that way. */
.dropdown .dropdown-arrow {
    transform: translateX(-0.15em) rotate(-45deg);
}

.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current-category-ancestor > a,
.main-nav > ul > li.current-post-ancestor > a {
    color: var(--nav-link-hover-color);
}

/* Dropdown
   Opens on :hover (mouse), :focus-within (Tab onto the parent link reveals
   the submenu, so the next Tab can reach into it) and .touch-open (a small
   script in base.html toggles this class on first tap, so a touch tap on a
   dropdown parent opens the submenu instead of immediately navigating away).

   Hidden with visibility rather than display so the panel can fade, matching
   the live site's `transition: all 0.2s ease`. visibility:hidden still takes
   the links out of the tab order, so the keyboard path above is unaffected. */
.has-dropdown .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-btn);
    background: var(--nav-submenu-background);
    border-radius: var(--radius-card);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
    padding: 0;
    list-style: none;
    margin: 0;
    text-align: left;
    z-index: 2000;
}

.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.touch-open > .dropdown {
    visibility: visible;
    opacity: 1;
}

.dropdown > li {
    margin: 0;
    padding: 0;
    width: 100%;
    line-height: 1.5;
}

.dropdown > li.has-dropdown {
    position: relative;
}

.dropdown > li > a,
.dropdown > li > button.dropdown-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 30px;
    font-size: var(--text-size-small);
    font-weight: var(--weight-bold);
    line-height: 1.5;
    color: var(--nav-link-color);
    text-decoration: none;
    text-align: left;
    transition: var(--transition-btn);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-title);
}

.dropdown > li > a:hover,
.dropdown > li > button.dropdown-toggle:hover {
    color: var(--nav-link-hover-color);
    text-decoration: none;
}

.dropdown > li.current-menu-item > a {
    color: var(--nav-link-hover-color);
}

/* Sub-dropdown */
.dropdown .has-dropdown .dropdown {
    left: 100%;
    top: 0;
}

/* ---- Nav toggle (hamburger) ---- */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    min-width: 53px;
    align-items: center;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #6c6f76;
    border-radius: 2px;
    transition: var(--transition-btn);
}

/* ---- Site Main ---- */
.site-main {
    min-height: 60vh;
}

main {
    margin-bottom: 45px;
}

/* ---- Content Sections ---- */
.section-cream {
    background: var(--canvas-warm);
    padding: var(--space-5) 0;
}

.section-white {
    background: var(--card-bg);
    padding: var(--space-7) 0;
}

/* ---- Sidebar / ISSN bar ---- */
.site-sidebar {
    background: var(--canvas-warm);
    padding: var(--space-5) 0;
}

.sidebar-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: center;
}

.sidebar-issn {
    font-size: var(--text-size-small);
    color: var(--medium-grey);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-issn strong {
    color: var(--text-heading);
    font-weight: var(--weight-black);
}

.sidebar-badges {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.sidebar-badges a {
    opacity: 0.8;
    transition: var(--transition-btn);
}

.sidebar-badges a:hover {
    opacity: 1;
    text-decoration: none;
}

.sidebar-badges img {
    max-height: 50px;
    width: auto;
}

/* ---- Footer ----
   Was white on the cream --canvas-warm page, which read as another content
   section rather than chrome. */
.site-footer {
    background: var(--band-crumb);
    border-top: 1px solid var(--rule);
    font-family: var(--font-title);
    color: var(--text-primary);
    padding: 40px 0 0 0;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 var(--outer-gutter) var(--space-5);
}

.footer-brand {
    /* flex-shrink: 0 (the old "0 0 auto") let the bilingual site title lay
       out at its full one-line width and overflow the viewport around
       768px instead of wrapping. min-width: 0 lets it shrink like a normal
       block again. */
    flex: 1 1 320px;
    min-width: 0;
}

.footer-logo {
    font-size: var(--text-size-h4);
    font-weight: var(--weight-black);
    color: var(--text-heading);
    margin-bottom: var(--space-2);
}

.footer-info {
    font-size: var(--text-size-small);
    color: var(--medium-grey);
    max-width: 360px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin: 0 5px;
    padding: 0;
}

.footer-links a {
    color: var(--text-primary);
    font-size: var(--text-size-small);
    font-weight: var(--weight-black);
    text-decoration: none;
    transition: var(--transition-color);
}

.footer-links a:hover {
    color: var(--link-hover-color);
}

.footer-links span {
    color: var(--medium-grey);
    font-size: var(--text-size-small);
    font-weight: var(--weight-black);
}

.footer-bottom {
    border-top: 1px solid var(--light-border-color);
    padding: 30px var(--outer-gutter);
    text-align: center;
    font-size: var(--text-size-small);
    color: var(--medium-grey);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.footer-copyright {
    padding-top: 10px;
}

/* ---- Footer Cover Image ---- */
.footer-cover {
    margin-bottom: var(--space-2);
}

.footer-cover-img {
    /* Was 50px tall (42px wide) -- too small to read as anything but a red
       smudge. The source file is already a legible 200x236; just display it
       at a size that reads. */
    max-height: 142px;
    width: auto;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-thumbnail);
}

/* ---- Breadcrumb ---- */
.breadcrumb {
    font-size: var(--text-size-small);
    color: var(--medium-grey);
    margin-bottom: var(--space-3);
    padding: 0;
}

.breadcrumb a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: var(--weight-bold);
}

.breadcrumb a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.breadcrumb .sep {
    margin: 0 5px;
    color: var(--medium-grey);
}

.breadcrumb .current {
    color: var(--text-heading);
    font-weight: var(--weight-black);
}

/* ---- Page Header (matching Ruki .page-header) ---- */
.page-header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
}

.page-title {
    margin: 0 0 8px 0;
    line-height: 1;
    font-size: var(--text-size-h1);
    font-weight: var(--weight-black);
    font-family: var(--font-title);
    color: var(--text-heading);
    letter-spacing: var(--letter-spacing-heading);
}

.page-subtitle {
    font-size: var(--text-size-body);
    color: var(--medium-grey);
    font-weight: var(--weight-regular);
    margin: 10px 0 0 0;
}

/* ---- Screen reader text ---- */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* ---- Skip to content ----
   First focusable element in the body; off-screen until it receives
   keyboard focus, then jumps above the header. */
.skip-link {
    position: absolute;
    top: -60px;
    left: 0;
    z-index: 3000;
    padding: 12px 20px;
    background: var(--accent-deep);
    color: var(--white);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus-visible,
.skip-link:focus {
    top: 0;
    outline: 2px solid var(--white);
    outline-offset: -4px;
}