/* ==========================================================================
   ChefQuote — brand fixes (all screen sizes, all pages)
   --------------------------------------------------------------------------
   This file intentionally applies at EVERY width, unlike mobile.css.
   It corrects the CQ mark on desktop and mobile together.

   Install on every page, after the page's own style block:
       link rel="stylesheet" href="brand.css"

   WHAT IT FIXES
   .mark sets a 50px tile with place-items: center but no font-size, so the
   letters render at inherited body size and inherited line-height offsets
   them from true centre. Setting an explicit size, a line-height of 1 and
   equal optical padding centres the glyphs in the tile.
   ========================================================================== */

.mark {
  /* fill the tile properly instead of sitting small inside it */
  font-size: 1.24rem;
  font-weight: 950;

  /* line-height 1 is what actually centres the glyphs: any inherited
     value taller than the text box pushes them off centre vertically */
  line-height: 1;

  /* letter-spacing pushes visual weight right; the matching left indent
     cancels the trailing gap so "CQ" sits optically centred, not just
     mathematically centred */
  letter-spacing: 0.02em;
  text-indent: 0.02em;

  /* belt and braces: centre by every mechanism the box may be using */
  display: grid;
  place-items: center;
  place-content: center;
  text-align: center;

  /* keep the tile square and stop flex parents squashing it */
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;

  /* crisper edges on the gradient tile */
  -webkit-font-smoothing: antialiased;
}

/* The workspace uses a slightly different mark; keep them consistent */
.brand-mark {
  font-size: 1.24rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
  display: grid;
  place-items: center;
  place-content: center;
  text-align: center;
  flex: 0 0 auto;
}

/* Scale the mark down proportionally on small phones so it never
   crowds the brand name, staying centred at every size. */
@media (max-width: 380px) {
  .mark,
  .brand-mark {
    font-size: 1.08rem;
  }
}


/* ==========================================================================
   Tool strip — the three decision tools reach each other directly.
   Applies at every width so desktop and mobile stay consistent.
   ========================================================================== */
.cq-toolstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 16px;
  background: #ededeb;
  border-bottom: 1px solid #d7d7d2;
}

.cq-toolstrip a {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 850;
  color: #1d1d1d;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(20, 20, 20, 0.18);
  border-radius: 9px;
  padding: 10px 12px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cq-toolstrip a:hover { background: #f7f7f4; border-color: rgba(20, 20, 20, 0.4); }
.cq-toolstrip a:active { transform: translateY(1px); }

@media (max-width: 620px) {
  .cq-toolstrip { padding: 9px 14px; gap: 6px; }
  .cq-toolstrip a { font-size: 0.76rem; padding: 9px 8px; }
}


/* ==========================================================================
   Layout corrections — apply at every width (desktop and mobile alike)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONDENSE / EXPAND
   Measured before: page height 6,323px unchanged by the control.
   Hiding the body of every titled section is what makes the page an outline.
   -------------------------------------------------------------------------- */
[data-cq-hid] { display: none !important; }

.cq-fold-note {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #5c5c5c;
  font-weight: 600;
}

/* A condensed section reads as a closed row, and its heading as a control */
[data-cq-fold="1"] {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

[data-cq-toggle="1"] {
  cursor: pointer;
  position: relative;
  padding-right: 26px;
}

/* Disclosure caret, shade-only so it matches the monochrome language */
[data-cq-toggle="1"]::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #5c5c5c;
  border-bottom: 2px solid #5c5c5c;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-cq-toggle="1"][aria-expanded="true"]::after {
  transform: translateY(-30%) rotate(-135deg);
}

[data-cq-toggle="1"]:hover { color: #000; }


/* --------------------------------------------------------------------------
   INJECTED BLOCK WIDTH
   A .wrap nested inside an existing .wrap subtracts the gutter twice, which
   left injected sections 32px narrower than their neighbours (measured on
   philosophy: cards 880px, injected block 848px). Neutralised.
   -------------------------------------------------------------------------- */
[data-cq-unwrap="1"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Injected blocks share the card geometry exactly */
.cq-pp,
.cq-legal {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   FIELD WIDTHS
   Measured: three distinct input widths, and two sections mixing widths
   internally. Every field now fills its cell, so all boxes in a section
   are identical.
   -------------------------------------------------------------------------- */
[data-cq-field="1"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* The cell must be allowed to shrink, or a wide field re-inflates the track */
.form-grid > *,
.field,
label,
fieldset > *,
.job-snapshot-fields > *,
.guide-fields > * {
  min-width: 0;
}

/* Number fields keep a sensible floor without breaking the shared width */
input[type="number"][data-cq-field="1"] {
  min-width: 0;
}

/* Textareas grow downward only */
textarea[data-cq-field="1"] {
  resize: vertical;
  min-height: 84px;
}


/* ==========================================================================
   INJECTED BOX GEOMETRY — must be identical to the page's native cards
   --------------------------------------------------------------------------
   Measured on philosophy before this rule:
       native .card      880px wide, left 200, padding 22px, radius 12px
       .cq-hm-card       848px wide, left 216, padding 28px, radius 14px
       .cq-pp            880px wide, left 200, padding 24px, radius 14px
   Four separate mismatches, not one. Every injected block now inherits the
   same geometry so nothing sits proud of its neighbours.
   ========================================================================== */

/* 1. Kill the double gutter from a .wrap nested inside a .wrap */
.cq-human-margin > .wrap,
.cq-pp-wrap > .wrap,
.cq-legal-wrap > .wrap,
[data-cq-unwrap="1"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2. Identical box metrics to a native card */
.cq-hm-card,
.cq-pp,
.cq-legal {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 22px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

/* 3. Accent cards carry the same 6px rail the page already uses on .tldr-card */
.cq-hm-card,
.cq-pp {
  border-left-width: 6px !important;
  border-left-style: solid !important;
}

.cq-legal {
  border-left-width: 1px !important;
}

/* 4. The section itself must not add its own indent */
.cq-human-margin,
.cq-pp-wrap,
.cq-legal-wrap {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 620px) {
  .cq-hm-card,
  .cq-pp,
  .cq-legal {
    padding: 22px !important;
    border-radius: 12px !important;
  }
}