*:where(:not(wa-*, [class^="wa-"])) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

:root {
  --content-width: 720px;
  --content-padding: var(--wa-space-l);
  --section-gap: var(--wa-space-3xl);
  --item-gap: var(--wa-space-l);

  /* Timeline shared styles */
  --timeline-dot-size: var(--wa-space-xs);
  --timeline-dot-color: var(--wa-color-neutral-border-normal);
  --timeline-line-color: var(--wa-color-neutral-border-normal);
}

body {
  background: var(--wa-color-surface-default);
}

/* Main Layout */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--wa-space-2xl) var(--content-padding);
}

@media (max-width: 768px) {
  .content {
    padding-top: var(--content-padding);
  }

  #this-week-section {
    width: calc(100% + 2* var(--content-padding)) !important;
    margin-left: calc(-1 * var(--content-padding)) !important;
    padding: var(--wa-space-m) calc(var(--content-padding)) !important;
    border-radius: 0 !important;
  }
}

/* Header */
header {
  display: flex;
}

.site-title {
  letter-spacing: 0.5px;
  text-decoration: none;
}

/* Sections */
section {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
}



/* Overview section - Term summaries */
#term-summaries {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
}

.term-summary {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* Arrow button hover animation */
.arrow-button {
  align-self: flex-start;
  margin-left: -12px;
  transition: margin-left 0.2s ease;
}

.arrow-button:hover,
.arrow-button:focus {
  margin-left: -2px;
}

/* Timeline section - Full width */
.timeline-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

.timeline-header,
.timeline-filter-wrapper {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
  width: 100%;
  box-sizing: border-box;
}

.timeline-filter-wrapper wa-select {
  max-width: 300px;
}

.timeline-filter-wrapper wa-select::part(listbox) {
  max-height: 180px;
}

.timeline-scroll {
  overflow-x: auto;
  padding-top: var(--item-gap);
  position: relative;
  direction: rtl;
  /* Start scrolled to the right */
}

.timeline-items {
  direction: ltr;
  /* Reset text direction for content */
  display: inline-flex;
  flex-direction: row-reverse;
  gap: var(--item-gap);
  position: relative;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xs);
  min-width: 200px;
  max-width: 200px;
}

.timeline-dot {
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  background: var(--timeline-dot-color);
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

.timeline-line {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--timeline-line-color);
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* Detail page */
.detail-title {
  line-height: 1.3;
}

.back-to-top-wrapper {
  position: fixed;
  bottom: var(--wa-space-l);
  right: var(--wa-space-l);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 20;
}

.back-to-top-wrapper.visible {
  opacity: 1;
  visibility: visible;
}

/* Orders list - vertical timeline */
#orders-content {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: var(--wa-space-l);
  gap: var(--wa-space-4xl);
}

#orders-content::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 0;
  width: 1px;
  background: var(--timeline-line-color);
}

.order-item {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
  position: relative;
}

.order-item::before {
  content: '';
  position: absolute;
  left: -23.5px;
  top: 4.5px;
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  background: var(--timeline-dot-color);
  border-radius: 50%;
  z-index: 1;
}

.order-item:last-child {
  padding-bottom: 0;
}

.order-header {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-s);
}

.order-summary {
  margin-top: -3px;
}

.order-themes-section {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
}

.order-impact-section {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
}

.order-populations {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
}

/* President name styling */
.president-name {
  font-weight: bolder;
  display: inline-flex;
  align-items: baseline;
  gap: var(--wa-space-2xs);
}

.president-name wa-avatar {
  --size: 2em;
  align-self: center;
  margin-top: -0.5em;
  margin-bottom: -0.5em;
}

/* Definitions page */
wa-tab-panel::part(base) {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xl);
}

.definitions-list {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xl);
}

.definition-category {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
}

.definition-category-header {
  margin: 0;
  padding: var(--wa-space-s) 0;
  border-bottom: 1px solid var(--wa-color-neutral-200);
  position: sticky;
  top: 0;
  background: var(--wa-color-surface-default);
  z-index: 10;
}

.definition-category-items {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
}

.definition-item {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
}

.definition-text {
  color: var(--wa-color-text-quiet);
}

/* This Week section */
#this-week-section {
  /* Bleed beyond .content padding so border goes edge-to-edge of the gutter */
  width: calc(100% + 2 * var(--content-padding));
  margin-left: calc(-1 * var(--content-padding));
  /* Restore inner padding so text aligns at the original content edge */
  padding: var(--wa-space-l) var(--content-padding);
  border-radius: var(--wa-border-radius-l);
  background: var(--wa-color-brand-fill-quiet);
}

.this-week-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--wa-space-s);
}

#this-week-content {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
}

.weekly-orders {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
  padding: 0;
  margin: 0;
}

/* Disclaimer footer */
.disclaimer {
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--wa-space-4xl) var(--content-padding);
}