:root {
  --palette-1: #FFFFFF;
  --palette-2: #379777;
  --palette-3: #F26C4F;
  --palette-4: #7ED4AD;
}

.navbar {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
}

.navbar a:hover {
  text-decoration-line: none;
}

.header nav[aria-label="breadcrumb"] {
  border-bottom: 1px solid #e9ecef;
  background: #fff;
}

.header nav[aria-label="breadcrumb"] .breadcrumb {
  margin-bottom: 0;
  padding: 0.6rem 0;
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
}

.header nav[aria-label="breadcrumb"] .breadcrumb-item a {
  color: var(--palette-2);
  font-weight: 600;
  text-decoration: none;
}

.header nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
  color: var(--palette-3);
}

.header nav[aria-label="breadcrumb"] .breadcrumb-item.active {
  color: var(--palette-3);
  font-weight: 700;
}

.header nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(242, 108, 79, 0.75);
}

@media (max-width: 575.98px) {
  .header nav[aria-label="breadcrumb"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .header nav[aria-label="breadcrumb"] .breadcrumb {
    white-space: nowrap;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }
}

.footer {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--white);

  position: absolute;
  bottom: 0;
  width: 100%;
}

.footer a:hover, .footer a {
  text-decoration-line: none;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  text-rendering: optimizeLegibility;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 225px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6,
.post-content .h1, .post-content .h2, .post-content .h3, .post-content .h4, .post-content .h5, .post-content .h6 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

h1, .h1 {
  font-weight: 700;
  font-size: 3.0rem;
}

h2, .h2 {
  font-weight: 700;
  font-size: 1.8rem;
}

h3, .h3 {
  font-weight: 600;
  font-size: 1.6rem;
}

h4, .h4 {
  font-size: 1.4rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

.bg-site {
  background: var(--palette-1);
}

.bg-palette-1 {
  background: var(--palette-1);
}

.bg-palette-2 {
  background: var(--palette-2);
}

.bg-palette-3 {
  background: var(--palette-3);
}

.bg-palette-4 {
  background: var(--palette-4);
}

.text-palette-1 {
  color: var(--palette-1);
}

.text-palette-2 {
  color: var(--palette-2);
}

.text-palette-3 {
  color: var(--palette-3);
}

.text-palette-4 {
  color: var(--palette-4);
}

.listing-image{
  /* Keep puzzle/category cards visually consistent across breakpoints */
  display: block;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1600px) {
  .container {
    max-width: calc(100% - 200px);
    margin-left: 100px;
    margin-right: 100px;
  }
}

.category-icon::before {
  display: inline-block;
  content: "";
  background-image: url("../bootstrap-icons/alarm.svg");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.listing-designator {
  border-left: 5px solid var(--palette-3);
  padding-left: 1rem;
}

hr {
  border: 1px solid lightgray;
}

.section-divider {
  border: 0;
  border-top: 1px solid #dee2e6;
  margin: 3rem 0 1.75rem;
  opacity: 1;
}

.section-heading {
  padding-bottom: 0.4rem;
}

.section-heading::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0.5rem auto 0;
  background: var(--palette-3);
  border-radius: 2px;
}

/* Interactive Sudoku walkthrough player — shared by blog posts and the puzzle detail page. */
.swt-widget {
  margin: 1.5rem auto;
  max-width: 460px;
  text-align: center;
}

.swt-grid {
  width: 100%;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.4rem;
}

.swt-caption {
  min-height: 2.6em;
  margin-top: 0.6rem;
  color: #374151;
  font-size: 0.98rem;
  line-height: 1.35;
}

.swt-guide-link {
  display: inline-block;
  margin-top: 0.15rem;
  color: #1e7840;
  font-size: 0.88rem;
  text-decoration: none;
}

.swt-guide-link:hover {
  text-decoration: underline;
}

.swt-guide-link[hidden] {
  display: none;
}

.swt-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.swt-btn {
  min-width: 2.4rem;
  padding: 0.25rem 0.6rem;
  font-size: 1.1rem;
  line-height: 1;
  color: #1e7840;
  background: #ffffff;
  border: 1px solid #1e7840;
  border-radius: 0.35rem;
  cursor: pointer;
}

.swt-btn:hover:not(:disabled) {
  background: #e5f3ea;
}

.swt-btn:disabled {
  color: #9ca3af;
  border-color: #d1d5db;
  cursor: default;
}

.swt-counter {
  min-width: 3.5rem;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/* Detail-page per-puzzle "adım adım" hint ladder (lazy-loaded into a collapsible row). */
.swt-hint-row > td {
  background: #ffffff;
}

.swt-lazy .swt-loading,
.swt-lazy .swt-error {
  padding: 1rem;
  text-align: center;
}

/* Progressive enhancement: hide the "Çözüm" column until JS confirms it can drive the hint ladder,
   so a no-JS reader sees a clean table instead of a dead button. sudoku-walkthrough.js adds .swt-js. */
.swt-js-only {
  display: none;
}

.swt-js .swt-js-only {
  display: table-cell;
}

/* Interactive Tents & Trees walkthrough player (see js/tents-walkthrough.js) — mirrors the Sudoku one. */
.twt-widget {
  margin: 1.5rem auto;
  max-width: 460px;
  text-align: center;
}

.twt-grid {
  width: 100%;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.4rem;
}

.twt-caption {
  min-height: 2.6em;
  margin-top: 0.6rem;
  color: #374151;
  font-size: 0.98rem;
  line-height: 1.35;
}

.twt-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.twt-btn {
  min-width: 2.4rem;
  padding: 0.25rem 0.6rem;
  font-size: 1.1rem;
  line-height: 1;
  color: #1e7840;
  background: #ffffff;
  border: 1px solid #1e7840;
  border-radius: 0.35rem;
  cursor: pointer;
}

.twt-btn:hover:not(:disabled) {
  background: #e5f3ea;
}

.twt-btn:disabled {
  color: #9ca3af;
  border-color: #d1d5db;
  cursor: default;
}

.twt-counter {
  min-width: 3.5rem;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/* Tents detail-page hint ladder: the whole section is JS-only (hidden until tents-walkthrough.js adds
   .twt-js to <html>), so a no-JS reader never sees dead "adım adım" buttons. */
.twt-js-only {
  display: none;
}

.twt-js .twt-js-only {
  display: block;
}

/* Interactive Amiral Battı (Battleships) walkthrough player (see js/battleships-walkthrough.js) — mirrors
   the Tents one; the palette is the sea-blue of the puzzle art rather than the tents green. */
.bwt-widget {
  margin: 1.5rem auto;
  max-width: 460px;
  text-align: center;
}

.bwt-grid {
  width: 100%;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.4rem;
}

.bwt-fleet {
  margin-top: 0.5rem;
  color: #6b7280;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.bwt-caption {
  min-height: 2.6em;
  margin-top: 0.4rem;
  color: #374151;
  font-size: 0.98rem;
  line-height: 1.35;
}

.bwt-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.bwt-btn {
  min-width: 2.4rem;
  padding: 0.25rem 0.6rem;
  font-size: 1.1rem;
  line-height: 1;
  color: #1a5fb4;
  background: #ffffff;
  border: 1px solid #1a5fb4;
  border-radius: 0.35rem;
  cursor: pointer;
}

.bwt-btn:hover:not(:disabled) {
  background: #e2eef7;
}

.bwt-btn:disabled {
  color: #9ca3af;
  border-color: #d1d5db;
  cursor: default;
}

.bwt-counter {
  min-width: 3.5rem;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/* Interactive Çapraz Toplama (Kakuro) walkthrough player (see js/kakuro-walkthrough.js). Same skeleton as
   the battleships one; the palette is the green of the ladder chips, and the grid gets a wider max-width
   because kakuro cells carry pencil marks and clue pairs rather than a single glyph. */
.kwt-widget {
  margin: 1.5rem auto;
  max-width: 520px;
  text-align: center;
}

.kwt-grid {
  width: 100%;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.4rem;
}

.kwt-caption {
  min-height: 2.6em;
  margin-top: 0.4rem;
  color: #374151;
  font-size: 0.98rem;
  line-height: 1.35;
}

/* The deduction chain under a kakuro frame's caption. Left-aligned inside the centred figure because
   it is read line by line, and tabular figures keep the sums from jittering between frames. No list
   markers: the lines open with their own ordinals. */
.kwt-chain {
  margin: 0.35rem auto 0;
  padding-left: 0;
  list-style: none;
  max-width: 34rem;
  color: #4b5563;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.kwt-chain li {
  margin-bottom: 0.15rem;
}

.kwt-chain li:last-child {
  margin-bottom: 0;
  color: #1a7f37;
  font-weight: 600;
}

.kwt-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.kwt-btn {
  min-width: 2.4rem;
  padding: 0.25rem 0.6rem;
  font-size: 1.1rem;
  line-height: 1;
  color: #1a7f37;
  background: #ffffff;
  border: 1px solid #1a7f37;
  border-radius: 0.35rem;
  cursor: pointer;
}

.kwt-btn:hover:not(:disabled) {
  background: #e6f4ea;
}

.kwt-btn:disabled {
  color: #9ca3af;
  border-color: #d1d5db;
  cursor: default;
}

.kwt-counter {
  min-width: 3.5rem;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/* Hint-ladder chips (battleships + tents + kakuro): the strip is a wrapping flex row of numbers, so the
   chips are width-matched and tabular-figured to keep "1" and "10" the same size rather than ragged. */
.bwt-chip,
.twt-chip,
.kwt-chip {
  min-width: 2.6rem;
  font-variant-numeric: tabular-nums;
}

/* The open puzzle's chip stays filled. Keyed off aria-expanded rather than a class the player would have
   to toggle, so the highlight cannot drift from the state screen readers are told. #198754 is what
   btn-outline-success fills with on hover (Bootstrap 5.0 has no per-button custom properties to reuse). */
.bwt-chip[aria-expanded="true"],
.twt-chip[aria-expanded="true"],
.kwt-chip[aria-expanded="true"] {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

/* Battleships detail-page hint ladder: JS-only, hidden until battleships-walkthrough.js adds .bwt-js to
   <html>, so a no-JS reader never sees dead "adım adım" buttons. */
.bwt-js-only {
  display: none;
}

.bwt-js .bwt-js-only {
  display: block;
}

/* Kakuro ladder, same JS-only guard. */
.kwt-js-only {
  display: none;
}

.kwt-js .kwt-js-only {
  display: block;
}

/* Shared lazy-load placeholder styling for both ladders (sudoku + tents). */
.wt-loading,
.wt-error {
  padding: 1rem;
  text-align: center;
}