.elementor-kit-7{--e-global-color-primary:#942D25;--e-global-color-secondary:#973129;--e-global-color-text:#212121;--e-global-color-accent:#B46A63;--e-global-color-666ee13:#5A708C;--e-global-color-0ee634f:#F5F5F5;--e-global-color-340a2c5:#FFFFFF;--e-global-color-8ed4a06:#B46A632E;--e-global-color-8902d17:#FAF6F6;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-0ee634f );}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{font-size:18px;box-shadow:0px 2px 10px 0px rgba(20.400000000000002, 7.37421195652174, 7.37421195652174, 0.5);border-radius:20px 20px 20px 20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing: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 *//* === Hello Huckleberry - uniform portrait collage === */
:root{
  --hh-gap:24px;
  --hh-radius:14px;
  --hh-shadow:0 8px 24px rgba(17,24,39,.08);
  --hh-aspect:3/4;            /* portrait ratio for ALL tiles (same height look) */
}

.hh-collage{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:var(--hh-gap) !important;
  align-items:start !important;
}

/* Make each image widget a uniform card */
.hh-collage .elementor-widget-image,
.hh-collage .elementor-widget-image .elementor-widget-container,
.hh-collage .elementor-image,
.hh-collage .elementor-image figure{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  aspect-ratio:var(--hh-aspect) !important;  /* <- controls the height */
  height:auto !important;
  overflow:hidden !important;
  border-radius:var(--hh-radius) !important;
  box-shadow:var(--hh-shadow) !important;
}

/* Make the <img> fill and crop perfectly */
.hh-collage .elementor-image img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:var(--hh-radius) !important;
}

/* Tablet/Mobile: stack to one column */
@media (max-width:1024px){
  .hh-collage{ grid-template-columns:1fr !important; }
}

/* Keep page white; just control layout */
.hh-hero{ 
  overflow:hidden;                    /* clips top/bottom/right edges */
  gap: clamp(24px, 4vw, 48px);
}

/* Push collage a little past the right page edge */
.hh-collage{
  margin-right: clamp(-180px, -8vw, -60px);  /* negative = off the page */
}

/* Stagger the right column down a bit */
.hh-col-right{ margin-top: clamp(40px, 4vw, 72px); }

/* Tablet/mobile: reset so nothing gets cut weirdly */
@media (max-width:1024px){
  .hh-collage{ margin-right:0; }
  .hh-col-right{ margin-top:24px; }
}

/* ===== Picture Menu — full-height, clean icon drawer ===== */
.ha-offcanvas[data-offcanvas-name="Picture Menu"]{
  min-height: 100svh;                 /* safe viewport height on mobile */
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Your grid */
.ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-grid{
  flex: 1 1 auto;                     /* fill the panel */
  display: grid;
  grid-template-columns: 1fr 1fr;     /* two columns */
  grid-auto-rows: 1fr;                /* equal-height rows to fill space */
  gap: 0;                             /* separators create the spacing */
  overflow: auto;                     /* scroll if too many items on small phones */
  padding: 4px;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}

/* Tiles */
.ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-item{
  display: grid;
  place-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 14px;
  padding: 16px 8px;
  min-height: 120px;                  /* floor size; grows with 1fr rows */
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Icons (your red PNGs/SVGs) */
.ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-item img{
  width: 64px; height: 64px; object-fit: contain; display:block;
  filter: none; /* keep your red */
}

/* Labels */
.ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-label{
  font: 700 13px/1 "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8f2b2b;
}

/* Hover / focus */
.ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-item:hover,
.ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-item:focus-visible{
  background: rgba(143,43,43,.06);
  outline: 2px solid rgba(143,43,43,.18);
  outline-offset: 2px;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Hairline dividers like the reference */
.ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-grid > li{
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-grid > li:nth-child(odd){
  border-right: 1px solid rgba(0,0,0,.08);
}
/* Remove bottom border on the last row (works for even item counts) */
.ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-grid > li:nth-last-child(-n+2){
  border-bottom: 0;
}

/* Compact phones */
@media (max-width: 380px){
  .ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-item{ min-height: 108px; }
  .ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-item img{ width: 56px; height: 56px; }
}

/* (Optional) Icon-only on desktop: uncomment to hide labels on >=768px
@media (min-width:768px){
  .ha-offcanvas[data-offcanvas-name="Picture Menu"] .oc-label{ display:none; }
}
*/

/* ================= Rainbow Toolkit =================
   Uses your image as a texture for text, button sheen, and section overlays.
   URL: https://hellohuckleberry.com/wp-content/uploads/2025/09/ChatGPT-Image-Sep-29-2025-11_17_02-AM.png
===================================================== */
:root{
  --hh-maroon:#5D1601;
  --rainbow-url: url("https://hellohuckleberry.com/wp-content/uploads/2025/09/ChatGPT-Image-Sep-29-2025-11_17_02-AM.png");
}

/* 1) Rainbow Text Fill (great on big headings like “Explore”) */
.rainbow-text{
  color: transparent;
  background-image: var(--rainbow-url);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
          background-clip: text;
  filter: saturate(1.1) contrast(1.05);
}
/* fallback for browsers that can’t clip to text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .rainbow-text{ color:#f59e0b; } /* warm fallback */
}

/* 2) Rainbow Sheen on Maroon Buttons */
.btn--maroon.rainbow-sheen{
  position: relative;
  overflow: hidden;
  isolation:isolate; /* keep sheen within the button */
}
.btn--maroon.rainbow-sheen::before{
  content:"";
  position:absolute; inset:-30% -40%;
  background-image: var(--rainbow-url);
  background-size: 160% 160%;
  background-position: 40% 40%;
  mix-blend-mode: soft-light;      /* gentle, readable */
  opacity:.25;                     /* subtle by default */
  transform: translate3d(0,0,0) scale(1);
  transition: opacity .25s ease, transform .45s ease, background-position .6s ease;
  pointer-events:none;
  z-index:0;
}
.btn--maroon.rainbow-sheen:hover::before{
  opacity:.45;
  transform: scale(1.03);
  background-position: 60% 60%;   /* slight drift on hover */
}
/* keep text readable per your request */
.btn--maroon{ color:#fff; }
.btn--maroon:hover{ color:#e5e5e5; }

/* 3) Rainbow Band Overlay (nice as a slim divider or callout section) */
.rainbow-band{
  position: relative;
  background: var(--hh-maroon);   /* base color */
  color:#fff;
  border-radius:16px;
  padding:18px 16px;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.rainbow-band::before{
  content:"";
  position:absolute; inset:-20% -10%;
  background-image: var(--rainbow-url);
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay;        /* rainbow interacts with maroon */
  opacity:.22;                     /* subtle */
  filter: saturate(1.1) contrast(1.1);
  pointer-events:none;
}
.rainbow-band a{ color:#fff; font-weight:700; text-decoration: underline; text-underline-offset: 2px; }

/* 4) Optional: Rainbow Edge for Cards (thin border accent) */
.rainbow-edge{
  position: relative;
  border-radius:18px;
  background:#fff;
}
.rainbow-edge::before{
  content:"";
  position:absolute; inset:0;
  padding:1px;                     /* border thickness */
  border-radius:inherit;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--rainbow-url) border-box;
  background-size: cover, cover;
  background-position: center, center;
  -webkit-mask:
     linear-gradient(#fff 0 0) padding-box,
     linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

/* Motion respect */
@media (prefers-reduced-motion: reduce){
  .btn--maroon.rainbow-sheen::before{ transition: none; }
}

</style>
/* ===== Rainbow Text for All H1s ===== */
h1{
  color: transparent;
  background-image: url("https://hellohuckleberry.com/wp-content/uploads/2025/09/ChatGPT-Image-Sep-29-2025-11_17_02-AM.png");
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
          background-clip: text;
  filter: saturate(1.1) contrast(1.05);
}

/* fallback for browsers that don’t support background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  h1{ color:#f59e0b; } /* warm orange fallback */
}

/* Force off-canvas menu to show fully on mobile */
@media (max-width: 768px) {
  #picture-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    transform: none !important; /* remove "off screen" positioning */
    z-index: 99999 !important;
  }

  #picture-menu .ha-offcanvas-content {
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  #picture-menu .ha-offcanvas-overlay {
    position: fixed !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.45) !important;
    z-index: 99998 !important;
  }
}/* End custom CSS */