@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;500;600;700&display=swap');

:root {
--tjhs-navy: #061A33;
--tjhs-blue: #1C5C9E;
--tjhs-gold: #BFA15A;
--tjhs-cream: #F6F4EA;
--tjhs-ink: #1F2937;
--tjhs-white: #FFFFFF;
--tjhs-muted: rgba(31, 41, 55, 0.72);
--tjhs-border: rgba(6, 26, 51, 0.16);
--tjhs-border-strong: rgba(6, 26, 51, 0.28);
--tjhs-shadow: 0 14px 34px rgba(6, 26, 51, 0.08);
}

body {
margin: 0;
background: var(--tjhs-cream);
color: var(--tjhs-ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 16px;
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.pkp_structure_page {
background: var(--tjhs-cream);
color: var(--tjhs-ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

header.pkp_structure_head {
background: var(--tjhs-navy);
color: var(--tjhs-white);
border-bottom: 2px solid var(--tjhs-gold);
box-shadow: 0 10px 26px rgba(6, 26, 51, 0.16);
}

.pkp_head_wrapper {
background: transparent;
color: var(--tjhs-white);
}

.pkp_site_name,
.pkp_site_name a {
color: var(--tjhs-white);
font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
}

.pkp_site_name a:hover,
.pkp_site_name a:focus {
color: rgba(255, 255, 255, 0.86);
text-decoration: none;
}

.pkp_navigation_primary,
.pkp_navigation_primary a,
.pkp_navigation_user a {
color: var(--tjhs-white);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
}

.pkp_navigation_primary a:hover,
.pkp_navigation_primary a:focus,
.pkp_navigation_user a:hover,
.pkp_navigation_user a:focus {
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
}

.pkp_structure_main,
.pkp_structure_content {
background: transparent;
color: var(--tjhs-ink);
}

.pkp_structure_content {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.pkp_structure_sidebar {
color: var(--tjhs-ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1,
h2,
h3,
h4,
.page_title,
.obj_issue_toc .title,
.section .title,
.cmp_announcement .title,
.pkp_structure_content h1,
.pkp_structure_content h2,
.pkp_structure_content h3,
.pkp_structure_content h4 {
color: var(--tjhs-navy);
font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.12;
}

.page_title {
margin-bottom: 1.25rem;
}

.obj_article_summary .title a {
color: var(--tjhs-navy);
font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.18;
text-decoration: none;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
color: var(--tjhs-blue);
text-decoration: none;
}

.pkp_structure_content h2,
.section h2 {
padding-bottom: 0.45rem;
border-bottom: 2px solid var(--tjhs-gold);
}

.section .title {
padding-bottom: 0.45rem;
border-bottom: 2px solid var(--tjhs-gold);
}

.obj_issue_toc .title,
.cmp_announcement .title {
color: var(--tjhs-navy);
}

a {
color: var(--tjhs-blue);
text-decoration-thickness: 1px;
text-underline-offset: 0.16em;
}

a:hover,
a:focus {
color: var(--tjhs-navy);
}

hr {
height: 0;
border: 0;
border-top: 1px solid var(--tjhs-border);
border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

.pkp_button,
.cmp_button,
button.submitFormButton,
.pkp_form .buttons .submitFormButton,
input[type='submit'],
.obj_galley_link,
a.obj_galley_link,
.read_more a,
a.cmp_button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.55rem;
padding: 0.72rem 1.3rem;
border: 1px solid var(--tjhs-navy);
border-radius: 999px;
background: var(--tjhs-navy);
color: var(--tjhs-white);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.005em;
text-align: center;
text-decoration: none;
box-shadow: 0 8px 20px rgba(6, 26, 51, 0.12);
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pkp_button:hover,
.pkp_button:focus,
.cmp_button:hover,
.cmp_button:focus,
button.submitFormButton:hover,
button.submitFormButton:focus,
.pkp_form .buttons .submitFormButton:hover,
.pkp_form .buttons .submitFormButton:focus,
input[type='submit']:hover,
input[type='submit']:focus,
.obj_galley_link:hover,
.obj_galley_link:focus,
a.obj_galley_link:hover,
a.obj_galley_link:focus,
.read_more a:hover,
.read_more a:focus,
a.cmp_button:hover,
a.cmp_button:focus {
border-color: var(--tjhs-blue);
background: var(--tjhs-blue);
color: var(--tjhs-white);
text-decoration: none;
box-shadow: 0 10px 24px rgba(28, 92, 158, 0.18);
transform: translateY(-1px);
}

.pkp_button:active,
.cmp_button:active,
button.submitFormButton:active,
.pkp_form .buttons .submitFormButton:active,
input[type='submit']:active,
.obj_galley_link:active,
a.obj_galley_link:active,
.read_more a:active,
a.cmp_button:active {
transform: translateY(0);
}

.pkp_form input,
.pkp_form select,
.pkp_form textarea {
width: auto;
max-width: 100%;
border: 1px solid var(--tjhs-border-strong);
border-radius: 8px;
background: var(--tjhs-white);
color: var(--tjhs-ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 1rem;
line-height: 1.45;
box-shadow: inset 0 1px 2px rgba(6, 26, 51, 0.04);
}

.pkp_form input:focus,
.pkp_form select:focus,
.pkp_form textarea:focus {
border-color: var(--tjhs-navy);
outline: 0;
box-shadow: 0 0 0 3px rgba(6, 26, 51, 0.16), inset 0 1px 2px rgba(6, 26, 51, 0.04);
}

.pkp_form textarea {
min-height: 9rem;
}

.pkp_structure_footer {
background: var(--tjhs-navy);
color: rgba(255, 255, 255, 0.82);
border-top: 2px solid var(--tjhs-gold);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.pkp_structure_footer a,
.pkp_brand_footer a {
color: var(--tjhs-white);
text-decoration: none;
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus,
.pkp_brand_footer a:hover,
.pkp_brand_footer a:focus {
color: rgba(255, 255, 255, 0.78);
text-decoration: none;
}

.pkp_brand_footer {
color: rgba(255, 255, 255, 0.72);
}

/* ============================================================
   TJHS — Immersion theme overrides (modern glass + visibility)
   Targets Immersion's real classes (verified from theme source):
   .main-header, .main-header__nav-link, .issue, .issue__title,
   .issue-section, .main-footer
   ============================================================ */

/* Header: premium navy hero. Lets an uploaded Homepage Image show through a navy glass overlay */
.main-header {
background-color: #04101E !important;
position: relative;
border-bottom: 1px solid rgba(191, 161, 90, 0.45);
}

.main-header::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6, 26, 51, 0.45) 0%, rgba(6, 26, 51, 0.62) 45%, rgba(4, 16, 30, 0.86) 100%);
pointer-events: none;
z-index: 0;
}

.main-header > .container-fluid {
position: relative;
z-index: 1;
}

/* Tighten the tall empty hero so the page feels intentional, not sparse */
.page_index:not(.indexSite) .main-header__title {
margin: 5vh auto 4vh auto !important;
}

/* Primary navigation -> frosted-glass pills (fixes white-on-white text) */
.main-header__nav-link {
background: rgba(255, 255, 255, 0.07) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.20) !important;
border-radius: 999px !important;
padding: 0.5em 1.15em !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
-webkit-backdrop-filter: blur(12px) saturate(150%);
backdrop-filter: blur(12px) saturate(150%);
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.main-header__nav-link:hover,
.main-header__nav-link:focus,
.main-header__nav-link:active {
background: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(191, 161, 90, 0.80) !important;
color: #ffffff !important;
transform: translateY(-1px);
}

/* Admin / language menu + hamburger -> glass to match */
.main-header__admin-link,
.main-header__lang-link {
background: rgba(255, 255, 255, 0.06) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
border-radius: 999px !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}

.main-header__admin-link:hover,
.main-header__admin-link:focus,
.main-header__lang-link:hover {
background: rgba(255, 255, 255, 0.16) !important;
color: #ffffff !important;
}

.hamburger {
background: rgba(255, 255, 255, 0.10) !important;
border-radius: 12px !important;
}

.hamburger__icon,
.hamburger__icon:before,
.hamburger__icon:after {
background: #ffffff !important;
}

/* Current-issue band -> navy (not pure black) + restore light heading */
.issue {
background: linear-gradient(180deg, #061A33 0%, #04101E 100%) !important;
}

.issue__title,
.issue__header h1,
.issue__header h2,
.issue .issue__meta,
.issue__doi,
.issue__doi a,
.issue-desc,
.issue-desc a {
color: #ffffff !important;
}

/* Article list -> light band with modern glass-style cards */
.issue-section {
background: var(--tjhs-cream) !important;
}

.issue-section__title {
color: var(--tjhs-navy) !important;
}

.issue-section__toc-item .article {
background: #ffffff;
border: 1px solid rgba(6, 26, 51, 0.10);
border-radius: 16px;
padding: 1.5rem 1.75rem;
margin-bottom: 1.5rem !important;
box-shadow: 0 10px 30px rgba(6, 26, 51, 0.06);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.issue-section__toc-item .article:hover {
transform: translateY(-3px);
box-shadow: 0 18px 46px rgba(6, 26, 51, 0.13);
border-color: rgba(28, 92, 158, 0.35);
}

/* Buttons: rounded brand pills; glass outline on dark sections */
.btn,
.btn-primary,
.article__btn {
border-radius: 999px !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-weight: 600 !important;
padding: 0.55rem 1.25rem !important;
}

.btn-primary {
background: var(--tjhs-navy) !important;
border: 1px solid var(--tjhs-navy) !important;
color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
background: var(--tjhs-blue) !important;
border-color: var(--tjhs-blue) !important;
color: #ffffff !important;
}

.section_dark .btn,
.section_dark .btn-primary,
.issue .btn,
.issue .article__btn {
background: rgba(255, 255, 255, 0.10) !important;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
color: #ffffff !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}

.section_dark .btn:hover,
.issue .btn:hover,
.issue .article__btn:hover {
background: #ffffff !important;
color: var(--tjhs-navy) !important;
}

/* Footer -> navy brand bar (Immersion uses .main-footer) */
.main-footer {
background: var(--tjhs-navy) !important;
color: rgba(255, 255, 255, 0.82) !important;
border-top: 2px solid var(--tjhs-gold) !important;
}

.main-footer h1,
.main-footer h2,
.main-footer h3,
.main-footer h4 {
color: #ffffff !important;
font-family: 'Newsreader', Georgia, 'Times New Roman', serif !important;
}

.main-footer a {
color: #ffffff !important;
}

.main-footer a:hover,
.main-footer a:focus {
color: rgba(255, 255, 255, 0.75) !important;
}

.main-footer p,
.main-footer li,
.main-footer blockquote,
.main-footer cite {
color: rgba(255, 255, 255, 0.82) !important;
}

/* About / primary-nav dropdown -> navy glass with readable white text */
.main-header .dropdown-menu,
#navigationPrimary .dropdown-menu.show {
background: rgba(6, 26, 51, 0.97) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 14px !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45) !important;
padding: 8px !important;
-webkit-backdrop-filter: blur(14px) saturate(150%);
backdrop-filter: blur(14px) saturate(150%);
}

.main-header .dropdown-menu a,
.main-header .dropdown-item a,
.main-header .dropdown-menu .nav-link {
color: #ffffff !important;
border: 0 !important;
border-radius: 9px !important;
padding: 8px 12px !important;
}

.main-header .dropdown-item a:hover,
.main-header .dropdown-item a:focus,
.main-header .dropdown-menu .nav-link:hover {
background: rgba(255, 255, 255, 0.12) !important;
color: #ffffff !important;
}

/* Article cards: span full width when there is no cover image (removes the empty left column) */
.issue-section__toc-item .article .col-md-8.offset-md-4 {
margin-left: 0 !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}

/* Article landing page has a dark (#000) main column in Immersion -> force light title + headings */
.article-page h1,
.article-page h2,
.article-page h3,
.article-page h4,
.article-page .article-page__title,
.article-page .label {
color: #ffffff !important;
}
.article-page a {
color: #cfe3ff !important;
}

/* ============================================================
   FIX (appended 14 Jun 2026): invisible white-on-white hover in
   header dropdowns — including the top-right user/account menu
   ("ojs 0" -> Dashboard / View Profile / Administration / Logout).
   That menu sits outside .main-header, so the dropdown rules above
   never reached it. This forces a brand-blue highlight + white text
   on hover/focus for EVERY dropdown item, regardless of markup or
   where the menu lives.
   ============================================================ */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:hover a,
.dropdown-menu .dropdown-item:focus a,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.main-header .dropdown-menu .dropdown-item:hover,
.main-header .dropdown-menu .dropdown-item:focus,
.main-header .dropdown-menu a:hover,
.main-header .dropdown-menu a:focus,
.pkp_navigation_user a:hover,
.pkp_navigation_user a:focus {
  background-color: #1C5C9E !important;
  color: #ffffff !important;
  border-radius: 9px !important;
}