/* Guide pages: shared components + mobile fixes for the inline-styled .pv-page layout */

/* Quick answer box at the top of every guide */
.gp-tldr{margin-top:28px;background:#fff;border:1px solid rgba(167,51,27,.18);border-left:4px solid #a7331b;border-radius:18px;padding:20px 22px}
.gp-tldr .gp-k{font-size:12px;font-weight:700;letter-spacing:.14em;color:#a7331b;text-transform:uppercase}
.gp-tldr p{margin-top:8px;font-size:17px;line-height:1.65;color:#2b2622}
.gp-tldr ul{margin-top:12px;display:grid;gap:8px;font-size:15.5px;line-height:1.55;color:#4a3f3a}
.gp-tldr li{display:flex;gap:10px}
.gp-tldr li::before{content:"✓";color:#4f6b3f;font-weight:700;flex-shrink:0}

/* Callouts: safety (red), tip (green), note (sand) */
.gp-callout{margin-top:18px;border-radius:16px;padding:16px 18px;font-size:15.5px;line-height:1.65;color:#3d332f;display:flex;gap:12px}
.gp-callout b{color:#2b2622}
.gp-callout::before{flex-shrink:0;font-size:18px;line-height:1.4}
.gp-callout.warn{background:#fbe9e4;border:1px solid rgba(167,51,27,.25)}
.gp-callout.warn::before{content:"⚠"}
.gp-callout.tip{background:#eef3e8;border:1px solid rgba(79,107,63,.22)}
.gp-callout.tip::before{content:"✦";color:#4f6b3f}
.gp-callout.note{background:#f8efe3;border:1px solid rgba(138,106,31,.2)}
.gp-callout.note::before{content:"ℹ";color:#8a6a1f}

/* Plain prose + lists inside sections */
.gp-prose{margin-top:14px;font-size:17px;line-height:1.75;color:#4a3f3a}
.gp-prose p+p{margin-top:12px}
.gp-prose a,.gp-faq a,.gp-tldr a,.gp-callout a{color:#a7331b;text-decoration:underline;text-underline-offset:2px}
.gp-prose h3{margin-top:22px;font-size:19px;font-weight:700;color:#2b2622}
.gp-list{margin-top:12px;display:grid;gap:8px}
.gp-list li{display:flex;gap:10px}
.gp-list li::before{content:"•";color:#a7331b;flex-shrink:0}
.gp-list.no li::before{content:"✕";color:#a7331b;font-weight:700}
.gp-list.yes li::before{content:"✓";color:#4f6b3f;font-weight:700}

/* Responsive table (amounts, schedules, age stages) */
.gp-table{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(140,113,107,.2);border-radius:16px;background:#fff}
.gp-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.5}
.gp-table th{background:#f8efe8;text-align:left;font-weight:700;color:#2b2622;padding:12px 14px}
.gp-table td{padding:12px 14px;border-top:1px solid rgba(140,113,107,.15);color:#4a3f3a;vertical-align:top}

/* FAQ accordion (one open at a time via <details name="gfaq">) */
.gp-faq{padding-top:64px}
.gp-faq-list{margin-top:18px;display:grid;gap:10px}
.gp-faq details{background:#fff;border:1px solid rgba(140,113,107,.2);border-radius:16px;padding:0 18px;transition:box-shadow .2s}
.gp-faq details[open]{box-shadow:0 18px 34px -26px rgba(110,60,40,.5);border-color:rgba(167,51,27,.25)}
.gp-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;font-weight:600;font-size:16px;line-height:1.4;color:#2b2622}
.gp-faq summary::-webkit-details-marker{display:none}
.gp-faq summary::after{content:"+";flex-shrink:0;font-size:24px;font-weight:400;color:#a7331b;transition:transform .2s}
.gp-faq details[open] summary::after{transform:rotate(45deg)}
.gp-faq details p{padding:0 0 18px;font-size:15.5px;line-height:1.7;color:#4a3f3a}

/* Related guides strip (uses the guide-card illustrations) */
.gp-related{padding-top:64px}
.gp-related-grid{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gp-related a{display:block;background:#fff;border:1px solid rgba(140,113,107,.2);border-radius:18px;padding:10px;transition:transform .2s,box-shadow .2s}
.gp-related a:hover{transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(110,60,40,.5)}
.gp-related img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.gp-related b{display:block;margin-top:10px;padding:0 4px 4px;font-family:inherit;font-size:15px;line-height:1.35;color:#2b2622}

/* Sources */
.gp-sources{margin-top:48px;padding-top:20px;border-top:1px solid rgba(140,113,107,.2);font-size:13.5px;line-height:1.6;color:#7a6560}
.gp-sources b{color:#4a3f3a}
.gp-sources ol{margin-top:8px;padding-left:18px;list-style:decimal;display:grid;gap:4px}
.gp-sources a{color:inherit;text-decoration:underline}

/* ---------- Mobile: tame the inline-styled guide layout ---------- */
@media (max-width:640px){
  .pv-page{padding:28px 16px 64px!important}
  .pv-page h1{font-size:32px!important;line-height:1.12!important}
  .pv-page h1+p{font-size:17px!important}
  .pv-page h2{font-size:24px!important}
  .pv-page section{padding-top:40px!important}
  /* hero image a little shorter */
  .pv-page>img:first-of-type{aspect-ratio:16/10!important;border-width:5px!important;border-radius:16px!important}
  /* jump links: one swipeable row instead of three wrapped rows */
  .pv-page>nav{flex-wrap:nowrap!important;overflow-x:auto;margin-left:-16px!important;margin-right:-16px!important;padding:0 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pv-page>nav::-webkit-scrollbar{display:none}
  .pv-page>nav a{flex-shrink:0;white-space:nowrap}
  /* step headers: smaller avatar */
  .pv-page section>div:first-child>img{width:52px!important;height:52px!important}
  .pv-page section>div:first-child{gap:12px!important}
  .gp-prose,.pv-page section>div[style*="font-size:17px"]{font-size:16px!important}
  .gp-tldr{padding:16px 16px}
  .gp-tldr p{font-size:16px}
  .gp-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .gp-related b{font-size:14px}
  .gp-faq,.gp-related{padding-top:48px}
}
@media (max-width:380px){
  .gp-related-grid{grid-template-columns:1fr}
}

/* ---------- Standard article layout (all guides, both templates) ----------
   Site container is 1180px. On wide screens: content column + sticky "On this page" sidebar.
   Below 1100px: one column, jump links become a swipeable row. */
.pv-page,
body[data-page="schedule"] main>div>div.mx-auto{width:100%;box-sizing:border-box;max-width:1180px!important;margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important}
body[data-page="schedule"] main .max-w-xl,body[data-page="schedule"] main .max-w-2xl,body[data-page="schedule"] main .max-w-3xl,body[data-page="schedule"] main .max-w-4xl{max-width:none!important}
.pv-page>*,body[data-page="schedule"] main>div>div.mx-auto>*{min-width:0}
@media (min-width:1100px){
  .pv-page,
  body[data-page="schedule"] main>div>div.mx-auto{display:grid!important;grid-template-columns:minmax(0,1fr) 248px;column-gap:64px;align-items:start}
  .pv-page>*,
  body[data-page="schedule"] main>div>div.mx-auto>*{grid-column:1;width:100%}
  /* the jump nav moves into the sidebar and stays in view */
  .pv-page>nav,
  body[data-page="schedule"] main>div>div.mx-auto>nav{grid-column:2!important;grid-row:1 / span 80;position:sticky;top:104px;align-self:start;
    display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:2px!important;margin-top:0!important;
    padding:18px 16px!important;background:#fff;border:1px solid rgba(140,113,107,.2);border-radius:18px;width:auto}
  .pv-page>nav::before,
  body[data-page="schedule"] main>div>div.mx-auto>nav::before{content:"On this page";display:block;padding:0 10px 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a7331b}
  .pv-page>nav a,
  body[data-page="schedule"] main>div>div.mx-auto>nav a{display:block!important;border:0!important;background:transparent!important;border-radius:10px!important;padding:7px 10px!important;font-size:14.5px!important;line-height:1.35;color:#4a3f3a;white-space:normal}
  .pv-page>nav a:hover,
  body[data-page="schedule"] main>div>div.mx-auto>nav a:hover{background:#f8efe8!important;color:#a7331b}
}
@media (max-width:640px){
  body[data-page="schedule"] main>div>div.mx-auto{padding-left:16px!important;padding-right:16px!important}
  body[data-page="schedule"] main h1{font-size:32px!important;line-height:1.12!important}
  body[data-page="schedule"] main nav.b100-reveal,body[data-page="schedule"] main .gp-jump{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
}
@media (max-width:640px){
  .pv-page,body[data-page="schedule"] main>div>div.mx-auto{padding-left:16px!important;padding-right:16px!important}
}

/* ---- feeding schedule: sample-day timeline ---- */
.sd-legend{display:flex;flex-wrap:wrap;gap:8px}
.sd-legend>span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:999px;font-size:13px;font-weight:600;background:var(--sd-bg);color:var(--sd-fg)}
.sd-legend .material-symbols-outlined{font-size:17px}
.sd-milk{--sd-fg:#a7331b;--sd-bg:#fbe9e4;--sd-line:rgba(167,51,27,.28)}
.sd-food{--sd-fg:#8a5a12;--sd-bg:#f8edd9;--sd-line:rgba(138,90,18,.28)}
.sd-sleep{--sd-fg:#4f6b3f;--sd-bg:#e9f0e2;--sd-line:rgba(79,107,63,.28)}
.sd-tl{list-style:none;margin:0;padding:0;position:relative}
.sd-tl::before{content:"";position:absolute;left:119px;top:24px;bottom:24px;width:2px;background:repeating-linear-gradient(to bottom,rgba(140,113,107,.28) 0 6px,transparent 6px 12px)}
.sd-item{display:grid;grid-template-columns:92px 56px minmax(0,1fr);align-items:start;column-gap:0;position:relative}
.sd-item+.sd-item{margin-top:14px}
.sd-time{padding-top:14px;text-align:right;padding-right:6px}
.sd-time b{display:block;font-family:Newsreader,serif;font-size:24px;line-height:1.1;font-weight:500;color:#2b2622;font-variant-numeric:lining-nums tabular-nums}
.sd-time small{display:block;margin-top:2px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a6560}
.sd-node{display:flex;justify-content:center;padding-top:10px;position:relative;z-index:1}
.sd-node span{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:21px;background:var(--sd-bg);color:var(--sd-fg);box-shadow:0 0 0 4px #FFF8F5,0 0 0 5px var(--sd-line)}
.sd-card{background:#FFFDF9;border:1px solid rgba(140,113,107,.18);border-left:3px solid var(--sd-fg);border-radius:16px;padding:16px 20px;transition:box-shadow .2s,transform .2s}
.sd-card:hover{box-shadow:0 14px 30px -22px rgba(110,60,40,.45);transform:translateY(-1px)}
.sd-kind{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sd-fg)}
.sd-title{margin-top:2px;font-family:Newsreader,serif;font-size:21px;line-height:1.25;font-weight:500;color:#2b2622}
.sd-desc{margin-top:6px;font-size:15.5px;line-height:1.6;color:#4a3f3a}
.sd-chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.sd-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:#f6ece5;font-size:13.5px;font-weight:600;color:#2b2622}
.sd-chip img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#fff}
.sd-tip{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(140,113,107,.3);display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.5;color:#5c4f4a}
.sd-tip .material-symbols-outlined{font-size:17px;color:var(--sd-fg);margin-top:1px}
@media (max-width:640px){
.sd-tl::before{left:83px}
.sd-item{grid-template-columns:62px 44px minmax(0,1fr)}
.sd-time{padding-top:12px;padding-right:4px}
.sd-time b{font-size:19px}
.sd-time small{font-size:10px;letter-spacing:.03em}
.sd-node{padding-top:8px}
.sd-node span{width:34px;height:34px;font-size:18px;box-shadow:0 0 0 3px #FFF8F5,0 0 0 4px var(--sd-line)}
.sd-card{padding:14px 14px}
.sd-title{font-size:19px}
.sd-desc{font-size:15px}
}

/* ---- free printable: allergen bingo ---- */
.gp-printable{margin-top:56px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center;background:#FCF2EB;border:1px solid rgba(167,51,27,.18);border-radius:24px;padding:24px 28px}
.gp-printable a.pv{display:block;transform:rotate(-3deg);transition:transform .25s}
.gp-printable a.pv:hover{transform:rotate(-1deg) scale(1.02)}
.gp-printable a.pv img{display:block;width:100%;border-radius:8px;border:5px solid #fff;box-shadow:0 18px 34px -18px rgba(110,60,40,.55)}
.gp-printable .k{font-size:12px;font-weight:700;letter-spacing:.14em;color:#a7331b}
.gp-printable h2{margin-top:6px;font-family:Newsreader,serif;font-size:28px;line-height:1.15;color:#2b2622}
.gp-printable p.d{margin-top:8px;font-size:16px;line-height:1.6;color:#4a3f3a}
.gp-printable .btn{margin-top:16px;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:#a7331b;color:#fff;font-weight:600;font-size:15px;transition:background .2s}
.gp-printable .btn:hover{background:#8f2a15}
.gp-printable .btn .material-symbols-outlined{font-size:19px}
.gp-printable .meta{margin-top:10px;font-size:13px;color:#7a6560}
@media (max-width:640px){.gp-printable{grid-template-columns:1fr;padding:22px 18px;gap:20px}.gp-printable a.pv{width:62%;margin:0 auto}}
/* stamp rows: fixed column count per row so no single stamp is left alone on the last line */
.gp-stamps{margin-top:18px;display:grid;gap:14px;grid-template-columns:repeat(var(--c,3),minmax(0,1fr))}
.gp-stamps figure{min-width:0}
@media (max-width:640px){.gp-stamps{grid-template-columns:repeat(var(--cs,2),minmax(0,1fr))}}

/* FAQ section standard (2026-11-06) */
.gp-faq>h2::before{content:"FAQ";display:block;margin-bottom:10px;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a7331b}
.gp-faq>.fs-k+h2::before{display:none}
.gp-faq>h2{font-size:34px!important;line-height:1.15!important;font-weight:500}
.gp-faq-list{margin-top:20px!important;max-width:860px}
.gp-faq>.fs-k{font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;color:#a7331b!important;text-align:left!important;margin:0 0 10px!important}
.gp-faq>.fs-k+h2{text-align:left!important}
.gp-faq details{padding:0 20px!important}.gp-faq summary{font-size:16.5px!important;padding:17px 0!important}
.gp-faq summary::after{line-height:1!important}
.gp-colls{margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gp-colls span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8c716b;margin-right:4px}
.gp-colls a{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;border:1px solid #E8D5C8;background:#FCF2EB;color:#a7331b;font-size:14px;font-weight:600;text-decoration:none}
.gp-colls a:hover{background:#f8e3d6}