@charset "UTF-8";

/* ===========================
   Academic Conference Theme
   - Clean typography & spacing
   - Accessible colors & focus states
   - Responsive layout & nav
   - Print-friendly defaults
   =========================== */

/* Color & spacing system */
:root {
  --brand-navy: #0a2a66;
  --brand-navy-600: #12377f;
  --brand-gold: #caa034;
  --ink: #101418;
  --muted-ink: #4a5568;
  --paper: #ffffff;
  --paper-alt: #f7fafc;
  --border: #e2e8f0;
  --link: #164db3;
  --link-visited: #5a3bb3;
  --link-hover: #0e3c8f;
  --focus: #ffb703;

  --radius: 14px;
  --radius-sm: 10px;

  --container: 1100px;
  --gutter: 20px;

  --h1: clamp(2rem, 1.2rem + 2vw, 2.75rem);
  --h2: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  --h3: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
  --body: 1rem;
  --lead: 1.1rem;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Respect user’s dark mode preference */
/* 
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1216;
    --paper-alt: #141922;
    --ink: #e6e6e6;
    --muted-ink: #a0aec0;
    --border: #2b3340;
    --link: #86a7ff;
    --link-visited: #b59aff;
    --link-hover: #c9d7ff;
    --brand-navy: #0d1f47;
    --brand-navy-600: #113060;
    --brand-gold: #d2b25a;
    --focus: #ffd166;
  }
}
 */

/* Base typography
   Keep Japanese font fallbacks for content that may include Japanese.
   They’re placed after Latin-first serif & sans stacks. */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0; /* Normalize user agent margins */
  padding: 0;
  text-align: left; /* Use container utilities for centering */
  color: var(--ink);
  background: var(--paper);
  font-size: 115%;
  line-height: 1.6;
  font-family:
    Georgia, "Times New Roman", Times, serif,
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,
    "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}


/*To toggle dark mode*/
/* === Manual Dark Mode Override === */
.dark-mode {
  --paper: #0f1216;
  --paper-alt: #141922;
  --ink: #e6e6e6;
  --muted-ink: #a0aec0;
  --border: #2b3340;
  --link: #86a7ff;
  --link-hover: #c9d7ff;
  --brand-navy: #0d1f47;
  --brand-navy-600: #113060;
  --brand-gold: #d2b25a;
  --focus: #ffd166;
}

/* separate rule — not nested! */
.dark-mode #mainContent h2,
.dark-mode #mainContent h3 {
  color: var(--brand-gold);
}


/* === Theme Toggle Button Styling === */
#theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
  line-height: 1;
  background: var(--paper-alt);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

#theme-toggle:hover {
  transform: scale(1.1);
  background: var(--paper);
}
/*toggle dark mode*/


/* Prefer sans-serif for UI bits and small text */
:lang(ja) body {
  font-family:
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Meiryo", "メイリオ",
    "MS PGothic", "ＭＳ Ｐゴシック",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Layout container */
#container,
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  background: transparent; /* Let sections set backgrounds */
}

/* Header */
#header {
  padding: 28px var(--gutter) 18px;
  background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-600) 100%);
  color: #fff;
}
#header h1 {
  margin: 0;
  padding: 12px 0 0;
  font-size: var(--h1);
  font-weight: 700;
  letter-spacing: 0.3px;
}
#header p {
  margin: 8px 0 0;
  font-size: var(--lead);
  color: #e9eefc;
}

/* Secondary header strip (optional) */
#header2 {
  padding: 10px var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

/* Top bar + nav */
#topbar {
  background-color: var(--brand-navy);
  color: #fff;
}

/* Accessible skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 6px 10px;
  background: var(--focus);
  color: #000;
  border-radius: var(--radius-sm);
}

/* Navigation */
#topnav {
  margin: 0;
  padding: 0;
}
#topnav ul {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
#topnav li {
  margin: 0;
  padding: 0;
}
#topnav a {
  display: block;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
}
#topnav a:hover,
#topnav a:active {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}
#topnav a.here,
#topnav a[aria-current="page"] {
  background: #fff;
  color: var(--brand-navy);
  border-color: #fff;
}

/* Focus states */
a:focus, button:focus, [tabindex]:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Links */
a:link, a:visited {
  color: var(--link);
  text-decoration: none;
}
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Main content */
#mainContent {
  padding: 34px var(--gutter) 48px;
  background: var(--paper);
}
#mainContent h2 {
  font-size: var(--h2);
  margin: 1.4em 0 0.6em;
  color: var(--brand-navy);
}
#mainContent h3 {
  font-size: var(--h3);
  margin: 1.2em 0 0.5em;
  color: var(--ink);
  background: var(--paper-alt);
  padding: 8px 12px;
  border-left: 4px solid var(--brand-gold);
  border-radius: 6px;
}
#mainContent p,
#mainContent li {
  color: var(--ink);
}
#mainContent .lead {
  font-size: var(--lead);
  color: var(--muted-ink);
}

/* Utility sections */
.section {
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.section.alt {
  background: var(--paper-alt);
}

/* Distinct section with blockquote-like styling */
/* Blockquote-style section */
/* === Markdown-style blockquote section (no quote glyph) === */
.section.quote {
  /* distinct background from .section.alt */
  background: #c4cccb; /* light navy-tinted panel; #f1f5fb */
  border-left: 4px solid var(--brand-navy); /* reliable accent using existing var */
  padding: 20px 28px;
  color: var(--ink);
}

.section.quote :is(p, ul, ol) {
  margin: 0 0 8px;
}
.section.quote :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

/* Dark mode tweak (uses your manual .dark-mode block) */
.dark-mode .section.quote {
  background: #1a2433;            /* darker navy-tinted panel */
  border-left-color: var(--brand-gold); /* pop the accent in dark */
  color: var(--ink);
}
/* Distinct section with blockquote-like styling ends*/


/* Cards (for speakers, announcements, CFP, etc.) */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 6px 18px rgba(10, 42, 102, 0.06);
}
.card h3 { margin-top: 0.2em; }

/* Hero (optional) */
.hero {
  background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-600) 100%);
  color: #fff;
  padding: 56px var(--gutter);
  border-radius: 0 0 var(--radius) var(--radius);
}
.hero .cta {
  display: inline-block;
  margin-top: 14px;
  background: var(--brand-gold);
  color: #111;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.08);
}
.hero .cta:hover { filter: brightness(0.95); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--paper-alt);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.btn.primary {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
}
.btn.primary:hover { filter: brightness(1.05); }

/* Lists */
#list li { margin-bottom: 6px; }

/* “Item” banner (replaces legacy thick borders with a cleaner rule) */
#item {
  border-left: 6px solid var(--brand-navy);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  margin-bottom: 10px;
  text-decoration: none; /* Remove deprecated blink */
}

/* Footer */
#footer {
  padding: 14px var(--gutter);
  background: var(--brand-navy);
  color: #fff;
}
#footer p {
  margin: 0;
  padding: 6px 0;
  font-size: 0.95rem;
  opacity: 0.95;
}

/* Tables (useful for schedules) */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 28px;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
thead th {
  background: var(--paper-alt);
  text-align: left;
  padding: 12px;
  font-weight: 700;
  color: var(--brand-navy);
  border-bottom: 1px solid var(--border);
}
tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
tbody tr:hover {
  background: rgba(202, 160, 52, 0.08);
}

/* Speaker grid */
.speaker-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.speaker {
  grid-column: span 12;
}
@media (min-width: 640px) {
  .speaker { grid-column: span 6; }
}
@media (min-width: 960px) {
  .speaker { grid-column: span 4; }
}
.speaker .name { font-weight: 700; }
.speaker .affil { color: var(--muted-ink); }

/* Announcement / callout */
.callout {
  border-left: 5px solid var(--brand-gold);
  background: var(--paper-alt);
  padding: 12px 14px;
  border-radius: 8px;
}

/* Code & pre */
code, pre {
  font-family: var(--mono);
  font-size: 0.95rem;
}
pre {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  overflow: auto;
}

/* Forms (for registration/CFP) */
input, select, textarea, button {
  font: inherit;
  color: inherit;
}
input[type="text"],
input[type="email"],
input[type="search"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--paper);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--focus);
  border-color: transparent;
}

/* Accessible status/notice (replaces blinking text) */
.notice {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--paper-alt);
}
.notice.important {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(202,160,52,0.18);
}

/* Replace old blinking behavior with a subtle pulse for emphasis only.
   The legacy .blinking-text used visibility toggling, which is problematic
   for accessibility. */
.blinking-text {
  --pulse-color: var(--brand-gold);
  position: relative;
}
.blinking-text::after {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border-radius: 6px;
  pointer-events: none;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(202,160,52,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(202,160,52,0); }
  100% { box-shadow: 0 0 0 0 rgba(202,160,52,0); }
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  #header { padding: 22px var(--gutter) 12px; }
  #mainContent { padding: 24px var(--gutter) 36px; }
  #topnav ul { gap: 4px; }
  #topnav a { padding: 8px 10px; }
}

/* Print styles: simplified for schedules and proceedings pages */
@media print {
  :root {
    --ink: #000;
    --paper: #fff;
    --border: #888;
  }
  #topbar, #topnav, .hero, .btn, .cta { display: none !important; }
  a::after { content: " (" attr(href) ")"; font-size: 0.9em; }
  body { color: #000; background: #fff; }
  table, th, td { border-color: #888 !important; }
}

/* === Invited Speakers: clean unified block === */
.speaker-grid {
  display: block;
  background: var(--paper-alt);        /* light unified background */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 16px;
}

.speaker-grid::before {
  content: attr(data-title);
  color: currentColor;  /* inherits from parent */
}

/* Each speaker entry: single line */
.speaker {
  display: flex;
  flex-wrap: wrap;            /* handles long affiliations gracefully */
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 3px 0;
  border: none;               /*  remove all accents / borders */
  background: none;
}

.speaker .name {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: 0 !important;
  display: inline !important;
}

/* Affiliation inline with same size, lighter color */
.speaker .affil {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--muted-ink);
  margin-left: 6px;
}

/* Compact spacing between speakers */
.speaker:not(:last-child) {
  margin-bottom: 2px;
}

/* Back-to-top button */
#back-to-top {
  position: fixed;
  right: 20px;
  bottom: 84px;                 /* sits above theme toggle */
  z-index: 1000;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper-alt);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, transform .2s ease, background .2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
#back-to-top:hover { transform: translateY(-2px); background: var(--paper); }

/*hover effect*/
/* Link polish */
a {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* External link hint (optional; add class="external" to links you want tagged) */
a.external::after {
  content: "↗";
  font-size: .85em;
  margin-left: .2em;
  opacity: .7;
}

/* Schedule table improvements */
table.schedule {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table.schedule thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper-alt);
  backdrop-filter: saturate(120%) blur(2px);
}
table.schedule tbody tr {
  transition: background .15s ease;
}
table.schedule tbody tr:hover {
  background: rgba(10, 42, 102, 0.06); /* subtle navy tint */
}

/* Compact cells (optional) */
table.schedule td, table.schedule th {
  padding: 10px 12px;
}

/* background image setting */
/* Header hero with background cross-fade */
/* Replace your existing .hero rule's centering */
.hero {
  position: relative;
  min-height: 40vh;
  padding: 4rem 1rem;
  display: grid;
  /* was: place-items: center; */
  justify-items: start;   /* left */
  align-content: start;   /* top */
  text-align: left;
  overflow: hidden;
}


/* Ensure all content stays above the fading layers */
.hero > * {
  position: relative;
  z-index: 1;
}

/* Two background layers that fade */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: opacity;
  pointer-events: none;       /* keep links/buttons clickable */
  z-index: 0;                 /* sit behind content */
}

/* Image 1 */
.hero::before {
  background-image: url("../images/background0.png");
  opacity: 1;
  animation: hero-crossfade 10s infinite;
}

/* Image 2 (fix any filename typos; was 'bakcground.png' in text) */
.hero::after {
  background-image: url("../images/background1.png");
  opacity: 0;
  animation: hero-crossfade 10s infinite reverse;
}

/* Crossfade: hold most of the time, then swap */
@keyframes hero-crossfade {
  0%, 45%   { opacity: 1; }
  55%, 100% { opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
  .hero::after { opacity: 0; }
}