.elementor-kit-5{--e-global-color-primary:#3C4C3F;--e-global-color-secondary:#F5EDE1;--e-global-color-text:#7B9C82;--e-global-color-accent:#2F2A26;--e-global-color-8f74b78:#1A1A1A;--e-global-color-6175110:#FFFFFF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-text );color:var( --e-global-color-6175110 );border-radius:12px 12px 12px 12px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===============================
   GLOBAL / UTILITIES
================================= */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Base nav-button look (used around the site) */
.nav-button {
  background:#f5ede1; color:#1a1a1a;
  border-radius:24px; border:0;
  box-shadow:0 4px 15px rgba(0,0,0,.10);
  padding:12px 24px; font-weight:700; font-size:16px;
  display:inline-block; text-align:center;
  transition:transform .2s ease, background-color .2s ease;
}
.nav-button:hover { transform:translateY(-2px); background:#e6dac9; }

/* Remove Elementors inner button skins when you wrap them with .nav-button */
.nav-button .elementor-button,
.nav-button .elementor-button-text {
  background:transparent !important;
  color:#1a1a1a !important;
  box-shadow:none !important;
  padding:0 !important; margin:0 !important; border:none !important;
}
.nav-button.active { background:#d6c5b0; color:#1a1a1a; box-shadow:0 4px 20px rgba(0,0,0,.2); }

/* ===============================
   MONTH/YEAR TABS (works for classic & nested tabs)
   Add class "month-tabs" to EACH Tabs widget (years + months)
================================= */

/* Containers */
.month-tabs .elementor-tabs-wrapper,
.month-tabs .e-n-tabs-heading {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px 16px; border:0 !important; padding:8px 0 6px; background:transparent;
}

/* Titles (classic & nested) + their inner anchors */
.month-tabs .elementor-tab-title,
.month-tabs .elementor-tab-title > a,
.month-tabs .e-n-tab-title,
.month-tabs .e-n-tab-title > a {
  flex:1 1 160px; max-width:220px;
  display:inline-flex; align-items:center; justify-content:center;
  text-align:center; white-space:normal; line-height:1.2;
  text-decoration:none !important;

  background:#f5ede1 !important; color:#1a1a1a !important;
  border-radius:20px; border:0 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  padding:10px 18px; font-weight:700; cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.month-tabs .elementor-tab-title:hover,
.month-tabs .elementor-tab-title > a:hover,
.month-tabs .e-n-tab-title:hover,
.month-tabs .e-n-tab-title > a:hover,
.month-tabs .elementor-tab-title:focus,
.month-tabs .e-n-tab-title:focus {
  transform:translateY(-2px);
  background:#e6dac9 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  outline:none;
}
/* Active state */
.month-tabs .elementor-tab-title.elementor-active,
.month-tabs .e-n-tab-title[aria-selected="true"] {
  background:#3c4c3f !important; color:#f5ede1 !important;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
}
/* Optional: add class "is-disabled" to a tab label to mute it */
.month-tabs .is-disabled,
.month-tabs .is-disabled > a {
  background:#bbb !important; color:#f5ede1 !important;
  cursor:not-allowed; opacity:.6; transform:none !important;
}
.month-tabs .elementor-tab-content,
.month-tabs .e-n-tab-content { background:transparent; padding-top:18px; border:0; }
@media (max-width:640px){
  .month-tabs .elementor-tab-title,
  .month-tabs .elementor-tab-title > a,
  .month-tabs .e-n-tab-title,
  .month-tabs .e-n-tab-title > a { flex:1 1 calc(50% - 12px); max-width:none; }
}
/* Inactive tabs: add subtle border so they don't melt into the card */
.month-tabs .elementor-tab-title,
.month-tabs .elementor-tab-title > a,
.month-tabs .e-n-tab-title,
.month-tabs .e-n-tab-title > a {
  border:1px solid #d6c5b0 !important;  /* soft beige border */
}

/* ===============================
   SUBMISSIONS GRID
   Add class "submissions-grid" to the container that wraps the Loop
================================= */

.submissions-grid { max-width:1100px; margin:0 auto 48px; }
.submissions-grid .e-loop-items,
.submissions-grid .elementor-loop-container {
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px; justify-items:center; align-items:start;
}

/* ===============================
   REVIEW CARDS
   Ensure the OUTER card container has class "review-card"
================================= */

/* Card skin + hover */
.submissions-grid .review-card {
  background:#f5ede1 !important;
  border-radius:18px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.10) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.submissions-grid .review-card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.14) !important;
}

/* Normalize review text blocks inside the card */
.review-card .review-body,
.review-card .review-body * {
  white-space:normal !important;
  display:block !important;
  line-height:1.6 !important;
  word-break:normal !important;
  margin:0 0 10px 0 !important;
}

/* Votes row spacing */
.review-card .votes-row {
  position:relative !important;
  display:flex !important;
  gap:12px !important;
  margin-top:8px !important;
}

/* Clamp review text for consistent card heights
   Add BOTH classes to the Text Editor widget: "review-body review-text" */
/* keep only these — let JS add the clamp styles */
.review-text { position: relative; }
.review-text.clamped::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.2em;
  background:linear-gradient(to bottom, rgba(245,237,225,0), rgba(245,237,225,1));
}
.readmore{ display:inline-block; margin-top:6px; font-weight:600; text-decoration:underline; }

/* ===============================
   COPY SHARE LINK (button widget wrapper has class "dr-copy-link")
   Option A: dark green button
================================= */

.dr-copy-link .elementor-button,
.dr-copy-link a.elementor-button-link {
  background:#3c4c3f !important;   /* brand dark green */
  color:#f5ede1 !important;        /* cream text */
  border-radius:24px; border:0;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  padding:12px 22px; font-weight:700;
  transition:transform .18s ease, background-color .18s ease;
}
.dr-copy-link .elementor-button:hover,
.dr-copy-link a.elementor-button-link:hover {
  transform:translateY(-2px);
  background:#2d3a30 !important;   /* a hair darker on hover */
}
.dr-copy-link .elementor-button-text::before { content:"🔗"; margin-right:8px; }

/* Visual feedback after copy (class toggled by JS) */
.dr-copy-link.dr-copied { filter: brightness(1.1); }


/* ===============================
   ATTENDANT OF THE MONTH
   Add class "aotm-card" to the container; "aotm-tagline" under the name
================================= */

.aotm-card {
  background:
    linear-gradient(180deg, rgba(123,156,130,.10), rgba(123,156,130,0)) padding-box,
    linear-gradient(135deg, #d9b975, #f1e2b4) border-box;
  border:2px solid transparent; border-radius:20px; padding:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.aotm-card .elementor-heading-title {
  display:inline-flex; align-items:center; gap:8px;
}
.aotm-card .elementor-heading-title::before,
.aotm-card .elementor-heading-title::after { content:"🏅"; }
.aotm-tagline { margin-top:6px; font-weight:600; color:#3c4c3f; }
.aotm-tagline::before { content:"🥗 Ranch Royalty — "; font-weight:700; }

/* === Card polish (spacing + hover snap) === */
.submissions-grid .review-card {
  padding: 20px;                 /* add consistent inner padding */
  gap: 14px;                     /* modern spacing between child widgets */
}
.submissions-grid .review-card:hover {
  transform: translateY(-4px);   /* a touch more lift */
}

/* Tighten title + meta spacing inside card (Elementor headings/text) */
.submissions-grid .review-card .elementor-widget-heading { margin: 0 !important; }
.submissions-grid .review-card .elementor-widget-text-editor { margin: 0 !important; }
.submissions-grid .review-card .elementor-widget-image { margin-bottom: 8px; }

/* Image: consistent rounded look */
.submissions-grid .review-card .elementor-widget-image img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

/* Votes row & copy button alignment */
.submissions-grid .review-card .votes-row { justify-content: center; }
.submissions-grid .review-card .dr-copy-link { display: flex; justify-content: center; }


/* Make sure the toggle/link stacks and spaces correctly */
.readmore { display:inline-block; margin:10px 0 6px; position:relative; z-index:2; }
.review-card .votes-row { position:relative !important; margin-top:12px !important; z-index:1; }

/* === Copy Share Link — dark green (final override) === */
.elementor .dr-copy-link .elementor-button,
.elementor .dr-copy-link a.elementor-button-link {
  background:#3c4c3f !important;   /* brand dark green */
  color:#f5ede1 !important;        /* cream text */
  border-radius:24px; border:0;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  padding:12px 22px; font-weight:700;
  transition:transform .18s ease, background-color .18s ease;
  opacity:1 !important;            /* in case any theme sets lower opacity */
}
.elementor .dr-copy-link .elementor-button:hover,
.elementor .dr-copy-link a.elementor-button-link:hover {
  transform:translateY(-2px);
  background:#2d3a30 !important;
}
.elementor .dr-copy-link .elementor-button-text,
.elementor .dr-copy-link .elementor-button-content-wrapper { 
  color:#f5ede1 !important; 
}
.elementor .dr-copy-link .elementor-button-text::before { content:"🔗"; margin-right:8px; }

/* === Year tabs: clearer inactive state (final override) === */
.month-tabs .elementor-tab-title:not(.elementor-active),
.month-tabs .e-n-tab-title:not([aria-selected="true"]) {
  background:#f4e7d3 !important;            /* slightly lighter than the card */
  border:1px solid #d6c5b0 !important;      /* soft beige outline */
  color:#1a1a1a !important;
}

.month-tabs .elementor-tab-title > a,
.month-tabs .e-n-tab-title > a {
  color:inherit !important;                  /* keep label readable */
}

/* Generic disabled style for month/years tabs */
.month-tabs .is-disabled,
.month-tabs .is-disabled > a {
  background:#ddd !important;
  color:#777 !important;
  border:1px solid #bbb !important;
  cursor:not-allowed !important;
  opacity:.7;
  transform:none !important;
  text-decoration:none !important;
}

/* --- Horizontal scroller: exactly 4 visible cards; non-destructive --- */
/* Row: add class "review-row" to the Flexbox Container that holds the cards */
.review-row{
  --cardW: 340px;   /* adjust 320–360 to taste */
  --gap: 24px;
  --visible: 4;

  /* Width = cards + gaps; center the row */
  max-width: calc(var(--visible) * var(--cardW) + (var(--visible) - 1) * var(--gap));
  margin: 0 auto;
  padding: 0 !important; /* avoid stealing width */
}

.review-row > .e-con-inner{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap: var(--gap) !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding: 0 4px 12px;
}

/* ✅ Only size real cards (give each card wrapper the class "review-card") */
.review-row > .e-con-inner > .review-card{
  flex: 0 0 var(--cardW);
  max-width: var(--cardW);
  min-width: var(--cardW);  /* prevents squish */
  scroll-snap-align: start;
  box-sizing: border-box;
  margin: 0 !important;     /* avoid extra spacing from Elementor */
}

/* Responsive */
@media (max-width: 1024px){
  .review-row{ --visible: 3; max-width: calc(3 * var(--cardW) + 2 * var(--gap)); }
}
@media (max-width: 640px){
  .review-row{ --visible: 2; max-width: calc(2 * var(--cardW) + 1 * var(--gap)); }
}

/* Optional scrollbar cosmetics */
.review-row > .e-con-inner::-webkit-scrollbar{ height:8px; }
.review-row > .e-con-inner::-webkit-scrollbar-track{ background:#efe6d7; border-radius:8px; }
.review-row > .e-con-inner::-webkit-scrollbar-thumb{ background:#bfae95; border-radius:8px; }

/*Ranch picture edits */
/* Base Polaroid style */
.ranch-polaroid-left,
.ranch-polaroid-right {
  background: #f5ede1;
  padding: 12px 12px 28px 12px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,.15);
  text-align: center;
  font-size: 14px;
  font-style: italic;
  margin: 8px;
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
}

/* Left tilt */
.ranch-polaroid-left {
  transform: rotate(-2deg);
}

/* Right tilt */
.ranch-polaroid-right {
  transform: rotate(2deg);
}

/* Hover lift effect */
.ranch-polaroid-left:hover,
.ranch-polaroid-right:hover {
  transform: scale(1.03) rotate(0deg);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* ✨ Soft white glow behind image */
.ranch-polaroid-left::before,
.ranch-polaroid-right::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.8;
}

/* Ensure the actual image stays above the glow */
.ranch-polaroid-left img,
.ranch-polaroid-right img {
  position: relative;
  z-index: 1;
  border-radius: 8px;
}

/* Mobile tweak — straighten the tilt on smaller screens */
@media (max-width: 768px) {
  .ranch-polaroid-left,
  .ranch-polaroid-right {
    transform: none;
  }
}/* End custom CSS */