/* ICONMTHS Academic Journal — CSS Override v3-20260919
   Design Read: International scholarly proceedings journal for marine academic readers.
   Dial: ENERGY 2 / RHYTHM 2 / MOTION 1
   
   Source systems:
   - Colors: Master Prompt (Deep Ocean Navy #073B4C, Marine Teal #118AB2, Sea Gold #D4A017, Pearl White #F8FAFA)
   - Structure: Inthememory (8px spacing base, card 12px radius, button 100px pill, hairline 1px border, zero drop shadow)
   - Typography: Playfair Display (headings) + Inter (body) — Master Prompt spec, Google Fonts
   
   OJS 3.5 constraint: hamburger at 992px — no display/position override on
   .pkp_site_nav_menu below 992px. No overflow-x: hidden on body.
*/

/* ================================================================
   1. GOOGLE FONTS
   Playfair Display: scholarly editorial serif, used by Nature/Elsevier.
   Inter: clean legible sans, screen-optimized body reading.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500&display=swap');

/* ================================================================
   2. DESIGN TOKENS
   ================================================================ */
:root {
  /* Marine identity palette — all from Master Prompt */
  --icm-navy:   #073B4C; /* Deep Ocean Navy: nav, footer, h2, primary CTA — 17.2:1 vs #fff */
  --icm-teal:   #0B6C8C; /* Marine Teal (darkened from #118AB2): links, interactive — 5.67:1 vs canvas (WCAG AA). Deviasi: original #118AB2 hanya 3.78:1, gagal AA-normal untuk 16px text. Darkened minimal agar masih teal. */
  --icm-gold:   #D4A017; /* Sea Gold: ONLY h2 rule, DOI label, metadata accent — never body text on white */
  --icm-canvas: #F8FAFA; /* Pearl White: page background */

  /* Structural neutrals — Inthememory geometry, marine-tinted */
  --icm-ink:     #1A2E35; /* body text — 15.8:1 vs canvas */
  --icm-muted:   #4A6572; /* metadata, secondary text — 5.84:1 vs canvas */
  --icm-line:    #C8D8DD; /* hairline border — only elevation tool (zero drop shadow) */
  --icm-surface: #EEF4F6; /* card surface, abstract bg, keyword tags */
  --icm-paper:   #FFFFFF; /* elevated card (current issue, sidebar) */

  /* Radius tiers — Inthememory */
  --icm-r-sm:    4px;   /* tight: hamburger border, table cell */
  --icm-r-badge: 12px;  /* badge, tag, input */
  --icm-r-card:  12px;  /* content cards */
  --icm-r-btn:   100px; /* pill: primary action affordance */

  /* Spacing — 8px base from Inthememory */
  --icm-sp1: 8px;
  --icm-sp2: 16px;
  --icm-sp3: 24px;
  --icm-sp4: 32px;
  --icm-sp5: 40px;
  --icm-sp6: 48px;
  --icm-sp8: 64px;
  --icm-sp10: 80px;

  /* Layout */
  --icm-max: 1200px;
}

/* ================================================================
   3. BOX MODEL RESET
   ================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

/* ================================================================
   4. BASE
   ================================================================ */
html { background: var(--icm-canvas); }

body {
  margin: 0;
  color: var(--icm-ink);
  background: var(--icm-canvas);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

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

/* ================================================================
   5. LINKS
   ================================================================ */
a {
  color: var(--icm-teal);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
  transition: color 0.15s;
}
a:hover { color: var(--icm-navy); }

/* ================================================================
   6. TYPOGRAPHY
   Playfair Display for headings: scholarly editorial register.
   Gold rule under h2: identity motif — one repeated gesture,
   specific to ICONMTHS, not generic journal pattern.
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700;
  line-height: 1.2;
  color: var(--icm-navy);
  overflow-wrap: anywhere;
}

/* Override OJS default theme's .pkp_structure_main h2 specificity */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.pkp_structure_main h5,
.pkp_structure_main h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--icm-navy);
}

h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }

h2 {
  position: relative;
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  margin: 0 0 var(--icm-sp3);
  padding-bottom: var(--icm-sp2);
  border-bottom: 2px solid var(--icm-gold);
}

h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p, li { overflow-wrap: anywhere; }

/* ================================================================
   7. ACCESSIBILITY — FOCUS RING + SKIP LINKS
   Replace outline, never remove without replacement (R-32).
   Ring on dark bg: white; on light bg: teal.
   ================================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--icm-teal);
  outline-offset: 2px;
}

.cmp_skip_to_content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 0;
}

.cmp_skip_to_content a {
  position: absolute;
  left: -100%;
  padding: 0.6rem 1.2rem;
  color: #fff;
  background: var(--icm-navy);
  font-size: 0.875rem;
  white-space: nowrap;
  text-decoration: none;
}
.cmp_skip_to_content a:focus { left: 0; }

/* ================================================================
   8. HEADER — STRUCTURE
   Dark navy: grounds in marine identity. The journal banner image
   (already uploaded by editors) is the visual hero — we constrain
   it, not replace it. No CSS gradient over the image: the marine
   photography IS the identity. Gradient only as fallback for when
   no image exists.
   ================================================================ */
.pkp_structure_head {
  background: var(--icm-navy);
}

.pkp_head_wrapper {
  background: var(--icm-navy);
}

/* ================================================================
   9. SITE NAME / LOGO AREA
   The journal has a banner image (25000px wide, needs constraint).
   max-height 200px at desktop: editorial, not banner-ad proportions.
   object-fit: cover so wide images fill gracefully.
   ================================================================ */
.pkp_site_name_wrapper {
  position: relative;
  background: var(--icm-navy);
}

.pkp_site_name { display: block; }
.pkp_site_name a { display: block; line-height: 0; }
.pkp_site_name .is_img { display: block; }

.pkp_site_name .is_img img {
  display: block;
  width: 100%;
  max-height: 200px;
  height: auto;
  object-fit: cover;
  object-position: center 40%;
}

/* ================================================================
   10. HAMBURGER TOGGLE
   Styling only — show/hide mechanism is OJS Default theme JS.
   44px tap target per WCAG.
   ================================================================ */
.pkp_site_nav_toggle {
  /* IMPORTANT: Never set display here — OJS Default theme JS/CSS
     controls hamburger show/hide. We only style, never control visibility. */
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--icm-sp1);
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--icm-r-sm);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
}

.pkp_site_nav_toggle:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

/* ================================================================
   11. NAVIGATION
   CRITICAL: Do NOT override display/position on .pkp_site_nav_menu
   below 992px — OJS hamburger mechanism depends on it.
   Styling color and spacing only.
   ================================================================ */
.pkp_site_nav_menu { background: var(--icm-navy); }

.pkp_navigation_primary_row {
  display: flex;
  align-items: center;
  max-width: var(--icm-max);
  margin: 0 auto;
  padding: 0 var(--icm-sp3);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.pkp_navigation_primary_wrapper { flex: 1 1 auto; min-width: 0; }

.pkp_navigation_primary {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkp_navigation_primary > li > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--icm-sp2);
  color: rgba(255,255,255,0.82);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

/* Dropdown menus */
.pkp_navigation_primary > li > ul {
  background: var(--icm-paper);
  border: 1px solid var(--icm-line);
  border-radius: var(--icm-r-card);
  padding: var(--icm-sp1) 0;
  min-width: 180px;
  list-style: none;
  box-shadow: 0 4px 12px rgba(7,59,76,0.12);
}

.pkp_navigation_primary > li > ul a {
  display: block;
  padding: 0.55rem var(--icm-sp2);
  color: var(--icm-ink);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.1s;
}

.pkp_navigation_primary > li > ul a:hover,
.pkp_navigation_primary > li > ul a:focus-visible {
  background: var(--icm-surface);
  color: var(--icm-navy);
}

/* Search link */
.pkp_navigation_search_wrapper { margin-left: auto; flex-shrink: 0; }
.pkp_navigation_search_wrapper a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--icm-sp2);
  color: rgba(255,255,255,0.82);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.pkp_navigation_search_wrapper a:hover { color: #fff; }

/* User nav: Login / Register as pill outline buttons */
.pkp_navigation_user_wrapper { flex-shrink: 0; padding: var(--icm-sp1) 0; }

.pkp_navigation_user {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--icm-sp1);
  align-items: center;
}

.pkp_navigation_user a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.35rem var(--icm-sp2);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--icm-r-btn);
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.pkp_navigation_user a:hover,
.pkp_navigation_user a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

/* ================================================================
   12. CONTENT LAYOUT
   Centered container, sidebar grid for pages that have sidebar.
   ================================================================ */
.pkp_structure_content {
  max-width: var(--icm-max);
  margin: 0 auto;
  padding: 0 var(--icm-sp3) var(--icm-sp10);
  background: transparent;
}

.pkp_structure_main {
  min-width: 0;
  padding-top: var(--icm-sp5);
}

.pkp_structure_content.has_sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(210px, 24%, 270px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.pkp_structure_content.has_sidebar .pkp_structure_main { grid-column: 1; }

.pkp_structure_sidebar {
  grid-column: 2;
  min-width: 0;
  padding-top: var(--icm-sp5);
}

/* ================================================================
   13. HOMEPAGE SECTIONS
   ================================================================ */
.page_index_journal > section,
.additional_content,
.cmp_announcements {
  margin-bottom: var(--icm-sp8);
}

/* About section: reading measure capped for comfort */
.homepage_about { max-width: 72ch; }
.homepage_about p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--icm-ink);
  margin: 0;
}

/* ================================================================
   14. CURRENT ISSUE CARD
   Border-top teal: editorial accent that signals "current",
   not decorative gradient. Paper surface lifts it from canvas.
   ================================================================ */
.current_issue {
  padding: var(--icm-sp4);
  background: var(--icm-paper);
  border: 1px solid var(--icm-line);
  border-top: 3px solid var(--icm-teal);
  border-radius: var(--icm-r-card);
}

.current_issue_title {
  margin: 0 0 var(--icm-sp3);
  color: var(--icm-muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Cover + description side by side */
.current_issue .heading {
  display: grid;
  grid-template-columns: minmax(110px, 170px) minmax(0, 1fr);
  gap: var(--icm-sp3) var(--icm-sp4);
  align-items: start;
}

.current_issue .cover img {
  width: 100%;
  max-width: 170px;
  border: 1px solid var(--icm-line);
  border-radius: var(--icm-r-sm);
}

.current_issue .description { color: var(--icm-ink); }
.current_issue .description p:first-child { margin-top: 0; }

.current_issue .pub_id,
.current_issue .published { font-size: 0.875rem; }

.current_issue .pub_id .type,
.current_issue .published .label {
  color: var(--icm-muted);
  font-weight: 500;
}

/* DOI — gold label signals academic metadata importance */
.current_issue .pub_id.doi .type,
.pub_id.doi .type { color: var(--icm-gold); }

.current_issue .pub_id a,
.pub_id.doi a {
  color: var(--icm-navy);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.current_issue .pub_id a:hover,
.pub_id.doi a:hover { color: var(--icm-teal); }

/* Article list inside issue TOC */
.obj_issue_toc .sections {
  grid-column: 1 / -1;
  margin-top: var(--icm-sp4);
  padding-top: var(--icm-sp3);
  border-top: 1px solid var(--icm-line);
}

.obj_issue_toc .section h3 {
  margin: 0 0 var(--icm-sp2);
  font-size: 1rem;
  color: var(--icm-muted);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: none;
}

/* ================================================================
   15. ARTICLE LIST
   Hairline separators, compact scholarly register.
   Title in Playfair for hierarchy: title is the most important
   element in the list, set in the same register as h1.
   ================================================================ */
.cmp_article_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.obj_article_summary {
  position: relative;
  padding: var(--icm-sp3) 0;
  border-bottom: 1px solid var(--icm-line);
}

.obj_article_summary:first-child { border-top: 1px solid var(--icm-line); }

.obj_article_summary .title {
  margin: 0 7rem 0.4rem 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

.obj_article_summary .title a {
  color: var(--icm-navy);
  text-decoration: none;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus-visible {
  color: var(--icm-teal);
  text-decoration: underline;
}

.obj_article_summary .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  color: var(--icm-muted);
  font-size: 0.875rem;
  margin-top: 0.3rem;
}

.obj_article_summary .authors { min-width: 0; }
.obj_article_summary .pages { color: var(--icm-navy); font-weight: 500; }

/* Galley buttons (PDF / HTML) — positioned top-right */
.obj_article_summary .galleys_links {
  position: absolute;
  top: var(--icm-sp3);
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--icm-sp1);
}

/* Galley button: teal — interactive affordance.
   Badge radius (not pill): it's a type label, not a primary CTA. */
.obj_galley_link {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  min-height: 30px;
  color: #fff;
  background: var(--icm-teal);
  border-radius: var(--icm-r-badge);
  font-size: 0.725rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.15s;
}
.obj_galley_link:hover,
.obj_galley_link:focus-visible {
  color: #fff;
  background: var(--icm-navy);
}

/* ================================================================
   16. SIDEBAR BLOCKS
   Clean, secondary register. h2 border override: sidebar h2 should
   not get the gold rule (it's structural label, not editorial heading).
   ================================================================ */
.pkp_block {
  margin-bottom: var(--icm-sp3);
  padding: var(--icm-sp3);
  background: var(--icm-paper);
  border: 1px solid var(--icm-line);
  border-radius: var(--icm-r-card);
}

.pkp_block .title,
.pkp_block h2,
.pkp_block h3 {
  margin: 0 0 var(--icm-sp2);
  padding-bottom: var(--icm-sp1);
  border-bottom: 1px solid var(--icm-line) !important;
  color: var(--icm-navy);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Remove inherited gold border from block headings */
.pkp_block h2 { border-bottom: 1px solid var(--icm-line) !important; }

.pkp_block ul { margin: 0; padding-left: var(--icm-sp2); }
.pkp_block li + li { margin-top: 0.4rem; }
.pkp_block a { color: var(--icm-teal); }

/* ================================================================
   17. ADDITIONAL CONTENT (journal info table injected by editors)
   ================================================================ */
.additional_content table.data {
  width: 100% !important;
  max-width: 100%;
  table-layout: fixed;
  color: var(--icm-ink) !important;
  background: var(--icm-surface) !important;
  border: 0 !important;
  border-radius: var(--icm-r-card) !important;
  overflow-wrap: anywhere;
}

.additional_content table.data td {
  max-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  padding: var(--icm-sp1) var(--icm-sp2);
}

.additional_content table.data a { color: var(--icm-teal); }

/* ================================================================
   18. ARTICLE DETAIL PAGE
   Abstract: teal left-border distinguishes it from body text
   without adding a card container (keeps reading focus on text).
   Keywords: badge-radius tags, teal on hover.
   ================================================================ */
.obj_article_details h1 {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.25;
  max-width: 28ch;
  margin-bottom: var(--icm-sp3);
}

.obj_article_details .authors,
.obj_article_details .item { max-width: 80ch; }

.obj_article_details .item.doi a {
  color: var(--icm-navy);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.obj_article_details .item.doi a:hover { color: var(--icm-teal); }

.obj_article_details .abstract {
  max-width: 80ch;
  padding: var(--icm-sp3);
  background: var(--icm-surface);
  border-left: 3px solid var(--icm-teal);
  border-radius: 0 var(--icm-r-sm) var(--icm-r-sm) 0;
  margin: var(--icm-sp4) 0;
}

.obj_article_details .item.keywords .value {
  display: flex;
  flex-wrap: wrap;
  gap: var(--icm-sp1);
  margin-top: 0.4rem;
}

.obj_article_details .item.keywords .value a {
  padding: 0.25rem 0.65rem;
  background: var(--icm-surface);
  border: 1px solid var(--icm-line);
  border-radius: var(--icm-r-badge);
  color: var(--icm-navy);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.obj_article_details .item.keywords .value a:hover {
  background: var(--icm-teal);
  border-color: var(--icm-teal);
  color: #fff;
}

/* ================================================================
   19. ISSUE DETAIL PAGE (Archive TOC)
   ================================================================ */
.obj_issue_toc .heading {
  display: grid;
  grid-template-columns: minmax(110px, 170px) 1fr;
  gap: var(--icm-sp3) var(--icm-sp4);
  align-items: start;
}

.obj_issue_toc .cover img {
  width: 100%;
  max-width: 170px;
  border: 1px solid var(--icm-line);
  border-radius: var(--icm-r-sm);
}

/* ================================================================
   20. FORMS + BUTTONS
   Pill buttons (100px): primary action affordance.
   Navy fill = same weight as the header — signals "this is
   the primary action", consistent with nav identity.
   ================================================================ */
input,
select,
textarea {
  max-width: 100%;
  color: var(--icm-ink);
  background: #fff;
  border: 1px solid var(--icm-line);
  border-radius: var(--icm-r-badge);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--icm-teal);
  box-shadow: 0 0 0 3px rgba(17,138,178,0.15);
  outline: none;
}

button,
input[type="submit"],
input[type="button"],
.button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  color: #fff;
  background: var(--icm-navy);
  border: 1px solid var(--icm-navy);
  border-radius: var(--icm-r-btn);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.btn:hover {
  background: var(--icm-teal);
  border-color: var(--icm-teal);
  color: #fff;
}

/* Form pages: comfortable reading measure */
.page_search form,
.page_login form,
.page_register form,
.form_section { max-width: 600px; }

/* ================================================================
   21. NOTIFICATIONS
   ================================================================ */
.notification,
.cmp_notification { border-left: 3px solid var(--icm-teal); }

/* ================================================================
   22. GENERAL PAGE CONTEXT
   ================================================================ */
.page h1,
.page_title,
.obj_article_details h1,
.obj_issue_toc h1,
.page_search h1,
.page_login h1,
.page_register h1 {
  margin-top: 0;
  max-width: 30ch;
}

/* ================================================================
   23. FOOTER
   Dark navy: bookends the page with the same marine identity
   as the header. Structural, not decorative.
   ================================================================ */
.pkp_structure_footer_wrapper {
  background: var(--icm-navy);
  margin-top: var(--icm-sp8);
}

.pkp_structure_footer {
  max-width: var(--icm-max);
  margin: 0 auto;
  padding: var(--icm-sp6) var(--icm-sp3);
  color: rgba(255,255,255,0.8);
  background: transparent;
}

/* Footer headings: override the gold rule, use subtle white rule */
.pkp_structure_footer h2 {
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  padding-bottom: var(--icm-sp1) !important;
  margin-bottom: var(--icm-sp2);
}

.pkp_structure_footer a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}
.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.pkp_brand_footer {
  display: block;
  margin-top: var(--icm-sp3);
  padding-top: var(--icm-sp3);
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.45);
  font-size: 0.8125rem;
}

/* ================================================================
   24. CAROUSEL (if present — don't create overflow)
   ================================================================ */
.carousel,
.slides { max-width: 100%; }
.slides-item { max-width: 100%; }

/* ================================================================
   25. RESPONSIVE — TABLET 992px
   CRITICAL: Do NOT override display/position on .pkp_site_nav_menu
   here. OJS hamburger mechanism uses classes toggled by JS.
   Only touch non-nav layout.
   ================================================================ */
@media (max-width: 992px) {
  .pkp_structure_content.has_sidebar {
    display: block;
  }
  .pkp_structure_sidebar { padding-top: 0; }
  .pkp_structure_main { padding-top: var(--icm-sp4); }
}

/* ================================================================
   26. RESPONSIVE — TABLET 768px
   ================================================================ */
@media (max-width: 768px) {
  .pkp_site_name .is_img img { max-height: 150px; }

  .pkp_structure_content { padding: 0 var(--icm-sp2) var(--icm-sp8); }

  .current_issue { padding: var(--icm-sp3); }

  .current_issue .heading {
    grid-template-columns: 1fr;
    gap: var(--icm-sp2);
  }

  .current_issue .cover img { max-width: 130px; }

  .obj_article_summary .title { margin-right: 0; }

  .obj_article_summary .galleys_links {
    position: static;
    margin-top: var(--icm-sp2);
  }

  .obj_article_summary .meta { display: block; }

  .obj_issue_toc .heading { grid-template-columns: 1fr; }
  .obj_issue_toc .cover img { max-width: 130px; }
}

/* ================================================================
   27. RESPONSIVE — MOBILE 480px
   ================================================================ */
@media (max-width: 480px) {
  .pkp_site_name .is_img img { max-height: 110px; }

  .pkp_structure_content { padding: 0 var(--icm-sp1) var(--icm-sp6); }

  h2 { font-size: 1.25rem; }

  .current_issue { padding: var(--icm-sp2); }

  .pkp_structure_footer { padding: var(--icm-sp4) var(--icm-sp2); }
}

/* ================================================================
   28. REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}