/*
Theme Name:   Pure Diet Life
Theme URI:    https://puredietlife.com/
Description:  Kadence child theme carrying the Pure Diet Life design system. Every
              colour, type size and spacing step used anywhere on the site is
              declared once here as a token, so Single Post, category and page
              templates can be redesigned against the same list without anything
              being decided twice.
Author:       Pure Diet Life
Template:     kadence
Version:      1.0.0
License:      GPL-2.0-or-later
Text Domain:  pdl
*/

/* ==========================================================================
   1. Tokens
   The two greens are sampled from the logo itself, so the site reads as the
   same brand. The neutral is cooled toward green rather than the usual warm
   cream, and one berry accent carries every call to action.
   ========================================================================== */
:root{
  --pdl-teal:#345C5E;
  --pdl-teal-deep:#26474A;
  --pdl-sage:#6A9F82;
  --pdl-sage-soft:#E4EFE7;
  --pdl-berry:#A63A52;
  --pdl-berry-ink:#8A2E43;

  --pdl-ink:#17231F;
  --pdl-ink-2:#41524C;
  --pdl-ink-3:#5E6F69;      /* 4.83:1 on paper - the lightest text that still passes AA */
  --pdl-paper:#F2F5F1;
  --pdl-card:#FFFFFF;
  --pdl-line:#DDE5DF;

  --pdl-band:#345C5E;
  --pdl-band-ink:#F3F8F3;
  --pdl-band-ink-2:#B9D2C6;

  --pdl-sp-1:4px;  --pdl-sp-2:8px;  --pdl-sp-3:12px; --pdl-sp-4:16px; --pdl-sp-5:24px;
  --pdl-sp-6:32px; --pdl-sp-7:48px; --pdl-sp-8:64px; --pdl-sp-9:96px;

  --pdl-r-img:6px; --pdl-r-btn:3px; --pdl-r-pill:999px;
  --pdl-shadow-lift:0 2px 6px rgba(23,35,31,.07), 0 24px 44px -24px rgba(23,35,31,.42);

  --pdl-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --pdl-body:"Mulish","Segoe UI",system-ui,-apple-system,sans-serif;
  --pdl-maxw:1200px;
  /* Reading measure. Not set in ch: that unit is the width of the "0" glyph,
     which in Mulish is wider than the average letter, so 68ch measured out at
     87 characters a line.
     44rem at 18px measures ~83 characters. Wider than the 65-75 that book
     typography calls for, and deliberately so: measuring alldayidreamaboutfood,
     thebigmansworld and joyfoodsunshine found 88, 88 and 98 characters on
     760-800px columns. A recipe post is scanned on the way to the method, not
     read like a novel, and a narrow column pushes the recipe card further down
     the scroll. This lands just inside the range those sites use. */
  --pdl-measure:44rem;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body{
  background:var(--pdl-paper);
  color:var(--pdl-ink);
  font-family:var(--pdl-body);
  line-height:1.65;
}
body h1,body h2,body h3,body h4{font-family:var(--pdl-display); font-optical-sizing:auto; text-wrap:balance}
/*
 * Scoped deliberately. This was `.pdl a{color:inherit}`, which at specificity
 * (0,1,1) outranked every single-class component rule - so `.pdl-more` (0,1,0)
 * lost its teal and inherited body ink instead. Inheritance is only wanted on
 * the block-level cards, where the link wraps the whole tile and the colours
 * live on the elements inside it.
 */
.pdl a{text-decoration:none}
.pdl-card,
.pdl-cat,
.pdl-rank,
.pdl-feature,
.pdl-side-post{color:inherit}
.pdl img{display:block; max-width:100%}
.pdl :focus-visible{outline:2px solid var(--pdl-berry); outline-offset:3px; border-radius:2px}
.pdl-wrap{width:100%; max-width:var(--pdl-maxw); margin-inline:auto; padding-inline:var(--pdl-sp-5)}

/* the homepage sections are full-bleed, so undo the theme's content padding */
.pdl-home .entry-content{margin:0; max-width:none}
.pdl-home .entry-content > *{margin-block:0}
.pdl-home .entry-header,
.pdl-home .entry-content .entry-title{display:none}

.pdl-eyebrow{
  font-size:.6875rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--pdl-sage); margin:0;
}
.pdl-h1{
  font-size:clamp(2.4rem,5.6vw,4.1rem); font-weight:600; line-height:1.03;
  letter-spacing:-.02em; margin:var(--pdl-sp-4) 0 0;
}
.pdl-h1 em{font-style:normal; font-weight:400; color:var(--pdl-sage)}
.pdl-h2{
  font-size:clamp(1.6rem,3vw,2.3rem); font-weight:600; line-height:1.1;
  letter-spacing:-.015em; margin:0;
}
.pdl-lede{font-size:1.0625rem; line-height:1.6; color:var(--pdl-ink-2); max-width:56ch; margin:var(--pdl-sp-4) 0 0}

/* ==========================================================================
   3. Hero
   Text-led on purpose: a full-bleed photo here would become the largest paint
   on the page and slow the load for no editorial gain.
   ========================================================================== */
.pdl-hero{background:var(--pdl-band); color:var(--pdl-band-ink); padding-top:var(--pdl-sp-9)}
.pdl-hero .pdl-eyebrow{color:var(--pdl-band-ink-2)}
.pdl-hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--pdl-sp-8); align-items:end}
.pdl-hero__copy{padding-bottom:var(--pdl-sp-9)}
.pdl-hero .pdl-h1{color:var(--pdl-band-ink)}
.pdl-hero .pdl-lede{color:var(--pdl-band-ink-2); max-width:48ch}

.pdl-search{
  display:flex; gap:var(--pdl-sp-2); margin-top:var(--pdl-sp-6);
  width:100%; max-width:440px;
  background:var(--pdl-card); padding:6px; border-radius:var(--pdl-r-pill);
}
.pdl-search input[type="search"],
.pdl-search input[type="email"],
.pdl-search input[type="text"]{
  flex:1; border:0; background:transparent; font:inherit; font-size:.9375rem;
  padding-inline:var(--pdl-sp-4); color:var(--pdl-ink); min-width:0;
  border-radius:0; box-shadow:none;
}
/* The pill is the control, so the focus ring belongs on the pill, not on the
   field inside it - otherwise focus draws the very box this removes. */
.pdl-search input:focus{outline:0; box-shadow:none}
.pdl-search:focus-within{box-shadow:0 0 0 3px rgba(106,159,130,.55)}
.pdl-search input::placeholder{color:var(--pdl-ink-3)}
.pdl-search button{
  border:0; background:var(--pdl-berry); color:#fff; font:inherit; font-weight:700;
  font-size:.875rem; padding:10px var(--pdl-sp-5); border-radius:var(--pdl-r-pill); cursor:pointer;
}
.pdl-search button:hover{background:var(--pdl-berry-ink)}

.pdl-chips{display:flex; flex-wrap:wrap; gap:var(--pdl-sp-2); margin-top:var(--pdl-sp-4)}
.pdl-chips a{
  font-size:.75rem; font-weight:700; letter-spacing:.04em;
  padding:6px var(--pdl-sp-3); border-radius:var(--pdl-r-pill);
  border:1px solid rgba(255,255,255,.22); color:var(--pdl-band-ink-2);
}
.pdl-chips a:hover{border-color:var(--pdl-sage); color:var(--pdl-band-ink); background:rgba(255,255,255,.07)}

/* the featured card deliberately hangs past the band's lower edge */
.pdl-hero__feature{transform:translateY(var(--pdl-sp-8)); position:relative; z-index:2}
.pdl-feature{
  background:var(--pdl-card); border-radius:var(--pdl-r-img); overflow:hidden;
  box-shadow:var(--pdl-shadow-lift); display:block;
  transition:transform .35s ease, box-shadow .35s ease;
}
.pdl-feature:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(23,35,31,.09), 0 32px 56px -26px rgba(23,35,31,.5);
}
.pdl-feature__frame{display:block; overflow:hidden}
.pdl-feature__frame img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s ease}
.pdl-feature:hover .pdl-feature__frame img{transform:scale(1.03)}

/* display:block is deliberate. This was a span, and an inline box drops block
   padding on the floor - the title sat flush against the card edge. */
.pdl-feature__body{display:block; padding:var(--pdl-sp-5) var(--pdl-sp-5) var(--pdl-sp-6)}
.pdl-feature__body .pdl-eyebrow{color:var(--pdl-berry); display:block}
.pdl-feature h2{
  font-size:1.375rem; font-weight:600; line-height:1.25; letter-spacing:-.01em;
  margin:var(--pdl-sp-3) 0 0; color:var(--pdl-ink);
}
.pdl-feature__meta{
  display:flex; align-items:center; gap:var(--pdl-sp-3); flex-wrap:wrap;
  margin:var(--pdl-sp-4) 0 0;
}
.pdl-feature__meta time{font-size:.75rem; color:var(--pdl-ink-3); font-variant-numeric:tabular-nums}

/* ==========================================================================
   4. Sections
   ========================================================================== */
.pdl-section{padding-block:var(--pdl-sp-9)}
.pdl-section--tight{padding-block:var(--pdl-sp-8)}
.pdl-section--first{padding-top:calc(var(--pdl-sp-9) + var(--pdl-sp-8))}
.pdl-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--pdl-sp-5); margin-bottom:var(--pdl-sp-6); flex-wrap:wrap;
}
.pdl-head p{margin:var(--pdl-sp-2) 0 0; color:var(--pdl-ink-2); font-size:.9375rem; max-width:52ch}
.pdl-more{
  font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pdl-teal); white-space:nowrap; border-bottom:2px solid var(--pdl-sage); padding-bottom:2px;
}
.pdl-more:hover{color:var(--pdl-berry); border-bottom-color:var(--pdl-berry)}

/* categories -------------------------------------------------------------- */
.pdl-cats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--pdl-sp-4)}
.pdl-cat{display:block; position:relative; border-radius:var(--pdl-r-img); overflow:hidden; background:var(--pdl-card)}
.pdl-cat img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s ease}
.pdl-cat:hover img{transform:scale(1.05)}
.pdl-cat__label{
  position:absolute; inset-inline:0; bottom:0; padding:var(--pdl-sp-5) var(--pdl-sp-4) var(--pdl-sp-4);
  background:linear-gradient(to top,rgba(15,26,23,.88),rgba(15,26,23,.44) 55%,transparent); color:#fff;
}
.pdl-cat__label strong{display:block; font-size:.9375rem; font-weight:800; letter-spacing:.02em}
.pdl-cat__label span{
  font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.78); font-variant-numeric:tabular-nums;
}

/* recipe grid ------------------------------------------------------------- */
.pdl-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--pdl-sp-5) var(--pdl-sp-4)}
.pdl-card{display:flex; flex-direction:column; gap:var(--pdl-sp-3)}
.pdl-card__frame{border-radius:var(--pdl-r-img); overflow:hidden; background:var(--pdl-line)}
.pdl-card__frame img{width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .5s ease}
.pdl-card:hover .pdl-card__frame img{transform:scale(1.04)}
.pdl-badge{
  align-self:flex-start; font-size:.625rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pdl-teal); background:var(--pdl-sage-soft);
  padding:4px var(--pdl-sp-2); border-radius:var(--pdl-r-pill);
}
.pdl-card h3{
  font-size:1.0625rem; font-weight:600; line-height:1.28; margin:0;
  color:var(--pdl-ink);   /* without this it inherits Kadence's #1F2933 */
}
.pdl-card:hover h3{color:var(--pdl-teal)}
.pdl-card time{font-size:.75rem; color:var(--pdl-ink-3); font-variant-numeric:tabular-nums}

/* ranked favourites ------------------------------------------------------- */
.pdl-ranked{background:var(--pdl-card); border-block:1px solid var(--pdl-line); padding-block:var(--pdl-sp-8)}
.pdl-ranked__list{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pdl-sp-5) var(--pdl-sp-6)}
.pdl-rank{display:flex; gap:var(--pdl-sp-4); align-items:center}
.pdl-rank__n{
  font-family:var(--pdl-display); font-optical-sizing:auto; font-size:1.75rem; font-weight:400;
  color:var(--pdl-sage); font-variant-numeric:tabular-nums; line-height:1; flex:0 0 auto; width:2.2ch;
}
.pdl-rank__img{flex:0 0 auto; width:76px; border-radius:var(--pdl-r-img); overflow:hidden}
.pdl-rank__img img{width:76px; height:101px; object-fit:cover}
.pdl-rank__t{min-width:0}
.pdl-rank__t strong{
  display:block; font-family:var(--pdl-display); font-optical-sizing:auto;
  font-size:1rem; font-weight:600; line-height:1.3;
}
.pdl-rank:hover .pdl-rank__t strong{color:var(--pdl-teal)}
.pdl-rank__t span{font-size:.6875rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--pdl-ink-3)}

/* author ------------------------------------------------------------------ */
.pdl-author{display:grid; grid-template-columns:auto 1fr; gap:var(--pdl-sp-7); align-items:center}
.pdl-author__mark{width:132px; height:132px; border-radius:50%; background:var(--pdl-sage-soft); display:grid; place-items:center}
.pdl-author__mark svg{width:64px; height:64px}
.pdl-author blockquote{margin:0; max-width:62ch; border:0; padding:0}
.pdl-author blockquote p{
  font-family:var(--pdl-display); font-optical-sizing:auto; font-size:1.25rem; font-weight:400;
  line-height:1.5; color:var(--pdl-ink); margin:var(--pdl-sp-3) 0 0;
}
.pdl-author cite{
  display:block; margin-top:var(--pdl-sp-4); font-style:normal;
  font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--pdl-ink-3);
}
.pdl-stats{display:flex; gap:var(--pdl-sp-7); margin-top:var(--pdl-sp-5); flex-wrap:wrap}
.pdl-stat b{
  display:block; font-family:var(--pdl-display); font-optical-sizing:auto; font-size:1.5rem;
  font-weight:600; color:var(--pdl-teal); font-variant-numeric:tabular-nums; line-height:1;
}
.pdl-stat span{font-size:.6875rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--pdl-ink-3)}

/* subscribe --------------------------------------------------------------- */
.pdl-subscribe{background:var(--pdl-teal-deep); color:var(--pdl-band-ink)}
.pdl-subscribe__inner{display:grid; grid-template-columns:1fr auto; gap:var(--pdl-sp-7); align-items:center; padding-block:var(--pdl-sp-8)}
.pdl-subscribe .pdl-h2{color:var(--pdl-band-ink)}
.pdl-subscribe p{margin:var(--pdl-sp-2) 0 0; color:var(--pdl-band-ink-2); max-width:48ch; font-size:.9375rem}
.pdl-subscribe .pdl-search{margin-top:0; max-width:420px}

/* ==========================================================================
   5. Breakpoints
   ========================================================================== */
@media (max-width:1000px){ .pdl-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:980px){ .pdl-ranked__list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){
  .pdl-hero{padding-top:var(--pdl-sp-7)}
  .pdl-hero__grid{grid-template-columns:1fr; gap:var(--pdl-sp-6)}
  .pdl-hero__copy{padding-bottom:var(--pdl-sp-6)}
  .pdl-hero__feature{transform:translateY(var(--pdl-sp-6))}
}
@media (max-width:820px){ .pdl-cats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:800px){ .pdl-subscribe__inner{grid-template-columns:1fr; gap:var(--pdl-sp-5)} }
@media (max-width:760px){ .pdl-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .pdl-author{grid-template-columns:1fr; gap:var(--pdl-sp-5)} }
@media (max-width:620px){ .pdl-ranked__list{grid-template-columns:1fr} }

/* On a phone the section head cannot stay on one row: .pdl-more is nowrap, and
   under a longer description it was pushed past the viewport edge - "See the
   index" ended 133px outside it. Stacking puts the link under the text, where
   it also reads as the end of the block rather than a stray tail. */
@media (max-width:640px){
  .pdl-head{flex-direction:column; align-items:flex-start; gap:var(--pdl-sp-4)}
  .pdl-more{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .pdl *{animation:none !important; transition:none !important}
}

/* ==========================================================================
   6. Single post and page
   Same tokens as the front page. The one measurement that matters most here is
   line length: the old layout ran body text 1152px wide at 16px, about 144
   characters a line, which is roughly twice what anyone reads comfortably.
   Everything below keeps running text near 68 characters and lets only the
   things that benefit from width - photos, the recipe card - break out.
   ========================================================================== */
.pdl-article .content-container,
.pdl-page .content-container{max-width:none}

.pdl-article .entry-content > *,
.pdl-page .entry-content > *,
.pdl-article .entry-header,
.pdl-page .entry-header,
.pdl-crumbs__inner{
  max-width:var(--pdl-measure);
  margin-inline:auto;
}

/* With a sidebar beside it the article gets a wider measure, but not an
   unlimited one: letting the content simply fill the column put 106 characters
   on a line. 49rem at 19px measures ~88, which is what alldayidreamaboutfood
   and thebigmansworld both run. */
.pdl-article.pdl-has-sidebar{--pdl-measure:49rem}
.pdl-article.pdl-has-sidebar .entry-content > *,
.pdl-article.pdl-has-sidebar .entry-header,
.pdl-article.pdl-has-sidebar .pdl-crumbs__inner,
.pdl-article.pdl-has-sidebar .pdl-lead,
.pdl-article.pdl-has-sidebar .pdl-share,
.pdl-article.pdl-has-sidebar .pdl-toc,
.pdl-article.pdl-has-sidebar .pdl-inline-subscribe,
.pdl-article.pdl-has-sidebar .pdl-authorbox{max-width:var(--pdl-measure); margin-inline:0}
.pdl-article.pdl-has-sidebar .entry-content > .wprm-recipe-container,
.pdl-article.pdl-has-sidebar .entry-content > .wprm-recipe{max-width:var(--pdl-measure)}
/* Related recipes still span the full page below the article. Three across
   fits the narrower article column - but only from tablet up: this selector
   outranks the plain .pdl-grid breakpoints, so without the media query it kept
   three columns at 375px and squeezed the cards to about 100px. */
.pdl-article.pdl-has-sidebar .pdl-related{max-width:none; margin-inline:0}
@media (min-width:761px){
  .pdl-article.pdl-has-sidebar .pdl-related .pdl-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .pdl-article.pdl-has-sidebar .pdl-related .pdl-grid{grid-template-columns:repeat(2,1fr)}
}

/* Photos sit at exactly the text width. Every one of the eight sites measured
   does this; ours ran 860px against a 592px column, and that mismatch was the
   loudest unfinished thing on the page. The recipe card is the one element
   allowed to step out, because it is a self-contained panel rather than part
   of the reading column. */
.pdl-article .entry-content > figure,
.pdl-article .entry-content > .wp-block-image{
  max-width:var(--pdl-measure);
}
.pdl-article .entry-content > .wprm-recipe-container,
.pdl-article .entry-content > .wprm-recipe{
  max-width:min(48rem, 100%);
}

/* breadcrumb ------------------------------------------------------------- */
.pdl-crumbs{padding-block:var(--pdl-sp-5) 0}
.pdl-crumbs__inner{
  font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--pdl-ink-3); display:flex; flex-wrap:wrap; align-items:center; gap:var(--pdl-sp-2);
}
.pdl-crumbs a{color:var(--pdl-teal)}
.pdl-crumbs a:hover{color:var(--pdl-berry); text-decoration:underline; text-underline-offset:3px}
.pdl-crumbs .sep{color:var(--pdl-sage)}

/* article header --------------------------------------------------------- */
.pdl-article .entry-header{padding-block:var(--pdl-sp-4) var(--pdl-sp-5)}
.pdl-article .entry-title,
.pdl-page .entry-title{
  font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:600; line-height:1.12;
  letter-spacing:-.02em; color:var(--pdl-ink); margin:var(--pdl-sp-3) 0 0;
}
.pdl-article .entry-taxonomies a{
  display:inline-block; font-size:.625rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pdl-teal); background:var(--pdl-sage-soft);
  padding:4px var(--pdl-sp-2); border-radius:var(--pdl-r-pill);
}
.pdl-article .entry-taxonomies a:hover{background:var(--pdl-sage); color:#fff}
.pdl-article .entry-meta{
  font-size:.8125rem; color:var(--pdl-ink-3); margin-top:var(--pdl-sp-4);
  font-variant-numeric:tabular-nums;
}
.pdl-article .entry-meta a{color:var(--pdl-ink-2)}
.pdl-article .entry-meta a:hover{color:var(--pdl-teal)}

/* article body ----------------------------------------------------------- */
.pdl-article .entry-content,
.pdl-page .entry-content{font-size:1.1875rem; line-height:1.85; color:var(--pdl-ink-2)}
.pdl-article .entry-content p,
.pdl-page .entry-content p{margin-block:0 var(--pdl-sp-6)}
.pdl-article .entry-content h2,
.pdl-page .entry-content h2{
  font-size:clamp(1.6rem,2.9vw,2.125rem); font-weight:600; line-height:1.18;
  letter-spacing:-.02em; color:var(--pdl-ink); margin:var(--pdl-sp-9) 0 var(--pdl-sp-4);
  scroll-margin-top:96px;   /* the header is sticky; anchors must clear it */
}
.pdl-article .entry-content h3,
.pdl-page .entry-content h3{
  font-size:1.375rem; font-weight:600; line-height:1.25; color:var(--pdl-ink);
  margin:var(--pdl-sp-7) 0 var(--pdl-sp-3); scroll-margin-top:96px;
}
.pdl-article .entry-content h4,
.pdl-page .entry-content h4{
  font-size:1.0625rem; font-weight:600; color:var(--pdl-ink);
  margin:var(--pdl-sp-6) 0 var(--pdl-sp-2);
}
/* The contents list lives inside .entry-content, so it was picking up the body
   link treatment - teal and underlined on every entry, which is far louder than
   a contents list should be. Excluding it by class is the honest fix: adding
   specificity to the toc rule cannot win, because each :not() here contributes
   its own class to this selector's weight. */
.pdl-article .entry-content a:not(.wprm-recipe-jump):not(.pdl-more):not(.pdl-toc__link),
.pdl-page .entry-content a:not(.pdl-more):not(.pdl-toc__link){
  color:var(--pdl-teal); text-decoration:underline;
  text-decoration-color:var(--pdl-sage); text-underline-offset:3px; text-decoration-thickness:1.5px;
}
.pdl-article .entry-content a:hover,
.pdl-page .entry-content a:hover{color:var(--pdl-berry); text-decoration-color:var(--pdl-berry)}
.pdl-article .entry-content ul,
.pdl-article .entry-content ol,
.pdl-page .entry-content ul,
.pdl-page .entry-content ol{margin-block:0 var(--pdl-sp-5); padding-inline-start:1.35em}
.pdl-article .entry-content li,
.pdl-page .entry-content li{margin-block:var(--pdl-sp-2)}
.pdl-article .entry-content li::marker{color:var(--pdl-sage)}
.pdl-article .entry-content blockquote,
.pdl-page .entry-content blockquote{
  border-inline-start:3px solid var(--pdl-sage); padding:var(--pdl-sp-1) 0 var(--pdl-sp-1) var(--pdl-sp-5);
  margin-block:var(--pdl-sp-6); font-family:var(--pdl-display); font-optical-sizing:auto;
  font-size:1.1875rem; line-height:1.5; color:var(--pdl-ink);
}
.pdl-article .entry-content img,
.pdl-page .entry-content img{border-radius:var(--pdl-r-img)}
.pdl-article .entry-content figcaption{
  font-size:.8125rem; color:var(--pdl-ink-3); margin-top:var(--pdl-sp-2); text-align:center;
}

/* author box ------------------------------------------------------------- */
.pdl-authorbox{
  max-width:var(--pdl-measure); margin:var(--pdl-sp-8) auto 0; padding:var(--pdl-sp-6);
  background:var(--pdl-card); border:1px solid var(--pdl-line); border-radius:var(--pdl-r-img);
  display:grid; grid-template-columns:auto 1fr; gap:var(--pdl-sp-5); align-items:center;
}
.pdl-authorbox__mark{
  width:84px; height:84px; border-radius:50%; background:var(--pdl-sage-soft);
  display:grid; place-items:center;
}
.pdl-authorbox__mark svg{width:42px; height:42px}
.pdl-authorbox__name{
  font-size:1.25rem; font-weight:600; color:var(--pdl-ink); margin:var(--pdl-sp-2) 0 0;
}
.pdl-authorbox__bio{font-size:.9375rem; line-height:1.6; color:var(--pdl-ink-2); margin:var(--pdl-sp-2) 0 var(--pdl-sp-4)}

/* related recipes --------------------------------------------------------
   These are appended inside .entry-content by a hook, so the reading-measure
   rule above catches them and squeezes four cards into 592px. A more specific
   selector lets this one section span the full content width again. */
.pdl-related,
.pdl-article .entry-content > .pdl-related{
  max-width:var(--pdl-maxw);
  margin:var(--pdl-sp-9) auto 0;
  padding:var(--pdl-sp-8) 0 0;
  border-top:1px solid var(--pdl-line);
}
.pdl-related .pdl-grid{grid-template-columns:repeat(4,1fr)}

/* the recipe card is a plugin's markup, nudged onto the same palette ------ */
.pdl-article .wprm-recipe-container{border-radius:var(--pdl-r-img)}
.pdl-article .wprm-recipe-jump,
.pdl-article .wprm-recipe-print{
  border-radius:var(--pdl-r-pill) !important; font-family:var(--pdl-body) !important;
  font-weight:700 !important; letter-spacing:.02em;
}

@media (max-width:900px){
  .pdl-related .pdl-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .pdl-authorbox{grid-template-columns:1fr; text-align:left; padding:var(--pdl-sp-5)}
}

/* ==========================================================================
   7. Footer
   Kadence renders widget titles as h4, which the base rule above sets in
   Fraunces at 22px - far too loud for a footer column label. These pull the
   footer back onto the design system: small uppercase labels, no list markers,
   and the same card ground as the rest of the site.
   ========================================================================== */
.site-footer{background:var(--pdl-card); border-top:1px solid var(--pdl-line)}
.site-middle-footer-wrap{padding-block:var(--pdl-sp-8) var(--pdl-sp-7)}
.site-bottom-footer-wrap{border-top:1px solid var(--pdl-line); padding-block:var(--pdl-sp-4)}

.site-footer .widget-area h2,
.site-footer .widget-area h3,
.site-footer .widget-area h4,
.site-footer .wp-block-heading{
  font-family:var(--pdl-body); font-size:.6875rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pdl-ink);
  margin:0 0 var(--pdl-sp-3); line-height:1.4;
}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--pdl-sp-2)}
.site-footer li{margin:0}
.site-footer li::marker{content:none}
.site-footer a{font-size:.875rem; color:var(--pdl-ink-2); text-decoration:none}
.site-footer a:hover{color:var(--pdl-teal); text-decoration:underline; text-underline-offset:3px}
.site-footer p{font-size:.875rem; color:var(--pdl-ink-2); margin:0; max-width:34ch; line-height:1.6}

.pdl-footer-logo{margin:0 0 var(--pdl-sp-4)}
.pdl-footer-logo img{height:32px; width:auto}

.site-bottom-footer-wrap .site-footer-row{align-items:center}
.site-footer .footer-html{font-size:.75rem; color:var(--pdl-ink-3)}
.site-footer .footer-navigation ul{
  display:flex; flex-wrap:wrap; gap:var(--pdl-sp-5); justify-content:flex-end;
}
.site-footer .footer-navigation a{font-size:.75rem; color:var(--pdl-ink-3)}
.site-footer .footer-navigation a:hover{color:var(--pdl-teal)}

@media (max-width:900px){
  .site-footer .footer-navigation ul{justify-content:flex-start}
}

/* ==========================================================================
   8. Category and other archives
   Kadence already outputs a 2:3 thumbnail, a taxonomy badge and a title per
   entry, so this restyles that markup into the same card as the front page
   rather than replacing the loop - the theme keeps handling pagination,
   ordering and everything else.
   ========================================================================== */
.pdl-archive .entry-list-item,
.pdl-archive .loop-entry{background:transparent}
.pdl-archive .loop-entry{
  border:0 !important; box-shadow:none !important; padding:0 !important;
  border-radius:0; overflow:visible;
}
.pdl-archive .loop-entry .post-thumbnail{
  border-radius:var(--pdl-r-img); overflow:hidden; margin:0 0 var(--pdl-sp-3);
  background:var(--pdl-line); display:block;
}
/* Kadence builds the frame itself: .post-thumbnail carries a padding-bottom
   ratio box and .post-thumbnail-inner is absolutely positioned inside it. The
   archive ratio is set to 4-3 (padding-bottom 133%), which is the same 3:4
   portrait the homepage cards use, so the image only has to fill that box.
   Setting aspect-ratio here did nothing - the fixed-height inner always won. */
.pdl-archive .loop-entry .post-thumbnail img{
  width:100%; height:100%; object-fit:cover; transition:transform .5s ease;
}
.pdl-archive .loop-entry:hover .post-thumbnail img{transform:scale(1.04)}

.pdl-archive .loop-entry .entry-content-wrap{padding:0; display:flex; flex-direction:column; gap:var(--pdl-sp-3)}
.pdl-archive .loop-entry .entry-header{display:flex; flex-direction:column; gap:var(--pdl-sp-3); padding:0}
.pdl-archive .loop-entry .entry-taxonomies{order:-1}
.pdl-archive .loop-entry .entry-taxonomies a{
  display:inline-block; font-size:.625rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pdl-teal); background:var(--pdl-sage-soft);
  padding:4px var(--pdl-sp-2); border-radius:var(--pdl-r-pill); text-decoration:none;
}
.pdl-archive .loop-entry .entry-taxonomies a:hover{background:var(--pdl-sage); color:#fff}
.pdl-archive .loop-entry .entry-title{
  font-size:1.0625rem; font-weight:600; line-height:1.28; margin:0; letter-spacing:0;
}
.pdl-archive .loop-entry .entry-title a{color:var(--pdl-ink); text-decoration:none}
.pdl-archive .loop-entry:hover .entry-title a{color:var(--pdl-teal)}
.pdl-archive .loop-entry .entry-meta{
  font-size:.75rem; color:var(--pdl-ink-3); font-variant-numeric:tabular-nums; margin:0;
}
.pdl-archive .loop-entry .entry-meta a{color:var(--pdl-ink-3)}
/* the excerpt turns a scannable grid of photos into a wall of grey text */
.pdl-archive .loop-entry .posted-by{display:none}

/* The excerpt was hidden while the card was date-only. With it back, the run of
   text has to be the same length on every card or the grid rows go ragged, so
   it is clamped to three lines rather than trusting the excerpt setting. */
.pdl-archive .loop-entry .entry-summary{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--pdl-body); font-size:.9375rem; line-height:1.6;
  color:var(--pdl-ink-2); margin:0;
}
.pdl-archive .loop-entry .entry-summary p{margin:0}

/* Read more sits directly under the excerpt instead of floating at the bottom
   of a mostly empty card. */
.pdl-archive .loop-entry .entry-footer{margin:0; padding:0}
.pdl-archive .loop-entry .entry-footer .post-more-link,
.pdl-archive .loop-entry .entry-footer .more-link{
  display:inline-flex; align-items:center; gap:var(--pdl-sp-2);
  font-family:var(--pdl-body); font-size:.75rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--pdl-teal); text-decoration:none;
}
.pdl-archive .loop-entry:hover .entry-footer .post-more-link,
.pdl-archive .loop-entry:hover .entry-footer .more-link{color:var(--pdl-berry-ink)}

/* Kadence puts 80px above the content area. Under a hero that already carries
   its own whitespace that reads as a hole before the content starts, so both
   templates use a tighter step. */
.pdl-archive .content-area,
.pdl-page .content-area{margin-top:var(--pdl-sp-4)}

/* Kadence sizes these heroes with a fixed min-height and centres the title in
   it, so the space around the title is whatever is left over: 200px on pages
   left a large empty band, and on archives the fluid title (37px at 1000px
   wide, 46px at 1440) ate the remainder until it sat flush against the fixed
   header. Dropping the min-height and measuring from the text instead means the
   gap holds at every width and the height follows the title rather than
   fighting it. */
.pdl-archive .entry-hero .entry-header,
.pdl-page .entry-hero .entry-header{min-height:0; padding-block:var(--pdl-sp-5)}

/* The page title carries a 12px top margin of its own, which the flex centring
   used to absorb. Once the padding decides the spacing that margin shows up as
   36px above the title against 24px below it, so it goes. */
.pdl-page .entry-hero .entry-header .entry-title{margin-top:0}

/* archive header --------------------------------------------------------- */
.pdl-archive .archive-hero-section,
.pdl-archive .entry-hero-container-inner{background:transparent}
.pdl-archive .page-title,
.pdl-archive h1.archive-title{
  font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:600; line-height:1.12;
  letter-spacing:-.02em; color:var(--pdl-ink); margin:0;
}
.pdl-archive .archive-description{
  color:var(--pdl-ink-2); font-size:1rem; max-width:var(--pdl-measure); margin-top:var(--pdl-sp-3);
}
.pdl-archive-count{
  font-size:.6875rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--pdl-sage); margin:0 0 var(--pdl-sp-2);
}

/* pagination ------------------------------------------------------------- */
.pdl-archive .pagination a,
.pdl-archive .pagination .current,
.pdl-archive .navigation a,
.pdl-archive .navigation .current{
  border-radius:var(--pdl-r-btn); font-weight:700; font-size:.875rem;
}
.pdl-archive .pagination .current,
.pdl-archive .navigation .current{background:var(--pdl-teal); color:#fff}

/* Archive columns follow the front page grid at every width, so a card is the
   same size wherever it appears. Kadence drops archives to one column on a
   phone; two matches .pdl-grid and shows twice as many recipes per screen. */
@media (max-width:1000px){
  .pdl-archive .kadence-posts-list.grid-cols{grid-template-columns:repeat(3,1fr) !important}
}
@media (max-width:760px){
  .pdl-archive .kadence-posts-list.grid-cols{
    grid-template-columns:repeat(2,1fr) !important;
    gap:var(--pdl-sp-5) var(--pdl-sp-4) !important;
  }
  .pdl-archive .loop-entry .entry-title{font-size:1rem}
  .pdl-archive .loop-entry .entry-meta{display:none}
}

/* ==========================================================================
   9. Article: lead strip, share rail, contents, subscribe
   These four came out of measuring eight successful recipe blogs. All eight
   carry a jump-to-recipe control high on the page, share buttons that follow
   the reader, and a newsletter form inside the article; none carries a
   reading-progress bar, so there isn't one here either.
   ========================================================================== */

/* the numbers a low-carb reader checks before deciding to cook -------------- */
.pdl-lead{
  max-width:var(--pdl-measure); margin:var(--pdl-sp-5) auto 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--pdl-sp-5); flex-wrap:wrap;
  padding:var(--pdl-sp-4) var(--pdl-sp-5);
  background:var(--pdl-card); border:1px solid var(--pdl-line);
  border-radius:var(--pdl-r-img);
}
.pdl-stats{display:flex; gap:var(--pdl-sp-6); margin:0; flex-wrap:wrap}
.pdl-stat{margin:0}
.pdl-stat dt{
  font-size:.625rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--pdl-ink-3); margin:0 0 2px;
}
.pdl-stat dd{
  margin:0; font-family:var(--pdl-display); font-optical-sizing:auto;
  font-size:1.125rem; font-weight:600; color:var(--pdl-ink);
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.pdl-stat.is-lead dd{color:var(--pdl-berry)}

.pdl-jump{
  display:inline-flex; align-items:center; gap:var(--pdl-sp-2);
  background:var(--pdl-teal); color:#fff; font-weight:700; font-size:.875rem;
  padding:11px var(--pdl-sp-5); border-radius:var(--pdl-r-pill); white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.pdl-jump:hover{background:var(--pdl-teal-deep); transform:translateY(-1px)}
.pdl-jump svg{flex:0 0 auto}

/* Print sits next to Jump as the quieter of the two: same pill, outlined rather
   than filled, so the primary action still reads first. It replaces the pair of
   black buttons WP Recipe Maker used to inject above the article. */
.pdl-lead__actions{display:flex; align-items:center; gap:var(--pdl-sp-3); flex:0 0 auto}
.pdl-print{
  display:inline-flex; align-items:center; gap:var(--pdl-sp-2);
  background:transparent; color:var(--pdl-teal); font-weight:700; font-size:.875rem;
  padding:10px var(--pdl-sp-5); border:1px solid var(--pdl-line);
  border-radius:var(--pdl-r-pill); white-space:nowrap;
  transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.pdl-print:hover{
  background:var(--pdl-sage-soft); border-color:var(--pdl-sage);
  color:var(--pdl-teal-deep); transform:translateY(-1px);
}
.pdl-print svg{flex:0 0 auto}

/* share rail ------------------------------------------------------------- */
.pdl-share{
  max-width:var(--pdl-measure); margin:var(--pdl-sp-6) auto 0;
  display:flex; align-items:center; gap:var(--pdl-sp-3);
  padding-bottom:var(--pdl-sp-5); border-bottom:1px solid var(--pdl-line);
}
.pdl-share__label{
  margin:0; font-size:.625rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--pdl-ink-3);
}
.pdl-share__btn{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--pdl-line); background:var(--pdl-card); color:var(--pdl-ink-2);
  cursor:pointer; padding:0; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.pdl-share__btn svg{width:17px; height:17px}
.pdl-share__btn:hover{background:var(--pdl-sage-soft); color:var(--pdl-teal); border-color:var(--pdl-sage)}
.pdl-share__btn.is-pinterest:hover{background:#E60023; border-color:#E60023; color:#fff}
.pdl-share__btn.is-facebook:hover{background:#1877F2; border-color:#1877F2; color:#fff}
.pdl-share__copy.is-copied{background:var(--pdl-sage); border-color:var(--pdl-sage); color:#fff}

/* From 1180px there is room beside the column for the rail to sit vertically
   and follow the reader. Below that it stays inline under the title, because a
   floating rail on a narrow screen covers the thing it is meant to help with. */
@media (min-width:1180px){
  .pdl-article .pdl-share{
    position:sticky; top:96px; float:left;
    margin:0 0 0 calc(50% - var(--pdl-measure)/2 - 88px);
    width:52px; flex-direction:column; gap:var(--pdl-sp-2);
    padding:0; border-bottom:0; z-index:5;
  }
  .pdl-article .pdl-share__label{writing-mode:vertical-rl; letter-spacing:.2em; margin-bottom:var(--pdl-sp-2)}
}

/* contents --------------------------------------------------------------- */
.pdl-toc{
  max-width:var(--pdl-measure); margin:0 auto var(--pdl-sp-7);
  background:var(--pdl-sage-soft); border-radius:var(--pdl-r-img);
  padding:var(--pdl-sp-4) var(--pdl-sp-5);
}
.pdl-toc summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--pdl-sp-2);
  font-size:.6875rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--pdl-teal);
}
.pdl-toc summary::-webkit-details-marker{display:none}
.pdl-toc summary::after{
  content:""; width:8px; height:8px; margin-left:auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s ease;
}
.pdl-toc details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pdl-toc ol{margin:var(--pdl-sp-4) 0 0; padding:0; list-style:none; counter-reset:toc; display:grid; gap:var(--pdl-sp-2)}
.pdl-toc li{counter-increment:toc; display:flex; gap:var(--pdl-sp-3); align-items:baseline}
.pdl-toc li::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--pdl-display); font-size:.8125rem; color:var(--pdl-sage);
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}
.pdl-toc a{
  font-size:.9375rem; color:var(--pdl-ink-2); line-height:1.45;
  text-decoration:none; border-bottom:1px solid transparent;
}
.pdl-toc a:hover{color:var(--pdl-teal); border-bottom-color:var(--pdl-sage); text-decoration:none}

/* inline subscribe ------------------------------------------------------- */
.pdl-inline-subscribe{
  max-width:var(--pdl-measure); margin:var(--pdl-sp-8) auto 0;
  background:var(--pdl-teal); color:var(--pdl-band-ink);
  border-radius:var(--pdl-r-img); padding:var(--pdl-sp-6);
  display:grid; gap:var(--pdl-sp-5);
  grid-template-columns:minmax(0,1fr);
}
.pdl-inline-subscribe .pdl-eyebrow{color:var(--pdl-band-ink-2)}
.pdl-inline-subscribe h2,
.pdl-article .entry-content .pdl-inline-subscribe h2,
.pdl-page .entry-content .pdl-inline-subscribe h2{
  font-size:1.5rem; font-weight:600; line-height:1.2; color:var(--pdl-band-ink);
  margin:var(--pdl-sp-2) 0 0; letter-spacing:-.015em;
  border:0; padding:0;
}
.pdl-inline-subscribe p:not(.pdl-eyebrow){
  margin:var(--pdl-sp-2) 0 0; color:var(--pdl-band-ink-2); font-size:.9375rem; max-width:46ch;
}
.pdl-inline-subscribe .pdl-search{margin-top:0; max-width:100%}

@media (min-width:720px){
  .pdl-inline-subscribe{grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--pdl-sp-7)}
  .pdl-inline-subscribe .pdl-search{width:360px}
}

/* mobile ----------------------------------------------------------------- */
@media (max-width:700px){
  .pdl-lead{
    flex-direction:column; align-items:stretch; gap:var(--pdl-sp-4);
    padding:var(--pdl-sp-4);
  }
  .pdl-stats{gap:var(--pdl-sp-5); justify-content:space-between}
  .pdl-lead__actions{display:grid; grid-template-columns:1fr auto; gap:var(--pdl-sp-3)}
  .pdl-jump,.pdl-print{justify-content:center}
  .pdl-article .entry-content,
  .pdl-page .entry-content{font-size:1.0625rem; line-height:1.75}
}

/* ==========================================================================
   10. Sidebar
   The layout is modelled on how established recipe sites lay a post out: a
   wide article beside a sticky column carrying an about box, a search field
   and a trending list, in that order. It gives a reader somewhere to go next
   without leaving the article. The colours, type and mark are ours.
   ========================================================================== */
.pdl-article .primary-sidebar,
.pdl-article #secondary{background:transparent}
.pdl-article .sidebar-inner-wrap{padding:0}

.pdl-side{
  background:var(--pdl-card); border:1px solid var(--pdl-line);
  border-radius:var(--pdl-r-img); padding:var(--pdl-sp-5);
  margin-bottom:var(--pdl-sp-5);
}
.pdl-side__h{
  font-family:var(--pdl-display); font-optical-sizing:auto;
  font-size:1.375rem; font-weight:600; line-height:1.2; letter-spacing:-.015em;
  color:var(--pdl-ink); margin:var(--pdl-sp-2) 0 var(--pdl-sp-3);
}
.pdl-side__h--sm{
  font-family:var(--pdl-body); font-size:.6875rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--pdl-ink);
  margin:0 0 var(--pdl-sp-4);
}
.pdl-side p{font-size:.9375rem; line-height:1.65; color:var(--pdl-ink-2); margin:0 0 var(--pdl-sp-4)}

.pdl-side--about{text-align:center}
.pdl-side--about p{text-align:left}
.pdl-side__mark{
  width:84px; height:84px; margin:0 auto var(--pdl-sp-3);
  border-radius:50%; background:var(--pdl-sage-soft); display:grid; place-items:center;
}
.pdl-side__mark svg{width:44px; height:44px}

.pdl-search--side{margin-top:0; max-width:none; border:1px solid var(--pdl-line); padding:5px}
.pdl-search--side input[type="search"]{font-size:.875rem; padding-inline:var(--pdl-sp-3)}
.pdl-search--side button{padding:9px var(--pdl-sp-4); font-size:.8125rem}

/* trending list ---------------------------------------------------------- */
.pdl-side-posts{display:grid; gap:var(--pdl-sp-4)}
.pdl-side-post{display:flex; gap:var(--pdl-sp-3); align-items:center; text-decoration:none}
.pdl-side-post__img{
  flex:0 0 auto; width:64px; height:76px; border-radius:var(--pdl-r-img);
  overflow:hidden; background:var(--pdl-line);
}
.pdl-side-post__img img{width:64px; height:85px; object-fit:cover; transition:transform .4s ease}
.pdl-side-post:hover .pdl-side-post__img img{transform:scale(1.05)}
.pdl-side-post__t{min-width:0}
.pdl-side-post__t strong{
  display:block; font-family:var(--pdl-display); font-optical-sizing:auto;
  font-size:.9375rem; font-weight:600; line-height:1.3; color:var(--pdl-ink);
}
.pdl-side-post:hover .pdl-side-post__t strong{color:var(--pdl-teal)}
.pdl-side-post__t span{
  display:block; margin-top:2px; font-size:.625rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--pdl-ink-3);
}

/* The share rail floated into the left gutter when the article was centred in
   the viewport. With a sidebar there is no left gutter, so it goes back inline
   above the content where it does not collide with anything. */
@media (min-width:1180px){
  .pdl-article.pdl-has-sidebar .pdl-share{
    position:static; float:none; margin:var(--pdl-sp-6) 0 0; width:auto;
    flex-direction:row; padding-bottom:var(--pdl-sp-5);
    border-bottom:1px solid var(--pdl-line);
  }
  .pdl-article.pdl-has-sidebar .pdl-share__label{writing-mode:horizontal-tb; letter-spacing:.13em; margin-bottom:0}
}

@media (max-width:1024px){
  .pdl-side{margin-bottom:var(--pdl-sp-4)}
}

/* Kadence leaves the content/sidebar grid unconstrained, so on a wide screen it
   spreads to the full viewport: the article column came out 944px with the text
   capped at 784, leaving a 216px gutter between article and sidebar that read
   as two disconnected pieces. Setting the two columns explicitly - 784 for the
   article, 340 for the sidebar, the same split alldayidreamaboutfood uses -
   makes the pair sit together. Only above the width where Kadence stops
   stacking them. */
@media (min-width:1100px){
  .pdl-article .content-container.site-container{
    max-width:1228px; margin-inline:auto;
    grid-template-columns:minmax(0,784px) 340px;
  }
  .pdl-article.pdl-has-sidebar .entry-content > *,
  .pdl-article.pdl-has-sidebar .entry-header,
  .pdl-article.pdl-has-sidebar .pdl-crumbs__inner,
  .pdl-article.pdl-has-sidebar .pdl-lead,
  .pdl-article.pdl-has-sidebar .pdl-share,
  .pdl-article.pdl-has-sidebar .pdl-toc,
  .pdl-article.pdl-has-sidebar .pdl-inline-subscribe,
  .pdl-article.pdl-has-sidebar .pdl-authorbox{max-width:none}
}

/* Ad slots between the front-page sections. Centred, with room around them so
   they read as a break between sections rather than part of one, and reserving
   nothing when empty so an unfilled slot leaves no gap. */
.pdl-ad{
  max-width:var(--pdl-maxw); margin-inline:auto; padding-inline:var(--pdl-sp-5);
  display:flex; justify-content:center;
}
.pdl-ad:not(:empty){margin-block:var(--pdl-sp-7)}
.pdl-ad > div:empty{display:none}


/* recipe index ------------------------------------------------------------ */
/* The index pages reuse .pdl-grid and .pdl-card, so a recipe looks the same
   here as it does on the home page and in an archive. Only the grouping and
   the plain-text variant are new. */
.pdl-index{display:flex; flex-direction:column; gap:var(--pdl-sp-8)}
.pdl-index__group{scroll-margin-top:96px}
.pdl-index .pdl-head{margin-bottom:var(--pdl-sp-5)}

.pdl-index__links{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:var(--pdl-sp-7);
}
.pdl-index__links li{
  break-inside:avoid; margin:0 0 var(--pdl-sp-3);
  font-family:var(--pdl-body); font-size:1rem; line-height:1.5;
}
.pdl-index__links a{color:var(--pdl-ink-2); text-decoration:none}
.pdl-index__links a:hover{color:var(--pdl-teal); text-decoration:underline}

@media (max-width:900px){
  .pdl-index__links{columns:1}
  .pdl-index{gap:var(--pdl-sp-7)}
}


/* iOS Safari zooms the whole page in when a focused field is under 16px and
   does not zoom back out afterwards. The desktop sizes are deliberate, so this
   only lifts them on narrow screens. It sits at the end of the file on purpose:
   the .pdl-search--side rule has the same specificity, so order is what decides. */
@media (max-width:782px){
  .pdl-search input[type="search"],
  .pdl-search input[type="email"],
  .pdl-search input[type="text"],
  .pdl-search--side input[type="search"],
  .pdl-search--side input[type="email"]{font-size:16px}
}


/* On a narrow screen the pill cannot hold both a usable field and the button:
   at 375px the field was left with 97px of text space for a placeholder that
   needs 140, so the address was clipped and typing scrolled inside a sliver.
   Below 600px the two stack instead. A pill outline makes no sense once the
   control is two rows tall, so the wrapper squares off and the button keeps the
   rounded shape. Also at the end of the file: several of these properties are
   set again further up at the same specificity. */
@media (max-width:600px){
  .pdl-subscribe .pdl-search,
  .pdl-inline-subscribe .pdl-search{
    flex-wrap:wrap;
    border-radius:var(--pdl-r-img);
    padding:var(--pdl-sp-2);
    gap:var(--pdl-sp-2);
    width:100%;
  }
  .pdl-subscribe .pdl-search input,
  .pdl-inline-subscribe .pdl-search input{
    flex:1 1 100%;
    padding:10px var(--pdl-sp-3);
  }
  .pdl-subscribe .pdl-search button,
  .pdl-inline-subscribe .pdl-search button{
    flex:1 1 100%;
    padding-block:12px;
  }
}