/*
 HappyDay Farms global publishing shell
 Presentation-only layer for the original v5.3.6 blog bundle.
 All classes are hdf-* prefixed to avoid collisions with the React app.
*/
:root{
  --hdf-paper:#fbfaf6;
  --hdf-cream:#f6f0e5;
  --hdf-warm:#f3eadc;
  --hdf-ink:#1c1a17;
  --hdf-muted:#6f6a61;
  --hdf-line:#cfc7bb;
  --hdf-line-soft:#e6ded2;
  --hdf-clay:#BC5136;
  --hdf-clay-dark:#9f402b;
  --hdf-white:#fffefb;
  --hdf-wrap:min(1220px,calc(100% - 32px));
}
.hdf-global-shell-top,
.hdf-global-footer,
.hdf-global-menu{
  box-sizing:border-box;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.hdf-global-shell-top *,
.hdf-global-footer *,
.hdf-global-menu *{box-sizing:border-box}
.hdf-global-shell-top{
  position:relative;
  z-index:120;
  width:100%;
  margin:0;
  padding:14px 0;
  background:var(--hdf-cream);
  border-bottom:1px solid var(--hdf-line-soft);
}
.hdf-global-nav{
  width:var(--hdf-wrap);
  min-height:62px;
  margin:0 auto;
  padding:7px 10px 7px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid var(--hdf-ink);
  border-radius:999px;
  background:var(--hdf-white);
  color:var(--hdf-ink);
  box-shadow:0 9px 24px rgba(28,26,23,.07);
}
.hdf-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.hdf-brand-logo{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  padding:3px;
  overflow:hidden;
  border:1px solid var(--hdf-line);
  border-radius:50%;
  background:#fff;
}
.hdf-brand-logo img{width:100%;height:100%;object-fit:contain}
.hdf-brand-copy strong{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1;
  letter-spacing:-.015em;
}
.hdf-brand-copy small{
  display:block;
  margin-top:4px;
  color:var(--hdf-clay);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:8px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hdf-nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  margin-left:auto;
}
.hdf-nav-links a{
  color:#5f5a53;
  text-decoration:none;
  padding:10px 8px;
  border-radius:999px;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.hdf-nav-links a:hover{color:var(--hdf-ink);background:var(--hdf-warm)}
.hdf-nav-links a.active{
  color:#fff;
  background:var(--hdf-clay);
}
.hdf-menu-button{
  appearance:none;
  border:1px solid var(--hdf-ink);
  border-radius:999px;
  padding:11px 14px;
  background:var(--hdf-ink);
  color:#fff;
  cursor:pointer;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hdf-menu-button:hover{background:var(--hdf-clay);border-color:var(--hdf-clay)}
.hdf-global-menu{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:28px;
  background:var(--hdf-cream);
  color:var(--hdf-ink);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
}
.hdf-global-menu.open{opacity:1;visibility:visible;pointer-events:auto}
.hdf-global-menu nav{
  width:min(720px,100%);
  display:grid;
  gap:3px;
  text-align:center;
}
.hdf-global-menu a{
  color:var(--hdf-ink);
  text-decoration:none;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(32px,7vw,72px);
  line-height:.98;
  letter-spacing:-.04em;
}
.hdf-global-menu a:hover{color:var(--hdf-clay)}
.hdf-menu-close{
  position:absolute;
  top:22px;
  right:22px;
  width:44px;
  height:44px;
  border:1px solid var(--hdf-ink);
  border-radius:50%;
  background:var(--hdf-white);
  color:var(--hdf-ink);
  cursor:pointer;
  font-size:20px;
}
html.hdf-menu-open,html.hdf-menu-open body{overflow:hidden}

/* Brand the existing React header without changing its compiled code. */
.hdf-app-logo-slot{
  position:relative !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  padding:3px !important;
  display:grid !important;
  place-items:center !important;
  background:#fff !important;
  border:1px solid var(--hdf-line) !important;
  border-radius:50% !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
.hdf-app-logo-slot svg{display:none !important}
.hdf-app-logo-slot::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:url("/assets/brand/happyday-logo.webp") center/contain no-repeat;
}
.hdf-hide-original-footer{display:none !important}

/* About-page footer navigation, recolored to the blog's editorial palette. */
.hdf-global-footer{
  position:relative;
  z-index:10;
  width:100%;
  margin:0;
  padding:0 0 34px;
  background:var(--hdf-cream);
  color:var(--hdf-ink);
  border-top:2px solid var(--hdf-ink);
}
.hdf-footer-shell{
  width:var(--hdf-wrap);
  margin:0 auto;
  padding:34px 0 0;
}
.hdf-footer-main{
  display:grid;
  grid-template-columns:minmax(210px,.8fr) minmax(0,2.2fr);
  gap:52px;
}
.hdf-footer-brand .hdf-micro,
.hdf-footer-links h3{
  margin:0 0 14px;
  color:var(--hdf-clay);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:9px;
  font-weight:900;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hdf-footer-brand h2{
  margin:0 0 18px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(42px,5.5vw,76px);
  font-weight:700;
  line-height:.86;
  letter-spacing:-.055em;
}
.hdf-footer-brand p{
  max-width:310px;
  margin:0;
  color:var(--hdf-muted);
  font-size:13px;
  line-height:1.55;
}
.hdf-footer-right{display:grid;gap:22px}
.hdf-footer-links{
  display:grid;
  grid-template-columns:.8fr 1.25fr .95fr;
  gap:28px;
}
.hdf-footer-links a{
  display:block;
  padding:5px 0;
  color:var(--hdf-muted);
  text-decoration:none;
  font-size:12px;
}
.hdf-footer-links a:hover{color:var(--hdf-clay)}
.hdf-footer-badges{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
  padding-top:18px;
  border-top:1px solid var(--hdf-line);
}
.hdf-footer-badges a{
  min-height:76px;
  padding:7px;
  display:grid;
  place-items:center;
  gap:4px;
  color:var(--hdf-muted);
  text-decoration:none;
  border:1px solid var(--hdf-line);
  background:var(--hdf-white);
}
.hdf-footer-badges img{
  width:55px;
  height:42px;
  object-fit:contain;
}
.hdf-footer-badges span{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:7px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.hdf-footer-divider{
  height:1px;
  margin:26px 0 18px;
  background:var(--hdf-line);
}
.hdf-site-map{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
}
.hdf-site-map a{
  padding:9px 7px;
  color:var(--hdf-muted);
  text-decoration:none;
  text-align:center;
  border:1px solid var(--hdf-line);
  border-radius:999px;
  background:transparent;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:8px;
  font-weight:800;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.hdf-site-map a:hover{color:#fff;background:var(--hdf-clay);border-color:var(--hdf-clay)}
.hdf-legal{
  margin-top:18px;
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#847d73;
  border-top:1px solid var(--hdf-line);
  font-size:10px;
}
.hdf-legal a{color:inherit;text-decoration:none}
.hdf-legal a:hover{color:var(--hdf-clay)}

@media(max-width:1080px){
  .hdf-nav-links{display:none}
  .hdf-footer-main{grid-template-columns:1fr}
  .hdf-footer-links{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  :root{--hdf-wrap:min(100% - 20px,1220px)}
  .hdf-global-shell-top{padding:10px 0}
  .hdf-global-nav{min-height:58px;padding:6px 7px 6px 9px}
  .hdf-brand-logo{width:40px;height:40px;flex-basis:40px}
  .hdf-brand-copy strong{font-size:15px}
  .hdf-brand-copy small{display:none}
  .hdf-menu-button{padding:10px 12px}
  .hdf-footer-main{gap:30px}
  .hdf-footer-links{grid-template-columns:1fr}
  .hdf-footer-badges{grid-template-columns:repeat(3,1fr)}
  .hdf-site-map{grid-template-columns:repeat(2,1fr)}
  .hdf-legal{flex-direction:column}
}
@media(max-width:420px){
  .hdf-footer-badges{grid-template-columns:repeat(2,1fr)}
}