/*==============================
        =SPECIALTIES=
            PAGES
==============================*/

/* ---------- Shared Specialty Page Styles ---------- */
:root {
  --specialty-header-bg: #383a38;
  --specialty-header-fg: #fff6e2;
}

.specialty-page .specialty-header {
  background-color: var(--specialty-header-bg);
  color: var(--specialty-header-fg);
  text-align: center;
  padding: 40px 20px;
}
.specialty-page .specialty-header h1 {
  font-size: 2.8rem;
  color: var(--specialty-header-fg);
  margin: 0;
}

.specialty-page .specialty-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  gap: 40px;
  flex-wrap: wrap; /* stacks on small screens */
}
.specialty-page .image-side img {
  width: 500px;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(26, 6, 6, 0.875);
}
.specialty-page .text-side h2 {
  font-size: 2.5rem;
  color: #383a38;
  margin-bottom: 16px;
}
.specialty-page .text-side h3 {
  font-size: 1.5rem;
  color: #383a38;
  margin-bottom: 16px;
}
.specialty-page .text-side {
  max-width: 680px;
  text-align: left;
}
.specialty-page .text-side p {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Lists (default look for most pages) */
.specialty-page .text-side ul {
  margin: 0 0 16px;
  padding-left: 1.2rem;
  list-style-position: outside;
}
.specialty-page .text-side li {
  color: #383a38;
  line-height: 1.6;
  margin: 0 0 10px;
}
.specialty-page .text-side li::marker {
  color: #383a38;
}
.specialty-page .text-side li strong {
  color: #383a38;
}

.specialty-page .specialty-layout.reverse {
  flex-direction: row-reverse;
}

.specialty-page .back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  color: var(--specialty-header-fg);
  text-decoration: none;
  font-size: 1rem;
  padding: 8px 12px;
  border: 1px solid var(--specialty-header-fg);
  border-radius: 8px;
  background-color: transparent;
  transition: background-color 0.2s;
}
.specialty-page .back-button:nth-of-type(2) {
  top: 60px; /* moves it below the first */
}

.specialty-page .back-button:hover {
  background-color: rgba(255, 215, 0, 0.1);
}

.specialty-page .specialty-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60px;
  gap: 10px;
  padding-bottom: 40px;
}
.specialty-page .footer-btn {
  background-color: #fff6ef;
  color: #383a38;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 10px;
  font-weight: bold;
  transition: background-color 0.3s;
}
.specialty-page .footer-btn:hover {
  background-color: #ffffff;
}

/* ---------- Page-specific tweaks (keep as needed) ---------- */

/* Match heading sizes to the rest of the specialty pages */
.specialty-page .text-side-centered h2 {
  font-size: 2.5rem; /* same as .text-side h2 */
  color: #383a38;
  margin-bottom: 16px;
}
.specialty-page .text-side-centered h3 {
  font-size: 1.5rem; /* same as .text-side h3 */
  color: #383a38;
  margin-bottom: 16px;
}

/* Center the list block, remove bullets, align lines */
.specialty-page .text-side-centered ul {
  list-style: none; /* no dots */
  margin: 0 auto 16px; /* center the UL */
  padding: 0;
  max-width: 680px; /* same text width as other blocks */
  text-align: left; /* text stays left-aligned */
}

/* Create a "label + text" alignment using a fixed-width label area */
.specialty-page .text-side-centered li {
  color: #383a38;
  line-height: 1.6;
  margin: 0 0 10px;
}

/* Make the <strong> act like a label so wrapped lines align vertically */
.specialty-page .text-side-centered li > strong {
  display: inline-block;
  min-width: 16ch; /* label column width; tweak 14–18ch as needed */
  font-weight: 700;
  color: #383a38;
  padding-right: 0.5ch; /* small gap before the dash/text */
}

/* Keep markers (if any) hidden and colors consistent */
.specialty-page .text-side-centered li::marker {
  color: transparent;
}

/* Optional: scale label width down on narrow screens */
@media (max-width: 560px) {
  .specialty-page .text-side-centered li > strong {
    min-width: 12ch;
  }
}

/* ===== Center pill for the given HTML (.text-side-centered) ===== */
.specialty-page .text-side-centered {
  background: #fff6ef; /* pill color */
  color: #383a38; /* text color */
  border: 1px solid #383a38; /* border (no shadow) */
  border-radius: 14px; /* slightly rounded */
  width: 100%; /* desktop: full width of its container */
  margin: 0; /* touches the container edges on desktop */
  padding: 28px clamp(18px, 4vw, 40px);
}

/* Headings = match specialty sizes */
.specialty-page .text-side-centered h2 {
  font-size: 2.5rem;
  margin: 0 0 8px;
  text-align: center;
  color: #383a38;
}
.specialty-page .text-side-centered h3 {
  font-size: 1.5rem;
  margin: 0 0 16px;
  text-align: center;
  color: #383a38;
}

/* Body copy block width + alignment */
.specialty-page .text-side-centered p,
.specialty-page .text-side-centered ul {
  max-width: 900px; /* keep lines comfortable */
  margin: 0 auto 16px; /* center the block, left-align text */
  text-align: left;
  color: #383a38;
}

/* List: no bullets; aligned label column using <strong> */
.specialty-page .text-side-centered ul {
  list-style: none; /* remove dots */
  padding: 0;
}
.specialty-page .text-side-centered li {
  line-height: 1.6;
  margin: 0 0 10px;
}
.specialty-page .text-side-centered li > strong {
  display: inline-block;
  min-width: 16ch; /* fixed label width so wraps align */
  padding-right: 0.5ch;
  font-weight: 700;
  color: #383a38;
}

/* Mobile: keep side margins instead of full-bleed */
@media (max-width: 720px) {
  .specialty-page .text-side-centered {
    width: auto;
    margin: 0 16px; /* side margins on mobile */
  }
  .specialty-page .text-side-centered li > strong {
    min-width: 12ch; /* narrower label on small screens */
  }
}

.image-side img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}