/* Icing -- a bright, playful theme for cooking/baking blogs. Colour
   scheme mirrors the looping video banner's own cartoon palette (see
   static/video/banner.webm): icing pink, yellow, orange and blue over a
   warm cream page background. See templates/layout.html for the normal
   TTB v2 area/widget structure this skins. */

:root {
  --icing-pink: #ff6fae;
  --icing-pink-light: #ffd6ea;
  --icing-yellow: #ffc93c;
  --icing-yellow-light: #fff3c4;
  --icing-orange: #ff9257;
  --icing-orange-light: #ffe0c7;
  --icing-blue: #57b8ea;
  --icing-blue-light: #d9edfb;
  --icing-cream: #fffaf0;
  --icing-card-bg: #ffffff;
  --icing-border: #ffe1ce;
  --icing-text: #5b3a29;
  --icing-muted: #9a7b6a;

  /* --- Recipe typography system ---
     A post with only "section 1" (a plain write-up) gets the intro/
     write-up font on its whole body -- see .tb-post-content below.
     A recipe post's dedicated sections (description / ingredients /
     method / photos) are rendered by a separate widget that hasn't
     shipped yet; when it does, it should emit these four class names
     so it automatically inherits the right font from this theme:
       .tb-recipe-description  -- section 1, intro/write-up
       .tb-recipe-ingredients  -- section 2, ingredients list
       .tb-recipe-method       -- section 3, method/steps
       .tb-recipe-photos       -- section 4, photo gallery
     Each is also a per-widget "Style > Font" override point (blank =
     inherit this default, per SPEC.md's style cascade) once that widget
     exists, so a blog owner can still pick something else per recipe. */
  --font-intro: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-ingredients: ui-monospace, "SFMono-Regular", "Courier New", Consolas, "Liberation Mono", monospace;
  --font-method: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-method);
  color: var(--icing-text);
  background: var(--icing-cream);
  line-height: 1.6;
}
a { color: var(--icing-pink); text-decoration: none; }
a:hover { color: var(--icing-orange); }

.page { min-height: 100vh; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 3rem; }

/* ------------------------------------------------------ video banner --- */

.area-header { margin-bottom: 1.5rem; }
.tb-video-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(120deg, var(--icing-pink-light), var(--icing-yellow-light) 35%, var(--icing-orange-light) 68%, var(--icing-blue-light));
}
.tb-video-banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tb-video-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(91, 58, 41, 0.55);
}
.tb-video-banner-overlay h1, .tb-video-banner-overlay h2 {
  margin: 0;
  font-family: var(--font-intro);
  letter-spacing: 0.01em;
}

/* -------------------------------------------------------- areas/widgets --- */

.page-columns {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.area-main, .area-main-view { flex: 1 1 auto; min-width: var(--tb-main-min-w, 0); }
.area-sidebar.sidebar-left { flex: 0 0 var(--tb-sidebar-left-w, 260px); min-width: 0; }
.area-sidebar.sidebar-right { flex: 0 0 var(--tb-sidebar-right-w, 260px); min-width: 0; }

.area-main, .area-main-view, .area-sidebar, .area-footer {
  background: var(--icing-card-bg);
  border: 1px solid var(--icing-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(255, 111, 174, 0.08);
}
.area-main, .area-main-view { padding: 0.25rem; }
.area-sidebar { padding: 1.1rem 1.25rem; }
.area-footer {
  margin-top: 1.5rem;
  padding: 0.9rem 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--icing-muted);
}

.tb-widget { padding: 1.25rem 1.4rem; margin-bottom: 1rem; border-radius: 12px; }
.area-main > .tb-widget:last-child,
.area-main-view > .tb-widget:last-child,
.area-sidebar > .tb-widget:last-child { margin-bottom: 0; }

.tb-widget-title {
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--icing-pink);
}

.tb-filter-banner {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.75rem 1.4rem;
  border-bottom: 1px dashed var(--icing-border);
  margin-bottom: 0.5rem;
}
.tb-filter-banner select, .tb-filter-banner input {
  background: var(--icing-cream); color: var(--icing-text);
  border: 1px solid var(--icing-border); border-radius: 8px;
  padding: 0.35rem 0.55rem; font-size: 0.85rem;
}
.tb-filter-banner button {
  background: var(--icing-pink); color: #fff; border: none;
  border-radius: 999px; padding: 0.4rem 1rem; font-weight: 600; cursor: pointer;
}
.tb-filter-banner button:hover { background: var(--icing-orange); }

.tb-post-card, .tb-post-full {
  padding: 1.4rem 1.5rem;
  margin: 0.75rem;
  background: var(--icing-cream);
  border: 1px solid var(--icing-border);
  border-radius: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.area-main > .tb-post-card:first-child,
.area-main > .tb-post-full:first-child,
.area-main > article:first-child,
.area-main-view > .tb-post-card:first-child,
.area-main-view > .tb-post-full:first-child,
.area-main-view > article:first-child { margin-top: 1rem; }
.tb-post-card:hover { border-color: var(--icing-pink); transform: translateY(-2px); }
.tb-post-card h3 { margin: 0 0 0.3rem; }
.tb-post-card h3 a, .tb-post-full h1 { color: var(--icing-text); }
.tb-post-card h3 a:hover { color: var(--icing-pink); }
.tb-post-full h1 { font-family: var(--font-intro); margin-top: 0; }
.tb-post-date { color: var(--icing-muted); font-size: 0.82rem; margin-bottom: 0.6rem; }
.tb-post-excerpt { color: var(--icing-text); opacity: 0.9; }
.tb-read-more { color: var(--icing-orange); font-weight: 600; font-size: 0.88rem; }
.tb-read-more:hover { color: var(--icing-pink); }
.tb-empty { text-align: center; color: var(--icing-muted); font-style: italic; padding: 2.5rem 1rem; }

.tb-page-matrix { display: grid; gap: 1rem; padding: 0.75rem; }
.tb-matrix-box {
  position: relative;
  display: flex; align-items: flex-end; padding: 1rem;
  border-radius: 12px; background: var(--icing-pink-light);
  border: 1px solid var(--icing-border);
  color: var(--icing-text);
  min-height: 120px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tb-matrix-box:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255, 146, 87, 0.25); }
.tb-matrix-square { aspect-ratio: 1; }
.tb-matrix-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(91, 58, 41, 0.65));
}
.tb-matrix-title { position: relative; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* Default post-body font (the "write-up" sections) -- see the
   --font-intro comment above for how a recipe widget's own sections
   should override this per-class once it exists. */
.tb-post-content { margin-top: 1.25rem; font-family: var(--font-intro); }
.tb-post-content img { max-width: 100%; border-radius: 12px; }
.tb-post-content pre {
  background: var(--icing-blue-light); padding: 1rem; border-radius: 10px; overflow-x: auto;
  font-family: var(--font-ingredients);
}
.tb-post-content blockquote {
  border-left: 3px solid var(--icing-pink); margin-left: 0; padding-left: 1rem; color: var(--icing-muted);
}

/* Recipe section fonts, ready for the upcoming recipe-display widget --
   see the --font-intro comment above. */
.tb-recipe-description { font-family: var(--font-intro); }
.tb-recipe-ingredients {
  font-family: var(--font-ingredients);
  letter-spacing: 0.02em;
  background: repeating-linear-gradient(
    var(--icing-cream), var(--icing-cream) 1.4em,
    var(--icing-border) 1.4em, var(--icing-border) calc(1.4em + 1px)
  );
  background-position: 0 0.3em;
  border: 1px dashed var(--icing-border);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
}
.tb-recipe-ingredients ul, .tb-recipe-ingredients ol { padding-left: 1.2em; }
.tb-recipe-method { font-family: var(--font-method); }
.tb-recipe-photos { font-family: var(--font-method); }
.tb-recipe-photos img { border-radius: 12px; }

/* archive: year > month roll-up, see widgets.py render_blog_archive */
.tb-archive-year { margin-bottom: 1rem; }
.tb-archive-year:last-child { margin-bottom: 0; }
.tb-archive-year > summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--icing-pink); }
.tb-archive-year > summary::-webkit-details-marker { display: none; }
.tb-archive-month { margin: 0.5rem 0 0.5rem 1rem; }
.tb-archive-month summary { cursor: pointer; list-style: none; color: var(--icing-muted); }
.tb-archive-month summary::-webkit-details-marker { display: none; }
.tb-archive-month ul, .tb-archive-group ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.tb-archive-month li, .tb-archive-group li { margin-bottom: 0.4rem; }
.tb-archive-month a, .tb-archive-group a { color: var(--icing-text); font-size: 0.9rem; }
.tb-archive-month a:hover, .tb-archive-group a:hover { color: var(--icing-pink); }
.tb-archive-group > summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--icing-pink); }
.tb-archive-group > summary::-webkit-details-marker { display: none; }

.tb-tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tb-tag-chip {
  padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8rem;
  background: var(--icing-blue-light); border: 1px solid var(--icing-border);
  color: #2b6f91;
}
.tb-tag-chip:hover { background: var(--icing-pink-light); color: var(--icing-pink); }

.tb-more {
  display: block; text-align: center; margin: 1rem;
  padding: 0.6rem; border-radius: 999px;
  background: var(--icing-yellow-light); border: 1px solid var(--icing-border);
  color: #a05a00; font-weight: 600;
}
.tb-more:hover { color: var(--icing-pink); }

.back-link { display: inline-block; margin-top: 1.5rem; color: var(--icing-pink); }
.back-link:hover { color: var(--icing-orange); }

/* -------------------------------------------------------- responsive --- */

/* Keep the shared engine's own 768px breakpoint (see SPEC.md "Keep your
   own narrow-screen breakpoint... at exactly 768px") for anything this
   theme adjusts itself at the same width. */
@media (max-width: 768px) {
  .tb-video-banner { min-height: 200px !important; }
}