/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--color-accent);
  color: var(--color-btn-text);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-weight: 700;
  z-index: 9999;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 0.5rem;
}

/* Container */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* Section */
.section {
  padding-block: var(--section-gap);
}

/* Headings */
h1 { font-size: var(--font-size-h1); color: var(--color-white); }
h2 { font-size: var(--font-size-h2); color: var(--color-gold); margin-bottom: var(--h2-gap); }
h3 { font-size: var(--font-size-h3); color: var(--color-white); margin-bottom: var(--h3-gap); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--border-radius);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }

.btn--primary {
  background: var(--color-btn-gradient);
  color: var(--color-btn-text);
}
.btn--outline {
  background: var(--color-btn-outline);
  border: 2px solid var(--color-btn-border);
  color: var(--color-white);
}
.btn--sm {
  font-size: 0.75rem;
  padding: 0.4rem 1rem;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--font-size-small);
  color: var(--color-text);
  margin-bottom: 1.5rem;
}
.breadcrumb__item a { color: var(--color-gold); }
.breadcrumb__item a:hover { text-decoration: underline; }
.breadcrumb__sep { opacity: 0.5; }

/* Content section */
.content-section { margin-bottom: var(--section-gap); }
.content-section__img {
  width: 100%;
  border-radius: var(--border-radius);
  object-fit: cover;
  aspect-ratio: 16/7;
  margin-bottom: var(--paragraph-gap);
}

/* Table */
.data-table {
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-block: var(--paragraph-gap);
}
.data-table th, .data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.data-table th {
  background: var(--color-bg-dark);
  color: var(--color-gold);
  font-weight: 600;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

/* Paragraphs */
p { margin-bottom: var(--paragraph-gap); color: var(--color-text); }
p:last-child { margin-bottom: 0; }

/* Lists inside content */
.content-list,
main ul:not([class]),
main ol:not([class]) {
  margin-block: var(--paragraph-gap);
  padding-left: 1.5rem;
}
.content-list li,
main ul:not([class]) li {
  margin-bottom: 0.5rem;
  color: var(--color-text);
  list-style: disc;
}
main ol:not([class]) li {
  margin-bottom: 0.5rem;
  color: var(--color-text);
  list-style: decimal;
}

/* Fade-in animation */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Focus visible */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}

/* Scroll-to-top */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background: var(--color-btn-gradient);
  color: var(--color-btn-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  z-index: 200;
  font-size: 1.2rem;
  font-weight: 700;
  border: none;
}
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { opacity: 0.85; }

@media (max-width: 767px) {
  .content-section__img { order: -1; }
  .content-section--with-img { display: flex; flex-direction: column; }
}