/*
 * Shared responsive sidebar engine for TTB v2 ("area/widget") themes.
 * A theme's own layout.html/CSS controls the desktop arrangement; this
 * stylesheet only takes over at narrow widths, per-sidebar, based on
 * whichever of "sidebar-pullout" / "sidebar-above" / "sidebar-below" the
 * blog owner picked for that sidebar. Include once via {{ layout_css() }}.
 */
:root {
  --tb-narrow-breakpoint: 768px;
}

/*
 * Stacking-context fix: #area-page (the page wrapper every v2 theme's
 * layout.html splices {{ page_attrs }} onto), every area's own wrapper
 * (.area -- since it can now carry its own background/border via
 * {{ area_own_style.* }}, same as the page), and every widget's own
 * wrapper (.tb-widget) need to establish their OWN stacking context.
 * Without this, a decorative negative-z-index child (e.g. Skyline's
 * fixed, z-index:-1 sky/cloud/star backdrop, or a widget's/area's own
 * translucent-background-image ::before layer -- see widgets.py
 * _style_css) escapes past its own non-positioned parent to the
 * document root instead, and paints *behind* the root's own normal
 * content -- which means a plain background-color set on the page (or
 * on that area/widget) via the Style modal, with no z-index tricks of
 * its own, still ends up painted *in front of* that decorative element,
 * hiding it completely. `isolation: isolate` fixes this with no other
 * visual effect: it scopes any negative z-index inside back to just
 * behind that one element's own background, never further out.
 */
#area-page, .area, .tb-widget {
  isolation: isolate;
}

/*
 * A theme's layout.html always renders BOTH the `main` (browse) and
 * `main_view` (a single opened post) areas, and puts .tb-hidden on
 * whichever one page_type says isn't the current view -- see SPEC.md
 * "The page area, and the six widget areas". Keeping both in the DOM at
 * once (rather than only rendering the active one) is what lets `main`
 * always reflect the same sort/tag/keyword filter state a reader left
 * behind when they opened a post, ready the moment they close it again.
 */
.tb-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .page-columns { display: flex; flex-direction: column; }
  .area-main, .area-main-view { order: 1; }
  .area-sidebar.sidebar-above { order: 0; }
  .area-sidebar.sidebar-below { order: 2; }

  /*
   * Override whatever fixed desktop column width a theme's own CSS gave
   * this sidebar (e.g. `.area-sidebar.sidebar-left { flex: 0 0 240px }`)
   * -- once `.page-columns` above has switched to a *column* flex
   * direction, an un-overridden `flex-basis` of 240px would set this
   * sidebar's HEIGHT to 240px instead (flex-basis follows the main
   * axis, which is now vertical), clipping/overflowing an "above"/
   * "below" sidebar instead of letting it grow to fit its content. Same
   * specificity (two classes) as every theme's own left/right rule, so
   * this wins purely because this shared stylesheet is always linked
   * after a theme's own -- see SPEC.md "Adjustable column widths".
   * Desktop-only width settings (--tb-sidebar-left-w etc.) never apply
   * here either, by the same mechanism.
   */
  .area-sidebar.sidebar-above, .area-sidebar.sidebar-below {
    flex: 1 1 auto;
    width: 100%;
  }

  .area-sidebar.sidebar-pullout {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 82%;
    max-width: 320px;
    overflow-y: auto;
    z-index: 1000;
    background: var(--tb-sidebar-bg, #fff);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease;
  }
  .area-sidebar.sidebar-pullout.sidebar-left { left: 0; transform: translateX(-100%); }
  .area-sidebar.sidebar-pullout.sidebar-right { right: 0; transform: translateX(100%); }
  .area-sidebar.sidebar-pullout.tb-sidebar-open { transform: translateX(0); }

  .tb-sidebar-toggle {
    position: fixed;
    top: 12px;
    z-index: 1001;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
  }
  .tb-sidebar-toggle.tb-toggle-left { left: 12px; }
  .tb-sidebar-toggle.tb-toggle-right { right: 12px; }

  .tb-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
  }
  .tb-sidebar-backdrop.tb-open { display: block; }
}

@media (min-width: 769px) {
  .tb-sidebar-toggle, .tb-sidebar-backdrop { display: none !important; }
}

.tb-filter-banner { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; align-items: center; }
.tb-filter-banner input, .tb-filter-banner select { padding: 0.35rem 0.5rem; }
.tb-page-list, .tb-featured-posts, .tb-popular-posts { display: flex; flex-direction: column; gap: 1.25rem; }
.tb-post-card h3 { margin: 0 0 0.15rem; }
.tb-post-date { font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.3rem; }
.tb-page-matrix { display: grid; gap: 0.75rem; }
.tb-matrix-box {
  display: flex; align-items: flex-end; padding: 0.75rem; min-height: 100px;
  background: rgba(0, 0, 0, 0.06); text-decoration: none; color: inherit;
}
.tb-matrix-square { aspect-ratio: 1 / 1; }
.tb-matrix-rect { aspect-ratio: 4 / 3; }

/*
 * A box using "Use Icon image as background" / "Use first image as
 * background" (page_matrix's SPEC fields, see its own __init__.py
 * _bg_style()) -- background image/position/size all come in as inline
 * style from the widget itself; this just supplies the fixed parts: a
 * dark fallback behind a still-loading/transparent image, and a bottom
 * scrim (its own opacity set per-box via the --tb-matrix-scrim custom
 * property, computed from that image's average luminance) so the white
 * title text stays readable over any image content.
 */
.tb-matrix-box--bg {
  position: relative;
  background-color: #111;
  color: #fff;
}
.tb-matrix-box--bg .tb-matrix-title {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.tb-matrix-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 65%);
  opacity: var(--tb-matrix-scrim, 0.6);
  pointer-events: none;
}
.tb-tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tb-tag-chip {
  padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.08);
  text-decoration: none; color: inherit; font-size: 0.82rem;
}
.tb-archive-group summary { cursor: pointer; }
.tb-empty { opacity: 0.7; font-style: italic; }
.tb-more[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/*
 * .tb-view-close-row sits first inside the open post's own article
 * (view_post's render() passes it to render_open_post), floated into that
 * article's top corner -- see themes/widgets/view_post/__init__.py. A
 * float, never absolutely positioned, so the post title's text wraps
 * beside the buttons instead of colliding with them, and no separate row
 * of space is taken above the post. All three share the .tb-view-btn base
 * look (each can also carry its own inline color, set once on the theme
 * editor's Page panel); when more than one lands on the same side,
 * view_post's own markup order (not CSS) keeps them in priority order --
 * close nearest the page edge, then permalink, then edit -- so the
 * adjacent-sibling gap below applies regardless of how many buttons end
 * up in a row.
 */
.tb-view-close-row { margin: 0 0 0.5rem; white-space: nowrap; line-height: 0; }
.tb-view-close-row.tb-view-close-left { float: left; margin-right: 0.75rem; }
.tb-view-close-row.tb-view-close-right { float: right; margin-left: 0.75rem; }
.tb-post-open > .tb-view-close-row + h1,
.tb-post-open > .tb-view-close-row + .tb-view-close-row + h1 { margin-top: 0; }
.tb-view-close-row .tb-view-btn + .tb-view-btn { margin-left: 0.4rem; }
/*
 * Every button's box is the same fixed size (--tb-view-btn-width/height,
 * the theme editor's shared "Button box" size, else 2rem) and clips
 * whatever overflows it; each button's own --tb-icon-scale only sizes the
 * icon/image inside.
 */
.tb-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
  overflow: hidden;
  width: var(--tb-view-btn-width, 2rem);
  height: var(--tb-view-btn-height, 2rem);
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  text-decoration: none;
  font-size: calc(1rem * var(--tb-icon-scale, 1));
  line-height: 1;
}
.tb-view-close-icon, .tb-view-permalink-icon, .tb-view-edit-icon {
  width: calc(1.1rem * var(--tb-icon-scale, 1));
  height: calc(1.1rem * var(--tb-icon-scale, 1));
  object-fit: contain;
  max-width: none;
  max-height: none;
}
/* Never shrunk back to fit -- a scaled-up icon overflows and is clipped. */
.tb-view-btn > * { flex: none; }
.tb-view-btn:hover, .tb-view-btn:focus-visible {
  background: rgba(0, 0, 0, 0.12);
}
.tb-view-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/*
 * Multi-column post sections (themes/widgets/_listing.py's
 * _section_columns_html). The blank-line breaks come from here, not
 * inline, so responsive.js's fitSectionColumns can drop them
 * (.tb-no-breaks) when they don't fit -- see SPEC.md "Per-section styling
 * and columns". Without JavaScript, the minimum column width lets a
 * narrow screen use fewer columns than asked for, and forced word
 * wrapping keeps a long word from widening the page; both are switched
 * off while the script measures (.tb-cols-measuring), since they'd hide
 * the very overflow it's looking for.
 */
.tb-section-columns { column-width: 9em; overflow-wrap: anywhere; }
.tb-section-columns.tb-cols-measuring { column-width: auto; overflow-wrap: normal; }
.tb-section-columns[data-tb-breaks]:not(.tb-no-breaks) > .tb-col-piece:not(:last-child) {
  break-after: column;
}
/* With no breaks in play, `column-fill: auto` (fill each column in turn)
   on a container with no fixed height puts everything in the first
   column -- so balance instead, whatever `fit_fill` asked for. */
.tb-section-columns:not([data-tb-breaks]), .tb-section-columns.tb-no-breaks {
  column-fill: balance !important;
}
.tb-section-columns img, .tb-section-columns video { max-width: 100%; height: auto; }

/*
 * Phones: every nested layer -- the page wrapper, each area, each widget,
 * each post card and the open post itself -- gets a narrow 5px border
 * instead of each theme's desktop-sized padding/margins, which otherwise
 * stack up into a large share of a portrait phone's width. !important so
 * it also beats a padding set on a widget/area via the Style modal
 * (inline), on phones only. Same 768px breakpoint as the sidebar engine
 * above.
 */
@media (max-width: 768px) {
  .wrap {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 5px !important;
  }
  .page-columns { gap: 5px !important; }
  .area-header { margin-bottom: 5px !important; }
  .area-footer { margin-top: 5px !important; }
  .area-main, .area-main-view, .area-sidebar, .area-footer, .archive,
  .tb-widget, .tb-post-card, .tb-post-full, .tb-page-matrix {
    padding: 5px !important;
  }
  .tb-widget { margin-bottom: 5px !important; }
  .tb-post-card, .tb-post-full { margin: 5px !important; }
  .tb-page-list, .tb-featured-posts, .tb-popular-posts, .tb-page-matrix { gap: 5px !important; }
  .tb-filter-banner { padding-left: 5px !important; padding-right: 5px !important; }
  .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: 5px !important;
  }
}