/* =====================================================
   AWS Handson Portal - Wedding App Style Theme
   Navy background with purple accent (#A78BFA)
   ===================================================== */

/* =====================================================
   CSS Variables - Wedding App Colors with Purple Accent
   ===================================================== */
:root {
  --bg-primary: #1a2332;
  --bg-secondary: #243044;
  --border-color: #3a4a5a;
  --text-primary: #ffffff;
  --text-secondary: #d0d0d0;
  --text-muted: #a0a0a0;
  --accent-purple: #A78BFA;
  --accent-purple-light: #C4B5FD;
  --accent-purple-dark: #8B5CF6;
}

/* =====================================================
   Override ALL Material Theme Colors
   ===================================================== */
[data-md-color-scheme="slate"] {
  /* Background colors - Navy (Wedding App Style) */
  --md-default-bg-color: #1a2332;
  --md-default-bg-color--light: #243044;
  --md-default-bg-color--lighter: #2a3a4a;
  --md-default-bg-color--lightest: #3a4a5a;

  /* Text colors */
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #d0d0d0;
  --md-default-fg-color--lighter: #a0a0a0;
  --md-default-fg-color--lightest: #3a4a5a;

  /* Primary color - PURPLE */
  --md-primary-fg-color: #A78BFA;
  --md-primary-fg-color--light: #C4B5FD;
  --md-primary-fg-color--dark: #8B5CF6;
  --md-primary-bg-color: #1a2332;
  --md-primary-bg-color--light: #243044;

  /* Accent color - PURPLE */
  --md-accent-fg-color: #A78BFA;
  --md-accent-fg-color--transparent: rgba(167, 139, 250, 0.1);
  --md-accent-bg-color: #A78BFA;
  --md-accent-bg-color--light: #C4B5FD;

  /* Typography */
  --md-typeset-color: #ffffff;
  --md-typeset-a-color: #A78BFA;

  /* Code */
  --md-code-fg-color: #d0d0d0;
  --md-code-bg-color: #243044;
  --md-code-hl-color: rgba(167, 139, 250, 0.1);

  /* Footer */
  --md-footer-fg-color: #d0d0d0;
  --md-footer-fg-color--light: #a0a0a0;
  --md-footer-fg-color--lighter: #3a4a5a;
  --md-footer-bg-color: #1a2332;
  --md-footer-bg-color--dark: #141c28;
}

/* =====================================================
   Typography - Cormorant Font
   ===================================================== */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: 'Cormorant', serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.md-typeset h1 {
  font-size: 2.2rem;
  letter-spacing: 0.12em;
}

.md-typeset h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #3a4a5a;
}

.md-typeset h3 {
  font-size: 1.2rem;
}

.md-typeset a {
  color: #A78BFA;
}

.md-typeset a:hover {
  color: #C4B5FD;
}

/* =====================================================
   Header - Wedding App Style
   ===================================================== */
.md-header {
  background: rgba(26, 35, 50, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.md-header__title {
  font-family: 'Cormorant', serif;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.9);
}

.md-header__button {
  color: rgba(255, 255, 255, 0.7);
}

.md-header__button:hover {
  color: #ffffff;
}

/* Search */
.md-search__input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #3a4a5a;
}

.md-search__input::placeholder {
  color: #a0a0a0;
}

/* =====================================================
   Navigation Tabs - Wedding App Style
   ===================================================== */
.md-tabs {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.md-tabs__link {
  font-family: 'Cormorant', serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color 0.3s ease;
}

.md-tabs__link:hover {
  color: #ffffff !important;
}

.md-tabs__link--active {
  color: #A78BFA !important;
}

/* Tab indicator - purple */
.md-tabs__link--active::after,
.md-tabs__item--active .md-tabs__link::after {
  background: #A78BFA !important;
}

/* =====================================================
   Hero Section
   ===================================================== */
.hero {
  background: #1a2332;
  margin: -1rem -1rem 2rem -1rem;
  padding: 4rem 2rem;
  text-align: center;
  border-bottom: 1px solid #3a4a5a;
}

.hero-content {
  max-width: 600px;
  margin: 0 auto;
}

.hero h1 {
  font-family: 'Cormorant', serif !important;
  font-size: 2.5rem !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  letter-spacing: 0.2em;
  margin-bottom: 1rem !important;
}

.hero strong {
  font-family: 'Cormorant', serif;
  font-size: 1.2rem;
  font-weight: 300;
  color: #d0d0d0;
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 1.5rem;
}

.hero p {
  font-size: 1rem;
  font-weight: 300;
  color: #a0a0a0;
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* Hero Buttons */
.hero .md-button {
  font-family: 'Cormorant', serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  padding: 0.75rem 2rem;
  margin: 0.4rem;
  border-radius: 0;
  transition: all 0.3s ease;
}

.hero .md-button--primary {
  background: transparent !important;
  color: #A78BFA !important;
  border: 1px solid #A78BFA !important;
}

.hero .md-button--primary:hover {
  background: #A78BFA !important;
  color: #1a2332 !important;
}

.hero .md-button:not(.md-button--primary) {
  background: transparent !important;
  color: #a0a0a0 !important;
  border: 1px solid #2a2a2a !important;
}

.hero .md-button:not(.md-button--primary):hover {
  color: #ffffff !important;
  border-color: #a0a0a0 !important;
}

/* =====================================================
   Section Styles
   ===================================================== */
.section {
  padding: 2.5rem 0;
  max-width: 900px;
  margin: 0 auto;
}

.section h2 {
  font-family: 'Cormorant', serif !important;
  font-size: 1.3rem !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 2rem !important;
  padding-bottom: 1rem;
  border-bottom: 1px solid #3a4a5a;
}

.section-alt {
  background: #243044;
  margin: 2rem 0;
  padding: 2.5rem 2rem;
  border-top: 1px solid #3a4a5a;
  border-bottom: 1px solid #3a4a5a;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.section-alt h2 {
  text-align: center !important;
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =====================================================
   Card Grid - Wedding App Style
   ===================================================== */
.grid.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.grid.cards > ul {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.grid.cards > ul > li {
  background: transparent;
  border: 1px solid #3a4a5a;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.grid.cards > ul > li:hover {
  border-color: #A78BFA;
}

/* Card Icon */
.card-icon {
  font-size: 1.5rem !important;
  color: #A78BFA;
  display: block;
  margin-bottom: 0.75rem;
}

/* Card Title */
.grid.cards strong {
  font-family: 'Cormorant', serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

/* Card Divider */
.grid.cards hr {
  border: none;
  border-top: 1px solid #3a4a5a;
  margin: 0.75rem 0;
}

/* Card Description */
.grid.cards p {
  font-size: 0.85rem;
  font-weight: 300;
  color: #a0a0a0;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/* Card Meta */
.grid.cards small {
  display: block;
  font-size: 0.8rem;
  color: #a0a0a0;
  margin-bottom: 0.75rem;
}

/* Card Link */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Cormorant', serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #A78BFA;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.card-link:hover {
  color: #C4B5FD;
}

/* =====================================================
   Steps Section
   ===================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.step {
  text-align: center;
  padding: 1.5rem 1rem;
  border: 1px solid #3a4a5a;
  transition: border-color 0.3s ease;
}

.step:hover {
  border-color: #A78BFA;
}

.step h3 {
  font-family: 'Cormorant', serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: #A78BFA !important;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem !important;
  border: none !important;
}

.step p {
  font-size: 0.8rem;
  font-weight: 300;
  color: #a0a0a0;
  line-height: 1.5;
  margin: 0;
}

/* =====================================================
   Admonitions - Wedding App Style
   ===================================================== */
.md-typeset .admonition,
.md-typeset details {
  background: transparent;
  border: 1px solid #3a4a5a;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.9rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-family: 'Cormorant', serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  background: rgba(58, 74, 90, 0.5) !important;
  border-bottom: 1px solid #3a4a5a;
  padding: 0.6rem 1rem;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: #A78BFA !important;
}

.md-typeset .note,
.md-typeset .tip {
  border-color: #3a4a5a;
}

.md-typeset .warning {
  border-color: #a08030;
}

/* =====================================================
   Code Blocks
   ===================================================== */
.md-typeset code {
  background: #243044;
  color: #d0d0d0;
  border-radius: 0;
  padding: 0.15em 0.4em;
  font-size: 0.85em;
}

.md-typeset pre {
  background: #1a2332;
  border: 1px solid #3a4a5a;
  border-radius: 0;
}

.md-typeset pre > code {
  background: transparent;
  font-size: 0.85rem;
}

/* Code copy button */
.md-clipboard {
  color: #a0a0a0;
}

.md-clipboard:hover {
  color: #A78BFA;
}

/* =====================================================
   Tables
   ===================================================== */
.md-typeset table:not([class]) {
  font-size: 0.85rem;
  border: 1px solid #3a4a5a;
  background: transparent;
}

.md-typeset table:not([class]) th {
  font-family: 'Cormorant', serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  background: rgba(58, 74, 90, 0.5);
  color: #ffffff;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-color: #3a4a5a;
  padding: 0.6rem 0.8rem;
}

.md-typeset table:not([class]) tr:hover td {
  background: rgba(58, 74, 90, 0.3);
}

/* =====================================================
   Tabs
   ===================================================== */
.md-typeset .tabbed-labels {
  border-bottom: 1px solid #3a4a5a;
}

.md-typeset .tabbed-labels > label {
  font-family: 'Cormorant', serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: #a0a0a0;
}

.md-typeset .tabbed-labels > label:hover {
  color: #ffffff;
}

.md-typeset .tabbed-labels > label.tabbed-labels--active {
  color: #A78BFA;
}

.md-typeset .tabbed-control--next,
.md-typeset .tabbed-control--prev {
  color: #a0a0a0;
}

/* Tab indicator */
.md-typeset .tabbed-labels > .tabbed-label--active::after {
  background: #A78BFA;
}

/* =====================================================
   Sidebar
   ===================================================== */
/* Hide left sidebar navigation */
.md-sidebar--primary {
  display: none;
}

.md-sidebar {
  background: #1a2332;
}

.md-nav__link {
  color: #a0a0a0;
}

.md-nav__link:hover {
  color: #ffffff;
}

.md-nav__link--active {
  color: #A78BFA;
}

.md-nav__item--active > .md-nav__link {
  color: #A78BFA;
}

/* =====================================================
   Footer
   ===================================================== */
.md-footer {
  background: #1a2332;
  border-top: 1px solid #3a4a5a;
}

.md-footer-meta {
  background: transparent;
}

.md-footer-meta__inner {
  color: #a0a0a0;
}

.md-social__link {
  color: #a0a0a0;
}

.md-social__link:hover {
  color: #A78BFA;
}

/* =====================================================
   Responsive
   ===================================================== */
@media screen and (max-width: 768px) {
  .hero {
    padding: 3rem 1.5rem;
    margin: -0.5rem -0.5rem 1.5rem -0.5rem;
  }

  .hero h1 {
    font-size: 1.8rem !important;
    letter-spacing: 0.15em;
  }

  .hero .md-button {
    display: block;
    width: 100%;
    margin: 0.4rem 0;
  }

  .grid.cards {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .section-alt {
    margin: 1.5rem -1rem;
    padding: 2rem 1rem;
  }
}

@media screen and (max-width: 480px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Animations
   ===================================================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-content {
  animation: fadeIn 0.8s ease-out;
}

/* =====================================================
   Utilities
   ===================================================== */
html {
  scroll-behavior: smooth;
}

/* Focus states */
a:focus-visible {
  outline: 1px solid #A78BFA;
  outline-offset: 2px;
}

/* =====================================================
   News Page Styles
   ===================================================== */
.news-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 0;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.news-item {
  background: transparent;
  border: 1px solid #3a4a5a;
  padding: 1.5rem;
  transition: border-color 0.3s ease;
}

.news-item:hover {
  border-color: #A78BFA;
}

.news-item h3 {
  font-family: 'Cormorant', serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: #a0a0a0 !important;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem !important;
  border: none !important;
}

.news-item strong {
  font-family: 'Cormorant', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.75rem;
}

.news-item p {
  font-size: 0.9rem;
  color: #a0a0a0;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.news-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Cormorant', serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #A78BFA;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.news-link:hover {
  color: #C4B5FD;
}

/* =====================================================
   Schedule Page Styles
   ===================================================== */
.schedule-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 0;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.schedule-item {
  background: transparent;
  border: 1px solid #3a4a5a;
  padding: 1.5rem;
  transition: border-color 0.3s ease;
}

.schedule-item:hover {
  border-color: #A78BFA;
}

.schedule-item.upcoming {
  border-left: 3px solid #A78BFA;
}

.schedule-item.past {
  opacity: 0.8;
}

.schedule-item h3 {
  font-family: 'Cormorant', serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: #A78BFA !important;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem !important;
  border: none !important;
}

.schedule-item.past h3 {
  color: #a0a0a0 !important;
}

.schedule-item strong {
  font-family: 'Cormorant', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.75rem;
}

.schedule-item p {
  font-size: 0.9rem;
  color: #a0a0a0;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.schedule-item ul {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

.schedule-item li {
  font-size: 0.85rem;
  color: #a0a0a0;
  margin-bottom: 0.3rem;
}

.schedule-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Cormorant', serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #A78BFA;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.schedule-link:hover {
  color: #C4B5FD;
}

/* =====================================================
   Recordings Page Styles
   ===================================================== */
.recordings-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 0;
}

.recordings-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.recording-item {
  background: transparent;
  border: 1px solid #3a4a5a;
  padding: 1.5rem;
  transition: border-color 0.3s ease;
}

.recording-item:hover {
  border-color: #A78BFA;
}

.recording-item h3 {
  font-family: 'Cormorant', serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: #A78BFA !important;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem !important;
  border: none !important;
}

.recording-item strong {
  font-family: 'Cormorant', serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.75rem;
}

.recording-item p {
  font-size: 0.9rem;
  color: #a0a0a0;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.recording-item hr {
  border: none;
  border-top: 1px solid #3a4a5a;
  margin: 1rem 0;
}

.recording-item ul {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

.recording-item li {
  font-size: 0.85rem;
  color: #a0a0a0;
  margin-bottom: 0.3rem;
}

/* =====================================================
   Enhanced Navigation Tabs - Wedding App Style
   ===================================================== */
.md-tabs {
  background: rgba(26, 35, 50, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  height: 48px;
}

.md-tabs__list {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.md-tabs__item {
  height: 48px;
  display: flex;
  align-items: center;
}

.md-tabs__link {
  font-family: 'Cormorant', serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.3s ease;
  padding: 0 1rem;
  text-transform: uppercase;
}

.md-tabs__link:hover {
  color: #ffffff !important;
}

.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: #A78BFA !important;
}

/* Hide default underline indicator */
.md-tabs__link::after {
  display: none !important;
}

/* Custom indicator */
.md-tabs__link--active::before,
.md-tabs__item--active .md-tabs__link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background: #A78BFA;
}

/* Mobile tabs */
@media screen and (max-width: 768px) {
  .md-tabs__list {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }

  .md-tabs__link {
    font-size: 0.85rem;
    padding: 0 0.75rem;
    white-space: nowrap;
  }
}

/* =====================================================
   Handson Records Table Styles
   ===================================================== */
.section table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.section table thead th {
  background: #4CAF50 !important;
  color: #ffffff !important;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid #45a049;
}

.section table tbody td {
  padding: 0.75rem 1rem;
  border: 1px solid #3a4a5a;
  background: transparent;
  color: #d0d0d0;
  vertical-align: top;
}

.section table tbody tr:hover td {
  background: rgba(76, 175, 80, 0.1);
}

/* Date column - narrower */
.section table tbody td:first-child {
  width: 100px;
  font-weight: 500;
  color: #ffffff;
}

/* Presentation column - wider */
.section table tbody td:nth-child(2) {
  min-width: 300px;
}

/* Presenter column */
.section table tbody td:nth-child(3) {
  min-width: 150px;
}

/* Documents and Recording columns */
.section table tbody td:nth-child(4),
.section table tbody td:nth-child(5) {
  width: 80px;
  text-align: center;
}

/* Table links */
.section table a {
  color: #4CAF50;
  text-decoration: none;
  font-weight: 500;
}

.section table a:hover {
  color: #66BB6A;
  text-decoration: underline;
}

/* Responsive table */
@media screen and (max-width: 768px) {
  .section table {
    font-size: 0.8rem;
  }

  .section table thead th,
  .section table tbody td {
    padding: 0.5rem;
  }

  .section table tbody td:first-child {
    width: 80px;
  }

  .section table tbody td:nth-child(2) {
    min-width: 200px;
  }
}