/* =========================================================
   BRAND / LOGO COLOR TOKENS
   Lybbert Legends logo-derived colors
   ========================================================= */

:root {
  --brand-brown: #2e1c0f;
  --brand-brown-dark: #23140a;
  --brand-brown-soft: #6b6853;

  --brand-orange: #f18321;
  --brand-orange-topbar: #f7903a;
  --brand-orange-footer: #cc3c08;

  --brand-teal: #80cecb;
  --brand-teal-dark: #499f9e;
  --brand-aqua: #e5f7f7;
  --brand-aqua-light: #f6fffe;

  --brand-green: #83bf43;
  --brand-green-dark: #6b802e;

  --brand-gray: #958f88;
  --brand-white: #ffffff;

  /* Functional aliases */
  --link-color: var(--brand-brown);
  --link-hover: var(--brand-orange);
  --link-active: var(--brand-brown-dark);
  --link-visited: var(--brand-brown-soft);
  --link-focus-ring: #f1832133;

  --panel-bg: var(--brand-aqua-light);
  --panel-border: var(--brand-teal);

  --tab-bg: var(--brand-teal-dark);
  --tab-bg-soft: #499f9e33;
  --tab-text: var(--brand-white);

  --togglebar-bg: #dff4f3;
  --togglebar-border: #2e1c0f33;

  --togglepill-bg: var(--brand-white);
  --togglepill-border: var(--brand-teal);
  --toggle-text: var(--brand-brown);

  --accent-soft: var(--brand-gray);
  --accent: var(--brand-orange);
  --focus-ring: #f1832138;

  --checkbox-border: var(--brand-teal);
  --checkbox-bg: var(--brand-white);

  --chip-bg: #e8f6e6;
  --chip-border: var(--brand-green);
  --chip-text: var(--brand-brown);

  --chip-bg-hover: #d8f0d2;
  --chip-border-hover: var(--brand-green-dark);
  --chip-text-hover: var(--brand-brown);

  --chip-bg-active: var(--brand-brown);
  --chip-border-active: var(--brand-brown);
  --chip-text-active: var(--brand-white);

  --search-bg: var(--brand-white);
  --search-border: var(--brand-teal);
  --search-focus: var(--brand-brown);

  --clear-bg: #f3f2ee;
  --clear-bg-hover: var(--brand-brown);
  --clear-text: var(--brand-brown-soft);
  --clear-border: var(--brand-teal);

  --header-bg: var(--brand-aqua);

  --alt-brown: var(--brand-brown);
  --alt-brown-2: var(--brand-brown-soft);
  --alt-orange: var(--brand-orange);
  --alt-teal: var(--brand-teal);
  --alt-green: var(--brand-green);
  --alt-accent: var(--brand-green-dark);
  --alt-aqua: var(--brand-aqua);
  --alt-gray: var(--brand-gray);

  --wprm-rating-accent: #ff6201;
  --wprm-rating-empty: #c7ccd1;
}

/* Control Order of Appearance On Small Screens */
/* =========================================================
   Mobile: force content first, sidebar after (OceanWP layout)
   ========================================================= */
@media (max-width: 768px) {
  /* Make the wrap a flex column so we can reorder children */
  #content-wrap {
    display: flex;
    flex-direction: column;
  }

  /* Main content first */
  #primary {
    order: 1;
    width: 100%;
  }

  /* Sidebar after main content */
  #right-sidebar {
    order: 2;
    width: 100%;
    margin-top: 32px; /* optional spacing */
  }
}

/* =========================================================
   Logo-themed Styling
   Brand-aligned, calm, accessible
   ========================================================= */
/* Base link */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.18s ease;
}

/* Hover */
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Active (while clicking) */
a:active {
  color: var(--link-active);
}

/* Accessibility focus */
a:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--link-focus-ring);
  border-radius: 4px;
}

/* ========================================================= WPUPG — RECIPE INDEX FILTER PANEL Targets: #wpupg-grid-recipe-index-filters ========================================================= */
#wpupg-grid-recipe-index-filters {
  position: relative;
  margin: 24px 0 18px;
  padding: 20px 10px 10px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
} /* FILTER CONTROLS TAB */
#wpupg-grid-recipe-index-filters::before {
  content: "FILTER CONTROLS";
  position: absolute;
  top: -30px;
  left: 16px;
  padding: 8px 14px;
  background: var(--tab-bg);
  color: var(--tab-text);
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-radius: 6px 6px 0 0;
  line-height: 1;
  z-index: 10;
} /* WPUPG injects padding via inline <style> — normalize it here */
#wpupg-grid-recipe-index-filters > .wpupg-filter-container {
  box-sizing: border-box;
  padding: 3px 0px !important;
  margin: 0 !important;
}
#wpupg-grid-recipe-index-filters > div.wpupg-filter-toggles {
  background-color: var(--togglebar-bg);
  border-color: var(--togglebar-border);
} /* --------------------------------------------------------- ROW FILTERS (each is its own row) --------------------------------------------------------- */
#wpupg-grid-recipe-index-filter-1-container,
#wpupg-grid-recipe-index-filter-2-container,
#wpupg-grid-recipe-index-filter-3-container,
#wpupg-grid-recipe-index-filter-4-container,
#wpupg-grid-recipe-index-filter-5-container,
#wpupg-grid-recipe-index-filter-6-container,
#wpupg-grid-recipe-index-filter-7-container {
  flex: 0 0 100%;
  width: 100%;
} /* Add top spacing to Course row */
#wpupg-grid-recipe-index-filter-1-container {
  margin-top: 18px !important;
} /* --------------------------------------------------------- LABEL + CHIPS (labels never alone) Only applies to label-inline containers --------------------------------------------------------- */
#wpupg-grid-recipe-index-filters .wpupg-filter-container-label-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0 6px;
}
#wpupg-grid-recipe-index-filters
  .wpupg-filter-container-label-inline
  .wpupg-filter-label {
  margin: 0 !important;
  padding: 2px 0 0 !important;
  font-size: 12px !important;
  font-weight: 800;
  white-space: nowrap;
  flex: 0 0 auto;
  color: var(--accent); /* muted label text */
}
#wpupg-grid-recipe-index-filters
  .wpupg-filter-container-label-inline
  .wpupg-filter {
  flex: 1 1 auto;
  min-width: 0;
} /* Chips wrapper */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-container-label-inline
  .wpupg-filter-isotope {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  min-width: 0;
} /* Chip base */
#wpupg-grid-recipe-index-filters .wpupg-filter-isotope .wpupg-filter-item {
  border-radius: 999px;
  padding: 4px 10px;
  margin: 0 !important;
  font-size: 12px;
  line-height: 1.2;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--chip-text);
} /* Chip hover */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-isotope
  .wpupg-filter-item:hover {
  background: var(--chip-bg-hover);
  border-color: var(--chip-border-hover);
  color: var(--chip-text-hover);
} /* Chip selected (WPUPG commonly uses .is-active; add both to be safe) */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-isotope
  .wpupg-filter-item.is-active,
#wpupg-grid-recipe-index-filters
  .wpupg-filter-isotope
  .wpupg-filter-item.wpupg-filter-item-selected {
  background: var(--chip-bg-active);
  border-color: var(--chip-border-active);
  color: var(--chip-text-active);
}
#wpupg-grid-recipe-index-filters .wpupg-term-count {
  font-weight: 800;
} /* --------------------------------------------------------- TOGGLE BAR (desktop: float above border) --------------------------------------------------------- */
#wpupg-grid-recipe-index-filters .wpupg-filter-toggles {
  position: absolute;
  top: -18px;
  right: 16px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 !important;
  padding: 3px 8px;
  background: var(--header-bg);
  border: 1px solid var(--togglebar-border);
  border-radius: 6px;
  z-index: 11;
}
#wpupg-grid-recipe-index-filters .wpupg-filter-toggles .toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--togglepill-border);
  background: var(--togglepill-bg);
  cursor: pointer;
  user-select: none;
} /* checkbox */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-toggles
  .toggle-item
  input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 12px !important;
  height: 12px !important;
  margin: 0;
  border: 1px solid var(--checkbox-border);
  border-radius: 2px;
  background: var(--checkbox-bg);
  display: grid;
  place-content: center;
  cursor: pointer;
}
#wpupg-grid-recipe-index-filters
  .wpupg-filter-toggles
  .toggle-item
  input[type="checkbox"]::before {
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: transform 0.06s ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background-color: #ffffff;
} /* checked = olive (warm accent) */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-toggles
  .toggle-item
  input[type="checkbox"]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
}
#wpupg-grid-recipe-index-filters
  .wpupg-filter-toggles
  .toggle-item
  input[type="checkbox"]:checked::before {
  transform: scale(1);
} /* toggle label text */
#wpupg-grid-recipe-index-filters .wpupg-filter-toggles .toggle-item span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--toggle-text);
  line-height: 1;
} /* optional: make label brighten when checked (requires :has support) */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-toggles
  .toggle-item:has(input[type="checkbox"]:checked)
  span {
  color: var(--toggle-text);
} /* hide when toggled off */
#wpupg-grid-recipe-index-filters .wpupg-filter-container.is-hidden {
  display: none !important;
} /* --------------------------------------------------------- BOTTOM CONTROLS (desktop: ONE line, Clear on right) --------------------------------------------------------- */
@media (min-width: 681px) {
  /* bottom controls are flex items in the main flex wrapper */
  #wpupg-grid-recipe-index-filter-made-by-me-container,
  #wpupg-grid-recipe-index-filter-made-by-any-container,
  #wpupg-grid-recipe-index-filter-rated-container,
  #wpupg-grid-recipe-index-filter-11-container,
  #wpupg-grid-recipe-index-filter-12-container {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 6px 8px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  } /* keep checkbox label + box together */
  #wpupg-grid-recipe-index-filter-made-by-me-container
    .wpupg-filter-checkboxes-term-container,
  #wpupg-grid-recipe-index-filter-made-by-any-container
    .wpupg-filter-checkboxes-term-container,
  #wpupg-grid-recipe-index-filter-rated-container
    .wpupg-filter-checkboxes-term-container {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  } /* Search becomes the flexible spacer so Clear can go far right */
  #wpupg-grid-recipe-index-filter-11-container {
    flex: 1 1 auto !important;
    min-width: 160px;
  }
  #wpupg-grid-recipe-index-filter-11-container
    .wpupg-filter-text-input-container {
    width: 150px !important;
    margin: 0 !important;
  } /* Push CLEAR to far right */
  #wpupg-grid-recipe-index-filter-12-container {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
} /* text search base */
#wpupg-grid-recipe-index-filters .wpupg-filter-text-input-container {
  max-width: 100%;
  margin: 0 !important;
}
#wpupg-grid-recipe-index-filters input[type="text"],
#wpupg-grid-recipe-index-filters .wpupg-filter-text-input {
  background: var(--search-bg);
  border: 1px solid var(--search-border);
  border-radius: 6px;
  padding: 6px 10px;
}
#wpupg-grid-recipe-index-filters input[type="text"]:focus,
#wpupg-grid-recipe-index-filters .wpupg-filter-text-input:focus {
  outline: none;
  border-color: var(--search-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
} /* clear button base */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-clear
  .wpupg-filter-clear-button {
  border-radius: 999px;
  padding: 2px 14px !important;
  font-weight: 800;
  background: var(--clear-bg);
  color: var(--clear-text);
  border: 1px solid var(--clear-border);
}
#wpupg-grid-recipe-index-filters
  .wpupg-filter-clear
  .wpupg-filter-clear-button:hover {
  background: var(--clear-bg-hover);
} /* --------------------------------------------------------- MOBILE: toggles become normal flow; controls can wrap --------------------------------------------------------- */
@media (max-width: 680px) {
  #wpupg-grid-recipe-index-filters {
    margin-top: 22px;
    padding-top: 8px;
  }
  #wpupg-grid-recipe-index-filters .wpupg-filter-toggles {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    justify-content: center;
    padding: 2px 2px;
    margin: 0 !important;
  }
  #wpupg-grid-recipe-index-filters .wpupg-filter-text-input-container {
    width: 100% !important;
  }
} /* ========================================================= WPUPG — FINAL OVERRIDE LAYER (wins over WPUPG Manager <style>) Goal: make ALL chips match Course chips Exclude: Clear All Selections ========================================================= */ /* --- 1) Isotope chips (Course/Category/Cuisine/Diet/Keyword/Authors) --- */
#wpupg-grid-recipe-index-filters .wpupg-filter-isotope .wpupg-filter-item {
  background-color: var(--chip-bg) !important;
  border: 1px solid var(--chip-border) !important;
  color: var(--chip-text) !important;
  border-radius: 999px !important;
  padding: 2px 6px !important; /* match your Course chips (WPUPG Manager uses 2px 4px) */
  margin: 2px 2px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-decoration: none !important;
} /* hover (WPUPG Manager makes hover = active; we keep subtle hover) */
@media (hover: hover) and (pointer: fine) {
  #wpupg-grid-recipe-index-filters
    .wpupg-filter-isotope
    .wpupg-filter-item:hover {
    background-color: var(--pp-chip-bg-hover) !important;
    border-color: var(--pp-chip-border-hover) !important;
    color: var(--pp-chip-text) !important;
  }
} /* active/selected — YOUR markup uses .active */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-isotope
  .wpupg-filter-item.active,
#wpupg-grid-recipe-index-filters
  .wpupg-filter-isotope
  .wpupg-filter-item.is-active,
#wpupg-grid-recipe-index-filters
  .wpupg-filter-isotope
  .wpupg-filter-item.wpupg-filter-item-selected {
  background-color: var(--chip-bg-active) !important;
  border-color: var(--chip-border-active) !important;
  color: var(--chip-text-active) !important;
} /* keep focus from adopting WPUPG Manager “active” color */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-isotope
  .wpupg-filter-item:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px #2f8f8733 !important;
} /* --- 2) Checkbox chips (Made by Me / Made by Any / Rated) --- */ /* Hide checkbox square; use label as the pill */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-checkboxes-term-container
  input.wpupg-filter-checkboxes-term {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
} /* Ensure container doesn't impose font-size/color from WPUPG Manager */
#wpupg-grid-recipe-index-filters .wpupg-filter-checkboxes-term-container {
  margin: 2px 2px !important;
  font-size: 12px !important;
  color: inherit !important;
} /* The pill */
#wpupg-grid-recipe-index-filters .wpupg-filter-checkboxes-term-container label {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--chip-bg) !important;
  border: 1px solid var(--chip-border) !important;
  color: var(--chip-text) !important;
  border-radius: 999px !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  user-select: none !important;
} /* hover */
@media (hover: hover) and (pointer: fine) {
  #wpupg-grid-recipe-index-filters
    .wpupg-filter-checkboxes-term-container
    label:hover {
    background-color: var(--chip-bg-hover) !important;
    border-color: var(--chip-border-hover) !important;
    color: var(--chip-text) !important;
  }
} /* checked */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-checkboxes-term-container
  input.wpupg-filter-checkboxes-term:checked
  + label {
  background-color: var(--chip-bg-active) !important;
  border-color: var(--chip-border-active) !important;
  color: var(--chip-text-active) !important;
} /* --- 3) Text search (kill WPUPG red border + gray bg from Manager) --- */
#wpupg-grid-recipe-index-filters input.wpupg-filter-text-input {
  background-color: #ffffff !important;
  border: 1px solid var(--chip-border) !important;
  color: #355e5a !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
}
#wpupg-grid-recipe-index-filters input.wpupg-filter-text-input:focus {
  outline: none !important;
  border-color: var(--chip-border-active) !important;
  box-shadow: 0 0 0 3px #2f8f8733 !important;
} /* --- 4) EXCLUDE Clear All Selections (leave as-is) --- Your Clear button is: #wpupg-grid-recipe-index-filter-12 .wpupg-filter-item We intentionally do NOT style .wpupg-filter-clear-button anywhere above. */ /* ========================================================= HOVER BEHAVIOR — MAKE IT OBVIOUS (Preview Active) Paste BELOW your current override layer. ========================================================= */ /* ---------- Isotope chips hover ---------- */ /* Only apply hover styling when NOT already active */
@media (hover: hover) and (pointer: fine) {
  #wpupg-grid-recipe-index-filters
    .wpupg-filter-isotope
    .wpupg-filter-item:not(.active):hover {
    background-color: var(--chip-bg-active) !important;
    border-color: var(--chip-border-active) !important;
    color: var(--chip-text-active) !important;
  }
} /* Optional: give hovered chip a subtle lift */
@media (hover: hover) and (pointer: fine) {
  #wpupg-grid-recipe-index-filters
    .wpupg-filter-isotope
    .wpupg-filter-item:hover {
    transform: translateY(-1px);
  }
} /* ---------- Checkbox chips hover ---------- */ /* Hover should preview active ONLY when not checked */
@media (hover: hover) and (pointer: fine) {
  #wpupg-grid-recipe-index-filters
    .wpupg-filter-checkboxes-term-container
    input.wpupg-filter-checkboxes-term:not(:checked)
    + label:hover {
    background-color: var(--chip-bg-active) !important;
    border-color: var(--chip-border-active) !important;
    color: var(--chip-text-active) !important;
  }
} /* Keep checked chips stable (no flicker) */
@media (hover: hover) and (pointer: fine) {
  #wpupg-grid-recipe-index-filters
    .wpupg-filter-checkboxes-term-container
    input.wpupg-filter-checkboxes-term:checked
    + label:hover {
    background-color: var(--chip-bg-active) !important;
    border-color: var(--chip-border-active) !important;
    color: var(--chip-text-active) !important;
  }
} /* ========================================================= CLEAR BUTTON — MATCH ACTIVE CHIP + STRONGER PRESENCE ========================================================= */ /* Base (inactive look) */
#wpupg-grid-recipe-index-filter-12 .wpupg-filter-clear-button {
  border-radius: 999px !important;
  padding: 4px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background-color: #f4f4f4 !important;
  border: 1px solid #dadada !important;
  color: #6b6b6b !important;
  opacity: 1 !important;
  transition: all 0.18s ease;
} /* ACTIVE (filters applied) */
#wpupg-grid-recipe-index-filter-12
  .wpupg-filter-clear-button[style*="opacity: 1"],
#wpupg-grid-recipe-index-filter-12 .wpupg-filter-clear-button.active {
  background-color: var(--chip-bg-active) !important;
  border-color: var(--chip-border-active) !important;
  color: var(--chip-text-active) !important; /* Stronger shadow */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
} /* Hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  #wpupg-grid-recipe-index-filter-12 .wpupg-filter-clear-button:hover {
    transform: translateY(-1px);
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.18),
      0 3px 6px rgba(0, 0, 0, 0.12);
  }
  #wpupg-grid-recipe-index-filter-12 .wpupg-filter-clear-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }
}
#wpupg-grid-recipe-index-filter-7-label {
  color: #b2b2b2 !important;
} /* ========================================================= WPUPG — Make Category/Cuisine/Diet/Keyword toggle checkboxes square ========================================================= */
#wpupg-grid-recipe-index-filters .wpupg-filter-toggles .toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
} /* Force a real square checkbox */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-toggles
  .toggle-item
  input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid var(--chip-border, #8bb7b3);
  border-radius: 2px; /* keep it square-ish; change to 0 for sharp corners */
  background: #fff;
  display: inline-block;
  vertical-align: middle;
} /* Checked state */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-toggles
  .toggle-item
  input[type="checkbox"]:checked {
  background: var(--chip-bg-active, #2b8a84);
  border-color: var(--chip-bg-active, #2b8a84);
} /* Optional: subtle focus ring */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-toggles
  .toggle-item
  input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 138, 132, 0.25);
}

/* OceanWP: BASE TYPOGRAPHY + HEADER + NAV (TABBED) + DROPDOWNS + MOBILE Styling */
/* =========================================================
   HRH — OceanWP: BASE TYPOGRAPHY + HEADER + NAV (TABBED) + DROPDOWNS + MOBILE
   Uses your palette vars (already defined in :root):
   --tab-bg, --accent, --panel-bg, --panel-border,
   --chip-bg, --chip-border, --chip-bg-active, --chip-text, --chip-text-active,
   --togglebar-bg, --togglebar-border, --focus-ring
   ========================================================= */

/* ==============================
   1) BASE TYPOGRAPHY + GLOBAL LINKS
   ============================== */

body {
  color: var(--chip-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--tab-bg) !important;
  letter-spacing: -0.01em;
}

p {
  line-height: 1.6;
}

/* Site-wide links (non-nav) */
a {
  color: var(--tab-bg);
  text-decoration: none;
  transition:
    color 0.18s ease,
    text-decoration-color 0.18s ease;
}
a:hover {
  color: var(--accent);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
a:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: 4px;
}

/* ==============================
   2) HEADER BAR
   ============================== */

#site-header {
  border-color: var(--togglebar-border) !important;
  background-color: var(--togglebar-bg) !important;
}

/* Bottom-align inner header row (logo + nav) */
#site-header-inner {
  display: flex;
  align-items: flex-end;
}

/* NAV WRAPPER as flex item */
#site-navigation-wrap {
  margin-left: auto;
  align-self: flex-end;
}

/* Keep nav from adding extra vertical padding */
#site-navigation-wrap .main-menu,
#site-navigation-wrap .menu-link {
  padding-top: 0;
  padding-bottom: 0;
}

/* Tighten ONLY top-level menu items */
#site-navigation-wrap > nav > ul > li > a.menu-link {
  padding-top: 0;
  padding-bottom: 0;
}

/* Restore spacing for dropdown items */
#site-navigation-wrap .sub-menu > li > a.menu-link {
  padding: 8px 12px;
}

/* Parent icon menu item */
#site-navigation-wrap .lybleg-user-menu > a {
  display: flex;
  align-items: center;
  gap: 6px;
}
#site-navigation-wrap .lybleg-user-menu i {
  font-size: 1.5em;
}

/* Force-remove OceanWP dropdown indicator */
#site-navigation-wrap .no-arrow > a .dropdown-toggle,
#site-navigation-wrap .no-arrow > a .nav-arrow,
#site-navigation-wrap .no-arrow > a:after {
  display: none !important;
  content: none !important;
}

/* ==============================
   3) PRIMARY NAV (OceanWP) — TABS (top-level only)
   Active = tab
   Hover = tab
   ============================== */

/* Add gap between tabs */
#site-navigation ul.dropdown-menu {
  display: flex;
  gap: 5px;
}

/* Base tab look */
#site-navigation ul.dropdown-menu > li > a.menu-link {
  padding: 4px 12px;
  text-decoration: none !important;
  border-radius: 8px 8px 0 0; /* tab top corners */
  color: var(--tab-bg) !important;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Kill OceanWP underline/hover line */
#site-navigation ul.dropdown-menu > li > a.menu-link:after {
  display: none !important;
}

/* Hover tab */
#site-navigation ul.dropdown-menu > li:hover > a.menu-link,
#site-navigation ul.dropdown-menu > li > a.menu-link:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* Active/current tab */
#site-navigation ul.dropdown-menu > li.current-menu-item > a.menu-link,
#site-navigation ul.dropdown-menu > li.current_page_item > a.menu-link {
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* Make active tab sit “on top” visually */
#site-navigation ul.dropdown-menu > li.current-menu-item,
#site-navigation ul.dropdown-menu > li.current_page_item {
  position: relative;
  z-index: 2;
}

/* Keyboard focus for top-level tabs */
#site-navigation ul.dropdown-menu > li > a.menu-link:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* ==============================
   4) DROPDOWNS (sub-menus) — CHIP/STANDARD PANEL
   ============================== */

/* Dropdown panel */
#site-navigation-wrap .dropdown-menu ul.sub-menu,
#site-navigation-wrap .dropdown-menu ul.children {
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 0 10px;
  padding: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  min-width: 220px;
}

/* Ensure LI doesn't carry theme BG */
#site-navigation-wrap .dropdown-menu ul.sub-menu li,
#site-navigation-wrap .dropdown-menu ul.children li {
  background: transparent !important;
}

/* Dropdown links */
#site-navigation-wrap .dropdown-menu ul.sub-menu li a.menu-link,
#site-navigation-wrap .dropdown-menu ul.children li a.menu-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--tab-bg) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

/* Hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  #site-navigation-wrap .dropdown-menu ul.sub-menu li a.menu-link:hover,
  #site-navigation-wrap .dropdown-menu ul.children li a.menu-link:hover {
    background: var(--chip-bg) !important;
    border-color: var(--chip-border) !important;
    color: var(--tab-bg) !important;
    transform: translateY(-1px);
  }
}

/* Current item in dropdown */
#site-navigation-wrap
  .dropdown-menu
  ul.sub-menu
  li.current-menu-item
  > a.menu-link,
#site-navigation-wrap
  .dropdown-menu
  ul.sub-menu
  li.current_page_item
  > a.menu-link,
#site-navigation-wrap
  .dropdown-menu
  ul.children
  li.current-menu-item
  > a.menu-link,
#site-navigation-wrap
  .dropdown-menu
  ul.children
  li.current_page_item
  > a.menu-link {
  background: var(--chip-bg-active) !important;
  border-color: var(--chip-bg-active) !important;
  color: var(--chip-text-active) !important;
}

/* Focus in dropdown */
#site-navigation-wrap .dropdown-menu ul.sub-menu li a.menu-link:focus,
#site-navigation-wrap .dropdown-menu ul.children li a.menu-link:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* ==============================
   5) MOBILE HEADER FIX (OceanWP)
   ============================== */

@media (max-width: 959px) {
  #site-header-inner {
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  /* Hide desktop nav wrapper so it can't affect layout */
  #site-navigation-wrap {
    display: none !important;
  }

  #site-logo {
    min-width: 0;
    flex: 0 1 auto;
  }

  .oceanwp-mobile-menu-icon {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }

  #site-logo img.custom-logo {
    max-width: 210px;
    height: auto;
  }
}

/* ==============================
   6) MOBILE MENU (OceanWP SIDR)
   ============================== */

#sidr {
  background: var(--panel-bg) !important;
  color: var(--chip-text) !important;
}

/* Links */
#sidr a {
  color: var(--tab-bg) !important;
  font-weight: 800;
  text-decoration: none !important;
}
#sidr a:hover {
  color: var(--accent) !important;
}

/* Row spacing + divider */
#sidr ul li a {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--panel-border) !important;
}

/* Current */
#sidr .current-menu-item > a,
#sidr .current_page_item > a {
  background: var(--chip-bg-active) !important;
  color: var(--chip-text-active) !important;
  border-radius: 8px;
}

/* Focus */
#sidr a:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  border-radius: 6px;
}

/* Style Back to All Recipes Control */
/* Back to Recipes button */
.back-to-recipes {
  margin: 10px 0 16px;
}

.back-to-recipes__btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  text-decoration: none;
  font-weight: 700;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
}

.back-to-recipes__btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

/* Mobile Site Logo Control */
#site-logo {
  padding: 10px 0;
}

/* =====================================
   Mobile Logo — Full Width + Centered
   ===================================== */
@media (max-width: 768px) {
  /* Kill any floats */
  #site-logo {
    float: none !important;
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }

  #site-logo-inner {
    width: 100%;
  }

  #site-logo a.custom-logo-link {
    display: block;
    width: 100%;
  }

  #site-logo img.custom-logo {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* centers image */
  }
}

/* MADE by & Rated Filter Styling */
/* ==========================================
   WPUPG — Custom Field Checkbox Filters as Pills
   Includes: Rated Only + Made by Me + Made by Anyone
   Stable active styling + subtle hover
   ========================================== */

/* Hide "Made by Me" when logged out */
body:not(.logged-in) .wpupg-filter-checkboxes-mywprm_made_me {
  display: none;
}

/* Make checkbox term containers behave like chips */
#wpupg-grid-recipe-index-filters .wpupg-filter-checkboxes-term-container {
  display: inline-block;
  margin: 2px 2px; /* match isotope spacing */
}

/* Hide only custom-field checkbox inputs */
#wpupg-grid-recipe-index-filters
  input.wpupg-filter-checkboxes-term[class*="wpupg-filter-checkboxes-custom-field-"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Base pill styling */
#wpupg-grid-recipe-index-filters
  input.wpupg-filter-checkboxes-term[class*="wpupg-filter-checkboxes-custom-field-"]
  + label {
  background-color: var(--tab-bg);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  border: 0px solid transparent;
  display: inline-block;
  cursor: pointer;
  line-height: 1.2;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

/* ACTIVE — reliable (checked OR WPUPG active class) */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-checkboxes-term-container.wpupg-filter-checkboxes-term-active
  label,
#wpupg-grid-recipe-index-filters
  input.wpupg-filter-checkboxes-term[class*="wpupg-filter-checkboxes-custom-field-"]:checked
  + label {
  border-color: var(--tab-bg);
  background-color: var(--accent);
  color: #ffffff;
}

/* HOVER — subtle (border only), never changes background */
@media (hover: hover) and (pointer: fine) {
  #wpupg-grid-recipe-index-filters
    .wpupg-filter-checkboxes-term-container:not(
      .wpupg-filter-checkboxes-term-active
    )
    label:hover {
    border-color: var(--tab-bg);
  }
}

/* KEYBOARD FOCUS — subtle (border only) */
#wpupg-grid-recipe-index-filters
  .wpupg-filter-checkboxes-term-container:not(
    .wpupg-filter-checkboxes-term-active
  )
  input.wpupg-filter-checkboxes-term[class*="wpupg-filter-checkboxes-custom-field-"]:focus
  + label {
  border-color: var(--tab-bg);
  outline: none;
}

/* MyWPRM Made Nx Styling - Recipe Index */
/* --- MYWPRM “Made Nx” inline chip --- */
.wpupg-item .mywprm-made-inline {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin: 0 10px;
  padding: 1px 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  /*  color: rgba(0,0,0,.65); */
  /*  background: rgba(0,0,0,.03); */
  vertical-align: middle;
  white-space: nowrap;
}

.wpupg-item .mywprm-made-inline .mywprm-made-n {
  font-weight: 800;
  /*color: rgba(0,0,0,.75);*/
  margin-left: 2px;
}

.wpupg-item .mywprm-made-inline .mywprm-made-x {
  opacity: 0.8;
}
.wpupg-item .wprm-recipe-rating {
  vertical-align: middle;
}

/* =====================================================
   MyWPRM inline "Made Nx" pill — zero vs non-zero
   Default = subtle (0)
   Non-zero = highlighted
   ===================================================== */

.mywprm-made-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;

  /* ZERO (default) */
  background: var(--header-bg);
  border: 1px solid var(--togglebar-border);
  color: rgba(0, 0, 0, 0.35);
}

/* Number emphasis */
.mywprm-made-inline .mywprm-made-n {
  font-weight: 900;
  color: rgba(0, 0, 0, 0.65);
}

/* NON-ZERO */
.mywprm-made-inline.is-nonzero {
  background: var(--alt-accent);
  border: 1px solid var(--alt-accent);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 300;
}

.mywprm-made-inline.is-nonzero .mywprm-made-n {
  color: rgba(255, 255, 255, 0.95);
}
/* stronger look */
/* --- MYWPRM “Made Nx” orange badge --- */
/*.wpupg-item .mywprm-made-inline{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  background: #CC3C08;
  vertical-align: middle;
  white-space: nowrap;
}

.wpupg-item .mywprm-made-inline .mywprm-made-n{
  font-weight: 900;
}
*/

/* =========================================================
   WPUPG: normalize bottom row controls across sites (desktop)
   Made by Any + Rated + Search + Clear should sit on one row
   ========================================================= */
@media (min-width: 681px) {
  #wpupg-grid-recipe-index-filter-made-by-any-container,
  #wpupg-grid-recipe-index-filter-rated-container,
  #wpupg-grid-recipe-index-filter-11-container,
  #wpupg-grid-recipe-index-filter-12-container {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
  }

  /* Keep the search box from forcing its own line */
  #wpupg-grid-recipe-index-filter-11-container
    .wpupg-filter-text-input-container {
    width: 200px !important;
    margin: 0 !important;
  }
}

/* MyWPRM Made Nx Styling - Individual Recipe */
/* =====================================================
   MyWPRM Times Made — clean 2-row pill (final, unified)
   Row 1: [-]  I Made & Recommend!  [+]
   Row 2: Total Made: Mx        You: Nx   (or login note)
   + continuous divider
   + add "x" after both counts
   ==================================================== */

/* ---- Reduce width of orange WPRM buttons above ---- */
.wprm-container-float-right .wprm-recipe-link-wide-button {
  width: auto !important;
  max-width: 220px !important; /* tweak 200–260 */
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.wprm-recipe-link.wprm-recipe-link-wide-button {
  margin: 0 !important;
}

/* Keep the float-right stack centered */
.wprm-container-float-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ---- The pill wrapper (NOT same width as orange buttons) ---- */
.mywprm-times-made {
  width: auto !important;
  min-width: 260px !important; /* prevents ultra-narrow pill */
  max-width: 320px !important;
  display: inline-grid !important;
  box-sizing: border-box !important;
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06) !important;
  grid-template-columns: 30px 1fr 30px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
}

/* Flatten .controls so we can grid the children,
   while letting .you OR .login-note sit in row 2 */
.mywprm-times-made .mywprm-times-made-controls {
  display: contents !important;
}

/* ---- Row 1 ---- */
.mywprm-times-made .mywprm-times-made-dec {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}
.mywprm-times-made .mywprm-times-made-label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  text-align: center !important;

  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  color: rgba(0, 0, 0, 0.82) !important;
}
.mywprm-times-made .mywprm-times-made-inc {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

/* +/- buttons (keeps your “logged-in” look) */
.mywprm-times-made .mywprm-times-made-inc,
.mywprm-times-made .mywprm-times-made-dec {
  width: 26px !important;
  height: 26px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;

  background: linear-gradient(
    var(--tab-bg, #499f9e),
    color-mix(in srgb, var(--togglepill-border, #499f9e8c) 90%, black)
  ) !important;

  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 20px !important;
  font-weight: 900 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06) !important;
}
.mywprm-times-made .mywprm-times-made-inc:disabled,
.mywprm-times-made .mywprm-times-made-dec:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ---- Row 2 continuous divider ---- */
.mywprm-times-made::after {
  content: "" !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: start !important;
  height: 1px !important;
  background: rgba(0, 0, 0, 0.1) !important;
  margin-top: -2px !important; /* tweak -4..0 */
}

/* Row 2: Total left */
.mywprm-times-made .mywprm-times-made-count {
  grid-column: 1 / 3 !important;
  grid-row: 2 !important;
  justify-self: start !important;

  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;

  margin: 0 !important;
  padding-top: 10px !important; /* space below divider */
  border-top: 0 !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Label text */
.mywprm-times-made .mywprm-times-made-count::before {
  content: "Total Made:" !important;
  font-weight: 900 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  margin-right: 2px !important;
}

/* Total number + x */
.mywprm-times-made .mywprm-times-made-number {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: rgba(0, 0, 0, 0.82) !important;
}
.mywprm-times-made .mywprm-times-made-number::after {
  content: "x" !important;
  margin-left: 2px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

/* If you ever output a literal x span, hide it to prevent xx */
.mywprm-times-made .mywprm-times-made-x {
  display: none !important;
}

/* Row 2: You right (logged-in only) */
.mywprm-times-made .mywprm-times-made-you {
  grid-column: 3 !important;
  grid-row: 2 !important;
  justify-self: end !important;

  margin: 0 !important;
  padding-top: 10px !important;
  border-top: 0 !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  white-space: nowrap !important;
}
.mywprm-times-made .mywprm-times-made-user-number {
  font-weight: 900 !important;
  color: rgba(0, 0, 0, 0.82) !important;
}
/* Add x after YOU count *only if your HTML does NOT already include a literal 'x'* */
.mywprm-times-made[data-logged-in="1"] .mywprm-times-made-user-number::after {
  content: "x" !important;
  margin-left: 2px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Logged-out login note (fix the broken wrapping) */
.mywprm-times-made .mywprm-times-made-login-note {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;

  margin: 0 !important;
  padding-top: 10px !important;
  border-top: 0 !important;

  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  color: rgba(0, 0, 0, 0.6) !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* If theme has break-all globally, stomp it inside the pill */
.mywprm-times-made,
.mywprm-times-made * {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* =====================================================
   Logged-out collision fix:
   keep Total on row 2, move login note to row 3
   ===================================================== */

.mywprm-times-made[data-logged-in="0"] {
  grid-template-rows: auto auto auto !important; /* add a 3rd row */
}

/* Total stays row 2 */
.mywprm-times-made[data-logged-in="0"] .mywprm-times-made-count {
  grid-row: 2 !important;
}

/* Login note becomes its own row below Total */
.mywprm-times-made[data-logged-in="0"] .mywprm-times-made-login-note {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;

  margin: 0 !important;
  padding-top: 8px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: center !important;

  /* prevent ugly breaking */
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Small screens */
@media (max-width: 480px) {
  .mywprm-times-made {
    max-width: 290px !important;
  }
  .mywprm-times-made .mywprm-times-made-label {
    white-space: normal !important;
  }
}

/* Hide ONLY the "No ratings yet" line (count=0). Keep details when count>0 */
.wprm-recipe-rating[data-count="0"] .wprm-recipe-rating-details {
  display: none !important;
}

/* ----------------------------
   Empty state (no ratings yet)
   ---------------------------- */
.wprm-recipe-rating[data-count="0"] .wprm-rating-star svg path {
  stroke: var(--wprm-rating-empty) !important;
  fill: none !important;
}

/* ----------------------------
   Hover/select preview (1–N)
   WPRM toggles these classes
   ---------------------------- */
.wprm-recipe-rating.wprm-user-rating-allowed
  .wprm-rating-star-selecting-filled
  svg
  path {
  stroke: var(--wprm-rating-accent) !important;
  fill: var(--wprm-rating-accent) !important;
}

.wprm-recipe-rating.wprm-user-rating-allowed
  .wprm-rating-star-selecting-empty
  svg
  path {
  stroke: var(--wprm-rating-empty) !important;
  fill: none !important;
}

/* ----------------------------
   Existing ratings (already voted / average shown)
   If WPRM uses full/empty classes, enforce them too
   ---------------------------- */
.wprm-recipe-rating .wprm-rating-star-full svg path {
  stroke: var(--wprm-rating-accent) !important;
  fill: var(--wprm-rating-accent) !important;
}
.wprm-recipe-rating .wprm-rating-star-empty svg path {
  fill: none !important; /* keep outlined unless WPRM marks it full */
}

/* Make it feel clickable */
.wprm-recipe-rating.wprm-user-rating-allowed .wprm-rating-star {
  cursor: pointer;
}

/* Our Recipes Header Styling */
/* Recipe index header row */
.wp-block-group.is-layout-flex {
  width: 100%;
  justify-content: space-between; /* left + right separation */
  align-items: baseline; /* keeps text aligned nicely */
}

/* remove default margins that fight alignment */
.wp-block-group.is-layout-flex h1,
.wp-block-group.is-layout-flex p {
  margin: 0;
}

/* Mobile Menu Styling */
/* =========================================
   OCEANWP MOBILE MENU ICON: top-right, bigger, no text
   ========================================= */

/* Hide the "Menu" + "Close" text */
.oceanwp-mobile-menu-icon .oceanwp-text,
.oceanwp-mobile-menu-icon .oceanwp-close-text {
  display: none !important;
}

/* Make the hamburger icon bigger */
.oceanwp-mobile-menu-icon a.mobile-menu i.fa-bars {
  font-size: 32px !important; /* adjust 28–40 */
  line-height: 1 !important;
}

/* Increase the tap target */
.oceanwp-mobile-menu-icon a.mobile-menu {
  padding: 12px 14px !important;
}

/* Put the whole control in the top-right of the header */
#site-header {
  position: relative; /* creates positioning context */
}

#site-header .oceanwp-mobile-menu-icon.mobile-right {
  position: absolute !important;
  top: 10px !important; /* adjust */
  right: 8px !important; /* adjust */
  z-index: 9999 !important;
  float: none !important;
}

/* Optional: keep the search icon aligned with it */
#site-header .oceanwp-mobile-menu-icon .search-icon-dropdown i {
  font-size: 26px !important;
}

/* Photo Card - Show Title on Hover */
/* ======================================
   GALLERY CARD LAYOUT
====================================== */
/* Fix hidden wrapper that is rendering each tile as a 2-col grid + huge padding */
.wp-block-post-template.is-layout-grid
  > li.wp-block-post
  > .wp-block-group.is-layout-grid {
  display: block !important; /* kills the inner two-column behavior */
  padding: 0 !important; /* kills the 30px padding shrinking image */
}

/* Remove excessive Gutenberg card padding */
.wp-block-post-template
  > .wp-block-post
  > .wp-block-group.wp-block-group-is-layout-grid {
  padding: 0 !important;
}

/* Cleaner spacing between cards */
.wp-block-post-template.is-layout-grid {
  gap: 18px;
}

/* Card container */
.photo-card {
  position: relative;
  overflow: hidden;
}

/* Ensure image fills the card */
.photo-card .wp-block-post-featured-image,
.photo-card .wp-block-post-featured-image a,
.photo-card .wp-block-post-featured-image img {
  display: block;
  width: 100%;
}

/* Optional: consistent crop (comment out if you want natural ratios) */
.photo-card .wp-block-post-featured-image img {
  aspect-ratio: 4 / 3; /* change to 1 / 1 for square */
  object-fit: cover;
}

/* ======================================
   TITLE HOVER OVERLAY
====================================== */

.photo-card .wp-block-post-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  margin: 0;
  padding: 10px 12px;

  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));

  font-size: 13px;
  line-height: 1.2;

  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;

  pointer-events: none; /* ensures image remains clickable */
}

/* Show title on hover */
.photo-card:hover .wp-block-post-title {
  opacity: 1;
  transform: translateY(0);
}

/* Site Top Bar */
/* =========================================================
   TOP BAR (Orange)
   - True vertical centering
   - Full-width content with side padding
   - Tagline LEFT
   - Greeting/Menu RIGHT
   - Fix logged-out order swap
   ========================================================= */

/* Set bar height + remove padding interference */
#top-bar {
  height: 26px; /* adjust as needed */
  padding: 0 !important;
}

.hfgf-topbar-left {
  letter-spacing: 0.15em !important;
  font-weight: 500 !important;
  line-height: 1em !important;
}

/* Remove container width constraint */
#top-bar-wrap #top-bar.container {
  max-width: none !important;
  width: 100% !important;
}

/* Center vertically + apply side padding */
#top-bar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px; /* side spacing */
}

/* Make content a flex row we can control */
#top-bar-content {
  display: flex;
  align-items: center;
  width: 100%;
  float: none; /* override OceanWP float */
}

/* Force correct visual order when logged out */
#topbar-template {
  order: 1; /* tagline block first */
  flex: 1 1 auto; /* takes remaining space */
  min-width: 0;
}

#top-bar-nav {
  order: 2; /* menu second */
  margin-left: auto; /* push to far right */
  float: none;
}

/* Keep menu inline + right-aligned */
#top-bar-nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 14px;
}

/* Template layout */
.hfgf-topbar-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
  font-size: 1.2rem;
}

/* Prevent greeting wrapping */
.hfgf-topbar-right {
  white-space: nowrap;
}

/* ---------------- Mobile ---------------- */

@media (max-width: 959px) {
  #top-bar {
    height: auto; /* allow expansion */
  }

  #top-bar-inner {
    padding: 0 6px;
  }

  #top-bar-content {
    flex-direction: column;
  }

  .hfgf-topbar-wrap {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }

  #top-bar-nav ul {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hfgf-topbar-left,
  .hfgf-topbar-right {
    padding: 4px;
    white-space: normal;
  }
}

/* button styling */
/* Link colors */
.um a.um-link,
.um .um-tip:hover,
.um .um-field-radio.active:not(.um-field-radio-state-disabled) i,
.um .um-field-checkbox.active:not(.um-field-radio-state-disabled) i,
.um .um-member-name a:hover,
.um .um-member-more a:hover,
.um .um-member-less a:hover,
.um .um-members-pagi a:hover,
.um .um-cover-add:hover,
.um .um-profile-subnav a.active,
.um .um-item-meta a,
.um-account-name a:hover,
.um-account-nav a.current,
.um-account-side li a.current span.um-account-icon,
.um-account-side li a.current:hover span.um-account-icon,
.um-dropdown li a:hover,
i.um-active-color,
span.um-active-color {
  color: var(--accent) !important;
}

.um a.um-link:hover,
.um a.um-link-hvr:hover {
  color: #499f9e !important;
}

/* Button colors */
.um .um-field-group-head,
.picker__box,
.picker__nav--prev:hover,
.picker__nav--next:hover,
.um .um-members-pagi span.current,
.um .um-members-pagi span.current:hover,
.um .um-profile-nav-item.active a,
.um .um-profile-nav-item.active a:hover,
.upload,
.um-modal-header,
.um-modal-btn,
.um-modal-btn.disabled,
.um-modal-btn.disabled:hover,
div.uimob800 .um-account-side li a.current,
div.uimob800 .um-account-side li a.current:hover,
.um .um-button,
.um a.um-button,
.um a.um-button.um-disabled:hover,
.um a.um-button.um-disabled:focus,
.um a.um-button.um-disabled:active,
.um input[type="submit"].um-button,
.um input[type="submit"].um-button:focus,
.um input[type="submit"]:disabled:hover {
  background: var(--accent) !important;
}

.um .um-field-group-head:hover,
.picker__footer,
.picker__header,
.picker__day--infocus:hover,
.picker__day--outfocus:hover,
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted,
.picker__list-item:hover,
.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted,
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected,
.um .um-button:hover,
.um a.um-button:hover,
.um input[type="submit"].um-button:hover {
  background: #499f9e !important;
}

/* Button alt colors */
.um .um-button.um-alt,
.um input[type="submit"].um-button.um-alt {
  background: #eeeeee !important;
}

.um .um-button.um-alt:hover,
.um input[type="submit"].um-button.um-alt:hover {
  background: #e5e5e5 !important;
}

/* Modify Archive Template */
.elementor-posts--thumbnail-top .elementor-post__thumbnail__link {
  margin-bottom: 0px !important;
}

/* UM Fields Display */
.um-field-registration_date,
.um-field-last_login {
  display: block !important;
}

/* Registration Form Styling */
.custom-message-wrapper {
  border: 2px solid #0073aa; /* Border around the message block */
  padding: 15px; /* Padding inside the wrapper */
  background-color: #f9f9f9; /* Optional: Background color */
  margin-bottom: 20px; /* Space below the message block */
  text-align: center; /* Center the text horizontally */
  display: flex; /* Flexbox for vertical alignment */
  flex-direction: column; /* Align elements vertically */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Align content horizontally */
}

.custom-message-notice {
  font-size: 1.5em;
  font-weight: bold;
  color: #d9534f; /* Optional: Make the notice stand out */
  margin-bottom: 0px;
}

.custom-message {
  margin-top: 10px; /* Add space between paragraphs */
  color: #333;
}
div.um-row._um_row_1,
div.um-row._um_row_2 {
  margin: 0px !important;
}

/* Wrap the parent container of the password and confirm password fields */
.um-field-password,
.um-field-password_confirm {
  display: flex; /* Use flexbox to control the layout */
  flex-direction: column; /* Ensure the label stays above the input */
  width: 48%; /* Set width to align side by side */
  vertical-align: top; /* Align both fields at the top */
}

/* Add space between the two field blocks */
.um-field-password_confirm {
  margin-left: 4%; /* Add space between the two fields */
}

/* Ensure the parent container holding both fields aligns them properly */
.um-field-password,
.um-field-password_confirm {
  display: inline-flex;
  flex-grow: 1;
  justify-content: space-between;
}

#um_field_2603_confirm_user_password {
  margin-left: 25px;
}

/* Ensure labels stay above the input fields */
.um-field-password .um-field-label,
.um-field-password_confirm .um-field-label {
  display: block; /* Keep the label as a block-level element */
  margin-bottom: 5px; /* Add space between the label and input */
}

/* Optional: Add some space at the bottom of each input field if necessary */
.um-field-password .um-field-area,
.um-field-password_confirm .um-field-area {
  margin-bottom: 10px;
}

/* Add to Faves popup width */
.wprm-add-to-collection-tooltip-container {
  width: 150px;
}

/* Recipe Sidebar Styling */
/* Style for Sidebar Headers */
#sidebar-random-image h3,
#sidebar-random-story h3 {
  background-color: #a78a76; /* Custom color */
  color: white;
  font-size: 12px; /* Font size for headers */
  margin-bottom: 10px; /* Spacing between header and content */
  text-align: center; /* Center align headers */
  padding: 5px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* Styling for Story and Image Containers */
#sidebar-random-image img,
#sidebar-random-story img {
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
  max-width: 100%;
  height: auto;
}

/* Style for Story Titles */
#sidebar-random-story h4 {
  color: #21599b; /* Custom color for story titles */
  font-size: 16px; /* Adjust font size */
  margin: 10px 0px 2px 0px; /* Spacing above story titles */
}

#sidebar-random-story p {
  line-height: 1.1em;
  margin-bottom: 5px;
}

#sidebar-random-story a {
  float: right;
}

#main #content-wrap {
  padding-top: 20px;
  padding-bottom: 50px;
}

/* Suggestions Table Styling */
/* Style the table headers */
th.suggestions-header {
  background-color: #f4f4f4;
  font-weight: bold;
}

/* Add a Recipe Custom Styling */
/* Target all h2 tags within the form with class 'wprm-recipe-submission' */
form.wprm-recipe-submission h2 {
  margin-bottom: 0px; /* Example: Add spacing below */
  margin-top: 16px;
}

/* Default (unchecked) state */
input[type="checkbox"][id^="recipe_custom_taxonomy_id_course"] + label {
  background-color: #f0f0f0; /* Light gray */
  border: 1px dashed #ccc; /* Dashed border */
  padding: 5px;
  display: inline-block;
  cursor: pointer;
}

/* Checked (selected) state */
input[type="checkbox"][id^="recipe_custom_taxonomy_id_course"]:checked + label {
  background-color: #a78a76; /* Sandrift */
  border: 1px solid #4caf50; /* Solid border */
  color: white; /* Optional: Change text color */
}
/* Default (unchecked) state */
input[type="radio"][id^="recipe_custom_taxonomy_id_cuisine"] + label {
  background-color: #f0f0f0; /* Light gray */
  border: 1px dashed #ccc; /* Dashed border */
  padding: 5px;
  display: inline-block;
  cursor: pointer;
}

/* Checked (selected) state */
input[type="radio"][id^="recipe_custom_taxonomy_id_cuisine"]:checked + label {
  background-color: #a78a76; /* Sandrift */
  border: 1px solid #4caf50; /* Solid border */
  color: white; /* Optional: Change text color */
}

.wprmprs-form-help {
  font-size: 0.8em;
  line-height: 1.2em;
}

.wprmprs-layout-block-input.wprmprs-layout-block-recipe_name > label {
  margin-top: 0px;
}

div.wprmprs-layout-block-submit {
  margin-top: 10px;
  text-align: right;
}

/* Sidebar Styling */
#right-sidebar-inner .wp-block-heading {
  font-size: 1.5em !important;
  margin: 10px 0px 5px !important;
}

/* recipe-index filter styling */
.wpupg-grid-filters.wpupg-grid-filters-display-inline {
  border: solid;
  border-width: 2px;
  padding-bottom: 5px;
  margin: 10px 0px 10px 0px;
  border-color: var(--accent-softer);
}

.wpupg-filter-label {
  text-transform: uppercase;
  color: var(--accent-soft);
}
/*
#wpupg-grid-recipe-index-filter-4-label {
    font-size: 12px;
    color: var(--accent-soft);
/*    font-weight: 700; */
/*    text-transform: uppercase;
}
*/
#wpupg-grid-recipe-index-filter-7-label {
  font-size: 12px;
  color: #b2b2b2;
  /*    font-weight: 700; */
  text-transform: uppercase;
}

/* =========================================================
   TOP BAR
   ========================================================= */

#top-bar-wrap {
  background: var(--brand-orange-topbar);
  color: #3b2415;
  font-size: 13px;
  line-height: 1.4;
}

#top-bar {
  min-height: 32px;
}

#top-bar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

#topbar-template {
  width: 100%;
}

.hfgf-topbar-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 32px;
}

.hfgf-topbar-left {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hfgf-topbar-right {
  font-weight: 600;
  white-space: nowrap;
}

.hfgf-topbar-right a {
  color: #3b2415;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hfgf-topbar-right a:hover {
  color: #000;
}

/* =========================================================
   FOOTER
   ========================================================= */

#footer {
  background: var(--accent);
}

#footer-widgets {
  display: none;
}

#footer-bottom {
  background: var(--accent) !important;
  color: #fff;
  padding: 18px 0;
}

#footer-bottom-inner {
  text-align: center;
}

#copyright {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#copyright a {
  color: #fff;
}

#copyright a:hover {
  text-decoration: underline;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .hfgf-topbar-wrap {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    text-align: center;
  }

  .hfgf-topbar-right {
    white-space: normal;
  }

  #top-bar-inner {
    padding: 0 12px;
  }

  #footer-bottom {
    padding: 16px 12px;
  }
}

/* =========================================================
   FINAL TOPBAR OVERRIDES
   ========================================================= */

#top-bar-nav {
  display: none !important;
}

#top-bar-wrap {
  background: #f7903a;
}

#top-bar {
  height: auto !important;
  min-height: 28px;
  padding: 0 !important;
}

#top-bar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px !important;
}

#top-bar-content {
  width: 100%;
  float: none !important;
}

#topbar-template {
  width: 100%;
}

.hfgf-topbar-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 28px;
}

.hfgf-topbar-left {
  color: #3b2415;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.hfgf-topbar-right {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.hfgf-topbar-right a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hfgf-topbar-right a:hover {
  color: #3b2415;
}

@media (max-width: 768px) {
  .hfgf-topbar-wrap {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    text-align: center;
  }

  .hfgf-topbar-left,
  .hfgf-topbar-right {
    white-space: normal;
  }
}

#mega-menu-wrap-main_menu #mega-menu-main_menu .search-toggle-li {
  display: none;
}

/* More specific CSS to target the Author Box image */
body .elementor-widget-container .elementor-author-box__avatar img {
  width: 50px; /* Change the width to your desired size */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure the image doesn't overflow */
}

body .elementor-widget-container .elementor-author-box__name {
  font-size: 1em;
  font-weight: 300;
}