/* Static-site replacements for behaviour WordPress plugins used to provide. Loaded after /legacy/site.css. */

/* Hero band: background images come from CSS variables set inline by Hero.astro */
.hero-static .hero { background-color: #000; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; min-height: var(--hero-h-m, 700px); background-image: var(--hero-mobile); }
@media (min-width: 768px) { .hero-static .hero { background-image: var(--hero-desktop); min-height: var(--hero-h, 700px); } }
.embed-html { margin: 2em 0; }
.hero-static .hero-content { position: relative; z-index: 1; }
/* Home hero decorations (herb sprig + free range stamp), previously per-instance widget CSS */
.hero-decorated .left .hero-content:before { background: url('/wp-content/uploads/2017/06/home-herb.png') 50% 50% no-repeat; background-size: contain; content: " "; height: 181px; width: 117px; position: absolute; top: -70px; left: 50%; z-index: -1; }
.hero-decorated .left .hero-content:after { background: url('/wp-content/uploads/2017/06/free-range.png') 50% 50% no-repeat; background-size: contain; content: " "; height: 180px; width: 180px; position: absolute; top: -125px; right: 0; z-index: -2; }

/* Full-bleed rows (SiteOrigin computed these margins with JavaScript) */
.full-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }

/* Page-builder grid stand-ins */
.panel-grid { display: flex; flex-wrap: nowrap; gap: 30px; margin-bottom: 30px; }
.panel-grid .panel-grid-cell { flex: 1 1 0; min-width: 0; }
@media (max-width: 780px) { .panel-grid { flex-direction: column; } }

/* Header behaviour: body.scrolled is toggled by site.js, as the old theme did */
.site-search { display: none; }

/* Video gallery (replaces the Rich Web Video Slider plugin) */
.story-videos { max-width: 1024px; margin: 0 auto; }
.story-videos .story-main { position: relative; aspect-ratio: 16 / 9; background: #000; }
.story-videos .story-main iframe, .story-videos .story-main img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.story-videos .story-main button { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; cursor: pointer; }
.story-videos .story-main button:after { content: ""; position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: rgba(0,0,0,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50%/40px no-repeat; }
.story-videos .story-thumbs { display: flex; gap: 8px; margin-top: 8px; list-style: none; padding: 0; }
.story-videos .story-thumbs li { flex: 1; margin: 0; }
.story-videos .story-thumbs img { width: 100%; display: block; cursor: pointer; opacity: .7; }
.story-videos .story-thumbs li.active img, .story-videos .story-thumbs img:hover { opacity: 1; }

/* Recipe carousel: horizontal scroll instead of the jQuery carousel */
body .sow-carousel-container .sow-carousel-wrapper ul.sow-carousel-items { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; list-style: none; margin: 0; }
body .sow-carousel-container .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item { flex: 0 0 auto; scroll-snap-align: start; }
.panel-grid .panel-grid-cell[style*="flex-basis"] { flex-grow: 0; }
.map-embed iframe { width: 100%; min-height: 400px; border: 0; }

/* Print the recipe without chrome */
@media print { #masthead, #colophon, .recipe-breadcrumb, .print-recipe { display: none !important; } }

/* Product nutrition table images */
.product-details .second img { max-width: 160px; }

/* Carousel: the plugin sized and positioned the list with JavaScript; make it a plain scrollable row */
body .sow-carousel-container .sow-carousel-wrapper { overflow: visible; height: auto; position: static; }
body .sow-carousel-container .sow-carousel-wrapper ul.sow-carousel-items { position: static; height: auto; white-space: normal; transform: none; left: auto; }
body .sow-carousel-container .sow-carousel-wrapper ul.sow-carousel-items:before, body .sow-carousel-container .sow-carousel-wrapper ul.sow-carousel-items:after { display: none; }
body .sow-carousel-container .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item { height: auto; overflow: visible; float: none; display: block; }