/*
Theme Name: Sauces & Dips Flavor Library
Theme URI: https://saucesanddips.com/
Author: Sixto Carreon
Author URI: https://sixtocarreon.com/
Description: A warm, photography-led editorial WordPress theme using the official Sauces & Dips Brand Studio palette, designed for daily recipe publishing and the Sauces & Dips Core plugin.
Version: 2.2.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: sauces-dips-flavor-library
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: food-and-drink, blog, custom-logo, custom-menu, featured-images, translation-ready
*/

:root {
  --sdf-tomato: #B9442F;
  --sdf-chili: #C85D2E;
  --sdf-mustard: #D8A83E;
  --sdf-olive: #5B6F3B;
  --sdf-herb: #315F4C;
  --sdf-balsamic: #3B241B;
  --sdf-parchment: #FBF6ED;
  --sdf-cream-base: #FFF1D9;
  --sdf-primary: var(--sdf-tomato);
  --sdf-primary-dark: var(--sdf-balsamic);
  --sdf-secondary: var(--sdf-chili);
  --sdf-ink: var(--sdf-balsamic);
  --sdf-muted: rgba(59, 36, 27, .72);
  --sdf-faint: rgba(59, 36, 27, .54);
  --sdf-paper: var(--sdf-parchment);
  --sdf-surface: #FFFDF8;
  --sdf-border: rgba(59, 36, 27, .18);
  --sdf-focus: var(--sdf-tomato);
  --sdf-content: 820px;
  --sdf-wide: 1220px;
  --sdf-font-sans: Arial, Helvetica, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sdf-font-display: Didot, "Bodoni 72", "Bodoni MT", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sdf-paper);
  color: var(--sdf-ink);
  font-family: var(--sdf-font-sans);
  font-size: 17px;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--sdf-ink); text-underline-offset: .2em; }
a:hover, a:focus { color: var(--sdf-primary); text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button, input[type="submit"], .sdf-button, .wp-block-button__link {
  min-height: 44px;
  border: 1px solid var(--sdf-primary);
  border-radius: 0;
  background: var(--sdf-primary);
  color: #fff;
  padding: .7rem 1rem;
  font-weight: 700;
  cursor: pointer;
}
button:hover, input[type="submit"]:hover, .sdf-button:hover, .wp-block-button__link:hover {
  background: var(--sdf-primary-dark);
  border-color: var(--sdf-primary-dark);
  color: #fff;
}
input[type="text"], input[type="search"], input[type="email"], input[type="url"], textarea, select {
  width: 100%;
  border: 1px solid var(--sdf-border);
  border-radius: 0;
  background: var(--sdf-paper);
  color: var(--sdf-ink);
  padding: .78rem .85rem;
}
:focus-visible { outline: 2px solid var(--sdf-focus); outline-offset: 4px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important; top: 10px; left: 10px; z-index: 999999;
  width: auto; height: auto; clip: auto; margin: 0; padding: .8rem 1rem;
  background: var(--sdf-primary-dark); color: #fff;
}

.sdf-container { width: min(calc(100% - 40px), var(--sdf-wide)); margin-inline: auto; }
.sdf-narrow { width: min(calc(100% - 40px), var(--sdf-content)); margin-inline: auto; }
.site-main { min-height: 60vh; }

.sdf-announcement {
  border-bottom: 1px solid var(--sdf-border);
  background: var(--sdf-paper);
  color: var(--sdf-ink);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sdf-announcement a { display: block; padding: .55rem 1rem; text-align: center; text-decoration: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--sdf-parchment) 94%, transparent);
  border-bottom: 1px solid var(--sdf-border);
  backdrop-filter: blur(14px);
}
.admin-bar .site-header { top: 32px; }
.sdf-header-inner {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.site-branding { display: flex; align-items: center; gap: .8rem; min-width: 210px; }
.custom-logo { max-height: 46px; width: auto; }
.site-title {
  margin: 0;
  font-family: var(--sdf-font-display);
  font-size: 1.48rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
}
.site-title a { text-decoration: none; }
.site-description { margin: .28rem 0 0; color: var(--sdf-muted); font-size: .7rem; line-height: 1.2; }
.main-navigation ul { display: flex; align-items: center; gap: 1.15rem; list-style: none; margin: 0; padding: 0; }
.main-navigation a {
  display: block;
  color: var(--sdf-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}
.main-navigation a:hover, .main-navigation .current-menu-item > a { color: var(--sdf-primary); text-decoration: underline; }
.sdf-menu-toggle { display: none; background: transparent; color: var(--sdf-ink); }

.sdf-hero { border-bottom: 1px solid var(--sdf-border); }
.sdf-hero--editorial { padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(2.65rem, 5vw, 4.25rem); }
.sdf-hero--editorial h1 {
  max-width: 820px;
  margin: 0;
  font-family: var(--sdf-font-sans);
  font-size: clamp(2.25rem, 4.8vw, 4.35rem);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .98;
}
.sdf-hero-copy {
  max-width: 880px;
  margin: clamp(1.25rem, 2.2vw, 1.8rem) 0 0;
  color: var(--sdf-muted);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.58;
}
.sdf-hero-link { margin: clamp(1.15rem, 2vw, 1.65rem) 0 0; }
.sdf-hero-link a, .sdf-text-link {
  color: var(--sdf-ink);
  font-size: clamp(.96rem, 1.2vw, 1.08rem);
  font-weight: 750;
  text-decoration: none;
}
.sdf-hero-link a:hover, .sdf-text-link:hover { text-decoration: underline; }

.sdf-section { padding: clamp(3.8rem, 8vw, 7rem) 0; border-bottom: 1px solid var(--sdf-border); }
.sdf-section--cream { background: var(--sdf-surface); }
.sdf-section--types { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.sdf-eyebrow {
  margin: 0 0 1.3rem;
  color: var(--sdf-muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sdf-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sdf-section-heading h2, .sdf-page-hero h1, .entry-title {
  margin: 0;
  font-family: var(--sdf-font-display);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .98;
}
.sdf-section-heading h2 { font-size: clamp(2.8rem, 6vw, 5.2rem); }

.sdf-category-grid { border-top: 1px solid var(--sdf-border); }
.sdf-category-card {
  display: grid;
  grid-template-columns: minmax(160px, .75fr) minmax(220px, 1.7fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 84px;
  border-bottom: 1px solid var(--sdf-border);
  color: var(--sdf-ink);
  text-decoration: none;
}
.sdf-category-card span {
  font-family: var(--sdf-font-display);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
}
.sdf-category-card small { color: var(--sdf-muted); font-size: .94rem; }
.sdf-category-card b { font-size: 1.4rem; }
.sdf-category-card:hover span { font-style: italic; }

.sdf-recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 3.5vw, 3rem) clamp(1.1rem, 2.4vw, 2rem); }
.sdf-card { min-width: 0; }
.sdf-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sdf-surface); }
.sdf-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.sdf-card:hover .sdf-card-media img { transform: scale(1.025); filter: contrast(1.03); }
.sdf-card-placeholder {
  display: flex; align-items: center; justify-content: center; height: 100%;
  border: 1px solid var(--sdf-border); color: var(--sdf-muted);
  font-family: var(--sdf-font-display); font-size: 1.5rem; font-style: italic;
}
.sdf-card-content { padding-top: 1rem; }
.sdf-badge {
  display: inline-block;
  color: var(--sdf-muted);
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}
.sdf-card h2 { margin: .55rem 0 .55rem; font-family: var(--sdf-font-display); font-size: clamp(1.55rem, 2.6vw, 2.15rem); line-height: 1.03; letter-spacing: -.03em; }
.sdf-card h2 a { text-decoration: none; }
.sdf-card h2 a:hover { text-decoration: underline; }
.sdf-card-excerpt { margin: 0; color: var(--sdf-muted); font-size: .94rem; line-height: 1.55; }
.sdf-card-meta { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: .9rem; color: var(--sdf-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }

.sdf-statement .sdf-container { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.sdf-statement p { max-width: 860px; margin: 0; font-family: var(--sdf-font-display); font-size: clamp(2.5rem, 6vw, 5.5rem); font-style: italic; letter-spacing: -.05em; line-height: .95; }

.sdf-page-hero, .entry-header { width: min(calc(100% - 40px), var(--sdf-wide)); margin-inline: auto; padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.3rem, 5vw, 4rem); }
.sdf-page-hero h1, .entry-title { max-width: 1020px; font-size: clamp(3.3rem, 8vw, 7rem); }
.sdf-page-description { max-width: 780px; color: var(--sdf-muted); font-size: 1.16rem; }
.entry-meta { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin-top: 1.3rem; color: var(--sdf-muted); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.sdf-featured-image { width: min(calc(100% - 40px), var(--sdf-wide)); margin: 0 auto clamp(2.5rem, 6vw, 5rem); }
.sdf-featured-image img { width: 100%; max-height: 760px; object-fit: cover; }
.entry-content { width: min(calc(100% - 40px), var(--sdf-content)); margin: 0 auto; padding-bottom: clamp(4rem, 8vw, 7rem); }
.entry-content > * { max-width: 100%; }
.entry-content p, .entry-content li { color: color-mix(in srgb, var(--sdf-ink) 78%, transparent); }
.entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--sdf-font-display); letter-spacing: -.025em; line-height: 1.05; }
.entry-content h2 { margin-top: 2.3em; font-size: clamp(2rem, 4vw, 3.2rem); }
.entry-content h3 { margin-top: 1.8em; font-size: 1.65rem; }
.entry-content blockquote { margin: 2rem 0; padding-left: 1.3rem; border-left: 2px solid var(--sdf-ink); color: var(--sdf-muted); }
.entry-content figure { margin: 2.2rem 0; }
.entry-content hr { border: 0; border-top: 1px solid var(--sdf-border); margin: 3rem 0; }
.page-links { margin: 2rem 0; }

.sdf-content-area { width: min(calc(100% - 40px), var(--sdf-wide)); margin: 0 auto; padding-bottom: 6rem; }
.sdf-empty { border: 1px solid var(--sdf-border); padding: 2rem; color: var(--sdf-muted); }
.sdf-search-form { display: grid; grid-template-columns: 1fr auto; gap: .6rem; max-width: 700px; }
.sdf-related { padding: 5rem 0; border-top: 1px solid var(--sdf-border); }

.site-footer { padding: clamp(3rem, 7vw, 6rem) 0 1.5rem; background: var(--sdf-paper); }
.sdf-footer-grid { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(2, minmax(140px, 1fr)); gap: 3rem; }
.sdf-footer-grid--legal { grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(130px, 1fr)); }
.sdf-footer-brand p { max-width: 460px; margin-top: 0; color: var(--sdf-muted); }
.sdf-footer-heading { margin: 0 0 1rem; color: var(--sdf-muted); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.sdf-footer-list { list-style: none; margin: 0; padding: 0; }
.sdf-footer-list li + li { margin-top: .6rem; }
.sdf-footer-list a { text-decoration: none; }
.sdf-footer-list a:hover { text-decoration: underline; }
.sdf-social-list a { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.sdf-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--sdf-border); color: var(--sdf-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }


.sdf-hero-link a,
.sdf-text-link { color: var(--sdf-primary); }
.sdf-hero-link a:hover,
.sdf-text-link:hover { color: var(--sdf-primary-dark); }
.sdf-eyebrow { color: var(--sdf-herb); }
.sdf-category-card:hover { background: var(--sdf-cream-base); color: var(--sdf-primary-dark); }
.sdf-category-card[href*="/sauces/"] span { color: var(--sdf-tomato); }
.sdf-category-card[href*="/dips/"] span { color: var(--sdf-chili); }
.sdf-category-card[href*="/dressings/"] span { color: var(--sdf-herb); }
.sdf-category-card[href*="/glazes/"] span { color: var(--sdf-mustard); }
.sdf-category-card[href*="/condiments/"] span { color: var(--sdf-olive); }
.sdf-category-card[href*="/marinades/"] span { color: var(--sdf-primary-dark); }
.sdf-badge--sauces { color: var(--sdf-tomato); }
.sdf-badge--dips { color: var(--sdf-chili); }
.sdf-badge--dressings { color: var(--sdf-herb); }
.sdf-badge--glazes { color: var(--sdf-mustard); }
.sdf-badge--condiments { color: var(--sdf-olive); }
.sdf-badge--marinades { color: var(--sdf-primary-dark); }
.site-footer { border-top: 4px solid var(--sdf-primary); }
.sdf-social-list a { color: var(--sdf-primary-dark); font-weight: 700; }
.sdf-social-list a:hover { color: var(--sdf-primary); }

@media (max-width: 980px) {
  .sdf-menu-toggle { display: inline-flex; }
  .main-navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--sdf-paper); border-bottom: 1px solid var(--sdf-border); padding: 1.2rem 20px; }
  .main-navigation.is-open { display: block; }
  .main-navigation ul { align-items: stretch; flex-direction: column; gap: 0; }
  .main-navigation a { padding: .7rem 0; border-bottom: 1px solid var(--sdf-border); }
  .sdf-recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdf-footer-grid, .sdf-footer-grid--legal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .sdf-container, .sdf-narrow, .sdf-page-hero, .entry-header, .sdf-featured-image, .entry-content, .sdf-content-area { width: min(calc(100% - 28px), var(--sdf-wide)); }
  .sdf-header-inner { min-height: 64px; }
  .site-description { display: none; }
  .site-title { font-size: 1.25rem; }
  .sdf-hero--editorial { padding: 2.25rem 0 2.8rem; }
  .sdf-hero--editorial h1 { font-size: clamp(2rem, 10vw, 3.15rem); line-height: 1; }
  .sdf-category-card { grid-template-columns: 1fr auto; padding: 1rem 0; }
  .sdf-category-card small { grid-column: 1 / -1; }
  .sdf-recipe-grid { grid-template-columns: 1fr; }
  .sdf-section-heading, .sdf-statement .sdf-container, .sdf-footer-bottom { align-items: flex-start; flex-direction: column; }
  .sdf-footer-grid, .sdf-footer-grid--legal { grid-template-columns: 1fr; }
  .sdf-search-form { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .site-footer, .sdf-announcement, .sdf-related { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  a { color: #000 !important; }
  .entry-content { width: 100%; }
}


/* ==========================================================
   2.2.0 Compact header and simplified footer
   ========================================================== */
.main-navigation { position: relative; }
.main-navigation .sdf-compact-menu {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation .sdf-top-item { position: relative; }
.main-navigation .sdf-top-item > a,
.main-navigation .sdf-submenu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--sdf-ink);
  padding: .55rem .82rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}
.main-navigation .sdf-submenu-toggle { cursor: pointer; }
.main-navigation .sdf-top-item > a:hover,
.main-navigation .sdf-submenu-toggle:hover,
.main-navigation .sdf-top-item.current-menu-item > a,
.main-navigation .sdf-top-item.current-menu-ancestor > .sdf-submenu-toggle,
.main-navigation .sdf-submenu-toggle[aria-expanded="true"] {
  color: var(--sdf-primary);
}
.sdf-menu-chevron {
  width: .48rem;
  height: .48rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.sdf-submenu-toggle[aria-expanded="true"] .sdf-menu-chevron {
  transform: translateY(1px) rotate(225deg);
}
.main-navigation .sub-menu {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  min-width: 370px;
  margin: 0;
  padding: .65rem;
  border: 1px solid var(--sdf-border);
  background: var(--sdf-surface);
  box-shadow: 0 18px 50px rgba(59, 36, 27, .14);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .18s ease, transform .18s ease;
}
.main-navigation .sub-menu--compact {
  grid-template-columns: 1fr;
  min-width: 190px;
}
.main-navigation .sub-menu li { min-width: 0; }
.main-navigation .sub-menu a {
  display: block;
  padding: .72rem .78rem;
  color: var(--sdf-ink);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-decoration: none;
  text-transform: none;
}
.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
  background: var(--sdf-cream-base);
  color: var(--sdf-primary-dark);
}
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .menu-item-has-children.is-submenu-open > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-footer { padding-top: clamp(2.8rem, 6vw, 5rem); }
.sdf-footer-grid--simple {
  grid-template-columns: minmax(260px, 1.55fr) minmax(180px, 1fr) minmax(160px, .75fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.sdf-footer-column { min-width: 0; }
.sdf-footer-copy {
  max-width: 480px;
  margin: 0 0 1.2rem;
  color: var(--sdf-muted);
}
.sdf-footer-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
}
.sdf-footer-inline-links li + li { margin-top: 0; }
.sdf-footer-explore {
  columns: 2;
  column-gap: 1.4rem;
}
.sdf-footer-explore li { break-inside: avoid; }
.sdf-footer-explore li + li { margin-top: .5rem; }
.sdf-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem 1rem;
}
.sdf-footer-legal a { color: inherit; text-decoration: none; }
.sdf-footer-legal a:hover { color: var(--sdf-primary); text-decoration: underline; }

@media (max-width: 980px) {
  .main-navigation .sdf-compact-menu {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }
  .main-navigation .sdf-top-item > a,
  .main-navigation .sdf-submenu-toggle {
    width: 100%;
    justify-content: space-between;
    min-height: 48px;
    border-bottom: 1px solid var(--sdf-border);
    padding: .85rem 0;
  }
  .main-navigation .sub-menu,
  .main-navigation .sub-menu--compact {
    position: static;
    display: none;
    grid-template-columns: 1fr;
    min-width: 0;
    padding: .35rem 0 .65rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--sdf-border);
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .main-navigation .menu-item-has-children:hover > .sub-menu,
  .main-navigation .menu-item-has-children:focus-within > .sub-menu { display: none; }
  .main-navigation .menu-item-has-children.is-submenu-open > .sub-menu { display: grid; }
  .main-navigation .sub-menu a { padding: .65rem .75rem; }
  .sdf-footer-grid--simple { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

@media (max-width: 700px) {
  .sdf-footer-grid--simple { grid-template-columns: 1fr; }
  .sdf-footer-explore { columns: 2; }
  .sdf-footer-legal { justify-content: flex-start; }
}