/*



 * MealGrid – Members Stylesheet



 * Version: 3.3.45



 * Applies to: all member-facing pages (login, index, day, meal, cookbook, recipe, shopping-list)



 * Does NOT apply to: /admin, /kitchen (those use mealgrid.css)



 *



 * Brand: Deep Terracotta + Forest Green + Cobalt Blue



 * Typography: Plus Jakarta Sans + DM Sans + Shadows Into Light Two



 * Digitalis Creative – digitaliscreative.com



 */







/* ── Google Fonts ─────────────────────────────────────────────────────────── */



/* Fonts loaded via <link> in each page head for performance */







/* ── CSS Variables ────────────────────────────────────────────────────────── */



:root {



  /* Primary — Deep Terracotta */



  --terra:              #A1280B;



  --terra-hover:        #B8300D;



  --terra-dark:         #751E0B;



  --terra-tint:         #F0C4B5;



  --terra-rgb:          161,40,11;







  /* Force accent RGB to terra — used by the bgGrid animation */



  --mg-accent-rgb:      161,40,11;







  /* Accent 1 — Forest Green */



  --green:              #3A8C4A;



  --green-hover:        #4DAF60;



  --green-dark:         #256634;



  --green-tint:         #B8E4C0;







  /* Accent 2 — Cobalt Blue */



  --cobalt:             #2563A8;



  --cobalt-hover:       #3478C5;



  --cobalt-dark:        #164278;



  --cobalt-tint:        #B0CAEA;







  /* Amber — dark backgrounds ONLY */



  --amber:              #f9b54b;



  --amber-hover:        #f5a623;







  /* Neutrals */



  --cream:              #FDF6EE;



  --surface:            #F0E6D8;



  --surface-2:          #E8D8C8;



  --dark:               #3D2314;



  --body-color:         #6B4C3B;



  --muted:              #9A7868;



  --rule:               #E8D8C8;







  /* Typography */



  --font-display:       'Plus Jakarta Sans', system-ui, sans-serif;



  --font-body:          'DM Sans', system-ui, sans-serif;



  --font-hand:          'Shadows Into Light Two', cursive;







  /* Nav */



  --nav-h:              60px;



  --nav-bg:             var(--terra);



  --nav-text:           #ffffff;



  --nav-hover:          #fdd79c;



  --nav-active:         #fdd79c;







  /* Shadows */



  --shadow-sm:          0 2px 8px rgba(61,35,20,0.06);



  --shadow-md:          0 6px 32px rgba(61,35,20,0.08);



  --shadow-lg:          0 12px 48px rgba(61,35,20,0.12);







  /* Radii */



  --radius-sm:          8px;



  --radius-md:          12px;



  --radius-lg:          20px;







  /* Transitions */



  --ease:               all 0.2s ease;



  --ease-bounce:        all 0.2s cubic-bezier(0.34,1.56,0.64,1);







  /* Layout */



  --sidebar-w:          260px;



  --content-max:        none;







  /* Chip colours (overridable per-install from settings) */



  --mg-chip-meal:       var(--terra);



  --mg-chip-takeout:    var(--cobalt);



  --mg-chip-new:        var(--green);



  --mg-chip-leftovers:  var(--green);



  --mg-chip-out:        var(--cobalt);



  --mg-chip-unplanned:  var(--muted);



  --mg-chip-baking:     #b45309;







  /* Backward compat aliases — keeps existing PHP inline styles working */



  --mg-accent:          var(--terra);



  --mg-accent-hover:    var(--terra-hover);



  --mg-font-display:    var(--font-display);



  --mg-font-body:       var(--font-body);



  --mg-text-primary:    var(--dark);



  --mg-text-secondary:  var(--body-color);



  --mg-text-muted:      var(--muted);



  --mg-border:          var(--rule);



  --mg-surface:         var(--surface);



  --mg-surface-2:       var(--surface-2);



  --mg-bg-start:        var(--cream);



  --mg-sidebar-width:   var(--sidebar-w);



}







/* ── Reset & Base ─────────────────────────────────────────────────────────── */



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }







html {



  font-size: 16px;



  scroll-behavior: smooth;



  -webkit-text-size-adjust: 100%;



}







body {



  font-family: var(--font-body);



  font-weight: 400;



  color: var(--body-color);



  background: var(--cream);



  min-height: 100vh;



  line-height: 1.6;



}







/* Subtle warm texture overlay */



body::before {



  content: '';



  position: fixed;



  inset: 0;



  background:



    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(161,40,11,0.04) 0%, transparent 60%),



    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(58,140,74,0.03) 0%, transparent 60%);



  pointer-events: none;



  z-index: -1;



}







body > * { position: relative; z-index: 1; }







/* Background image support */



#mg-bg-image {



  position: fixed !important;



  inset: 0;



  background-size: cover;



  background-position: center;



  background-repeat: no-repeat;



  opacity: 1;



  z-index: -2 !important;



}







/* ── Typography ───────────────────────────────────────────────────────────── */



h1, h2, h3, h4, h5, h6 {



  font-family: var(--font-display);



  font-weight: 800;



  letter-spacing: -0.03em;



  color: var(--dark);



  line-height: 1.2;



}







h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }



h2 { font-size: clamp(1.4rem, 3vw, 2rem); }



h3 { font-size: 1.25rem; }



h4 { font-size: 1.1rem; }







p { line-height: 1.65; }







a { color: var(--mg-accent); text-decoration: none; transition: var(--ease); }



a:hover { color: var(--terra-hover); }







strong { font-weight: 700; color: var(--dark); }







em { font-style: italic; color: var(--mg-accent); }







/* Eyebrow labels */



.eyebrow {



  font-family: var(--font-display);



  font-size: .8rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: .08em;



  color: var(--mg-accent);



  display: block;



  margin-bottom: .4rem;



}



.eyebrow-dark { color: var(--terra-tint); }







/* Handwritten accent */



.handwritten {



  font-family: var(--font-hand);



  font-size: 1.2em;



  color: var(--mg-accent);



}







/* ── The Card Pattern ─────────────────────────────────────────────────────── */



/* Asymmetric border — signature visual element from the site */



.mem-card {



  background: rgba(255,255,255,0.70);



  border-top:    4px solid var(--mg-accent);



  border-left:   4px solid var(--mg-accent);



  border-bottom: 1px solid color-mix(in srgb, var(--mg-accent) 30%, transparent);



  border-right:  1px solid color-mix(in srgb, var(--mg-accent) 30%, transparent);



  border-radius: var(--radius-lg);



  backdrop-filter: blur(4px);



  -webkit-backdrop-filter: blur(4px);



  box-shadow: var(--shadow-md);



  padding: 28px 32px;



}







/* Colour variants */



.mem-card--cobalt {



  border-top-color:    var(--cobalt);



  border-left-color:   var(--cobalt);



  border-bottom-color: var(--cobalt);



  border-right-color:  var(--cobalt);



}



.mem-card--green {



  border-top-color:    var(--green);



  border-left-color:   var(--green);



  border-bottom-color: var(--green);



  border-right-color:  var(--green);



}



.mem-card--amber {



  border-top-color:    var(--amber);



  border-left-color:   var(--amber);



  border-bottom-color: rgba(249,181,75,0.4);



  border-right-color:  rgba(249,181,75,0.4);



}







/* ── Buttons ──────────────────────────────────────────────────────────────── */



.btn {



  display: inline-flex;



  align-items: center;



  gap: .45rem;



  font-family: var(--font-display);



  font-size: .9rem;



  font-weight: 700;



  padding: 10px 22px;



  border-radius: 100px;



  border: none;



  cursor: pointer;



  transition: var(--ease);



  text-decoration: none;



  white-space: nowrap;



  line-height: 1;



}



.btn:disabled { opacity: .5; pointer-events: none; }







/* Primary — terra on light backgrounds */



.btn-primary {



  background: var(--terra);



  color: #fff;



}



.btn-primary:hover {



  background: var(--terra-dark);



  color: #fff;



  transform: translateY(-2px);



}







/* Secondary — outlined terra */



.btn-secondary {



  background: transparent;



  color: var(--mg-accent);



  border: 2px solid var(--terra);



}



.btn-secondary:hover {



  background: var(--terra);



  color: #fff;



  transform: translateY(-2px);



}







/* Green — shopping/success actions */



.btn-green {



  background: var(--green);



  color: #fff;



}



.btn-green:hover {



  background: var(--green-dark);



  color: #fff;



  transform: translateY(-2px);



}







/* Cobalt — info/planning actions */



.btn-cobalt {



  background: var(--cobalt);



  color: #fff;



}



.btn-cobalt:hover {



  background: var(--cobalt-dark);



  color: #fff;



  transform: translateY(-2px);



}







/* Amber — DARK BACKGROUNDS ONLY */



.btn-amber {



  background: var(--amber);



  color: var(--dark);



}



.btn-amber:hover {



  background: var(--amber-hover);



  color: var(--dark);



  transform: translateY(-2px);



}







/* Ghost */



.btn-ghost {



  background: transparent;



  color: var(--body-color);



  border: 1.5px solid var(--rule);



}



.btn-ghost:hover {



  background: var(--surface);



  color: var(--dark);



}







/* Sizes */



.btn-sm  { font-size: .78rem; padding: 7px 16px; }



.btn-lg  { font-size: 1rem;   padding: 14px 32px; }



.btn-xl  { font-size: 1.1rem; padding: 16px 40px; }



.btn-block { width: 100%; justify-content: center; }







/* Icon-only */



.btn-icon {



  padding: 9px;



  border-radius: 50%;



  width: 38px;



  height: 38px;



  justify-content: center;



}







/* ── Form Fields ──────────────────────────────────────────────────────────── */



.form-group {



  display: flex;



  flex-direction: column;



  gap: .35rem;



  margin-bottom: 1.1rem;



}







label, .form-label {



  font-family: var(--font-display);



  font-size: .82rem;



  font-weight: 700;



  color: var(--dark);



}







input[type="text"],



input[type="email"],



input[type="password"],



input[type="number"],



input[type="search"],



input[type="url"],



input[type="tel"],



select,



textarea {



  font-family: var(--font-body);



  font-size: .92rem;



  font-weight: 400;



  color: var(--dark);



  background: rgba(255,255,255,0.85);



  border: 1.5px solid var(--rule);



  border-radius: var(--radius-sm);



  padding: 11px 14px;



  width: 100%;



  transition: var(--ease);



  outline: none;



  appearance: none;



  -webkit-appearance: none;



}







input:focus, select:focus, textarea:focus {



  border-color: var(--mg-accent);



  background: #fff;



  box-shadow: 0 0 0 3px rgba(var(--terra-rgb),.12);



}







input::placeholder, textarea::placeholder { color: var(--muted); }







textarea { resize: vertical; min-height: 100px; line-height: 1.55; }







select {



  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239A7868' d='M6 8L0 0h12z'/%3E%3C/svg%3E");



  background-repeat: no-repeat;



  background-position: right 12px center;



  padding-right: 36px;



}







.form-hint {



  font-size: .75rem;



  color: var(--muted);



  margin-top: .15rem;



}







/* Checkbox / radio */



input[type="checkbox"],



input[type="radio"] {



  width: 17px;



  height: 17px;



  accent-color: var(--mg-accent);



  cursor: pointer;



  flex: none;



}







/* ── Navigation — matches mymealgrid.com site nav exactly ────────────────── */



.pub-nav {



  flex: 0 0 var(--nav-h);



  display: flex;



  align-items: center;



  height: var(--nav-h);



  background: var(--mg-accent, rgba(161,40,11,0.97)); /* overridden inline by public_header.php */



  border-bottom: 1px solid rgba(255,255,255,0.1);



  position: sticky;



  top: 0;



  z-index: 1001;



  width: 100%;



}







.pub-nav-inner {



  display: flex;



  align-items: center;



  justify-content: space-between;



  width: 100%;



  max-width: none;     /* override mealgrid.css max-width: 1600px */



  margin: 0;           /* override mealgrid.css margin: 0 auto */



  padding: 0 52px;



}







/* Logo text — same as site .nav-logo */



.pub-nav-logo-text {



  font-family: 'Plus Jakarta Sans', sans-serif;



  font-weight: 800;



  font-size: 19px;



  color: white;



  text-decoration: none;



  letter-spacing: -0.03em;



  flex: none;



}



.pub-nav-logo-text:hover { color: white; }







/* Nav links list — same as site .nav-links */



.pub-nav-links {



  display: flex;



  align-items: center;



  gap: 32px;



  list-style: none;



  margin: 0;



  padding: 0;



}







/* Nav link — same as site .nav-links a */



.pub-nav-link {



  font-family: 'Plus Jakarta Sans', sans-serif;



  font-size: 14px;



  font-weight: 500;



  color: #ffffff !important;



  text-decoration: none;



  transition: color 0.2s;



  display: flex;



  align-items: center;



  gap: .4rem;



  white-space: nowrap;



  /* Reset mealgrid.css structural overrides */



  border-radius: 0 !important;



  padding: 0 !important;



  opacity: 1 !important;



  background: none !important;



}



.pub-nav-link:hover {



  color: #fdd79c !important;



  background: none !important;



  opacity: 1 !important;



}



/* Use full compound selector to beat mealgrid.css specificity */



.pub-nav-link.pub-nav-active {



  color: #fdd79c !important;



  font-weight: 600 !important;



  background: none !important;



  opacity: 1 !important;



}







/* CTA button (avatar) — same as site .nav-cta but circular for initials */



.pub-nav-cta {



  background: white;



  color: var(--mg-accent) !important;



  padding: 8px 20px;



  border-radius: 100px;



  font-family: 'Plus Jakarta Sans', sans-serif;



  font-weight: 700;



  font-size: 13px;



  text-decoration: none;



  transition: transform 0.15s, box-shadow 0.15s;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  min-width: 36px;



  height: 36px;



  white-space: nowrap;



}



.pub-nav-cta:hover {



  color: var(--mg-accent) !important;



  transform: translateY(-1px);



  box-shadow: 0 4px 14px rgba(0,0,0,0.2);



}







/* Mobile */



@media (max-width: 768px) {



  .pub-nav-inner { padding: 0 20px; }



  .pub-nav-links { gap: 16px; }



  .pub-nav-link span,



  .pub-nav-link .fa { }



  .pub-nav-link { font-size: 14px; }



}







@media (max-width: 520px) {



  .pub-nav-links { gap: 10px; }



  .pub-nav-link i { display: none; }



  .pub-nav-link { font-size: 13px; }



}







/* ── Page Layout ──────────────────────────────────────────────────────────── */



.pub-wrap {



  max-width: var(--content-max);



  margin: 0 auto;



  padding: 28px 52px 60px;



}







.pub-wrap-full {



  padding: 28px 52px 60px;



}







/* ── Page Loader ──────────────────────────────────────────────────────────── */



.page-loader {



  display: none;



  position: fixed;



  inset: 0;



  z-index: 9999;



  background: rgba(253,246,238,.85);



  align-items: center;



  justify-content: center;



  backdrop-filter: blur(3px);



}



.page-loader.active { display: flex; }







.loader {



  width: 36px;



  height: 36px;



  border: 3px solid var(--surface-2);



  border-top-color: var(--mg-accent);



  border-radius: 50%;



  animation: spin .7s linear infinite;



}



@keyframes spin { to { transform: rotate(360deg); } }







/* ── Alerts & Toasts ──────────────────────────────────────────────────────── */



.alert {



  display: flex;



  align-items: center;



  gap: .6rem;



  padding: 12px 16px;



  border-radius: var(--radius-md);



  font-family: var(--font-display);



  font-size: .85rem;



  font-weight: 600;



  margin-bottom: 1rem;



}



.alert-success { background: var(--green-tint); color: var(--green-dark); border-left: 3px solid var(--green); }



.alert-error   { background: var(--terra-tint); color: var(--terra-dark); border-left: 3px solid var(--terra); }



.alert-info    { background: var(--cobalt-tint); color: var(--cobalt-dark); border-left: 3px solid var(--cobalt); }



.alert-warning { background: #fef3c7; color: #92400e; border-left: 3px solid var(--amber); }







/* ── Login Page ───────────────────────────────────────────────────────────── */



/* Force dark body for login — overrides mealgrid.css */



body.login-page {



  background: var(--dark) !important;



  min-height: 100vh;



}







/* Kill mealgrid.css body::before gradient on login */



body.login-page::before {



  background: none !important;



}



.login-wrap {



  min-height: 100vh;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 24px 16px;



  position: relative;



  background: var(--dark);



}







/* Dot pattern on dark login bg */



/* Background image layer */



.login-wrap .login-bg {



  position: fixed;



  inset: 0;



  background-image: url('../img/app.jpg');



  background-size: cover;



  background-position: center;



  background-repeat: no-repeat;



  opacity: .25;



  z-index: 0;



}







/* Dot pattern overlay */



.login-wrap::before {



  content: '';



  position: fixed;



  inset: 0;



  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);



  background-size: 28px 28px;



  pointer-events: none;



  z-index: 1;



}







/* Colour gradient overlay */



.login-wrap::after {



  content: '';



  position: fixed;



  inset: 0;



  background:



    radial-gradient(ellipse 60% 50% at 30% 50%, rgba(var(--mg-accent-rgb),0.35) 0%, transparent 65%),



    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(37,99,168,0.2) 0%, transparent 60%);



  pointer-events: none;



  z-index: 1;



}







.login-card {



  position: relative;



  z-index: 2;



  width: 100%;



  max-width: 400px;



  background: rgba(255,255,255,0.96);



  border-top:    4px solid var(--mg-accent);



  border-left:   4px solid var(--mg-accent);



  border-bottom: 1px solid color-mix(in srgb, var(--mg-accent) 30%, transparent);



  border-right:  1px solid color-mix(in srgb, var(--mg-accent) 30%, transparent);



  border-radius: var(--radius-lg);



  box-shadow: 0 24px 64px rgba(0,0,0,0.35);



  padding: 40px 36px;



  animation: loginFadeUp .4s ease both;



}







@keyframes loginFadeUp {



  from { opacity: 0; transform: translateY(16px); }



  to   { opacity: 1; transform: translateY(0); }



}







.login-logo {



  display: block;



  width: 52px;



  height: 52px;



  margin: 0 auto 1.2rem;



  object-fit: contain;



}







.login-card h2 {



  text-align: center;



  font-size: 1.5rem;



  color: var(--dark);



  margin-bottom: .25rem;



}







.login-card .text-muted {



  text-align: center;



  display: block;



  color: var(--muted);



  font-size: .85rem;



  margin-bottom: 1.75rem;



}







.login-card .btn-primary {



  width: 100%;



  justify-content: center;



  margin-top: .5rem;



  padding: 13px 22px;



  font-size: .95rem;



}







.login-card .forgot-link {



  display: block;



  text-align: center;



  margin-top: 1rem;



  font-size: .82rem;



  color: var(--muted);



}



.login-card .forgot-link:hover { color: var(--mg-accent); }







.login-card .back-link {



  display: block;



  text-align: center;



  margin-top: .75rem;



  font-size: .8rem;



  color: var(--muted);



}



.login-card .back-link:hover { color: var(--mg-accent); }







.login-footer-links {



  display: flex;



  justify-content: center;



  gap: 1rem;



  margin-top: 1.25rem;



  font-size: .72rem;



}



.login-footer-links a { color: var(--muted); }



.login-footer-links a:hover { color: var(--mg-accent); }







/* ── Calendar / Grid View ─────────────────────────────────────────────────── */



.pub-calendar-wrap {



  display: flex;



  gap: 24px;



  align-items: flex-start;



}







/* Calendar grid */



.pub-cal-grid {



  flex: 1;



  min-width: 0;



}







.pub-cal-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 1rem;



  flex-wrap: wrap;



  gap: .5rem;



}







.pub-cal-title {



  font-family: var(--font-display);



  font-size: 1.19rem;



  font-weight: 800;



  color: var(--dark);



  letter-spacing: -.03em;



}







.pub-cal-nav {



  display: flex;



  align-items: center;



  gap: .5rem;



}







.pub-cal-nav-btn {



  width: 36px;



  height: 36px;



  border-radius: 50%;



  border: 1.5px solid var(--rule);



  background: rgba(255,255,255,0.7);



  color: var(--body-color);



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  transition: var(--ease);



  text-decoration: none;



  font-size: .85rem;



}



.pub-cal-nav-btn:hover { background: var(--terra); color: #fff; border-color: var(--mg-accent); }







/* Day name headers */



.pub-cal-day-names {



  display: grid;



  grid-template-columns: repeat(7, 1fr);



  gap: 6px;



  margin-bottom: 6px;



}



.pub-cal-day-name {



  text-align: center;



  font-family: var(--font-display);



  font-size: .72rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: .06em;



  color: var(--muted);



  padding: 4px 0;



}







/* Calendar cells */



.pub-cal-cells {



  display: grid;



  grid-template-columns: repeat(7, 1fr);



  gap: 6px;



}







.pub-cal-cell {



  min-height: 90px;



  background: rgba(255,255,255,0.65);



  border: 1px solid var(--rule);



  border-radius: var(--radius-md);



  padding: 8px;



  position: relative;



  transition: var(--ease);



  cursor: pointer;



  overflow: hidden;



}







.pub-cal-cell:hover {



  border-color: var(--mg-accent);



  box-shadow: 0 4px 16px rgba(var(--terra-rgb),0.12);



  transform: translateY(-1px);



}







.pub-cal-cell.is-today {



  border-top: 3px solid var(--terra);



  border-left: 3px solid var(--terra);



  background: rgba(255,255,255,0.88);



}







.pub-cal-cell.is-other-month {



  opacity: .45;



  background: rgba(255,255,255,0.3);



}







.pub-cal-cell.is-past { opacity: .65; }







.pub-cal-cell-date {



  font-family: var(--font-display);



  font-size: .72rem;



  font-weight: 700;



  color: var(--muted);



  display: block;



  margin-bottom: 4px;



}







.pub-cal-cell.is-today .pub-cal-cell-date {



  color: var(--mg-accent);



  font-size: .75rem;



}







/* Meal chips in cells */



.pub-cal-chip {



  display: block;



  font-size: .6rem;



  font-weight: 600;



  font-family: var(--font-display);



  padding: 2px 6px;



  border-radius: 100px;



  margin-bottom: 3px;



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;



  color: #fff;



  background: var(--terra);



  line-height: 1.5;



}







/* Chip type colours */



.pub-cal-chip[data-type="takeout"]   { background: var(--cobalt); }



.pub-cal-chip[data-type="new"]       { background: var(--green); }



.pub-cal-chip[data-type="leftovers"] { background: var(--green-dark); }



.pub-cal-chip[data-type="out"]       { background: var(--cobalt-dark); }



.pub-cal-chip[data-type="unplanned"] { background: var(--muted); }







/* Vote badges */



.pub-cal-vote {



  position: absolute;



  top: 5px;



  right: 5px;



  display: flex;



  gap: 2px;



}



.pub-vote-dot {



  width: 6px;



  height: 6px;



  border-radius: 50%;



  background: var(--green);



}



.pub-vote-dot.meh  { background: var(--amber); }



.pub-vote-dot.nope { background: var(--terra); }







/* ── Shopping List ────────────────────────────────────────────────────────── */



.shopping-wrap {



  max-width: 800px;



  margin: 0 auto;



}







.shopping-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 1.5rem;



  flex-wrap: wrap;



  gap: .75rem;



}







.shopping-category {



  background: rgba(255,255,255,0.7);



  border-top:    4px solid var(--green);



  border-left:   4px solid var(--green);



  border-bottom: 1px solid var(--green-tint);



  border-right:  1px solid var(--green-tint);



  border-radius: var(--radius-lg);



  margin-bottom: 1rem;



  overflow: hidden;



  box-shadow: var(--shadow-sm);



}







.shopping-category-header {



  padding: 14px 20px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  cursor: pointer;



  user-select: none;



  background: rgba(184,228,192,0.2);



}







.shopping-category-name {



  font-family: var(--font-display);



  font-size: .9rem;



  font-weight: 700;



  color: var(--green-dark);



  text-transform: uppercase;



  letter-spacing: .05em;



}







.shopping-category-count {



  font-family: var(--font-display);



  font-size: .72rem;



  font-weight: 700;



  color: var(--green);



  background: var(--green-tint);



  padding: 2px 8px;



  border-radius: 100px;



}







.shopping-item {



  display: flex;



  align-items: center;



  gap: .85rem;



  padding: 12px 20px;



  border-top: 1px solid rgba(var(--green-tint), 0.5);



  transition: var(--ease);



  cursor: pointer;



}







.shopping-item:hover { background: rgba(58,140,74,0.04); }







.shopping-item.is-checked {



  opacity: .5;



}



.shopping-item.is-checked .shopping-item-name {



  text-decoration: line-through;



  color: var(--muted);



}







.shopping-check {



  width: 22px;



  height: 22px;



  border-radius: 50%;



  border: 2px solid var(--green);



  flex: none;



  display: flex;



  align-items: center;



  justify-content: center;



  transition: var(--ease-bounce);



  background: transparent;



}







.shopping-item.is-checked .shopping-check {



  background: var(--green);



  border-color: var(--green);



}







.shopping-item.is-checked .shopping-check::after {



  content: '';



  width: 6px;



  height: 10px;



  border: 2px solid #fff;



  border-top: none;



  border-left: none;



  transform: rotate(42deg) translateY(-1px);



  display: block;



}







.shopping-item-name {



  flex: 1;



  font-size: .9rem;



  color: var(--dark);



  font-weight: 500;



}







.shopping-item-qty {



  font-family: var(--font-display);



  font-size: .9rem;



  font-weight: 700;



  color: var(--muted);



  white-space: nowrap;



}







/* ── Cookbook ─────────────────────────────────────────────────────────────── */



.cookbook-wrap {



  display: flex;



  gap: 24px;



  align-items: flex-start;



}







.cookbook-sidebar {



  width: var(--sidebar-w);



  flex: none;



  position: sticky;



  top: calc(var(--nav-h) + 16px);



}







.cookbook-sidebar-card {



  background: rgba(255,255,255,0.7);



  border-top:    4px solid var(--cobalt);



  border-left:   4px solid var(--cobalt);



  border-bottom: 1px solid var(--cobalt-tint);



  border-right:  1px solid var(--cobalt-tint);



  border-radius: var(--radius-lg);



  padding: 20px;



  box-shadow: var(--shadow-sm);



}







.cookbook-filter-label {



  font-family: var(--font-display);



  font-size: .7rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: .06em;



  color: var(--dark);



  margin-bottom: .5rem;



  display: block;



}







.cookbook-filter-pill {



  display: block;



  padding: 7px 14px;



  border-radius: 100px;



  font-family: var(--font-display);



  font-size: .82rem;



  font-weight: 600;



  color: var(--body-color);



  text-decoration: none;



  transition: var(--ease);



  margin-bottom: 3px;



  cursor: pointer;



  border: none;



  background: transparent;



  width: 100%;



  text-align: left;



}



.cookbook-filter-pill:hover { background: var(--surface); color: var(--dark); }



.cookbook-filter-pill.active { background: var(--terra); color: #fff; }







.cookbook-grid {



  flex: 1;



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));



  gap: 20px;



  min-width: 0;



}







/* Recipe card */



.recipe-card {



  background: rgba(255,255,255,0.7);



  border-top:    4px solid var(--mg-accent);



  border-left:   4px solid var(--mg-accent);



  border-bottom: 1px solid var(--terra-tint);



  border-right:  1px solid var(--terra-tint);



  border-radius: var(--radius-lg);



  overflow: hidden;



  box-shadow: var(--shadow-sm);



  transition: var(--ease);



  cursor: pointer;



  display: flex;



  flex-direction: column;



}







.recipe-card:hover {



  transform: translateY(-3px);



  box-shadow: var(--shadow-md);



  border-color: var(--mg-accent);



}







.recipe-card-img {



  width: 100%;



  aspect-ratio: 16/10;



  object-fit: cover;



  display: block;



  background: var(--surface);



}







.recipe-card-img-placeholder {



  width: 100%;



  aspect-ratio: 16/10;



  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--muted);



  font-size: 2rem;



}







.recipe-card-body {



  padding: 16px 18px;



  flex: 1;



  display: flex;



  flex-direction: column;



  gap: .4rem;



}







.recipe-card-title {



  font-family: var(--font-display);



  font-size: .9rem;



  font-weight: 700;



  color: var(--dark);



  line-height: 1.3;



}







.recipe-card-meta {



  font-size: .8rem;



  color: var(--muted);



  display: flex;



  gap: .6rem;



  flex-wrap: wrap;



}







.recipe-card-badge {



  display: inline-block;



  font-family: var(--font-display);



  font-size: .75rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: .04em;



  padding: 2px 8px;



  border-radius: 100px;



  background: var(--terra-tint);



  color: var(--terra-dark);



}







/* ── Recipe Detail ────────────────────────────────────────────────────────── */



.recipe-detail-wrap {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 32px;



  align-items: start;



}







.recipe-detail-img {



  width: 100%;



  border-radius: var(--radius-lg);



  box-shadow: var(--shadow-md);



  aspect-ratio: 4/3;



  object-fit: cover;



  display: block;



}







.recipe-detail-content { /* right column */ }







.recipe-section-title {



  font-family: var(--font-display);



  font-size: .72rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: .07em;



  color: var(--mg-accent);



  margin-bottom: .6rem;



  margin-top: 1.4rem;



  display: flex;



  align-items: center;



  gap: .4rem;



}



.recipe-section-title:first-child { margin-top: 0; }



.recipe-section-title::after {



  content: '';



  flex: 1;



  height: 1px;



  background: var(--rule);



}







.ingredient-list { list-style: none; }



.ingredient-list li {



  display: flex;



  align-items: baseline;



  gap: .5rem;



  padding: 7px 0;



  border-bottom: 1px solid var(--rule);



  font-size: .9rem;



}



.ingredient-list li:last-child { border-bottom: none; }



.ingredient-qty {



  font-family: var(--font-display);



  font-weight: 700;



  color: var(--mg-accent);



  white-space: nowrap;



  min-width: 48px;



}







.step-list { list-style: none; counter-reset: steps; }



.step-item {



  display: flex;



  gap: 1rem;



  margin-bottom: 1.2rem;



  counter-increment: steps;



}



.step-num {



  width: 28px;



  height: 28px;



  border-radius: 50%;



  background: var(--terra);



  color: #fff;



  font-family: var(--font-display);



  font-size: .75rem;



  font-weight: 800;



  display: flex;



  align-items: center;



  justify-content: center;



  flex: none;



  margin-top: 2px;



}



.step-text { font-size: .9rem; line-height: 1.65; }







/* ── Day View ─────────────────────────────────────────────────────────────── */



.day-wrap {



  max-width: 880px;



  margin: 0 auto;



}







.day-header {



  text-align: center;



  margin-bottom: 2rem;



}







.day-date-label {



  font-family: var(--font-display);



  font-size: 1rem;



  font-weight: 700;



  color: var(--muted);



  text-transform: uppercase;



  letter-spacing: .08em;



}







.day-title {



  font-size: clamp(1.6rem, 4vw, 2.4rem);



  font-weight: 800;



  letter-spacing: -.035em;



  color: var(--dark);



}







.day-meal-card {



  background: rgba(255,255,255,0.70);



  border-top:    4px solid var(--mg-accent);



  border-left:   4px solid var(--mg-accent);



  border-bottom: 1px solid var(--terra-tint);



  border-right:  1px solid var(--terra-tint);



  border-radius: var(--radius-lg);



  box-shadow: var(--shadow-md);



  overflow: hidden;



  margin-bottom: 1.5rem;



}







.day-meal-card-header {



  padding: 20px 24px;



  border-bottom: 1px solid var(--rule);



  display: flex;



  align-items: center;



  gap: 1rem;



}







.day-meal-card-body { padding: 20px 24px; }







/* Voting */



.vote-row {



  display: flex;



  gap: .6rem;



  align-items: center;



  flex-wrap: wrap;



}







.vote-btn {



  display: flex;



  align-items: center;



  gap: .35rem;



  padding: 7px 16px;



  border-radius: 100px;



  border: 2px solid var(--rule);



  background: rgba(255,255,255,0.7);



  font-family: var(--font-display);



  font-size: .8rem;



  font-weight: 700;



  cursor: pointer;



  transition: var(--ease-bounce);



  color: var(--body-color);



}



.vote-btn:hover { transform: scale(1.05); }



.vote-btn.vote-love  { border-color: var(--green); }



.vote-btn.vote-love.active  { background: var(--green); color: #fff; border-color: var(--green); }



.vote-btn.vote-meh   { border-color: var(--amber); }



.vote-btn.vote-meh.active   { background: var(--amber); color: var(--dark); border-color: var(--amber); }



.vote-btn.vote-nope  { border-color: var(--mg-accent); }



.vote-btn.vote-nope.active  { background: var(--terra); color: #fff; border-color: var(--mg-accent); }







/* ── Dark Section (upsell / CTA / empty states) ───────────────────────────── */



.dark-section {



  background: var(--dark);



  border-radius: var(--radius-lg);



  padding: 48px 40px;



  text-align: center;



  position: relative;



  overflow: hidden;



}







.dark-section::before {



  content: '';



  position: absolute;



  inset: 0;



  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);



  background-size: 28px 28px;



  pointer-events: none;



}







.dark-section > * { position: relative; z-index: 1; }







.dark-section .eyebrow {



  color: var(--terra-tint);



}







.dark-section h2 {



  color: #fff;



  font-size: clamp(1.5rem, 3vw, 2.2rem);



}







.dark-section h2 em { color: var(--amber); }







.dark-section p {



  color: rgba(255,255,255,0.85);



  font-size: 1rem;



  font-weight: 500;



  max-width: 540px;



  margin: .75rem auto 1.5rem;



}







/* ── Empty States ─────────────────────────────────────────────────────────── */



.empty-state {



  text-align: center;



  padding: 60px 24px;



}







.empty-state-pip {



  width: 120px;



  height: 120px;



  object-fit: contain;



  margin: 0 auto 1.25rem;



  display: block;



  opacity: .9;



}







.empty-state h3 {



  font-size: 1.2rem;



  color: var(--dark);



  margin-bottom: .4rem;



}







.empty-state p {



  font-size: .88rem;



  color: var(--muted);



  max-width: 320px;



  margin: 0 auto 1.4rem;



}







/* ── Sidebar (calendar / cookbook) ───────────────────────────────────────── */



.pub-sidebar {



  width: var(--sidebar-w);



  flex: none;



  position: sticky;



  top: calc(var(--nav-h) + 16px);



  max-height: calc(100vh - var(--nav-h) - 32px);



  overflow-y: auto;



  scrollbar-width: thin;



  scrollbar-color: var(--rule) transparent;



  display: flex;



  flex-direction: column;



  gap: 16px;



}







.pub-sidebar-card {



  background: rgba(255,255,255,0.70);



  border-top:    4px solid var(--mg-accent);



  border-left:   4px solid var(--mg-accent);



  border-bottom: 1px solid var(--terra-tint);



  border-right:  1px solid var(--terra-tint);



  border-radius: var(--radius-lg);



  padding: 20px;



  box-shadow: var(--shadow-sm);



}







.pub-sidebar-title {



  font-family: var(--font-display);



  font-size: .72rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: .07em;



  color: var(--mg-accent);



  margin-bottom: .9rem;



}







/* ── Modals ───────────────────────────────────────────────────────────────── */



.mem-modal-backdrop {



  position: fixed;



  inset: 0;



  z-index: 1000;



  background: rgba(61,35,20,0.55);



  backdrop-filter: blur(4px);



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 20px;



  animation: fadeIn .2s ease;



}







.mem-modal {



  background: #fff;



  border-top:    4px solid var(--mg-accent);



  border-left:   4px solid var(--mg-accent);



  border-bottom: 1px solid var(--terra-tint);



  border-right:  1px solid var(--terra-tint);



  border-radius: var(--radius-lg);



  width: 100%;



  max-width: 560px;



  max-height: 90vh;



  overflow-y: auto;



  box-shadow: 0 24px 64px rgba(0,0,0,0.2);



  animation: modalSlideUp .25s ease;



}







.mem-modal-header {



  padding: 20px 24px;



  border-bottom: 1px solid var(--rule);



  display: flex;



  align-items: center;



  justify-content: space-between;



}







.mem-modal-title {



  font-family: var(--font-display);



  font-size: 1rem;



  font-weight: 800;



  color: var(--dark);



}







.mem-modal-close {



  width: 32px;



  height: 32px;



  border-radius: 50%;



  border: none;



  background: var(--surface);



  color: var(--muted);



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  transition: var(--ease);



  font-size: .9rem;



}



.mem-modal-close:hover { background: var(--terra); color: #fff; }







.mem-modal-body { padding: 24px; }



.mem-modal-footer {



  padding: 16px 24px;



  border-top: 1px solid var(--rule);



  display: flex;



  justify-content: flex-end;



  gap: .5rem;



}







@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



@keyframes modalSlideUp {



  from { opacity: 0; transform: translateY(20px); }



  to   { opacity: 1; transform: translateY(0); }



}







/* ── Badges & Tags ────────────────────────────────────────────────────────── */



.badge {



  display: inline-flex;



  align-items: center;



  gap: .3rem;



  font-family: var(--font-display);



  font-size: .6rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: .04em;



  padding: 3px 9px;



  border-radius: 100px;



}



.badge-terra  { background: var(--terra-tint);  color: var(--terra-dark); }



.badge-green  { background: var(--green-tint);  color: var(--green-dark); }



.badge-cobalt { background: var(--cobalt-tint); color: var(--cobalt-dark); }



.badge-muted  { background: var(--surface-2);   color: var(--muted); }



.badge-amber  { background: #fef3c7; color: #92400e; }







/* ── Utilities ────────────────────────────────────────────────────────────── */



.text-terra   { color: var(--mg-accent); }



.text-green   { color: var(--green); }



.text-cobalt  { color: var(--cobalt); }



.text-muted   { color: var(--muted); }



.text-dark    { color: var(--dark); }



.text-amber   { color: var(--amber); }







.text-xs  { font-size: .72rem; }



.text-sm  { font-size: .82rem; }



.text-lg  { font-size: 1.1rem; }



.text-xl  { font-size: 1.25rem; }







.text-center { text-align: center; }



.text-right  { text-align: right; }







.fw-700 { font-weight: 700; }



.fw-800 { font-weight: 800; }







.font-display { font-family: var(--font-display); }



.font-hand    { font-family: var(--font-hand); }







.mt-0 { margin-top: 0; }



.mt-1 { margin-top: .5rem; }



.mt-2 { margin-top: 1rem; }



.mt-3 { margin-top: 1.5rem; }



.mt-4 { margin-top: 2rem; }



.mb-0 { margin-bottom: 0; }



.mb-1 { margin-bottom: .5rem; }



.mb-2 { margin-bottom: 1rem; }



.mb-3 { margin-bottom: 1.5rem; }



.mb-4 { margin-bottom: 2rem; }







.gap-1 { gap: .5rem; }



.gap-2 { gap: 1rem; }







.d-flex   { display: flex; }



.d-grid   { display: grid; }



.align-center { align-items: center; }



.justify-between { justify-content: space-between; }



.flex-wrap { flex-wrap: wrap; }



.flex-1 { flex: 1; }







.w-100 { width: 100%; }



.rounded { border-radius: var(--radius-md); }



.rounded-lg { border-radius: var(--radius-lg); }



.rounded-full { border-radius: 100px; }







.divider {



  border: none;



  border-top: 1px solid var(--rule);



  margin: 1.5rem 0;



}







/* ── Scrollbar ────────────────────────────────────────────────────────────── */



::-webkit-scrollbar { width: 6px; height: 6px; }



::-webkit-scrollbar-track { background: transparent; }



::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 3px; }



::-webkit-scrollbar-thumb:hover { background: var(--muted); }







/* ── Responsive ───────────────────────────────────────────────────────────── */



@media (max-width: 900px) {



  .pub-calendar-wrap,



  .cookbook-wrap { flex-direction: column; }







  .pub-sidebar,



  .cookbook-sidebar { width: 100%; position: static; max-height: none; }







  .recipe-detail-wrap { grid-template-columns: 1fr; }



}







@media (max-width: 640px) {



  :root { --nav-h: 54px; }







  .pub-nav-inner { padding: 0 16px; }







  .pub-nav-title { display: none; }







  .pub-nav-links { gap: 0; }







  .pub-nav-link span { display: none; }







  .pub-nav-link { padding: 6px 10px; }







  .pub-wrap { padding: 16px 12px 48px; }







  .pub-cal-cells,



  .pub-cal-day-names { gap: 3px; }







  .pub-cal-cell { min-height: 60px; padding: 5px; }







  .pub-cal-cell-date { font-size: .65rem; }







  .pub-cal-chip { font-size: .55rem; padding: 1px 4px; }







  .dark-section { padding: 36px 20px; }







  .mem-modal { border-radius: var(--radius-md); }







  .cookbook-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }







  .login-card { padding: 28px 20px; }



}







@media (max-width: 420px) {



  .pub-cal-cells,



  .pub-cal-day-names { grid-template-columns: repeat(7, 1fr); gap: 2px; }







  .pub-cal-cell { min-height: 48px; }







  .pub-cal-chip { display: none; }







  .pub-cal-cell.has-meal::after {



    content: '';



    display: block;



    width: 6px;



    height: 6px;



    border-radius: 50%;



    background: var(--terra);



    margin: 2px auto 0;



  }



}







/* ═══════════════════════════════════════════════════════════════════════════



   GRID VIEW — index.php overrides



   ═══════════════════════════════════════════════════════════════════════════ */







/* Fix animated bg-grid to use terra palette instead of old teal */



/* Cells need much higher opacity on light backgrounds than dark */



#mg-bg-grid { display: none !important; }



.mg-grid-cell {



  border: 1px solid rgba(var(--mg-accent-rgb),0.10) !important;



  opacity: 1 !important;



  background: transparent !important;



}



.mg-grid-cell.lit {



  opacity: 1 !important;



  background: rgba(var(--mg-accent-rgb),0.05) !important;



  border-color: rgba(var(--mg-accent-rgb),0.18) !important;



}



body.has-bg-image .mg-grid-cell.lit {



  background: rgba(var(--mg-accent-rgb),0.06) !important;



  border-color: rgba(var(--mg-accent-rgb),0.20) !important;



}







/* Page layout */



.pub-layout {



  max-width: none;



  margin: 0;



  padding: 24px 52px 60px;



  display: grid;



  grid-template-columns: 280px 1fr;



  gap: 20px;



  align-items: start;



}







/* Core card — apply the signature asymmetric border */



.pub-card {



  background: #ffffffb8 !important;



  border-top:    4px solid var(--mg-accent) !important;



  border-left:   4px solid var(--mg-accent) !important;



  border-bottom: 1px solid var(--mg-accent) !important;



  border-right:  1px solid var(--mg-accent) !important;



  border-radius: var(--radius-lg) !important;



  box-shadow: none !important;



  backdrop-filter: blur(4px);



  -webkit-backdrop-filter: blur(4px);



}



/* Meal & recipe inner cards: uniform 1px accent border all sides */



.meal-inner-card,



.recipe-inner-card {



  border-top:    1px solid var(--mg-accent) !important;



  border-left:   1px solid var(--mg-accent) !important;



  border-bottom: 1px solid var(--mg-accent) !important;



  border-right:  1px solid var(--mg-accent) !important;



  border-radius: var(--radius-lg) !important;



}







/* Kill the shadow and background from mealgrid.css pub-cal-card */



.pub-cal-card {



  box-shadow: none !important;



  background: transparent !important;



  border: none !important;



  overflow: hidden !important;



  border-radius: 16px !important;



}



/* Item 4: cal-wrap background */



.cal-wrap {



  box-shadow: none !important;



  border-radius: 0 !important;



  background: rgba(253,253,253,0.65) !important;



}



/* Item 6: pub-view-bar uses user primary colour */



.pub-view-bar {



  background: var(--mg-accent) !important;



  border-bottom: none !important;



  border-radius: 0 !important;



}



/* Month title and nav arrows inherit accent-on-color for contrast */



.pub-view-bar .pub-month-nav,



.pub-view-bar .pub-month-nav a,



.pub-view-bar .pub-month-nav span {



  color: var(--mg-accent-on-color, #ffffff) !important;



  border-color: rgba(255,255,255,0.3) !important;



}



.pub-view-bar .pub-month-nav a:hover {



  background: rgba(255,255,255,0.15) !important;



  border-color: rgba(255,255,255,0.6) !important;



  color: var(--mg-accent-on-color, #ffffff) !important;



}



/* Grid/List toggle buttons inside view bar */



.pub-view-bar .pub-view-toggle {



  margin-left: auto;



}



/* Inactive pill text — dark so it reads against white pill container */



.pub-view-bar .pub-view-btn {



  color: #3D2314 !important;



}



/* Active pill — accent bg with on-colour text */



.pub-view-bar .pub-view-btn.active {



  background: var(--mg-accent) !important;



  color: var(--mg-accent-on-color, #ffffff) !important;



}







/* Calendar header — month title + nav */



.pub-cal-month-header {



  display: flex;



  align-items: center;



  justify-content: space-between;



  margin-bottom: 1rem;



}







/* Weekday name row */



.cal-weekdays {



  display: grid;



  grid-template-columns: repeat(7, 1fr);



  gap: 4px;



  margin-bottom: 4px;



}







.cal-weekday {



  text-align: center;



  font-family: var(--font-display);



  font-size: .7rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: .06em;



  color: #3D2314;



  padding: 6px 0;



  background: #ffffff;



}







/* Calendar grid */



.cal-grid {



  display: grid;



  grid-template-columns: repeat(7, 1fr);



  gap: 5px;



}







/* Individual day cells */



.cal-day {



  min-height: 88px;



  background: rgba(255,255,255,0.65) !important;



  border: 1px solid var(--rule) !important;



  border-radius: var(--radius-md) !important;



  padding: 7px 7px 5px !important;



  position: relative;



  transition: var(--ease);



  overflow: hidden;



  box-shadow: none !important;



}







.cal-day:hover {



  border-color: var(--mg-accent) !important;



  box-shadow: 0 4px 16px rgba(var(--terra-rgb),0.10) !important;



  transform: translateY(-1px);



  background: rgba(255,255,255,0.90) !important;



}







/* Today cell */



.cal-day.today {



  border-top:   3px solid var(--mg-accent) !important;



  border-left:  3px solid var(--mg-accent) !important;



  background: rgba(255,255,255,0.92) !important;



}







/* Other month cells */



.cal-day.other-month {



  background: rgb(255 255 255 / 45%) !important;



  border-color: rgb(232 216 200) !important;



  opacity: .6;



}







/* Full-bleed dinner image cell */



.cal-day.has-dinner-img {



  padding: 0 !important;



}



.cal-day.has-dinner-img .cal-day-number {



  position: absolute !important;



  top: 5px !important;



  left: 6px !important;



  z-index: 2 !important;



  width: 22px !important;



  height: 22px !important;



  border-radius: 50% !important;



  background: #ffffff !important;



  color: #3D2314 !important;



  box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;



  display: flex !important;



  align-items: center !important;



  justify-content: center !important;



  font-size: .72rem !important;



  font-weight: 700 !important;



}



/* Today keeps its solid terra circle */



.cal-day.has-dinner-img.today .cal-day-number {



  background: var(--mg-accent) !important;



  color: #ffffff !important;



}



.cal-dinner-full {



  position: absolute;



  inset: 0;



  border-radius: inherit;



  overflow: hidden;



  z-index: 1;



}







/* Day number always above content */



.cal-day-number {



  font-family: var(--font-display) !important;



  font-size: .72rem !important;



  font-weight: 700 !important;



  color: #3D2314 !important;



  display: block;



  margin-bottom: 3px;



  text-decoration: none !important;



}



.cal-day.today .cal-day-number {



  color: #ffffff !important;



  display: flex !important;



  align-items: center !important;



  justify-content: center !important;



}







/* Meal chips inside cells */



.cal-meal-chip {



  display: flex !important;



  font-size: .63rem !important;



  font-weight: 600 !important;



  font-family: var(--font-display) !important;



  padding: 2px 5px !important;



  border-radius: 6px !important;



  margin-bottom: 3px !important;



  color: #3D2314 !important;



  text-decoration: none !important;



  line-height: 1.4 !important;



  transition: var(--ease) !important;



}



.cal-meal-chip:hover { opacity: .88; transform: none; }







/* Chip colours by type — light tint bg, dark brown text for cream background */



.cal-meal-chip.chip-meal,



.cal-meal-chip.type-meal      { background: color-mix(in srgb, var(--mg-chip-meal,      #A1280B) 15%, transparent) !important; border-color: color-mix(in srgb, var(--mg-chip-meal,      #A1280B) 30%, transparent) !important; color: #3D2314 !important; }



.cal-meal-chip.chip-takeout,



.cal-meal-chip.type-takeout   { background: color-mix(in srgb, var(--mg-chip-takeout,   #af02b3) 15%, transparent) !important; border-color: color-mix(in srgb, var(--mg-chip-takeout,   #af02b3) 30%, transparent) !important; color: #3D2314 !important; }



.cal-meal-chip.chip-new,



.cal-meal-chip.type-new       { background: color-mix(in srgb, var(--mg-chip-new,       #f16701) 15%, transparent) !important; border-color: color-mix(in srgb, var(--mg-chip-new,       #f16701) 30%, transparent) !important; color: #3D2314 !important; }



.cal-meal-chip.chip-leftovers,



.cal-meal-chip.type-leftovers { background: color-mix(in srgb, var(--mg-chip-leftovers, #158113) 15%, transparent) !important; border-color: color-mix(in srgb, var(--mg-chip-leftovers, #158113) 30%, transparent) !important; color: #3D2314 !important; }



.cal-meal-chip.chip-out,



.cal-meal-chip.type-out       { background: color-mix(in srgb, var(--mg-chip-out,       #eb11b0) 15%, transparent) !important; border-color: color-mix(in srgb, var(--mg-chip-out,       #eb11b0) 30%, transparent) !important; color: #3D2314 !important; }



.cal-meal-chip.chip-unplanned,



.cal-meal-chip.type-unplanned { background: color-mix(in srgb, var(--mg-chip-unplanned, #cd0a0a) 15%, transparent) !important; border-color: color-mix(in srgb, var(--mg-chip-unplanned, #cd0a0a) 30%, transparent) !important; color: #3D2314 !important; }



.cal-meal-chip.chip-baking,



.cal-meal-chip.type-baking    { background: color-mix(in srgb, var(--mg-chip-baking,    #b45309) 15%, transparent) !important; border-color: color-mix(in srgb, var(--mg-chip-baking,    #b45309) 30%, transparent) !important; color: #3D2314 !important; }







/* Month nav arrows */



.pub-cal-nav a,



.cal-nav-btn {



  width: 34px;



  height: 34px;



  border-radius: 50%;



  border: 1.5px solid var(--rule);



  background: rgba(255,255,255,0.7);



  color: var(--body-color);



  display: inline-flex;



  align-items: center;



  justify-content: center;



  text-decoration: none;



  transition: var(--ease);



  font-size: .85rem;



}



.pub-cal-nav a:hover,



.cal-nav-btn:hover {



  background: var(--terra);



  color: #fff;



  border-color: var(--mg-accent);



}







/* Grid/List toggle pills */



.pub-view-toggle .btn,



#btnGridView, #btnListView {



  font-family: var(--font-display) !important;



  font-weight: 700 !important;



  border-radius: 100px !important;



}







/* "On the Menu this Week" sidebar rows */



.menu-week-row {



  display: flex;



  align-items: baseline;



  gap: .5rem;



  padding: 8px 0;



  border-bottom: 1px solid var(--rule);



  font-size: .85rem;



}



.menu-week-row:last-child { border-bottom: none; }







.menu-week-day {



  font-family: var(--font-display);



  font-size: .7rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: .05em;



  color: var(--muted);



  width: 28px;



  flex: none;



}







.menu-week-num {



  font-family: var(--font-display);



  font-weight: 700;



  color: var(--dark);



  font-size: .82rem;



  flex: none;



}







/* Tonight badge */



.tonight-badge {



  background: var(--terra);



  color: #fff;



  font-family: var(--font-display);



  font-size: .62rem;



  font-weight: 700;



  padding: 2px 8px;



  border-radius: 100px;



  text-transform: uppercase;



  letter-spacing: .04em;



}







/* Quick links (glinks) */



.pub-glink {



  background: #ffffffb8 !important;



  border: 1px solid var(--rule) !important;



  border-radius: var(--radius-md) !important;



  box-shadow: var(--shadow-sm) !important;



  transition: var(--ease) !important;



}



.pub-glink:hover {



  border-color: var(--mg-accent) !important;



  transform: translateY(-2px) !important;



  box-shadow: var(--shadow-md) !important;



}



.pub-glink-icon {



  background: var(--terra-tint) !important;



  border-color: rgba(var(--mg-accent-rgb),0.15) !important;



  border-radius: 10px !important;



}



.pub-glink-title {



  font-family: var(--font-display) !important;



  font-weight: 700 !important;



  color: var(--dark) !important;



}



.pub-glink-sub {



  color: var(--muted) !important;



}







/* Sidebar section titles */



.pub-card h3,



.pub-card .card-title {



  font-family: var(--font-display);



  font-weight: 800;



  color: var(--dark);



  letter-spacing: -.02em;



}







/* "On the Menu" header */



.menu-week-section h3,



.menu-week-section .pub-sidebar-title {



  font-size: .72rem;



  font-weight: 700;



  text-transform: uppercase;



  letter-spacing: .07em;



  color: var(--mg-accent);



  margin-bottom: .75rem;



}







/* Mobile */



@media (max-width: 820px) {



  .pub-layout {



    grid-template-columns: 1fr;



    padding: 16px 12px 48px;



  }



  .cal-day { min-height: 60px; }



  .cal-meal-chip { font-size: .55rem !important; }



}







/* ── Background Image Fix ─────────────────────────────────────────────────── */



/* When a bg image is set, make body transparent so #mg-bg-image (z-index:-2) shows through */



body.has-bg-image {



  background: transparent !important;



}







/* Cream wash sits between image and grid animation */



body.has-bg-image::before {



  background:



    linear-gradient(160deg,



      rgba(253,246,238,0.82) 0%,



      rgba(240,230,216,0.78) 55%,



      rgba(232,216,200,0.78) 100%) !important;



  z-index: -1 !important;



}







/* ═══════════════════════════════════════════════════════════════════════════



   PUBLIC FOOTER  —  matches mymealgrid.com footer drawer exactly



   Role-aware nav columns; static (not fixed), full-width, dark



   v3.4.13



═══════════════════════════════════════════════════════════════════════════ */







/* Footer colours (hardcoded to match website — not user-customisable) */



:root {



    --pf-bg:          #3d2314;



    --pf-border:      rgba(255,255,255,0.08);



    --pf-text:        #ffffff;



    --pf-terra:       #A1280B;



    --pf-terra-hover: #B8300D;



    --pf-terra-tint:  #F0C4B5;



    --pf-amber:       #f9b54b;



    --pf-link-hover:  #fdd79c;



    --pf-social-hover:#b8e4c0;



    --pf-legal:       #FDF6EE;



}







.pub-footer {



    background:   #3d2314 !important;



    border-top:   1px solid rgba(255,255,255,0.08);



    padding:      44px 52px 36px;



    font-family:  'DM Sans', sans-serif;



    color:        #ffffff !important;



    margin-top:   60px;



    position:     relative;



    z-index:      10;



}







/* ── Grid layout ── */



.pub-footer-grid {



    display:               grid;



    grid-template-columns: 220px 1fr 1fr 1fr 280px;



    gap:                   0 48px;



    margin-bottom:         36px;



    align-items:           start;



}







/* ── Brand column ── */



.pub-footer-brand-name {



    font-family:     'Plus Jakarta Sans', sans-serif;



    font-size:       17px;



    font-weight:     800;



    color:           #ffffff;



    letter-spacing:  -0.025em;



    margin-bottom:   10px;



}



.pub-footer-brand-name em {



    font-style: normal;



    color:      #F0C4B5;



}



.pub-footer-tagline {



    font-size:     13.5px;



    color:         #ffffff;



    line-height:   1.65;



    margin-bottom: 0;



}



.pub-footer-socials {



    display:     flex;



    gap:         16px;



    margin-top:  24px;



    flex-wrap:   wrap;



}



.pub-footer-socials a {



    color:          #ffffff;



    display:        flex;



    align-items:    center;



    transition:     color 0.2s;



    text-decoration:none;



}



.pub-footer-socials a:hover { color: #b8e4c0; }







/* ── Nav columns ── */



.pub-footer-col h4 {



    font-family:    'Plus Jakarta Sans', sans-serif;



    font-size:      11px;



    font-weight:    700;



    text-transform: uppercase;



    letter-spacing: 0.15em;



    color:          #f9b54b;



    margin-bottom:  16px;



    margin-top:     0;



}



.pub-footer-col ul {



    list-style: none;



    display:    flex;



    flex-direction: column;



    gap:        11px;



    padding:    0;



    margin:     0;



}



.pub-footer-col a {



    font-size:       14px;



    color:           #ffffff;



    text-decoration: none;



    transition:      color 0.2s;



}



.pub-footer-col a:hover { color: #fdd79c; }







/* ── Newsletter column ── */



.pub-footer-newsletter-sub {



    font-size:     13.5px;



    color:         #ffffff;



    line-height:   1.6;



    margin-bottom: 16px;



    margin-top:    0;



}



.pub-footer-newsletter-input {



    width:         100%;



    padding:       11px 16px;



    background:    rgba(255,255,255,0.06);



    border:        1px solid rgba(255,255,255,0.12);



    border-radius: 8px;



    color:         #ffffff;



    font-size:     14px;



    font-family:   'DM Sans', sans-serif;



    outline:       none;



    margin-bottom: 10px;



    box-sizing:    border-box;



    transition:    border-color 0.2s;



}



.pub-footer-newsletter-input::placeholder { color: rgba(255,255,255,0.4); }



.pub-footer-newsletter-input:focus        { border-color: rgba(255,255,255,0.35); }



.pub-footer-newsletter-btn {



    width:       100%;



    padding:     12px;



    background:  #A1280B;



    color:       #ffffff;



    border:      none;



    border-radius: 8px;



    cursor:      pointer;



    font-family: 'Plus Jakarta Sans', sans-serif;



    font-size:   14px;



    font-weight: 700;



    transition:  background 0.2s, transform 0.15s;



}



.pub-footer-newsletter-btn:hover {



    background: #B8300D;



    transform:  translateY(-1px);



}



.pub-footer-newsletter-thanks {



    font-size:   14px;



    color:       #b8e4c0;



    font-weight: 600;



    margin:      8px 0 0;



    animation:   pub-footer-fadein 0.4s ease;



}



@keyframes pub-footer-fadein {



    from { opacity: 0; transform: translateY(4px); }



    to   { opacity: 1; transform: translateY(0); }



}







/* ── Bottom bar ── */



.pub-footer-bottom {



    border-top: 1px solid rgba(255,255,255,0.06);



    padding-top: 18px;



    display:    flex;



    align-items: center;



    justify-content: space-between;



    flex-wrap:  wrap;



    gap:        10px;



}



.pub-footer-copy { font-size: 12px; color: #ffffff; }



.pub-footer-legal {



    display: flex;



    gap:     20px;



}



.pub-footer-legal a {



    font-size:       12px;



    color:           #FDF6EE;



    text-decoration: none;



    transition:      color 0.2s;



}



.pub-footer-legal a:hover { color: #fdd79c; }







/* ── Responsive ── */



@media (max-width: 1200px) {



    .pub-footer { padding: 40px 32px 28px; }



    .pub-footer-grid { grid-template-columns: 200px 1fr 1fr 1fr 240px; gap: 0 32px; }



}



@media (max-width: 1024px) {



    .pub-footer-grid {



        grid-template-columns: 1fr 1fr;



        gap: 32px;



    }



    .pub-footer-brand-col { grid-column: 1 / -1; }



    .pub-footer-newsletter-col { grid-column: 1 / -1; }



    .pub-footer-newsletter-input,



    .pub-footer-newsletter-btn { max-width: 380px; }



}



@media (max-width: 640px) {



    .pub-footer { padding: 36px 20px 24px; margin-top: 40px; }



    .pub-footer-grid { grid-template-columns: 1fr; gap: 28px; }



    .pub-footer-newsletter-col { grid-column: auto; }



    .pub-footer-newsletter-input,



    .pub-footer-newsletter-btn { max-width: 100%; }



    .pub-footer-bottom { flex-direction: column; text-align: center; gap: 12px; }



}




/* ── Member Utility Classes ────────────────────────────────────────────────── */
/* Replaces common inline styles across index, day, meal, cookbook, recipe,    */
/* shopping-list pages. Scoped to member pages only — not /admin or /kitchen.  */

/* Uppercase section eyebrow label */
.mem-eyebrow-sm {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--dark);
  margin-bottom: .45rem;
}

/* Pill tags / chips */
.mem-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .7rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--ease);
}
.mem-tag--teal {
  background: color-mix(in srgb, var(--mg-teal, var(--cobalt)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mg-teal, var(--cobalt)) 25%, transparent);
  color: var(--mg-teal, var(--cobalt));
}
.mem-tag--accent {
  padding: .15rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--terra) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--terra) 25%, transparent);
  color: var(--terra);
}

/* Teal outline pill link (navigation / back links) */
.mem-pill-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .28rem .65rem;
  border-radius: 50px;
  border: 1.5px solid var(--mg-teal, var(--cobalt));
  background: transparent;
  color: var(--mg-teal, var(--cobalt));
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--ease);
  white-space: nowrap;
}
.mem-pill-link:hover {
  background: color-mix(in srgb, var(--mg-teal, var(--cobalt)) 10%, transparent);
  color: var(--mg-teal, var(--cobalt));
}

/* Card header row */
.mem-card-hdr {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mem-card-hdr--sm {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--rule);
}

/* Accent square icon holder */
.mem-icon-sq {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: color-mix(in srgb, var(--terra) 12%, transparent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Step number circle */
.mem-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mg-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* Ingredient / list row */
.mem-ing-row {
  display: flex;
  gap: .65rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}

/* Hero image (day, meal, recipe) */
.mem-hero-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* Small image thumbnail */
.mem-img-thumb {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
}
.mem-img-thumb--placeholder {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

/* Bold section heading within content */
.mem-section-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Sticky sidebar / aside */
.mem-sticky-aside {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  align-self: start;
}

/* Search / filter input */
.mem-search-input {
  width: 100%;
  padding: .45rem .65rem .45rem 2rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: .8rem;
  font-family: var(--font-body);
  background: #ffffff;
  color: var(--dark);
  box-sizing: border-box;
}
.mem-search-input:focus {
  outline: none;
  border-color: var(--terra);
}
.mem-select-input {
  width: 100%;
  padding: .42rem .65rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: .8rem;
  font-family: var(--font-body);
  background: #ffffff;
  color: var(--dark);
}

/* Filter pill (active/inactive state driven by PHP inline for now) */
.mem-filter-pill {
  padding: .25rem .6rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--dark);
  font-family: var(--font-body);
  transition: var(--ease);
}
.mem-filter-pill.active,
.mem-filter-pill:hover {
  border-color: var(--terra);
  background: var(--terra);
  color: #fff;
}

/* Empty / loading fallback */
.mem-empty {
  text-align: center;
  padding: 3rem;
  color: var(--muted);
}

/* Cover image card bleed (Today card / Dashboard hero) */
.mem-card-img-bleed {
  margin: -1.25rem -1.25rem 1rem;
  overflow: hidden;
  height: 220px;
  border-radius: 16px 16px 0 0;
  position: relative;
  background: var(--terra);
}