/* forum_patch.css — ONLY forum styles; rest of site untouched */

/* Pod */
.gw-forum-pod { padding: 2rem 0; }
.gw-forum-card {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(14,32,54,0.08);
  box-shadow: 0 8px 28px rgba(14,32,54,0.12);
  overflow: hidden;
}
.gw-forum-card-header { padding: 16px 16px 8px 16px; border-bottom: 1px solid rgba(14,32,54,0.08); }
.gw-forum-card-title { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--dark-blue, #0E2036); }
.gw-forum-card-subtitle { margin: 6px 0 0 0; color: #475569; }

/* Horizontal tabs */
.gw-forum-tabs { padding: 10px 12px 0 12px; border-bottom: 1px solid rgba(14,32,54,0.08); background: #fff; }
.gw-tabs-list {
  list-style: none; margin: 0; padding: 0 2px;
  display: flex !important; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; white-space: nowrap; scrollbar-width: thin;
}
.gw-tab-item { display: inline-flex !important; }
.gw-tab-link {
  display: inline-flex !important; align-items: center;
  padding: 10px 14px; border: 1px solid transparent;
  border-top-left-radius: 12px; border-top-right-radius: 12px;
  color: var(--dark-blue, #0E2036); text-decoration: none; font-weight: 700;
  background: #f8fafc; transition: background .2s ease, border-color .2s ease;
}
.gw-tab-item.gw-active .gw-tab-link {
  background: #fff; border-color: rgba(14,32,54,0.12); border-bottom-color: #fff;
  box-shadow: 0 -2px 10px rgba(14,32,54,0.06);
}

/* Content area */
.gw-forum-content { padding: 16px; }
.gw-panel-title { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; letter-spacing: .2px; color: var(--dark-blue, #0E2036); text-transform: uppercase; }

/* Composer */
.gw-forum-composer {
  display: grid; gap: 10px; margin: 12px 0 16px 0;
  background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px;
}
.gw-forum-composer .form-group { display: grid; gap: 6px; }
.gw-forum-composer label { font-size: .85rem; color: #475569; font-weight: 600; }
.gw-forum-composer textarea, .gw-forum-composer input[type="url"] {
  width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: .95rem; background: #fff;
}

/* Threads */
.gw-threads-list { display: grid; gap: 12px; margin-top: 10px; }
.gw-thread-card { border: 1px solid rgba(14,32,54,0.08); border-radius: 14px; background: #fff; padding: 12px; }
.gw-thread-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(14,32,54,0.08); margin-bottom: 8px; }
.gw-thread-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--dark-blue, #0E2036); }
.gw-thread-meta { font-size: .8rem; color: #64748b; }
.gw-thread-body { color: #334155; line-height: 1.55; }
.gw-thread-media a { display: inline-flex; align-items: center; text-decoration: none; border: 1px solid #e2e8f0; padding: 6px 10px; border-radius: 8px; font-size: .85rem; margin-top: 8px; }

/* Placeholders */
.gw-threads-empty, .gw-channel-placeholder {
  background: #f8fafc; border: 1px dashed #e2e8f0; color: #475569; padding: 14px 12px; border-radius: 12px; text-align: center;
}

/* Footer */
.gw-forum-footer { border-top: 1px solid rgba(14,32,54,0.08); padding: 12px; display: flex; justify-content: flex-end; }

/* Responsive tweak */
@media (max-width: 100%) {
  .gw-forum-content { padding: 12px; }
  .gw-tab-link { padding: 9px 12px; font-size: .92rem; }
}

/* --- UNDO previous 100vw hack (if present) --- */
.hub-section {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Full-bleed Hub background without affecting layout --- */
.hub-section {
  position: relative;
  /* keep your section layout; background will be drawn by ::before */
  background: none !important; /* we'll draw the same image in ::before */
}
.hub-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;           /* truly full viewport width */
  height: 100%;           /* match section height */
  background-image: url('img/hub.png'); /* same image you use for .hub-section */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;             /* sit behind content */
}
/* Ensure all children sit above the background layer */
.hub-section > * {
  position: relative;
  z-index: 1;
}

/* Mobile: avoid fixed-attachment quirks */
@media (max-width: 768px) {
  .hub-section::before {
    background-attachment: scroll;
  }
}

/* Keep the white forum pod responsive and centered */
.gw-forum-card {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Tabs should scroll within themselves on small screens (not the whole page) */
.gw-tabs-list {
  display: flex;               /* horizontal */
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}


/* --- Hub: keep the white pod within the site width on mobile --- */
.hub-section,
.hub-section .container,
.gw-forum-pod,
.gw-forum-card {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

/* Stop long text/links/media from widening the pod */
.gw-forum-card,
.gw-forum-content,
.gw-threads-list,
.gw-thread-card,
.gw-forum-composer {
  max-width: 100%;
  overflow: hidden; /* prevents tiny horizontal creep */
}

.gw-thread-body {
  overflow-wrap: break-word;
  word-break: break-word;
}

.gw-thread-body img,
.gw-thread-body video,
.gw-thread-body iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Tabs should scroll instead of forcing a wider layout */
.gw-tabs-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.gw-tabs-list::-webkit-scrollbar { display: none; }

/* Safety: never allow horizontal scroll on the Hub section itself */
.hub-section { overflow-x: clip; }
@supports not (overflow-x: clip) {
  .hub-section { overflow-x: hidden; }
}

@media (max-width: 640px) {
  .gw-forum-card { border-radius: 12px; }
}


/* --- Scrollable tab affordances (edge fades + arrows + hint) --- */
.gw-forum-tabs { position: relative; }

/* Edge fades */
.gw-forum-tabs::before,
.gw-forum-tabs::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 2;
}
.gw-forum-tabs::before {
  left: 0;
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.gw-forum-tabs::after {
  right: 0;
  background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}

/* Only show fades when scrollable; hide at ends */
.gw-forum-tabs.scrollable::before,
.gw-forum-tabs.scrollable::after { opacity: 1; }
.gw-forum-tabs.at-start::before { opacity: 0; }
.gw-forum-tabs.at-end::after { opacity: 0; }

/* Arrow buttons */
.gw-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(14,32,54,.12);
  display: none;               /* default hidden; shown when scrollable */
  cursor: pointer;
  line-height: 0;
}
.gw-forum-tabs.scrollable .gw-tab-arrow { display: inline-flex; }
.gw-tab-arrow[disabled] { opacity: .45; cursor: default; }

.gw-tab-arrow.prev { left: 4px; }
.gw-tab-arrow.next { right: 4px; }

/* Make sure tabs themselves can scroll without causing layout shift */
.gw-tabs-list {
  scrollbar-width: none;           /* FF */
  -ms-overflow-style: none;        /* IE/Edge Legacy */
}
.gw-tabs-list::-webkit-scrollbar { display: none; }

/* One-time “Swipe →” hint */
.gw-swipe-hint {
  position: absolute;
  right: 12px;
  bottom: -2px;
  z-index: 2;
  background: #0E2036;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  opacity: .92;
  display: none;                   /* shown via JS only when scrollable */
  pointer-events: none;
  animation: gwPulse 1.6s ease-in-out 2;
}
@keyframes gwPulse {
  0% { transform: translateX(0);   opacity: .92; }
  50%{ transform: translateX(-6px); opacity: .8; }
  100%{ transform: translateX(0);  opacity: .92; }
}

/* On very small screens, keep arrows compact */
@media (max-width: 480px) {
  .gw-tab-arrow { padding: 5px; }
}


/* Thread actions inline group */
.gw-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.gw-thread-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gw-thread-actions .btn-xs { padding: 6px 10px; font-size: .82rem; }

/* Sticky announcement flair */
.gw-sticky-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(180deg, #c19358, #a97a3f);
  border: 1px solid rgba(193,147,88,0.5);
  border-radius: 999px;
  vertical-align: middle;
}

/* Optional: subtle highlight for sticky posts */
.gw-thread-card:nth-child(n) .gw-sticky-badge ~ * {}
.gw-thread-card.gw-sticky {
  border: 1px solid rgba(193,147,88,0.38);
  box-shadow: 0 6px 18px rgba(193,147,88,0.15);
}


/* ===== Reactions ===== */
.gw-react-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.gw-react-form { display: inline-block; }

.gw-react-btn,
.gw-react-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-weight: 700;
  font-size: .92rem;
  color: #0f172a;
}

.gw-react-btn:hover { background: #f8fafc; }
.gw-react-btn.active {
  border-color: rgba(193,147,88,0.55);
  box-shadow: 0 3px 12px rgba(193,147,88,0.18);
}

.gw-react-btn .emo,
.gw-react-pill .emo { line-height: 1; }

.gw-react-btn .cnt,
.gw-react-pill .cnt {
  min-width: 1ch;
  text-align: right;
}

/* tighter on small screens */
@media (max-width: 640px) {
  .gw-react-btn, .gw-react-pill { padding: 5px 9px; font-size: .9rem; }
}

/* ==== Avatars in thread cards ==== */
.gw-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between; /* keeps room for future head actions if needed */
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(14,32,54,0.08);
  margin-bottom: 8px;
}

.gw-thread-author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0; /* prevent overflow in narrow screens */
}

.gw-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(14,32,54,0.12);
  background: #f1f5f9; /* light fallback */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gw-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gw-avatar-initials {
  font-weight: 800;
  color: #0E2036;
  font-size: 0.95rem;
  line-height: 1;
}

.gw-author-meta {
  display: grid;
  gap: 2px;
}

.gw-thread-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark-blue, #0E2036);
}

.gw-thread-meta {
  font-size: .8rem;
  color: #64748b;
}

/* Slightly larger avatars on wider screens */
@media (min-width: 640px) {
  .gw-avatar { width: 44px; height: 44px; }
  .gw-avatar-initials { font-size: 1.05rem; }
}

/* Threads pager */
.gw-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  margin: 6px 0 12px;
  border-top: 1px solid rgba(14,32,54,0.08);
  border-bottom: 1px solid rgba(14,32,54,0.08);
}
.gw-pager-status {
  font-size: .9rem;
  color: #475569;
}
.gw-pager-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gw-pager-btn {
  text-decoration: none;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: .9rem;
  color: var(--dark-blue, #0E2036);
  background: #fff;
}
.gw-pager-btn:hover { background: #f8fafc; }
.gw-pager-btn.disabled,
.gw-pager-btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}


/* Thread actions (edit/delete) */
.gw-thread-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.gw-edit-form textarea { width: 100%; }

/* Reactions */
.gw-react-bar {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(14,32,54,0.08);
  margin-top: 8px;
  flex-wrap: wrap;
}
.gw-react-form { display: inline; }
.gw-react-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
}
.gw-react-btn.active {
  background: #fff9f2;
  border-color: rgba(193,147,88,0.5);
  box-shadow: 0 2px 8px rgba(193,147,88,0.15);
}
.gw-react-emoji { font-size: 16px; line-height: 1; }
.gw-react-count { font-size: .9rem; color: #334155; }


/* ===== Edit & Delete button colors ===== */

/* EDIT — works for the <summary class="btn"> version and any .btn-edit */
.gw-thread-actions details > summary.btn,
.gw-comment-actions details > summary.btn,
.gw-thread-actions .btn-edit,
.gw-comment-actions .btn-edit {
  background: #16a34a;          /* green */
  color: #fff;
  border: 1px solid #15803d;
}
.gw-thread-actions details > summary.btn:hover,
.gw-comment-actions details > summary.btn:hover,
.gw-thread-actions .btn-edit:hover,
.gw-comment-actions .btn-edit:hover {
  background: #15803d;
  border-color: #166534;
}
.gw-thread-actions details[open] > summary.btn,
.gw-comment-actions details[open] > summary.btn {
  filter: brightness(0.98);
}

/* Keep the summary marker hidden for edit toggles */
.gw-thread-actions details > summary::-webkit-details-marker,
.gw-comment-actions details > summary::-webkit-details-marker { display: none; }
.gw-thread-actions details > summary::marker,
.gw-comment-actions details > summary::marker { content: ""; }

/* DELETE — target by name attr to avoid markup changes, plus optional .btn-delete */
.gw-thread-actions form button[name="submitDeletePost"],
.gw-comment-actions form button[name="submitDeleteComment"],
.gw-thread-actions .btn-delete,
.gw-comment-actions .btn-delete {
  background: #dc2626;           /* red */
  color: #fff;
  border: 1px solid #b91c1c;
}
.gw-thread-actions form button[name="submitDeletePost"]:hover,
.gw-comment-actions form button[name="submitDeleteComment"]:hover,
.gw-thread-actions .btn-delete:hover,
.gw-comment-actions .btn-delete:hover {
  background: #b91c1c;
  border-color: #991b1b;
}

/* Accessible focus styles */
.gw-thread-actions .btn-edit:focus-visible,
.gw-comment-actions .btn-edit:focus-visible,
.gw-thread-actions .btn-delete:focus-visible,
.gw-comment-actions .btn-delete:focus-visible,
.gw-thread-actions details > summary.btn:focus-visible,
.gw-comment-actions details > summary.btn:focus-visible,
.gw-thread-actions form button[name="submitDeletePost"]:focus-visible,
.gw-comment-actions form button[name="submitDeleteComment"]:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}


.gw-edit-form .form-group textarea,
.gw-edit-form .form-group input[type="url"] {
  width: clamp(320px, 60vw, 720px);
  max-width: 100%;
  box-sizing: border-box;
}



/* ============================
   Comments: Edit / Delete / Form width
   ============================ */

/* Edit (green) – covers summary buttons inside comment cards */
.gw-comment-card .gw-comment-actions details > summary.btn,
.comment-card .comment-actions details > summary.btn,
.gw-comment-card details > summary.btn.btn-outline,
.comment-card details > summary.btn.btn-outline {
  background: #16a34a;        /* green 600 */
  color: #fff;
  border-color: #16a34a;
}
.gw-comment-card .gw-comment-actions details > summary.btn:hover,
.comment-card .comment-actions details > summary.btn:hover,
.gw-comment-card details > summary.btn.btn-outline:hover,
.comment-card details > summary.btn.btn-outline:hover {
  filter: brightness(1.06);
}

/* Delete (red) – assumes the delete button has class .btn-delete */
.gw-comment-card .gw-comment-actions .btn-delete,
.comment-card .comment-actions .btn-delete,
.gw-comment-card form .btn-delete,
.comment-card form .btn-delete {
  background: #dc2626;        /* red 600 */
  color: #fff;
  border-color: #dc2626;
}
.gw-comment-card .gw-comment-actions .btn-delete:hover,
.comment-card .comment-actions .btn-delete:hover {
  filter: brightness(1.03);
}

/* Keep text white on tiny buttons, too */
.gw-comment-card .gw-comment-actions .btn.btn-xs,
.comment-card .comment-actions .btn.btn-xs {
  color: #fff;
}

/* Wider fields in the comment edit form */
.gw-comment-edit-form textarea,
.gw-comment-edit-form input[type="url"],
.comment-edit-form textarea,
.comment-edit-form input[type="url"],
.gw-comment-card details .form-group textarea,
.gw-comment-card details .form-group input[type="url"],
.comment-card details .form-group textarea,
.comment-card details .form-group input[type="url"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Nice horizontal layout for the actions row */
.gw-comment-actions,
.comment-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}


/* Make <summary> behave like a compact button */
.gw-thread-actions details > summary.btn,
.gw-comment-actions details > summary.btn {
  display: inline-flex;          /* no full-width stretch */
  align-items: center;
  gap: 6px;
  width: auto;                   /* ensure it doesn't fill */
  list-style: none;              /* remove default marker */
  padding: 4px 8px;              /* tweak size here */
  font-size: .82rem;             /* tweak font size */
  line-height: 1;
  border-radius: 8px;
}

/* Hide the default marker in all browsers */
.gw-thread-actions details > summary::-webkit-details-marker,
.gw-comment-actions details > summary::-webkit-details-marker { display: none; }
.gw-thread-actions details > summary,
.gw-comment-actions details > summary { list-style: none; }

/* Ensure action buttons never go full width */
.gw-thread-actions .btn,
.gw-comment-actions .btn {
  display: inline-flex;
  width: auto;
}

/* Optional: tighten size tokens site-wide (if you want even smaller) */
.btn-xs { padding: 4px 8px; font-size: .78rem; border-radius: 8px; }
.btn-sm { padding: 6px 10px; font-size: .9rem;  border-radius: 10px; }


/* ===============================
   Action buttons: normalize size
   (Appended overrides)
   =============================== */

/* Make <summary> look/size like a normal button */
.gw-thread-actions details > summary.btn,
.gw-comment-actions details > summary.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  list-style: none;
  padding: 6px 10px;
  font-size: .82rem;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid transparent;
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
}
.gw-thread-actions details > summary::-webkit-details-marker,
.gw-comment-actions details > summary::-webkit-details-marker { display: none; }
.gw-thread-actions details > summary,
.gw-comment-actions details > summary { list-style: none; }

/* Ensure all action buttons share the same box model/size */
.gw-thread-actions .btn,
.gw-comment-actions .btn,
.gw-thread-actions .btn-edit,
.gw-thread-actions .btn-delete,
.gw-comment-actions .btn-edit,
.gw-comment-actions .btn-delete,
.gw-thread-actions form button[name="submitDeletePost"],
.gw-comment-actions form button[name="submitDeleteComment"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: .82rem;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid transparent;
  width: auto;
  height: auto;
  min-height: 28px;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
}

/* Colors: edit vs delete */
/* EDIT (green) */
.gw-thread-actions details > summary.btn,
.gw-comment-actions details > summary.btn,
.gw-thread-actions .btn-edit,
.gw-comment-actions .btn-edit {
  background: #16a34a;
  color: #fff;
  border-color: #15803d;
}
.gw-thread-actions details[open] > summary.btn,
.gw-comment-actions details[open] > summary.btn,
.gw-thread-actions .btn-edit:hover,
.gw-comment-actions .btn-edit:hover {
  background: #15803d;
  border-color: #166534;
}

/* DELETE (red) */
.gw-thread-actions form button[name="submitDeletePost"],
.gw-comment-actions form button[name="submitDeleteComment"],
.gw-thread-actions .btn-delete,
.gw-comment-actions .btn-delete {
  background: #dc2626;
  color: #fff;
  border-color: #b91c1c;
}
.gw-thread-actions form button[name="submitDeletePost"]:hover,
.gw-comment-actions form button[name="submitDeleteComment"]:hover,
.gw-thread-actions .btn-delete:hover,
.gw-comment-actions .btn-delete:hover {
  background: #b91c1c;
  border-color: #991b1b;
}

/* Focus ring */
.gw-thread-actions details > summary.btn:focus-visible,
.gw-comment-actions details > summary.btn:focus-visible,
.gw-thread-actions .btn-edit:focus-visible,
.gw-comment-actions .btn-edit:focus-visible,
.gw-thread-actions .btn-delete:focus-visible,
.gw-comment-actions .btn-delete:focus-visible,
.gw-thread-actions form button[name="submitDeletePost"]:focus-visible,
.gw-comment-actions form button[name="submitDeleteComment"]:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Edit fields width */
.gw-edit-form .form-group textarea,
.gw-edit-form .form-group input[type="url"],
.gw-comment-edit-form textarea,
.gw-comment-edit-form input[type="url"],
.comment-edit-form textarea,
.comment-edit-form input[type="url"] {
  width: clamp(320px, 60vw, 720px);
  max-width: 100%;
  box-sizing: border-box;
}

/* ================================
   Comments — normalize action size
   ================================ */

/* Treat <summary> like a compact button */
.gw-comment-actions details > summary,
.comment-actions  details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: .82rem;
  line-height: 1;
  border-radius: 8px;
  width: auto;
}

/* Hide default disclosure marker */
.gw-comment-actions details > summary::-webkit-details-marker,
.comment-actions  details > summary::-webkit-details-marker { display: none; }
.gw-comment-actions details > summary,
.comment-actions  details > summary { list-style: none; }

/* Also normalize any .btn / button in the comment action row */
.gw-comment-actions .btn,
.comment-actions  .btn,
.gw-comment-actions button,
.comment-actions  button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;          /* same size as posts */
  font-size: .82rem;
  line-height: 1;
  border-radius: 8px;
  width: auto;
  min-width: 0;
  height: auto;
}

/* EDIT = green (covers summary + optional .btn-edit) */
.gw-comment-actions details > summary,
.comment-actions  details > summary,
.gw-comment-actions .btn-edit,
.comment-actions  .btn-edit {
  background: #16a34a;       /* green */
  color: #fff;
  border: 1px solid #15803d;
}
.gw-comment-actions details[open] > summary,
.comment-actions  details[open] > summary,
.gw-comment-actions .btn-edit:hover,
.comment-actions  .btn-edit:hover {
  filter: brightness(0.98);
  background: #15803d;
  border-color: #166534;
}

/* DELETE = red (by name or .btn-delete) */
.gw-comment-actions form button[name="submitDeleteComment"],
.comment-actions  form button[name="submitDeleteComment"],
.gw-comment-actions .btn-delete,
.comment-actions  .btn-delete {
  background: #dc2626;       /* red */
  color: #fff;
  border: 1px solid #b91c1c;
}
.gw-comment-actions form button[name="submitDeleteComment"]:hover,
.comment-actions  form button[name="submitDeleteComment"]:hover,
.gw-comment-actions .btn-delete:hover,
.comment-actions  .btn-delete:hover {
  background: #b91c1c;
  border-color: #991b1b;
}

/* Keep tiny buttons tiny if .btn-xs is present */
.gw-comment-actions .btn.btn-xs,
.comment-actions  .btn.btn-xs {
  padding: 4px 8px;
  font-size: .78rem;
  border-radius: 8px;
  color: #fff;               /* make sure label stays white */
}

/* Wider inputs in comment edit form */
.gw-comment-edit-form textarea,
.gw-comment-edit-form input[type="url"],
.gw-comment-card details .form-group textarea,
.gw-comment-card details .form-group input[type="url"],
.comment-card details .form-group textarea,
.comment-card details .form-group input[type="url"] {
  width: clamp(320px, 60vw, 720px);
  max-width: 100%;
  box-sizing: border-box;
}

.footer .footer-links a {
  color: var(--golden-brown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: color .2s ease, background .2s ease, transform .1s ease;
}

.footer .footer-links a:hover {
  color: #fff;
  background: var(--golden-brown);
  transform: translateY(-1px);
}

.footer .footer-links i {
  line-height: 1;
}




/* === GIPHY button + modal (scoped) === */
.gw-gif-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-weight: 700;
  font-size: .9rem;
  color: #0f172a;
  cursor: pointer;
}
.gw-gif-btn:hover { background: #f8fafc; }

/* Place the button alongside your existing action buttons */
.gw-forum-composer .form-button-container,
.gw-comment-form .form-button-container,
.comment-form .form-button-container,
.gw-comment-edit-form .form-button-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Modal shell */
.gw-giphy-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 18px;
}
.gw-giphy-modal {
  width: min(920px, 96vw);
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(14,32,54,0.08);
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: 86vh;
}

/* Header */
.gw-giphy-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.gw-giphy-head input[type="search"]{
  flex: 1;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .95rem;
}
.gw-giphy-head .btn-close {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

/* Results grid */
.gw-giphy-body {
  overflow: auto;
  padding: 12px;
}
.gw-giphy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .gw-giphy-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gw-giphy-grid { grid-template-columns: repeat(2, 1fr); } }

.gw-giphy-card {
  position: relative;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
  cursor: pointer;
}
.gw-giphy-card img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* Footer hint */
.gw-giphy-hint {
  padding: 10px 12px;
  color: #475569;
  font-size: .85rem;
}


.gw-thread-body img,
.gw-thread-media img,
.gw-thread-media video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Responsive square by default; 16:9 on wider screens */
.gw-giphy-wrap{
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-top: 8px;
  width:  25%;
}

.gw-giphy-wrap iframe{
  position: absolute;
  inset: 0;
}


/* ===== GIPHY responsive embeds ===== */
.gw-thread-media { margin-top: 8px; }

.gw-giphy-embed { margin-top: 8px; }


.gw-giphy-wrap iframe.giphy-embed {
  position: absolute;
  inset: 0;
  border: 0;
  display: block;
}


/* Clear button: same shape/weight as .btn/.btn-secondary, light blue palette */
#clearMaestro.btn,
#clearMaestro.btn-outline {
  background-color: #e8f3ff;   /* light blue */
  color: #0b4ea2;              /* deep blue text */
  border: 1px solid #b7d8ff;
}

#clearMaestro:hover {
  background-color: #d8ecff;
  border-color: #a7d0ff;
}

#clearMaestro:active {
  background-color: #cbe5ff;
}

#clearMaestro:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(28, 100, 242, 0.35); /* accessible focus ring */
}

#clearMaestro:disabled {
  background-color: #eef6ff;
  color: #7aa7d9;
  border-color: #d6eaff;
  cursor: not-allowed;
  opacity: 1; /* keep readable while disabled */
}


/* Pin button: same shape/weight as Clear, in light green */
#pinMaestro.btn,
#pinMaestro.btn-outline {
  background-color: #e9fbe7;   /* light green */
  color: #166534;              /* deep green text */
  border: 1px solid #bfeec9;
}

#pinMaestro:hover {
  background-color: #d9f6d5;
  border-color: #afe8bb;
}

#pinMaestro:active {
  background-color: #cdf1c8;
}

#pinMaestro:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(8, 54, 39, 0.35); /* accessible focus ring */
}

#pinMaestro:disabled {
  background-color: #f0fbf0;
  color:rgb(32, 103, 53);
  border-color: #daefd9;
  cursor: not-allowed;
  opacity: 1; /* keep readable while disabled */
}


.gw-pins-list .gw-thread-card { margin-bottom: 16px; }
.gw-pin-prompt { margin-bottom: 8px; color: var(--dark-blue); }
.gw-pin-response { white-space: pre-wrap; }
.gw-pin-actions .btn { padding: 6px 10px; }




/* ----- Copy button: light orange like Sticky -------------------------- */
.pin-copy.btn,
.pin-copy.btn-outline {
  background-color: #fef3c7;          /* light amber */
  color: #92400e;                      /* dark amber text */
  border: 1px solid #fde68a;
}
.pin-copy:hover {
  background-color: #fde68a;
  border-color: #fcd34d;
}
.pin-copy:active {
  background-color: #fcd34d;
}
.pin-copy:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35); /* amber focus ring */
}
.pin-copy:disabled {
  background-color: #fff7e6;
  color: #b45309;
  border-color: #f6d399;
  cursor: not-allowed;
  opacity: 1;
}

/* ----- Unpin button: light red --------------------------------------- */
.pin-unpin.btn,
.pin-unpin.btn-outline {
  background-color: #fee2e2;          /* light red */
  color: #991b1b;                      /* deep red text */
  border: 1px solid #fecaca;
}
.pin-unpin:hover {
  background-color: #fecaca;
  border-color: #fca5a5;
}
.pin-unpin:active {
  background-color: #fca5a5;
}
.pin-unpin:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);  /* red focus ring */
}
.pin-unpin:disabled {
  background-color: #fff1f1;
  color: #b91c1c;
  border-color: #ffd3d3;
  cursor: not-allowed;
  opacity: 1;
}



/* BLOG POSTS */
article{max-width:850px; margin:0 auto;}
h1,h2,h3{line-height:1.2; margin:1.25rem 0 .5rem}
h1{font-size:2.1rem}
h2{font-size:1.4rem; display:flex; align-items:center; gap:.5rem}
p{margin:.7rem 0}
ul{padding-left:1.1rem}
blockquote{border-left:4px solid var(--gold); padding:.5rem 1rem; background:#fffaf3; margin:1rem 0}
.hebrew{font-family:"Noto Sans Hebrew","Arial Hebrew",Inter,sans-serif; direction:rtl; unicode-bidi:bidi-override;}
.tagline{color:var(--muted)}
.icon{width:1.1em; height:1.1em; vertical-align:-.15em}
.capsule{display:inline-block; background:#f4f6f8; border:1px solid #e6eaee; border-radius:999px; padding:.15rem .55rem; font-size:.9rem;}
footer p{word-wrap:break-word}
code.kbd{font-family:ui-monospace,Menlo,Consolas,monospace; background:#f6f8fa; padding:.1rem .35rem; border-radius:4px; border:1px solid #e5e7eb}



.gw-thread-media, .gw-comment-media { margin-top: 8px; }

.gw-embed-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.gw-embed-wrap .gw-embed {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.gw-video {
  width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  background: #000;
}
.gw-embed-image {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}



/* forum_patch.css */
:root{
  --gw-navy:#0E2036; --gw-gold:#C19358; --gw-ink:#050304; --gw-white:#fff;
}
.gw-hero{
  background: var(--gw-navy);
  color: var(--gw-white);
  padding: 72px 20px;
}
.gw-hero__inner{
  max-width: 980px; margin: 0 auto; text-align: center;
}
.gw-hero h1{
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(32px,4vw,54px); line-height:1.1; margin:0 0 12px;
}
.gw-hero__sub{
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(16px,2.1vw,20px); opacity:.9; margin:0 auto 20px; max-width:760px;
}
.gw-hero__ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.gw-btn{ display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:600; }
.gw-btn--primary{ background: var(--gw-gold); color: var(--gw-navy); }
.gw-btn--ghost{ border:1.5px solid var(--gw-gold); color: var(--gw-gold); }
.gw-hero__proof{ font-size:14px; opacity:.85; margin-top:6px; }