/* ==========================================================================
   LIBERAL ARTS AND SOCIAL STUDIES INTERNATIONAL JOURNAL (LAASSIJ)
   Production Stylesheet - ThaiJO / OJS 3.3 Base
   ISSN 3057-1006 (Online) | Faculty of Liberal Arts, RUTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Kanit:wght@400;500;600&family=Sarabun:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & SYSTEM VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --header-navy: #020167;
  --header-navy-dark: #01013d;

  --gold-primary: #ebc327;
  --gold-tint: #fffbeb;
  --gold-border: rgba(235, 195, 39, 0.35);

  --blue-ribbon-start: #0a1f5c;
  --blue-ribbon-end: #030a24;

  --btn-blue: #1a3680;
  --btn-blue-hover: #142a66;

  --text-main: #0f172a;
  --text-body: #334155;
  --text-muted: #64748b;

  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-subtle: #f1f5f9;
  --border-subtle: #e2e8f0;
  --border-card: #cbd5e1;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 5px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 14px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 28px -4px rgba(15, 23, 42, 0.1);

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 9999px;

  --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY & RESET
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body,
#Options blockquote {
  font-family: 'Inter', 'Sarabun', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--text-body) !important;
  background-color: var(--bg-page) !important;
  text-shadow: none !important;
  padding-bottom: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

.pkp_structure_page {
  padding-top: 0;
}

::selection {
  background: rgba(235, 195, 39, 0.3);
  color: var(--text-main);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. HEADER & TWO-ROW NAVIGATION LAYOUT
   -------------------------------------------------------------------------- */
.container-fluid {
  display: block !important;
}

.navbar-default {
  background-color: var(--header-navy) !important;
  background: var(--header-navy) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  margin: 0 0 24px 0 !important;
  padding: 12px 24px 10px !important;
  height: auto !important;
  min-height: auto !important;
  text-shadow: none !important;
}

/* Top User & Locale Bar */
#navigationUser {
  margin-bottom: 6px;
}

.navbar-default #navigationUser > li a {
  font-family: 'Inter', 'Kanit', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #f1f5f9 !important;
  padding: 6px 12px !important;
  text-shadow: none !important;
}

.navbar-default #navigationUser > li a:hover,
.navbar-default #navigationUser > li a:focus {
  color: var(--gold-primary) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--r-sm);
}

#navigationUser .badge {
  background-color: var(--gold-primary);
  color: #000;
  font-weight: 700;
  font-size: 11px;
}

/* Row 1: Logo & Title Area */
.navbar-header {
  position: relative !important;
  display: block !important;
  float: none !important;
  width: 100% !important;
  min-height: 95px !important;
  margin-bottom: 8px !important;
}

.site-name {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 95px !important;
}

/* Logo on Left */
.navbar-brand-logo {
  float: left !important;
  display: inline-block !important;
  height: auto !important;
  padding: 2px 16px 2px 0 !important;
  margin: 0 !important;
}

.navbar-brand-logo img {
  height: 90px !important;
  max-height: 90px !important;
  width: auto !important;
  display: block !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  transition: var(--transition);
}

.navbar-brand-logo img:hover {
  transform: scale(1.02);
}

/* Title on Right */
.site-name::before {
  display: block !important;
  content: 'Liberal Arts and Social Studies International Journal' !important;
  color: #ffffff !important;
  font-family: 'Inter', 'Kanit', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.3px !important;
  padding-top: 12px !important;
  margin-left: 125px !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45) !important;
}

/* Subtitle & ISSN */
.site-name::after {
  display: block !important;
  content: '(LAASSIJ) ISSN 3057-1006 (Online)' !important;
  color: #ebc327 !important;
  font-family: 'Inter', 'Kanit', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.5px !important;
  margin-top: 5px !important;
  margin-left: 125px !important;
  white-space: nowrap !important;
  text-shadow: 0 0 6px rgba(235, 195, 39, 0.45) !important;
}

/* Row 2: Navigation Bar */
#nav-menu {
  clear: both !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  padding-top: 6px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.navbar-default #main-navigation {
  float: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-default #main-navigation > li {
  float: left !important;
}

.navbar-default #main-navigation > li > a {
  padding: 10px 18px 10px 0 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: 'Inter', 'Kanit', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  transition: var(--transition);
}

.navbar-default #main-navigation > li > a:hover,
.navbar-default #main-navigation > li > a:focus,
.navbar-default #main-navigation > li > a:active,
.navbar-default #main-navigation > li.open > a {
  color: var(--gold-primary) !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Dropdown Menus */
.dropdown-menu {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  margin-top: 6px;
  min-width: 210px;
}

.dropdown-menu li > a {
  color: var(--text-main) !important;
  text-shadow: none !important;
  background: transparent !important;
  font-family: 'Inter', 'Kanit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 9px 14px !important;
  border-radius: var(--r-sm);
  transition: var(--transition);
}

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus {
  background-color: var(--gold-tint) !important;
  color: #92400e !important;
  transform: translateX(3px);
  outline: none !important;
}

/* Search Box */
.navbar-form {
  float: right !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.form-control {
  color: var(--text-main) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--r-pill) 0 0 var(--r-pill) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  height: 38px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 8px 14px !important;
}

.form-control:focus {
  background-color: #ffffff !important;
  border-color: var(--gold-primary) !important;
  box-shadow: none !important;
}

.pull-md-right form button {
  color: #1e293b !important;
  background-color: var(--gold-primary) !important;
  border: 1px solid var(--gold-primary) !important;
  border-radius: 0 var(--r-pill) var(--r-pill) 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  height: 38px !important;
  padding: 0 16px !important;
  text-shadow: none !important;
  transition: var(--transition);
}

.pull-md-right form button:hover,
.pull-md-right form button:focus {
  background-color: #f0cc3d !important;
  color: #000000 !important;
}

/* --------------------------------------------------------------------------
   4. PURE-CSS SECTION HEADERS
   -------------------------------------------------------------------------- */
.galleys .page-header,
.sections .section .page-header,
.contact_section h3,
.pkp_page_archive .page-header,
.pkp_page_announcement .page-header,
.pkp_page_ethics .page-header,
.pkp_page_about .page-header,
.pkp_page_submissions .page-header,
.pkp_page_editorialTeam .page-header,
.pkp_page_privacy .page-header,
.pkp_page_contact .page-header,
.ribbon-banner-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  margin: 28px 0 20px 0 !important;
  padding: 0 0 0 18px !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  border-left: 6px solid var(--gold-primary) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(2, 1, 103, 0.12) !important;
  background-image: none !important;
  background: linear-gradient(90deg, #020167 0%, #0d226b 70%, #17338f 100%) !important;
}

.galleys .page-header h2,
.sections .section .page-header h2,
.contact_section h3,
.galleys .page-header small,
.sections .section .page-header small,
.pkp_page_archive .page-header h1,
.pkp_page_announcement .page-header h1,
.pkp_page_ethics .page-header h1,
.pkp_page_about .page-header h1,
.pkp_page_submissions .page-header h1,
.pkp_page_editorialTeam .page-header h1,
.pkp_page_privacy .page-header h1,
.pkp_page_contact .page-header h1,
.ribbon-banner-header h2,
.ribbon-banner-header h3 {
  font-family: 'Inter', 'Kanit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.5px !important;
  line-height: 48px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  z-index: 2 !important;
}

/* Home Section Current Issue Title */
.current_issue > .page-header {
  border: none !important;
  padding: 0 !important;
  margin: 20px 0 10px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
}

.current_issue > .page-header h2 {
  font-family: 'Inter', 'Kanit', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  text-shadow: none !important;
  line-height: 1.4 !important;
}

/* Current Issue Top Accent Bar */
.current_issue_title.lead,
.current_issue .lead,
.current-issue-bar {
  position: relative;
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  padding: 10px 18px !important;
  margin: 0 0 20px 0 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  color: #ffffff !important;
  font-family: 'Inter', 'Kanit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  border-left: 4px solid var(--gold-primary) !important;
  background: linear-gradient(90deg, #020167 0%, #0d287d 100%) !important;
}

.current-issue-bar a,
.current_issue .lead a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   5. ISSUE VIEW & ARTICLE CARDS ARCHITECTURE
   -------------------------------------------------------------------------- */
.issue-toc .heading {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}

.heading .thumbnail,
.cover-image,
.media-left {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-sm) !important;
  padding: 0 !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  margin-bottom: 0;
}

.issue-details p.published {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Instantly Hides the Big Redundant Cover Image */
.homepage-image {
  display: none !important;
}

.journal-description {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--header-navy);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 24px 28px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-xs);
  text-align: justify;
}

.journal-description > p {
  color: var(--text-body) !important;
  font-family: 'Inter', 'Sarabun', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin: 10px 0 !important;
}

/* Article Card Architecture */
.article-summary.media {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
  display: block;
}

.article-summary.media:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 6px 16px -2px rgba(2, 1, 103, 0.1);
  transform: translateY(-2px);
}

.article-summary .media-heading {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

.media-heading a,
.issue a,
.page_about a,
.pkp_block a {
  color: var(--header-navy) !important;
  font-family: 'Inter', 'Kanit', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: var(--transition);
}

.media-heading a:hover,
.issue a:hover,
.page_about a:hover,
.pkp_block a:hover {
  color: #b45309 !important;
}

.media-body p,
.media-body .authors,
.page_about p {
  color: var(--text-muted) !important;
  font-family: 'Inter', 'Sarabun', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 0 0 10px 0 !important;
  text-shadow: none !important;
}

.article-summary .pages {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  background: var(--bg-subtle) !important;
  padding: 3px 12px !important;
  border-radius: var(--r-pill) !important;
  float: left;
}

.article-summary .btn-group {
  float: right;
  margin-top: -2px;
  padding-left: 0;
}

/* --------------------------------------------------------------------------
   6. PDF BUTTONS
   -------------------------------------------------------------------------- */
.btn-group .btn-primary,
.current_issue .btn-primary,
.download .btn-primary,
.galley-link.btn-primary.pdf,
.galley-link.pdf {
  background-color: var(--header-navy) !important;
  border: 1px solid var(--header-navy) !important;
  border-radius: var(--r-pill) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 5px 20px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: var(--transition);
}

.btn-group .btn-primary:hover,
.current_issue .btn-primary:hover,
.download .btn-primary:hover,
.galley-link.btn-primary.pdf:hover,
.galley-link.pdf:hover,
.btn-group .btn-primary:focus,
.current_issue .btn-primary:focus {
  background-color: var(--gold-primary) !important;
  border-color: var(--gold-primary) !important;
  color: #020167 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(235, 195, 39, 0.35) !important;
}

.read-more,
.current_issue .read-more {
  background-color: var(--header-navy) !important;
  border-color: var(--header-navy) !important;
  border-radius: var(--r-pill) !important;
  color: #ffffff !important;
  padding: 8px 22px !important;
  font-weight: 600 !important;
  margin-top: 16px;
  transition: var(--transition);
}

.read-more:hover {
  background-color: var(--gold-primary) !important;
  border-color: var(--gold-primary) !important;
  color: #000000 !important;
}

/* --------------------------------------------------------------------------
   7. SIDEBAR & WIDGETS
   -------------------------------------------------------------------------- */
#sidebar {
  padding-left: 20px;
}

aside .pkp_block,
.panel {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  margin: 0 0 20px 0 !important;
  padding: 18px 20px !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden;
}

.pkp_block .title,
.panel-default > .panel-heading {
  font-family: 'Inter', 'Kanit', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  background-color: var(--bg-subtle) !important;
  border: none !important;
  border-bottom: 2px solid var(--gold-primary) !important;
  border-top-left-radius: var(--r-md) !important;
  border-top-right-radius: var(--r-md) !important;
  margin: -18px -20px 14px -20px !important;
  padding: 10px 18px !important;
  text-shadow: none !important;
}

/* ==========================================================================
   FIX: FACEBOOK WIDGET FULL AUTO-FIT (PREVENTS RIGHT-SIDE CUTOFF)
   ========================================================================== */
#customblock-facebook,
.pkp_block[id*="facebook"] {
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;
}

#customblock-facebook .content,
.pkp_block[id*="facebook"] .content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#customblock-facebook iframe,
.pkp_block[id*="facebook"] iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* Downloads Section */
#customblock-downloads a,
.block_custom a[href*="drive.google.com"],
.block_custom a[href*="docs.google.com"] {
  display: block !important;
  width: 100%;
  padding: 7px 12px !important;
  font-size: 13.5px !important;
  color: var(--header-navy) !important;
  text-decoration: none !important;
  border-radius: var(--r-sm) !important;
  background: var(--bg-subtle) !important;
  border: 1px solid transparent !important;
  margin-bottom: 6px !important;
  transition: var(--transition);
}

#customblock-downloads a:hover,
.block_custom a[href*="drive.google.com"]:hover,
.block_custom a[href*="docs.google.com"]:hover {
  color: #92400e !important;
  background: var(--gold-tint) !important;
  border-color: var(--gold-border) !important;
  transform: translateX(3px);
}

#customblock-downloads hr {
  margin: 10px 0;
  border-top: 1px dashed var(--border-subtle);
}

/* Language Block */
.block_language ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}

.block_language ul li {
  border: none !important;
  padding: 0 !important;
}

.block_language ul li a {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-subtle);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition);
}

.block_language ul li.current a,
.block_language ul li a:hover {
  background: var(--header-navy);
  color: var(--gold-primary);
}

/* Visitors Block: Pure Graphic, Zero Extra Margin */
#customblock-visitors,
.pkp_block[id*="visitor"],
.pkp_block.block_custom:has(img[src*="flagcounter"]) {
  text-align: center !important;
  padding-bottom: 12px !important;
}

#customblock-visitors .content,
.pkp_block[id*="visitor"] .content,
.pkp_block.block_custom:has(img[src*="flagcounter"]) .content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  max-height: 160px !important;
}

#customblock-visitors a,
.pkp_block[id*="visitor"] a,
.pkp_block.block_custom:has(img[src*="flagcounter"]) a {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

#customblock-visitors img,
.pkp_block[id*="visitor"] img,
.pkp_block.block_custom img[src*="flagcounter"] {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 4px !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

#customblock-visitors .content p,
.pkp_block[id*="visitor"] .content p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
}

#customblock-visitors .content p a,
.pkp_block[id*="visitor"] .content p a {
  font-size: initial !important;
}

/* --------------------------------------------------------------------------
   8. BREADCRUMBS & FOOTER
   -------------------------------------------------------------------------- */
.breadcrumb {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  margin: 0 0 20px 0 !important;
  padding: 8px 16px !important;
  box-shadow: var(--shadow-xs);
}

.breadcrumb li a {
  font-size: 14px;
  color: var(--text-muted);
}

.breadcrumb .active {
  color: var(--text-main) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

footer[role="contentinfo"] {
  background-color: #f1f5f9 !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-width: 1px 0 0 0 !important;
  margin: 60px 0 0 0 !important;
  padding: 36px 0 28px 0 !important;
  color: var(--text-muted) !important;
  font-family: 'Inter', 'Sarabun', sans-serif !important;
  font-size: 13.5px !important;
  text-shadow: none !important;
}

footer[role="contentinfo"] p {
  margin-bottom: 4px;
}

footer[role="contentinfo"] strong {
  color: var(--text-main);
}

footer[role="contentinfo"] a {
  color: var(--header-navy);
  text-decoration: none;
}

footer[role="contentinfo"] a:hover {
  color: var(--gold-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE DESIGN & ACCESSIBILITY
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #sidebar {
    padding-left: 15px;
    margin-top: 32px;
  }
}

@media (max-width: 767px) {
  .site-name::before,
  .site-name::after {
    margin-left: 0 !important;
    white-space: normal !important;
  }

  .navbar-brand-logo {
    float: none !important;
    padding-right: 0 !important;
  }

  .navbar-brand-logo img {
    height: 60px !important;
    max-height: 60px !important;
  }

  .site-name::before {
    font-size: 18px !important;
    padding-top: 6px !important;
  }

  .site-name::after {
    font-size: 13px !important;
  }

  .galleys .page-header,
  .sections .section .page-header,
  .ribbon-banner-header {
    height: 44px !important;
  }

  .galleys .page-header h2,
  .sections .section .page-header h2,
  .ribbon-banner-header h2 {
    font-size: 16px !important;
    line-height: 44px !important;
  }

  .article-summary.media {
    padding: 16px;
  }

  .article-summary .pages {
    float: none;
    display: inline-block;
    margin-bottom: 8px;
  }

  .article-summary .btn-group {
    float: none;
    display: block;
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}