/* Wayside Premium FSE — minimal enhancement CSS (hover + responsive grids) */

:root{
  --wbtw-transition: 180ms ease;
}

/* -----------------------------
   Accessibility + UX polish
------------------------------ */

/* Visible focus ring for keyboard users */
:where(a, button, input, textarea, select, summary, .wp-element-button, .wp-block-button__link):focus-visible{
  outline: 3px solid color-mix(in srgb, var(--wp--preset--color--primary) 55%, white);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Keep in-page anchors from hiding under the sticky header */
:where(h1,h2,h3,h4,h5,h6,[id]){
  scroll-margin-top: calc(var(--wp--custom--wbtw--headerHeight) + 16px);
}

/* Skip link (appears on focus) */
.wbtw-skip-link{
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 14px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--pill);
  box-shadow: var(--wp--preset--shadow--subtle);
  transform: translateY(-140%);
  transition: transform var(--wbtw-transition);
  z-index: 1000;
  text-decoration: none;
  color: var(--wp--preset--color--text);
}
.wbtw-skip-link:focus{ transform: translateY(0); }


/* -----------------------------
   Header
------------------------------ */
.wbtw-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.wbtw-header .wp-block-site-logo img{
  max-height: 56px;
  width: auto;
}
.wbtw-header .wp-block-navigation a{
  text-decoration: none;
}
.wbtw-header .wp-block-navigation a:hover{
  color: var(--wp--preset--color--primary);
}
.wbtw-header-search .wp-block-search__inside-wrapper{
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--soft);
  padding: 2px;
}

/* -----------------------------
   Section wrappers
------------------------------ */
.wbtw-section{
  padding-top: var(--wp--preset--spacing--xl);
  padding-bottom: var(--wp--preset--spacing--xl);
}
.wbtw-section--soft{
  background: var(--wp--preset--color--soft);
}
.wbtw-section--cta{
  background: var(--wp--preset--color--cta);
}

/* -----------------------------
   Homepage: white canvas + full-width color bands
------------------------------ */
body.home, body.front-page{
  background: var(--wp--preset--color--surface);
}

/* Full-width color bands (no gradients, no boxed panels) */
.wbtw-band{
  padding-top: var(--wp--preset--spacing--2xl);
  padding-bottom: var(--wp--preset--spacing--2xl);
}

/* Cute kicker (homepage patterns) */
.wbtw-kicker{
  font-family: var(--wp--preset--font-family--accent);
  font-size: 26px;
  line-height: 1;
  color: var(--wp--preset--color--primary);
  margin: 0 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wbtw-kicker::before{
  content:"✿";
  font-size: 22px;
  line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--primary) 80%, white);
}

/* Small “trust” row in hero */
.wbtw-hero-trust{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 14px;
  color: var(--wp--preset--color--muted);
  font-size: 14px;
}
.wbtw-hero-trust b{ color: var(--wp--preset--color--text); }

/* Make homepage sections breathe */
body.home .wbtw-section,
body.front-page .wbtw-section{
  padding-top: var(--wp--preset--spacing--2xl);
  padding-bottom: var(--wp--preset--spacing--2xl);
}

/* Newsletter: make shortcode forms look on-brand */
.wbtw-newsletter :where(input[type="email"], input[type="text"], input[type="search"], input[type="url"], input[type="tel"]){
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--pill);
  padding: 12px 14px;
  background: var(--wp--preset--color--surface);
  font-size: 16px;
}
.wbtw-newsletter :where(button, .wp-element-button, input[type="submit"]){
  width: 100%;
  max-width: 520px;
  border-radius: var(--wp--preset--border-radius--pill);
  padding: 12px 16px;
  font-weight: 800;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--surface);
  border: 0;
}
.wbtw-newsletter :where(button:hover, .wp-element-button:hover, input[type="submit"]:hover){
  filter: brightness(0.95);
}


/* -----------------------------
   Post grids
------------------------------ */
.wbtw-post-grid .wp-block-post-template{
  display: grid;
  gap: 17px;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 600px){
  .wbtw-post-grid .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .wbtw-post-grid .wp-block-post-template{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}


.wbtw-post-grid--two .wp-block-post-template{
  display: grid;
  gap: 17px;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .wbtw-post-grid--two .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.wbtw-post-grid--three .wp-block-post-template{
  display: grid;
  gap: 17px;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
}

/* -----------------------------
   Hero featured (single card)
   Avoid inheriting the 4-up grid rules used by other Query Loops.
------------------------------ */
.wbtw-hero-featured-wrap{
  margin-left: auto;
}
.wbtw-hero-featured .wp-block-post-template{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 600px){
  .wbtw-post-grid--three .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .wbtw-post-grid--three .wp-block-post-template{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* Small meta line above card titles */
.wbtw-post-meta{
  font-size: 14px;
  line-height: 1.3;
}
.wbtw-post-meta a{
  text-decoration: none;
  color: var(--wp--preset--color--muted);
}
.wbtw-post-meta a:hover{
  color: var(--wp--preset--color--primary);
}

/* -----------------------------
   Cards (used inside Query Loop)
------------------------------ */
.wbtw-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--m);
  background: var(--wp--preset--color--surface);
  box-shadow: var(--wp--preset--shadow--subtle);
  overflow: clip;
  transition: transform var(--wbtw-transition), box-shadow var(--wbtw-transition), border-color var(--wbtw-transition);
}
.wbtw-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--wp--preset--shadow--hover);
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 25%, var(--wp--preset--color--border));
}
.wbtw-card .wp-block-post-featured-image img{
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/* Keep card text heights consistent (prevents “first card taller” issues) */
.wbtw-card .wp-block-post-title{
  margin-top: 0;
  /* Clamp titles so one very long title doesn't make one card taller */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.15;
  /* Reserve space for exactly 3 lines so all cards match height */
  min-height: 3.45em;
}
.wbtw-card .wp-block-post-title a{ display:block; }
.wbtw-card .wp-block-post-excerpt{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}
.wbtw-card .wp-block-read-more{
  margin-top: auto;
}

/* Slightly taller card image when used as a featured block */
.wbtw-card--featured .wp-block-post-featured-image img{
  aspect-ratio: 16 / 10;
}

/* -----------------------------
   Post content polish
------------------------------ */
.wp-block-post-content figure,
.wp-block-post-content img{
  border-radius: var(--wp--preset--border-radius--m);
}
.wp-block-post-content figure{ overflow: clip; }

/* Tags as premium chips */
.wbtw-tags a{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--wp--preset--color--soft);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.wbtw-tags a:hover{ color: var(--wp--preset--color--primary); }



/* -----------------------------
   Term chips (Tag Cloud block)
------------------------------ */
.wbtw-term-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.wbtw-term-chips a{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--wp--preset--color--soft);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
  font-size: 14px !important; /* override tag cloud scaling */
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}
.wbtw-term-chips a:hover{
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, var(--wp--preset--color--border));
  color: var(--wp--preset--color--primary);
}

/* -----------------------------
   Chips (Category buttons)
------------------------------ */
.wbtw-chip .wp-block-button__link{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--wp--preset--color--soft);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}
.wbtw-chip .wp-block-button__link:hover{
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, var(--wp--preset--color--border));
  color: var(--wp--preset--color--primary);
}

/* -----------------------------
   Buttons + tags
------------------------------ */
.wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent;
  color: var(--wp--preset--color--primary);
  border: 1px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}

.wbtw-tag{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--wp--preset--color--soft);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.wbtw-tag:hover{
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, var(--wp--preset--color--border));
  color: var(--wp--preset--color--primary);
}

/* -----------------------------
   Sidebar (single posts)
------------------------------ */
.wbtw-sidebar{
  /* Container only; individual widgets are styled as cards. */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
@media (min-width: 1024px){
  .wbtw-sidebar{
    position: sticky;
    top: calc(var(--wp--custom--wbtw--headerHeight) + 16px);
  }
}

.wbtw-sidebar-list .wp-block-post-template{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Widget cards */
.wbtw-widget,
.wbtw-sidebar > .wp-block-search{
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--m);
  background: var(--wp--preset--color--surface);
  box-shadow: var(--wp--preset--shadow--subtle);
}
.wbtw-widget{
  padding: 14px;
}
.wbtw-sidebar > .wp-block-search{
  padding: 10px;
}
.wbtw-widget__title{
  letter-spacing: -0.01em;
}

.wbtw-sidebar-item{
  padding: 10px 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.wbtw-sidebar-item:last-child{ border-bottom: 0; }
.wbtw-sidebar-item .wp-block-post-featured-image{
  flex: 0 0 auto;
}
.wbtw-sidebar-item .wp-block-post-featured-image img{
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.wbtw-thumb img{
  width: 72px;
  height: 72px;
}
.wbtw-sidebar-item__body{
  min-width: 0; /* enable text clamping */
}
.wbtw-sidebar-item__title a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.2;
}
.wbtw-sidebar-item__meta{
  opacity: .85;
}

/* Categories list as clean chips */
.wbtw-cats,
.wbtw-cats ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.wbtw-cats li{
  margin: 0;
}
.wbtw-cats a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--wp--preset--color--text);
}
.wbtw-cats a:hover{
  background: var(--wp--preset--color--soft);
  color: var(--wp--preset--color--primary);
}

/* -----------------------------
   Trending fallback helper
------------------------------ */
.wbtw-is-hidden{ display:none !important; }

/* -----------------------------
   Footer
------------------------------ */
.wbtw-footer{
  border-top: 1px solid var(--wp--preset--color--border);
}
.wbtw-footer a{
  text-decoration: none;
}
.wbtw-footer a:hover{
  color: var(--wp--preset--color--primary);
}

/* Make separators look like pro section dividers */
.wp-block-separator{
  opacity: 1;
  height: 1px;
}


/* -----------------------------
   Forms
------------------------------ */
.wbtw-header-search input{
  min-height: 40px;
}
.wp-block-search__button{
  min-height: 40px;
}

/* -----------------------------
   Post tools (Recipe actions)
------------------------------ */
.wbtw-post-tools{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 720px){
  .wbtw-post-tools{
    flex-wrap: wrap;
    gap: 10px;
  }
}

.wbtw-post-tools .wbtw-tool{
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 85%, transparent);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--text);
  border-radius: var(--wp--preset--border-radius--pill);
  padding: 10px 14px;
  min-height: 44px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--wbtw-transition), box-shadow var(--wbtw-transition), border-color var(--wbtw-transition), background var(--wbtw-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-shadow: var(--wp--preset--shadow--subtle);
}
.wbtw-post-tools .wbtw-tool:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 22%, var(--wp--preset--color--border));
  box-shadow: var(--wp--preset--shadow--hover);
  background: color-mix(in srgb, var(--wp--preset--color--surface) 88%, var(--wp--preset--color--soft));
}

.wbtw-post-tools .wbtw-tool__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wbtw-tool-icon, var(--wp--preset--color--primary));
}
.wbtw-post-tools .wbtw-tool__text{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icon colors (brand colors) */
.wbtw-post-tools .wbtw-tool--jump{
  --wbtw-tool-icon: var(--wp--preset--color--primary);
}
.wbtw-post-tools .wbtw-tool--pinterest{
  --wbtw-tool-icon: #E60023;
}
.wbtw-post-tools .wbtw-tool--facebook{
  --wbtw-tool-icon: #1877F2;
}

/* Mobile: stack, allow wrapping text */
@media (max-width: 720px){
  .wbtw-post-tools .wbtw-tool{
    flex: 1 1 100%;
  }
  .wbtw-post-tools .wbtw-tool__text{
    white-space: normal;
  }
}


/* -----------------------------
   TOC (auto)
------------------------------ */
.wbtw-toc{
  margin: var(--wp--preset--spacing--m) 0 var(--wp--preset--spacing--l);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--m);
  background: var(--wp--preset--color--surface);
  box-shadow: var(--wp--preset--shadow--subtle);
  overflow: clip;
}

.wbtw-toc__summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: var(--wp--preset--font-size--s);
  color: var(--wp--preset--color--text);
  user-select: none;
}
.wbtw-toc__summary::-webkit-details-marker{ display:none; }
.wbtw-toc__summary-title{ display:inline-flex; align-items:center; gap:10px; }

.wbtw-toc__chev{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--wp--preset--color--muted);
  transition: transform var(--wbtw-transition), color var(--wbtw-transition);
}
.wbtw-toc[open] .wbtw-toc__chev{
  transform: rotate(180deg);
  color: var(--wp--preset--color--primary);
}

.wbtw-toc__nav{
  padding: 0 16px 14px;
}
.wbtw-toc__list{ margin: 0; padding-left: 18px; }
.wbtw-toc__item{ margin: 6px 0; }
.wbtw-toc__item--lvl3{ margin-left: 12px; opacity: .95; }
.wbtw-toc a{ text-decoration: none; }
.wbtw-toc a:hover{ color: var(--wp--preset--color--primary); text-decoration: underline; }

/* -----------------------------
   Single post typography + spacing
------------------------------ */
body.single .wp-block-post-content{
  line-height: 1.75;
  font-size: var(--wp--preset--font-size--m);
}
body.single .wp-block-post-content :where(p, li){
  max-width: 78ch;
}
body.single .wp-block-post-content :where(h2, h3, h4){
  scroll-margin-top: 90px; /* nicer anchor jumps */
}
body.single .wp-block-post-content h2{
  font-size: clamp(1.55rem, 1.25rem + 0.9vw, 2.0rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--s);
}
body.single .wp-block-post-content h3{
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: var(--wp--preset--spacing--l) 0 var(--wp--preset--spacing--s);
}
body.single .wp-block-post-content h4{
  font-size: clamp(1.05rem, 1.0rem + 0.25vw, 1.2rem);
  line-height: 1.25;
  margin: var(--wp--preset--spacing--m) 0 var(--wp--preset--spacing--xs);
}
body.single .wp-block-post-content :where(p){
  margin: 0;
}
body.single .wp-block-post-content :where(p + p){
  margin-top: var(--wp--preset--spacing--m);
}

/* Lists: studio-style spacing + markers */
body.single .wp-block-post-content :where(ul, ol){
  margin: var(--wp--preset--spacing--m) 0;
}
body.single .wp-block-post-content ul{
  list-style: none;
  padding-left: 0;
}
body.single .wp-block-post-content ul > li{
  position: relative;
  padding-left: 1.25em;
}
body.single .wp-block-post-content ul > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.46em;
  height: 0.46em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 70%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}
body.single .wp-block-post-content :where(ul > li + li, ol > li + li){
  margin-top: 0.35em;
}
body.single .wp-block-post-content ol{
  padding-left: 1.15em;
}
body.single .wp-block-post-content ol > li::marker{
  color: var(--wp--preset--color--primary);
  font-weight: 900;
}

/* Don't override recipe-card lists (WPRM) */
body.single .wp-block-post-content .wprm-recipe-container :where(ul, ol){
  list-style: revert;
  padding-left: 1.2em;
  margin: var(--wp--preset--spacing--m) 0;
}
body.single .wp-block-post-content .wprm-recipe-container ul{
  list-style: revert;
  padding-left: 1.2em;
}
body.single .wp-block-post-content .wprm-recipe-container ul > li{
  padding-left: 0;
}
body.single .wp-block-post-content .wprm-recipe-container ul > li::before{
  content: none;
}

/* Media + quotes */
body.single .wp-block-post-content :where(figure){
  margin: var(--wp--preset--spacing--l) 0;
}
body.single .wp-block-post-content :where(blockquote){
  margin: var(--wp--preset--spacing--l) 0;
  padding: 14px 16px;
  border-left: 3px solid var(--wp--preset--color--primary);
  background: var(--wp--preset--color--soft);
  border-radius: 14px;
}

/* Remove accidental "empty space" from the last block */
body.single .wp-block-post-content > :last-child{ margin-bottom: 0; }

/* -----------------------------
   Comments (match theme)
------------------------------ */

.wp-block-comments{
  margin-top: var(--wp--preset--spacing--xl);
}
.wp-block-comments-title{
  font-weight: 900;
  letter-spacing: -0.02em;
}
.wp-block-post-comments-form{
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--m);
  background: var(--wp--preset--color--surface);
  box-shadow: var(--wp--preset--shadow--subtle);
  padding: 16px;
}
.wp-block-post-comments-form :where(label){
  font-weight: 700;
  margin-bottom: 6px;
  display: inline-block;
}
.wp-block-post-comments-form :where(input[type="text"], input[type="email"], input[type="url"], textarea){
  width: 100%;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: 12px 12px;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--text);
  outline: none;
}
.wp-block-post-comments-form :where(textarea){
  min-height: 140px;
  resize: vertical;
}
.wp-block-post-comments-form :where(input:focus, textarea:focus){
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}
.wp-block-post-comments-form :where(input[type="submit"]){
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 40%, var(--wp--preset--color--border));
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--surface);
  border-radius: var(--wp--preset--border-radius--pill);
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
}
.wp-block-post-comments-form :where(input[type="submit"]):hover{
  transform: translateY(-1px);
  box-shadow: var(--wp--preset--shadow--subtle);
}
.wbtw-post-tools .wbtw-tool--link{
  display: inline-flex;
  align-items: center;
}

/* Sticky on mobile (very helpful for long recipes) */
@media (max-width: 782px){
  .wbtw-post-tools{
    position: sticky;
    top: calc(var(--wp--custom--wbtw--headerHeight) + 10px);
    z-index: 20;
  }
}

/* -----------------------------
   Single post media constraints
------------------------------ */
.single .wbtw-featured img{
  width: 100%;
  height: clamp(280px, 55vh, 560px);
  object-fit: cover;
  border-radius: var(--wp--preset--border-radius--l);
  box-shadow: var(--wp--preset--shadow--subtle);
}

/* Prevent content images/blocks from overflowing the content column */
.single .wp-block-post-content img{
  max-width: 100%;
  height: auto;
}
.single .wp-block-post-content .alignwide,
.single .wp-block-post-content .alignfull{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.single .wp-block-post-content .wp-block-image{
  overflow: hidden;
}

/* -----------------------------
   Related posts (end of article)
------------------------------ */
.wbtw-related{
  margin-top: var(--wp--preset--spacing--xl);
}
.wbtw-related__title{
  margin: 0 0 14px;
}
.wbtw-related__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px){
  .wbtw-related__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .wbtw-related__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.wbtw-related__card{
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--m);
  background: var(--wp--preset--color--surface);
  overflow: clip;
  box-shadow: var(--wp--preset--shadow--subtle);
  transition: transform var(--wbtw-transition), box-shadow var(--wbtw-transition), border-color var(--wbtw-transition);
}
.wbtw-related__card:hover{
  transform: translateY(-2px);
  box-shadow: var(--wp--preset--shadow--hover);
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 25%, var(--wp--preset--color--border));
}
.wbtw-related__thumb img{
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.wbtw-related__thumb--placeholder{
  display: block;
  aspect-ratio: 4/3;
  background: var(--wp--preset--color--soft);
}
.wbtw-related__body{
  padding: 12px 14px 14px;
}
.wbtw-related__meta{
  margin: 0 0 6px;
  color: var(--wp--preset--color--muted);
  font-size: 14px;
}
.wbtw-related__h3{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}
.wbtw-related__h3 a{ text-decoration: none; color: var(--wp--preset--color--text); }
.wbtw-related__h3 a:hover{ color: var(--wp--preset--color--primary); }

/* -----------------------------
   Author box
------------------------------ */
.wbtw-author{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: start;
  margin-top: var(--wp--preset--spacing--xl);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--m);
  background: var(--wp--preset--color--soft);
  padding: 16px;
}
.wbtw-author__avatar img{
  width: 96px;
  height: 96px;
  border-radius: 999px;
}
.wbtw-author__kicker{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--wp--preset--color--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.wbtw-author__name{
  margin: 0 0 8px;
  font-size: 22px;
}
.wbtw-author__name a{ text-decoration: none; color: var(--wp--preset--color--text); }
.wbtw-author__name a:hover{ color: var(--wp--preset--color--primary); }
.wbtw-author__bio{ margin: 0 0 10px; color: var(--wp--preset--color--muted); }
.wbtw-author__link{ margin: 0; }
.wbtw-author__link a{ font-weight: 800; text-decoration: none; }

@media (max-width: 520px){
  .wbtw-author{ grid-template-columns: 1fr; }
  .wbtw-author__avatar{ width: 96px; }
}

/* -----------------------------
   Toast + Back-to-top
------------------------------ */
.wbtw-toast{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 10px);
  opacity: 0;
  padding: 10px 14px;
  border-radius: var(--wp--preset--border-radius--pill);
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  box-shadow: var(--wp--preset--shadow--card);
  font-weight: 700;
  z-index: 9999;
  transition: opacity var(--wbtw-transition), transform var(--wbtw-transition);
}
.wbtw-toast.is-visible{
  opacity: 1;
  transform: translate(-50%, 0);
}

.wbtw-backtotop{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--wp--preset--border-radius--pill);
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  font-weight: 800;
  text-decoration: none;
}
.wbtw-backtotop:hover{
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, var(--wp--preset--color--border));
  color: var(--wp--preset--color--primary);
}