/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 13 2026 | 15:22:01 */
/* ==========================================================================
   Hero page (page-id-47) cleanup
   Modernized: logical properties, modern rgba syntax, fewer !important
   ========================================================================== */

/* Remove header + nav on hero page only */
.page-id-47 #masthead {
  display: none;
}

/* Hide the front-end page title/header on the hero page only */
.page-id-47 .entry-header,
.page-id-47 .entry-title {
  display: none;
}

/* If you still see a gap where the header used to be, uncomment ONE of these:
.page-id-47 .site-content,
.page-id-47 #content {
  margin-block-start: 0;
  padding-block-start: 0;
}
*/

/* ==========================================================================
   Divider polish
   ========================================================================== */
.wp-block-separator.ranch-divider {
  border: 0;
  inline-size: min(920px, 100%);
  block-size: 1px;
  margin-inline: auto;
  margin-block: 64px 96px;
  opacity: 0.22;
  background: currentcolor;
}

@media (max-width: 1024px) {
  .wp-block-separator.ranch-divider {
    inline-size: min(760px, 100%);
    margin-block: 56px 80px;
  }
}

@media (max-width: 768px) {
  .wp-block-separator.ranch-divider {
    inline-size: min(640px, 100%);
    margin-block: 48px 64px;
  }
}

/* ==========================================================================
   Welcome section typography + rhythm
   ========================================================================== */
.ranch-intro {
  max-inline-size: 720px;
  margin-inline: auto;
  padding-inline: 40px;
}

@media (max-width: 768px) {
  .ranch-intro {
    padding-inline: 24px;
  }
}

/* Heading: "Welcome to the Ranch" */
.ranch-intro h2,
.ranch-intro .wp-block-heading {
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 600;
  margin-block: 0 32px;
}

/* Body lines (your four sentences) */
.ranch-intro p {
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 auto 18px;
  max-inline-size: 65ch;
}

/* Create the two-beat structure: extra space after cats line */
.ranch-intro p:nth-of-type(2) {
  margin-block-end: 32px;
}

/* Final kicker line */
.ranch-intro p:last-of-type {
  margin-block: 28px 0;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  opacity: 0.78;
}

@media (max-width: 768px) {
  .ranch-intro h2,
  .ranch-intro .wp-block-heading {
    font-size: 1.5rem;
    margin-block-end: 24px;
  }

  .ranch-intro p {
    font-size: 1rem;
    line-height: 1.65;
    margin-block-end: 16px;
  }

  .ranch-intro p:nth-of-type(2) {
    margin-block-end: 24px;
  }

  .ranch-intro p:last-of-type {
    font-size: 0.9rem;
    margin-block-start: 24px;
  }
}

/* ==========================================================================
   Glimpse row: baseline + scale + spacing
   ========================================================================== */
.ranch-glimpses {
  max-inline-size: 1000px;
  margin-inline: auto;
  padding: 48px 40px 96px;
}

@media (max-width: 768px) {
  .ranch-glimpses {
    padding: 40px 24px 72px;
  }
}

/* If your glimpse container is a GB grid/flex, enforce baseline feel */
.ranch-glimpses .gb-grid-wrapper,
.ranch-glimpses .gb-grid,
.ranch-glimpses .gb-inside-container {
  align-items: flex-end;
}

/* Make images behave nicely */
.ranch-glimpses img {
  display: block;
  block-size: auto;
  max-inline-size: 100%;
}

/* Optional: tighten each asset size so the set feels cohesive */
.ranch-glimpses .glimpse-wing img,
.ranch-glimpses img.glimpse-wing {
  max-inline-size: 260px;
}

.ranch-glimpses .glimpse-cats img,
.ranch-glimpses img.glimpse-cats {
  max-inline-size: 300px;
}

.ranch-glimpses .glimpse-boot img,
.ranch-glimpses img.glimpse-boot {
  max-inline-size: 240px;
}

/* Space between items (works if they are inline/flex/grid columns) */
.ranch-glimpses .gb-grid-column,
.ranch-glimpses .gb-grid-item {
  padding-inline: 24px;
}

@media (max-width: 1024px) {
  .ranch-glimpses .gb-grid-column,
  .ranch-glimpses .gb-grid-item {
    padding-inline: 16px;
  }
}

/* Mobile stacking: make glimpses feel intentional when 1-col */
@media (max-width: 768px) {
  .ranch-glimpses .glimpse-wing img,
  .ranch-glimpses .glimpse-cats img,
  .ranch-glimpses .glimpse-boot img {
    max-inline-size: 320px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Intro CTA card
   Modernized: shorthand padding, modern rgb/alpha, logical props
   ========================================================================== */
.intro-cta {
  background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
  padding: 15px;
  box-shadow: 0 6px 30px rgb(0 0 0 / 12%);
  border: 3px solid #f0e6d2;
  text-align: center;
  position: relative;
}

/* If you truly need fixed heights, keep. Otherwise prefer min-block-size. */
#intro-cta-2,
#intro-cta-1 {
  block-size: 120px;
}

/* ==========================================================================
   IMPORTANT: This hides ALL content area on single Character posts.
   If you intended to hide only a section, narrow the selector.
   ========================================================================== */
.single-character #content {
  display: none;
}

/* ==========================================================================
   FIXED: invalid selector in your original CSS
   You had: .gb-element-71942d75 group-humans group-cats { ... }
   That is not valid CSS. Here are two valid options:

   @media (max-width: 1024px) {
  .gb-element-71942d75 .group-humans,
  .gb-element-71942d75 .group-cats {
    justify-self: center;
    text-align: center;
  }
}

*/