/* ROUND 135, ITEM 1: THE RECIPES CATEGORY DIVIDER.
 *
 * WHAT IT WAS, MEASURED on /recipes/ at 1440 before anything was changed: a
 * bare `<a>` carrying the browser's own underline in the body ink
 * (rgb(26,36,40)), 18.43px/700 Montserrat, with "20 recipes" beside it at
 * 15.36px and 0.6 opacity. No box, no ground, no border -- the eight course
 * headings read as a link that had been left in the page rather than as the
 * dividers between eight rows of cards.
 *
 * WHAT IT IS NOW, and every number is the brief's: a cream #fffeec box with a
 * 1px #efe7cf border, the V1 bold title kept exactly as it was and its
 * underline replaced by a deliberate accent rule, running the FULL WIDTH TO
 * THE CARD ROW.
 *
 * "FULL WIDTH TO THE CARD ROW" NEEDED NO WIDTH AT ALL, and that is worth
 * writing down rather than discovering twice. Measured before the change, the
 * divider section and the card grid under it are already the same box to the
 * thousandth: both 956.516px starting at x=79. So the box is painted where it
 * stands and `box-sizing: border-box` keeps the padding and the 1px border
 * INSIDE that width -- a padding without it would have pushed the cream 28px
 * wider than the cards it divides, which is the one thing "full width to the
 * card row" is asking not to happen.
 *
 * SCOPE, MEASURED over all 233 published URLs fetched from the candidate:
 * `section.gt-block.text.without-box` with an `id` beginning `cat-` appears
 * on ONE page, /recipes/, EIGHT times. `#cat-more` -- the "More recipes"
 * block app/routes.py emits when a recipe belongs to no listed course -- is
 * the same furniture and is deliberately inside the same selector, so it
 * cannot be the one divider that stays bare on the day it first appears.
 * Nothing else on the site matches, so no rule here can reach another page.
 *
 * ITS OWN SWITCH: `site_r135_catdivider`, OFF by default. This sheet is not
 * linked at all until it is on, so with it off /recipes/ is byte-identical.
 * ROLLBACK: site_r135_catdivider off.
 */

section.gt-block.text.without-box[id^="cat-"] {
  box-sizing: border-box;
  background: #fffeec;
  border: 1px solid #efe7cf;
  border-radius: 28px;          /* var(--r) in cards-v2.css -- the card's own */
  padding: 20px 28px;
}

/* The heading's 18.43px bottom margin was the gap between the bare title and
 * the first card row. Inside a box that margin becomes dead space UNDER the
 * title and INSIDE the cream, which reads as a box that will not close. The
 * gap belongs between the box and the cards, so it moves out to the section. */
section.gt-block.text.without-box[id^="cat-"] h2 { margin: 0; }
section.gt-block.text.without-box[id^="cat-"] { margin-bottom: 18px; }

/* THE V1 BOLD TITLE IS NOT RESTYLED. 700 weight, Montserrat and the
 * rgb(26,36,40) ink are what it already was and are left alone on purpose --
 * the brief asks for the V1 title, not a new one. The only change is the
 * UNDERLINE: the browser's default link rule, in the ink colour and sitting
 * on the text's own baseline, becomes a deliberate 3px accent rule with a
 * gap under the letters. #f18032 is `--orange` in recipe-v3.css -- the site's
 * own accent, not a new colour. */
section.gt-block.text.without-box[id^="cat-"] h2 a {
  text-decoration: none;
  border-bottom: 3px solid #f18032;
  padding-bottom: 3px;
}
section.gt-block.text.without-box[id^="cat-"] h2 a:hover,
section.gt-block.text.without-box[id^="cat-"] h2 a:focus-visible {
  border-bottom-color: #51010e;   /* --maroon, the site's own hover ink */
}

/* The count keeps its size and its 0.6 opacity; it only stops being dragged
 * onto the title's new accent rule. */
section.gt-block.text.without-box[id^="cat-"] h2 small {
  margin-left: 10px;
  border-bottom: 0;
}

/* MOBILE STACKS. Below 700px the title and its count go onto two lines --
 * "Appetizers and Party Food Recipes" is 341px of a 350px phone column on its
 * own, so on one line the count was being pushed off the accent rule and
 * wrapping under it ragged anyway. `display:block` on the small makes that a
 * decision instead of an accident, and the box tightens its padding so the
 * cream does not eat the card column. */
@media (max-width: 700px) {
  section.gt-block.text.without-box[id^="cat-"] {
    padding: 16px 18px;
    border-radius: 20px;
  }
  section.gt-block.text.without-box[id^="cat-"] h2 a {
    display: inline-block;
  }
  section.gt-block.text.without-box[id^="cat-"] h2 small {
    display: block;
    margin-left: 0;
    margin-top: 8px;
  }
}