/* THE HEADER, one component, on every page that has one except the recipes.
 *
 * Every selector begins with `.ttc-hdr`, which app/headerstd.py puts on the
 * single `<section class="… intro …">` a page has and on nothing else. Nothing
 * here can reach another block -- which matters, because a sheet written for
 * the recipe page and loaded site-wide is exactly what took the container
 * apart on /contact/, /about/, /partner/ and the recipe lists.
 *
 * Tom's locked rules of 12 September:
 *   1  radius 40 on all four corners, everywhere
 *   2  64px from the top of the panel to the headline, 64px from the bottom
 *      of the last element to the bottom of the panel. Height follows the
 *      content: never fixed, never extra.
 *   3  inset to the content column, never full-bleed
 *   4  the same left padding on every header, and the share tab at the top
 *      right in its own white block, never over the headline
 *
 * TWO THINGS ABOUT HOW IT IS WRITTEN.
 *
 * In PIXELS, not rem. The theme's spacing is rem and its root font-size steps
 * down at five breakpoints, so the same rule is 64px at one window width and
 * 46 at another. That is how these drifted apart: `6rem 5rem 4rem 5rem` on the
 * panel and another `8rem` under the author row gave About 64 above and 115
 * below, and Partner 115/115.
 *
 * And the class is repeated four times. The theme's own rules go up to
 * `section.gt-block.intro .content .in.with-info`, which is five classes and
 * an element; a single `.ttc-hdr` loses to every one of them. `.ttc-hdr` x4
 * out-specifies them without an `!important` anywhere and without touching
 * the theme's stylesheet, which no other page can afford.
 *
 * The LAYOUT is the theme's and is left alone: the panel floats left, the
 * photograph is absolutely positioned down the right at full height. That is
 * already what Tom's Type A describes, and rebuilding it would put every one
 * of these 83 pages at risk to change nothing a reader sees.
 */

/* --- rule 1: the radius --------------------------------------------------- */
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr {
  border-radius: 40px;
  overflow: hidden;
}
/* the photograph's own rounding, so the inner edge is straight and the outer
 * corners come from the block clipping it */
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .img {
  border-radius: 0;
}

/* --- rule 2: 64 above, 64 below ------------------------------------------- */
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content {
  padding: 64px 51px;
}
/* the theme adds another 8rem under the author row; that is the 115 */
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .in,
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .in.with-info {
  padding: 0;
  margin: 0;
}
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .text { padding: 0; margin: 0; }
/* Rule 4: the same left padding on EVERY header. The Partner page wraps its
 * headline in a plain div carrying 20px of its own, which put that one
 * headline 20px right of all the others. The component's own 51 is the only
 * left inset a header gets; a wrapper inside the text adds none. */
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .text > div {
  padding-left: 0;
  padding-right: 0;
}
/* nothing at either end may add space of its own, or the 64 is not 64 */
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .text > :first-child { margin-top: 0; }
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .text > :last-child { margin-bottom: 0; }
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .in > :last-child { margin-bottom: 0; }
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .info {
  padding: 26px 0 0 0;
  margin: 0;
}
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .info .date { padding: 0; }

/* --- ONE H1, ONE SIZE (round 2, item 2) ----------------------------------- */
/* The page title, wherever it is: an About or Partner headline, a Columns
 * headline, "My Recipes", a category name. It was four different sizes
 * because the theme sets it in rem and its root steps at five breakpoints --
 * at a 1920 window Columns read 32px, Partner 41.6 and the recipe band 41.3,
 * and below 1200 the root goes back UP, so a phone had a bigger title than a
 * laptop. Locked in pixels: 36 / 30 / 26. */
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.11;
  font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
/* ROUND 4, B1. THIS WITHDRAWS EVERY EARLIER SCALE -- round 2's 36/30/26 and
 * round 3's 28 at 600. Every h1 on the site is 32px Montserrat bold at EVERY
 * width and never steps down. Nothing is bigger than 32, including the
 * recipe-list band, whose "keep a larger title" instruction is withdrawn too.
 */
/* A page with no header block of its own has its leading heading promoted to
 * the page's one h1. Under B1 it takes the one size like every other h1 --
 * the earlier rule gave it back the size its old tag had, which is now a
 * second size and is not allowed. */
h1.ttc-h1--was-h2, h1.ttc-h1--was-h3, h1.ttc-h1--was-h4,
h1.ttc-h1--own {
  font-size: 32px; font-weight: 700; line-height: 1.11;
  font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
/* ROUND 4, ITEM 1: the four pages that render no content at all still carry
 * their own title as the page's one h1. It is the first thing in the column,
 * so it takes the header box's own 30px above it. */
h1.ttc-h1--own {
  margin: 30px 0 0;
  color: var(--ttc-ink, #1d2327);
}

/* --- rule 4: the share tab, clear of the headline ------------------------- */
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .share-line {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  z-index: 3;
  margin: 0;
  padding: 12px 18px;
  background: #fff;
  border-radius: 0 40px 0 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
}
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .share-line .menu {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 0; list-style: none; float: none;
}
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .share-line .menu li {
  margin: 0; padding: 0; float: none; list-style: none;
}

/* --- TYPE C: the recipe-list band ----------------------------------------- */
/* Round 1 gave this band the 89px its own drawing shows. Round 2, item 2,
 * overrides that: now that the title is 36px like every other page's, the
 * band takes the same 64 above and 64 below and its height follows the
 * content instead of being fixed. QUESTIONS.md §21 records the change. */
.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c .content {
  padding: 64px 51px;
  width: 100%;
  display: flex;
  align-items: center;
}
.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c .in,
.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c .text { width: 100%; }
.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c h1 { margin: 0; }
.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c .share-line { display: none; }

/* The control row belongs to this header even though it is the band's next
 * sibling rather than a child of it, so it is reached from here -- and only
 * from here: `.ttc-hdr--c + .ttc-bar-holder` cannot match on a page that has
 * no Type C header, which is every page but the recipe lists. The general
 * sibling combinator rather than the adjacent one because the hub emits a
 * <link> for the bar's own stylesheet between the two.
 *
 *   the Filter bar 6px below the band
 *   the Organized-by box the same height as it
 *   and right-aligned to the column, which the row's 40px of right padding
 *   was holding it 40px short of
 */
.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c ~ .ttc-bar-holder .ttc-filter {
  margin-top: 6px;
}
.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c ~ .ttc-bar-holder .ttc-sortbox {
  height: 58px;
  margin-top: 6px;
}
.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c ~ .ttc-bar-holder .in > * {
  padding-right: 0;
}

/* --- the collapsing share tab (item 3) ------------------------------------ */
/* Desktop: the strip is open and the toggle is not there. Phone: one icon at
 * the top right, opening leftwards on a tap. */
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .ttc-hdr__share {
  display: none;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%;
  background: none; color: var(--hdr-ink, #2b2b2b);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .ttc-hdr__share svg { width: 20px; height: 20px; }

/* --- ITEM 3: THE PHOTOGRAPH COMES FIRST ON A NARROW SCREEN ---------------- */
/* The image is what sells the page, so on anything narrower than a laptop it
 * goes above the words and spans the full width -- and on a phone it is
 * square, which is the largest it can be without pushing the author row off
 * the screen. The section becomes a column and the photo is ordered ahead of
 * the panel; on desktop the theme's own layout is untouched. */
@media (max-width: 1023px) {
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr {
    display: flex;
    flex-direction: column;
  }
  /* THE PHOTOGRAPH STRETCHES. `flex: 1 1 auto` is the whole of A3's second
   * line: whatever vertical room the block has that the panel does not need
   * goes to the photograph, rather than being left as a gap. The panel is
   * `0 0 auto` so it is never the thing that gives way. */
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr > .img {
    order: -1;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    flex: 1 1 auto;
    right: auto;
    top: auto;
    border-radius: 0;
  }
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr > .content {
    order: 1;
    width: 100%;
    flex: 0 0 auto;
  }
  /* no auto-margin gaps between the text blocks on narrow */
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .text > *,
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content .in > * {
    margin-left: 0;
    margin-right: 0;
  }

  /* THE TAB COLLAPSES HERE, not at 480. This is the width at which the
   * photograph goes full-bleed across the block and the open strip is at its
   * widest; at 768 it reached the block's own right edge with nothing to
   * spare. One icon at the photograph's top right, the strip sliding out to
   * the LEFT of it on a tap, and a ceiling so it can never cross the edge. */
  /* ROUND 4, B3. Floating it 8px in from the corner left a white tab with a
   * 22px radius sitting on top of the photograph and reading as a sticker.
   * It goes back into the corner: top and right at 0, the block's own 40px
   * radius on the outer corner and 26 on the inner one, which is the folded
   * corner the desktop header already uses. The button is 44x44 so a
   * fingertip has something to land on. */
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .share-line {
    position: absolute;
    top: 0; right: 0; left: auto;
    padding: 4px 6px;
    border-radius: 0 40px 0 26px;
    justify-content: flex-end;
    flex-direction: row-reverse;
    max-width: calc(100% - 16px);
    z-index: 4;
  }
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .ttc-hdr__share {
    display: inline-flex;
    width: 44px; height: 44px;
  }
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .share-line .menu {
    width: 0;
    overflow: hidden;
    gap: 0;
    transition: width .18s ease, gap .18s ease;
  }
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .share-line.is-open .menu {
    width: auto;
    gap: 10px;
    padding-right: 6px;
  }
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .share-line__label { display: none; }
}

/* --- narrow --------------------------------------------------------------- */
/* Round 2 stepped the title twice, at 768 and at 480. Round 3 replaces both
 * with one step at 600, so a header reads 36 all the way down to 601 and 28
 * below it. The gutters still come in twice, because a 20px gutter at 700px
 * wide would be mean and a 51px one at 390 leaves no line length. */
@media (max-width: 767px) {
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content { padding: 64px 28px; }
  .ttc-hdr--c.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c .content { padding: 64px 28px; }
}
@media (max-width: 480px) {
  .ttc-hdr.ttc-hdr.ttc-hdr.ttc-hdr .content { padding: 64px 20px; }
  .ttc-hdr--c.ttc-hdr--c.ttc-hdr--c.ttc-hdr--c .content { padding: 64px 20px; }
}


/* --- THE PHONE BUDGET, LAST SO IT WINS ------------------------------------
 * Item 3: on a 390x844 viewport the whole header -- photo, headline, intro
 * and author row -- must be visible without scrolling, and the PHOTO is never
 * what gives way. A square photo on a 350px column takes 350 of the 720, so
 * the panel gets the rest: the padding comes down from 64 to 28 and the intro
 * is held to three lines. This block is at the end of the file on purpose --
 * written earlier it lost to the 480 rules below it, which is why the padding
 * stayed at 64 and About came out 26px too tall. */
/* ONLY THE IMAGE HEADERS. A Type B header has no photograph taking 350 of
 * the 720, so it has nothing to make room for and keeps the 64/64 that item 3
 * asks it to keep -- shrinking it too made /classes/ an 85px sliver. */
@media (max-width: 600px) {
  /* THE PHONE BUDGET. The block is given 700px -- a 390x844 phone shows about
   * 744 below the site bar -- and the panel takes what it needs off the top of
   * that, so the photograph is everything left over rather than a fixed
   * shape. Round 2 made it square, which meant a 350px photograph whatever the
   * words underneath it did; this is the same idea done from the other end,
   * and it is why the intro is still held to three lines: the shorter the
   * panel, the bigger the photograph. */
  .ttc-hdr--a.ttc-hdr--a.ttc-hdr--a.ttc-hdr--a { min-height: 700px; }
  .ttc-hdr--a.ttc-hdr--a.ttc-hdr--a.ttc-hdr--a > .img {
    aspect-ratio: auto;
    min-height: 220px;
  }
  .ttc-hdr--a.ttc-hdr--a.ttc-hdr--a.ttc-hdr--a > .content { padding: 28px 20px; }
  .ttc-hdr--a.ttc-hdr--a.ttc-hdr--a.ttc-hdr--a .content .text p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
  }
  .ttc-hdr--a.ttc-hdr--a.ttc-hdr--a.ttc-hdr--a .content .info { padding-top: 16px; }
  .ttc-hdr--a.ttc-hdr--a.ttc-hdr--a.ttc-hdr--a h1 { margin-bottom: 12px; }
}

/* --- ROUND 4, B4: a content block keeps the header's gutters -------------
 * At 390 the "Get in Touch" block sat at 30 from the left and 70 from the
 * right while the header above it sat at 20 and 20 -- not merely different
 * but lopsided. The contact form's own section breaks out of the column with
 * `margin: 0 -20px` and then its inner `.left` puts 30px back, so the two
 * never agreed and the right-hand side lost 40px to the break-out.
 *
 * This sheet is only loaded on a page that HAS a header, so the rule cannot
 * reach a page there is no header to line up with.
 */
/* The theme's own rules are `section.gt-block.contact-form` and
 * `section.gt-block.contact-form .left`, so a two-class selector loses to
 * them; the class is repeated to win without an !important. */
@media (max-width: 1023px) {
  section.gt-block.contact-form.contact-form {
    margin-left: 0;
    margin-right: 0;
  }
  section.gt-block.contact-form.contact-form > .left {
    padding-left: 0;
    padding-right: 0;
  }
}

/* --- ROUND 4, ITEM 2: THE HEADER AREA IS ON A 30px RULE -----------------
 *
 *   top menu bar      -> header box                     30
 *   header box        -> first content block below it   30
 *   and with the advertisement between them:
 *   top menu bar      -> top of banner                  30
 *   bottom of banner  -> header box                     30
 *
 * The theme's own spacing is `margin: 0 auto 3rem` on every `.gt-block`, and
 * its root font-size steps at five breakpoints, so that one rule measured
 * 18.5 above the banner and 23 below it at 1440 and 22.2 / 27.8 lower down --
 * four different numbers for what Tom specifies as one. These are pixels for
 * the same reason every other number in this sheet is.
 *
 * The banner carries the TOP gap and the header box carries its own, so the
 * two collapse to one 30 between them rather than adding up to 60. That is
 * also what makes the empty case right: when no creative is set the slot has
 * no ratio and the whole section is taken out of the flow, and the header
 * then sits 30 below the menu on its own margin, not 60.
 */
/* The column does not start at the menu: `main.center` carries the theme's
 * rem-based top padding -- 18.4px at 1440, 22.3 at 390 -- so a 30px margin on
 * the banner made the gap 48.5 and 52.3 rather than 30. The padding goes and
 * the 30 is then the whole of it, the same number at every width. */
main.center {
  padding-top: 0;
}
.gt-block.advertising-banner {
  margin-top: 30px;
  margin-bottom: 0;
}
/* No creative means no ratio on the slot, which means no `style` attribute --
 * `app/embeds.reserve_ad_slots` only writes one when the database gives the
 * slot a shape. An empty band is not a band. */
.gt-block.advertising-banner:has(.ads-banner-slot:not([style])) {
  display: none;
}
.gt-block.intro.ttc-hdr,
section.lh-band {
  margin-top: 30px;
}
.gt-block.intro.ttc-hdr {
  margin-bottom: 30px;
}
.lh-wrap {
  margin-bottom: 30px;
}