/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 14 2026 | 17:14:33 */
/* ==========================================================================
   Dispatches from the Ranch — ENHANCED VERSION
   All Recommended Design Improvements Applied
   ========================================================================== */

.ranch-dispatches {
  /* One switch for tone later */
  color: var(--ranch-ink, #2e2e2e);

  /* Currentcolor-derived tokens */
  --ranch-ink-06: rgb(from currentcolor r g b / 6%);
  --ranch-ink-10: rgb(from currentcolor r g b / 10%);
  --ranch-ink-12: rgb(from currentcolor r g b / 12%);
  --ranch-ink-14: rgb(from currentcolor r g b / 14%);
  --ranch-ink-18: rgb(from currentcolor r g b / 18%);
  --ranch-ink-35: rgb(from currentcolor r g b / 35%);
  --ranch-ink-40: rgb(from currentcolor r g b / 40%);
  --ranch-ink-60: rgb(from currentcolor r g b / 60%);

  --ranch-surface: #ffffff;
  --ranch-shadow: 0 10px 30px rgb(0 0 0 / 6%);
  
  /* NEW: Accent color for interactive elements */
  --ranch-accent: #5a8db8; /* Peacock muted teal */
  --ranch-accent-hover: #4a7a9f;
  --ranch-accent-light: rgb(90 141 184 / 10%);
  --ranch-accent-border: rgb(90 141 184 / 30%);

  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 34px);
}

/* ============================================
   HEADER SECTION - ENHANCED
   ============================================ */

.ranch-dispatches__header {
  margin-block-end: 50px; /* Increased from 22px */
  text-align: center; /* Centered for more presence */
  position: relative;
}

.ranch-dispatches__title {
  margin: 0 0 20px; /* Increased spacing */
  max-inline-size: 20ch;
  line-height: 1.05;
  font-weight: 700; /* Bolder */
  font-size: clamp(42px, 5vw, 64px); /* Larger */
  margin-inline: auto; /* Center when constrained */
}

/* NEW: Decorative divider under title */
.ranch-dispatches__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--ranch-ink-40), transparent);
  margin: 24px auto 0;
}

/* Alternative: ornamental divider with icon */
.ranch-dispatches__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px auto 24px;
  max-width: 300px;
  font-size: 20px;
  color: var(--ranch-ink-40);
}

.ranch-dispatches__ornament::before,
.ranch-dispatches__ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ranch-ink-35), transparent);
}

/* ⭐ ORNAMENTAL DIVIDER ICON - Add to HTML as background or img */
.ranch-dispatches__ornament-icon {
  /* Option 1: Background image */
  background-image: url('https://ranchofquestionablechoices.com/staging/6873/wp-content/uploads/2026/01/peacock-feather-divider.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  
  /* Option 2: Or use as <img> in HTML instead */
  /* <div class="ranch-dispatches__ornament">
       <img src="https://ranchofquestionablechoices.com/staging/6873/wp-content/uploads/2026/01/peacock-feather-divider.png" alt="" class="ranch-dispatches__ornament-icon" />
     </div> */
}

.ranch-dispatches__dek {
  max-inline-size: 62ch;
  font-size: 18px; /* Slightly larger */
  margin-inline: auto;
  margin-block-end: 12px;
}

.ranch-dispatches__subdek {
  max-inline-size: 62ch;
  opacity: 0.65;
  font-family: 'Caveat', cursive; /* Handwritten feel */
  font-size: 22px;
  margin-inline: auto;
}

/* Grid */
.ranch-dispatches__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 980px) {
  .ranch-dispatches__grid {
    grid-template-columns: minmax(0, 1fr) 300px; /* Slightly narrower rail */
    gap: 40px; /* More breathing room */
    align-items: start;
  }
}

/* Timeline list */
.ranch-timeline {
  display: grid;
  gap: 24px; /* Increased from 16px for more rhythm */
}

/* ============================================
   YEAR DIVIDER - TAB DIVIDER STYLE
   ============================================ */

.ranch-divider {
  padding-block: 18px 10px; /* More space below */
  position: relative;
}

.ranch-divider__label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.5;
  padding: 6px 16px 6px 28px;
  background: var(--ranch-ink-06);
  border: 1px solid var(--ranch-ink-12);
  border-radius: 20px 20px 0 0;
  position: relative;
}

/* Tab divider line under label */
.ranch-divider::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ranch-ink-12);
}

/* Entry grid: spine + card */
.ranch-entry {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 16px; /* Increased from 12px */
}

/* Spine */
.ranch-entry__spine {
  display: grid;
  justify-items: center;
}

.ranch-entry__dot {
  inline-size: 12px; /* Slightly larger */
  block-size: 12px;
  border-radius: 999px;
  border: 2px solid var(--ranch-ink-40);
  background: var(--ranch-surface);
  margin-block-start: 18px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 8%); /* Added depth */
}

.ranch-entry__line {
  inline-size: 2px;
  block-size: calc(100% - 18px);
  margin-block-start: 6px;
  background: var(--ranch-ink-12);
}

/* ============================================
   DISPATCH CARD - PAPER TEXTURE & ENHANCED
   ============================================ */

.ranch-card {
  background: var(--ranch-surface);
  border: 1px solid var(--ranch-ink-12);
  border-radius: 16px; /* Reduced from 18px for less roundness */
  padding: 20px; /* Increased from 16px */
  box-shadow: var(--ranch-shadow);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* NEW: Subtle paper texture */
.ranch-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  /* ⭐ PAPER TEXTURE URL - Replace with your uploaded paper texture image */
  background-image: url('https://ranchofquestionablechoices.com/staging/6873/wp-content/uploads/2026/01/paper-texture.webp');
  /* Alternative: Use CSS pattern if no image */
  /* background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgb(0 0 0 / 1%) 2px,
      rgb(0 0 0 / 1%) 4px
    ); */
  background-size: 400px 400px; /* Adjust based on your texture size */
  background-repeat: repeat;
  pointer-events: none;
  opacity: 0.3;
}

/* Hover effect */
.ranch-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgb(0 0 0 / 10%);
}

/* ============================================
   DATE STAMP - RUBBER STAMP EFFECT
   ============================================ */

.ranch-card__date {
  display: inline-block; /* Changed from block */
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.8;
  margin-block-end: 10px;
  padding: 4px 10px;
  border: 2px solid var(--ranch-ink-18);
  border-radius: 4px;
  background: var(--ranch-ink-06);
  color: #c33; /* Red stamp color */
  font-family: 'Courier New', monospace; /* Typewriter */
  transform: rotate(-2deg);
  position: relative;
}

/* Stamp texture effect */
.ranch-card__date::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px dashed var(--ranch-ink-18);
  border-radius: 3px;
  opacity: 0.4;
}

.ranch-card__title {
  margin: 0 0 12px; /* Increased spacing */
  line-height: 1.25;
  position: relative;
  z-index: 1;
}

.ranch-card__link {
  color: currentcolor;
  text-decoration: none;
  border-block-end: 1px solid var(--ranch-ink-18);
  transition: border-color 0.2s ease;
}

.ranch-card__link:hover,
.ranch-card__link:focus-visible {
  border-block-end-color: var(--ranch-accent);
}

.ranch-card__excerpt {
  margin: 0 0 16px; /* Increased spacing */
  max-inline-size: 72ch;
  opacity: 0.9;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Meta row */
.ranch-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--ranch-ink-10);
  padding-block-start: 12px;
  position: relative;
  z-index: 1;
}

/* ============================================
   INVOLVED INITIALS - WAX SEAL STYLE
   ============================================ */

.ranch-involved {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.ranch-initial {
  display: inline-grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 999px;
  border: 2px solid var(--ranch-ink-18);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 600;

  color: #fff;              /* ← WHITE LETTER */
  position: relative;
  z-index: 0;               /* establish stacking context */

  box-shadow:
    inset 0 1px 2px rgb(255 255 255 / 40%),
    0 2px 4px rgb(0 0 0 / 8%);

  /* fallback if image fails */
  background-color: #6a6a6a;
}

/* emboss ring goes BEHIND text */
.ranch-initial::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-bottom-color: rgb(0 0 0 / 10%);
  z-index: -1;              /* ← KEY LINE */
}


/* -------------------------------------------------
   Wax Seal Image Tokens
   Use absolute URLs so the browser can't get confused by base paths.
   ------------------------------------------------- */

.ranch-dispatches {
  --ranch-wax-han-img: url('https://ranchofquestionablechoices.com/staging/6873/wp-content/uploads/2026/01/wax-seal-han.png');
  --ranch-wax-leia-img: url('https://ranchofquestionablechoices.com/staging/6873/wp-content/uploads/2026/01/wax-seal-leia.png');
  --ranch-wax-morpheus-img: url('https://ranchofquestionablechoices.com/staging/6873/wp-content/uploads/2026/01/wax-seal-morpheus.png');
  --ranch-wax-neo-img: url('https://ranchofquestionablechoices.com/staging/6873/wp-content/uploads/2026/01/wax-seal-neo.png');
}

/* -------------------------------------------------
   Force-remove any gradients when a character is present.
   (Some themes/blocks reapply `background:` shorthands; !important keeps seals visible.)
   ------------------------------------------------- */

.ranch-initial[data-character],
.ranch-initial[class*="ranch-initial--"] {
  background: none !important;
  background-color: transparent !important;
}

/* -------------------------------------------------
   Wax Seal Backgrounds (supports BOTH data-character and helper classes)
   ------------------------------------------------- */

.ranch-initial[data-character="H"],
.ranch-initial--han {
  background: var(--ranch-wax-han-img) center / cover no-repeat !important;
}

.ranch-initial[data-character="L"],
.ranch-initial--leia {
  background: var(--ranch-wax-leia-img) center / cover no-repeat !important;
}

.ranch-initial[data-character="M"],
.ranch-initial--morpheus {
  background: var(--ranch-wax-morpheus-img) center / cover no-repeat !important;
}

.ranch-initial[data-character="N"],
.ranch-initial--neo {
  background: var(--ranch-wax-neo-img) center / cover no-repeat !important;
}

/* If an image fails to load, keep the letter readable */

/* ============================================
   TAG PILLS - LUGGAGE TAG STYLE (CLICKABLE)
   ============================================ */

.ranch-meta__tags {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ranch-pill {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 4px 12px 12px 4px; /* Asymmetric for tag look */
  border: 1px solid var(--ranch-ink-14);
  background: var(--ranch-ink-06);
  opacity: 0.9;
  position: relative;
  padding-inline-start: 14px;
  text-decoration: none;
  color: currentcolor;
  display: inline-block;
  transition: all 0.2s ease;
}

.ranch-pill:hover,
.ranch-pill:focus-visible {
  background: var(--ranch-accent-light);
  border-color: var(--ranch-accent-border);
  opacity: 1;
  transform: translateY(-1px);
}

/* Tag hole */
.ranch-pill::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--ranch-ink-18);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 20%);
}

/* Pagination */
.ranch-pagination {
  margin-block-start: 30px; /* Increased spacing */
  text-align: center;
}

.ranch-pagination .page-numbers {
  display: inline-block;
  margin-inline-end: 6px;
  padding: 8px 12px;
  border: 1px solid var(--ranch-ink-12);
  border-radius: 12px;
  text-decoration: none;
  color: currentcolor;
  transition: all 0.2s ease;
}

.ranch-pagination .page-numbers:hover {
  background: var(--ranch-ink-10);
  border-color: var(--ranch-ink-18);
}

.ranch-pagination .current {
  background: var(--ranch-ink-10);
  border-color: var(--ranch-ink-18);
  font-weight: 600;
}

/* Footer */
.ranch-dispatches__footer {
  margin-block-start: 40px; /* Increased spacing */
  border-top: 1px solid var(--ranch-ink-10);
  padding-block-start: 24px;
  text-align: center;
}

.ranch-dispatches__footerline {
  margin: 0 0 8px;
  opacity: 0.85;
}

.ranch-dispatches__footerlink {
  margin: 0;
}

.ranch-dispatches__footerlink a {
  color: currentcolor;
  text-decoration: none;
  border-block-end: 1px solid var(--ranch-ink-18);
  transition: border-color 0.2s ease;
}

.ranch-dispatches__footerlink a:hover,
.ranch-dispatches__footerlink a:focus-visible {
  border-block-end-color: var(--ranch-accent);
}

/* ============================================
   RAIL / SIDEBAR - ENHANCED
   ============================================ */

.ranch-dispatches__rail {
  display: none;
}

@media (min-width: 980px) {
  .ranch-dispatches__rail {
    display: block;
    position: sticky;
    top: 18px;
    margin-block-start: 46px;
  }
}

.ranch-railstack {
  display: grid;
  gap: 18px; /* Increased from 14px */
}

/* ============================================
   RAIL CARDS - STICKY NOTE / INDEX CARD STYLE
   ============================================ */

.ranch-railcard {
  background: var(--ranch-surface);
  border: 1px solid var(--ranch-ink-12);
  border-radius: 12px; /* Less rounded */
  padding: 18px;
  box-shadow: var(--ranch-shadow);
  position: relative;
}

/* Subtle paper texture on rail cards too */
.ranch-railcard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  /* ⭐ PAPER TEXTURE URL - Same as main cards or use different texture */
  background-image: url('https://ranchofquestionablechoices.com/staging/6873/wp-content/uploads/2026/01/paper-texture.png');
  /* Alternative: Use CSS pattern if no image */
  /* background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgb(0 0 0 / 1%) 2px,
      rgb(0 0 0 / 1%) 4px
    ); */
  background-size: 400px 400px;
  background-repeat: repeat;
  pointer-events: none;
  opacity: 0.2;
}

/* NEW: Pushpin graphic at top */
.ranch-railcard--pinned::after {
  content: '';
  /* ⭐ PUSHPIN IMAGE URL - Replace with your custom pushpin illustration */
  background-image: url('https://ranchofquestionablechoices.com/staging/6873/wp-content/uploads/2026/01/pushpin.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 64px;
  position: absolute;
  top: -10px;
  /* right: 20px; */
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 15%));
  z-index: 2;
  
  /* FALLBACK: If you want to use emoji instead, comment out background-image above and uncomment below */
  /* content: '📌';
  font-size: 24px; */
}

.ranch-railcard__label {
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.6;
  position: relative;
  z-index: 1;
}

.ranch-railcard__text {
  margin: 0 0 16px;
  max-inline-size: 40ch;
  opacity: 0.9;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.ranch-railcard__actions {
  display: flex;
  flex-direction: column; /* Stack buttons */
  gap: 10px;
  position: relative;
  z-index: 1;
}

/* ============================================
   RAIL BUTTONS - MATCHING SITE STYLE
   ============================================ */

.ranch-railbtn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  color: currentcolor;
  border: 1px solid var(--ranch-ink-14);
  background: var(--ranch-ink-06);
  text-align: center;
  font-weight: 500;
  transition: all 0.2s ease;
}

.ranch-railbtn:hover,
.ranch-railbtn:focus-visible {
  background: var(--ranch-ink-10);
  border-color: var(--ranch-ink-18);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
}

/* Primary button - peacock teal */
.ranch-railbtn--primary {
  border-color: var(--ranch-accent);
  /* background: var(--ranch-accent); */
  color: white;
  font-weight: 600;
}

.ranch-railbtn--primary:hover,
.ranch-railbtn--primary:focus-visible {
  background: var(--ranch-accent-hover);
  border-color: var(--ranch-accent-hover);
}

.ranch-railcard__links {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.ranch-railcard__links a {
  text-decoration: none;
  color: currentcolor;
  border-block-end: 1px solid var(--ranch-ink-18);
  transition: border-color 0.2s ease;
  display: inline-block;
}

.ranch-railcard__links a:hover,
.ranch-railcard__links a:focus-visible {
  border-block-end-color: var(--ranch-accent);
}

.ranch-railcard__latest {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .ranch-dispatches__title {
    max-inline-size: 24ch;
    font-size: clamp(36px, 8vw, 48px);
  }

  .ranch-card {
    padding: 16px;
  }
  
  .ranch-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .ranch-meta__tags {
    justify-content: flex-start;
  }
}

/* ============================================
   SMOOTH SCROLL BEHAVIOR
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--ranch-accent);
  outline-offset: 2px;
}