/*------------------------------------------------------------
   REDESIGN — text + button styles from the 25-MCBC-0241 rebuild
   ------------------------------------------------------------
   Applies the new site's typography and button language to the
   pages that are being KEPT but not redesigned (Dana, ClickUp
   2026-07-30: "apply the same text and button styles from the new
   site pages we created universally on the rest of the MCBC site").

   Included LAST in minify.css.php so it wins over global.css /
   button.css without editing them — every change here is additive
   and can be removed by deleting one include line.

   NO NEW FONT LOADING IS NEEDED. The display face
   "headline-gothic-atf-round" already arrives via the Typekit kit
   nsr1wyr that head.html has always loaded, and Trebuchet MS is
   already self-hosted in global.css via @font-face. The old body
   face "cresta" (kit ttg6zfx) is what we are replacing.

   SCOPE — deliberately type and buttons only, not layout:
     * families, colours, link and button treatment change
     * the size scale is LEFT ALONE. The new pages run body copy at
       ~26px against a 1512 design width; forcing that onto these
       templates would reflow 39 pages. Sizes are a separate call
       for Dana.
     * headings are NOT force-uppercased. The new pages uppercase
       per-component; blanket-uppercasing long editorial headings
       here would be a content change, not a restyle.

   NOTE: minify.css.php strips comments and newlines, so every rule
   below must stay fully braced — no newline-separated selectors.
------------------------------------------------------------*/

/* Brand tokens, lifted from the rebuild's Tailwind @theme block. */
:root
{
   --mc-superior-blue: #1e3a72;
   --mc-forest:        #2d4516;
   --mc-maroon:        #701c1c;
   --mc-sky:           #a1bede;
   --mc-green:         #97b748;
   --mc-coral:         #ff8052;
   --mc-espresso:      #241721;
   --mc-display:       "headline-gothic-atf-round", "Headline Gothic ATF", "Arial Narrow", sans-serif;
   --mc-body:          "Trebuchet MS", "Segoe UI", Tahoma, Geneva, sans-serif;
   /* global.css self-hosts the bold cut as its OWN FAMILY, not as a weight.
      Ask for it by name and keep font-weight normal — a 700 on top of an
      already-bold face makes the browser synthesise bold a second time. */
   --mc-body-bold:     "Trebuchet MS Bold", "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;

   /* Default accent pair. Client, 2026-07-31 merged-site notes: "update the
      main/default colors to dark blue and light blue instead of maroon and
      coral (blue is the main brand color)". This layer only dresses the KEPT
      legacy pages; the redesigned pages keep the per-section colours the
      Figma signed off, so the tokens above stay as the full palette and only
      the DEFAULT pair below changes. */
   --mc-accent:        var(--mc-superior-blue);
   --mc-accent-light:  var(--mc-sky);
}

/* The redesigned pages reserve the scrollbar gutter (app.css) so a scroll-locked
   modal cannot shift the page. Legacy pages did not, which made the SAME nav and
   footer render 15px wider there and moved the search field — visible the moment
   the chrome went sitewide, and the reason chrome-parity.mjs saw every geometry
   check differ by 15px. Reserve it here too so both families lay out alike. */
html
{
   scrollbar-gutter: stable;
}
/* The full-width decorative line pairs on the two promoted pages extend beyond
   their header. Keep that decoration from creating a horizontal page scrollbar. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* ---- Body copy ------------------------------------------- */
body
{
   font-family: var(--mc-body);
   color: var(--mc-espresso);
}

p, li, td, th, dd, dt, blockquote, label, figcaption
{
   font-family: var(--mc-body);
}

/* ---- Headings -------------------------------------------- */
h1, h2, h3, h4, h5, h6, .fs-1, .fs-2, .fs-3
{
   font-family: var(--mc-display);
   color: var(--mc-espresso);
}

/* Client: "Does the title font style have a stroke applied? It looks a bit too
   thick and makes the words harder to read."  Two causes, both in global.css
   and both measured off the client's own before/after crops:

     1. `h1,.fs-1 { font-weight:700 }` (and `h2 { 500 }`) while
        headline-gothic-atf-round ships ONE weight — so the browser fakes bold
        by smearing the outline. That reads exactly like a stroke.
        Their "correct" crop carries 0.565 ink per box vs our 0.650: ~15% more
        ink for the same glyphs.
     2. `h1,.fs-1 { transform: scaleX(0.9) }` squeezes it a further 10%, which
        thickens the strokes RELATIVE to the letterforms. Their crop measures
        aspect 20.06 against our 17.72 — a ratio of 1.13, i.e. the 0.9 undone.

   The display face is already condensed by design; it does not want either. */
h1, h2, h3, h4, h5, h6, .fs-1, .fs-2, .fs-3
{
   font-weight: 400;
}

h1, .fs-1
{
   transform: none;
}

/* Client: "For these smaller subtitle styles (and any even smaller ones below
   it too), can we swap to Trebuchet MS Bold in dark blue?"  Their circled
   example on /michigan-crafted/trails-maps is the H3 ("Need a Road Map? How
   About an Off-Road Map?") sitting under an H2 title — so the split is H1/H2
   keep the display face, H3 and below become body-bold.
   Case is left exactly as global.css has it: they asked about family and
   colour, and force-lowercasing headings would be a content change. */
h3, h4, h5, h6, .fs-3
{
   font-family: var(--mc-body-bold);
   font-weight: normal;
   color: var(--mc-superior-blue);
}

/* Headings knocked out over photography stay white. */
.hero h1, .hero h2, .banner h1, .banner h2, #hero h1, #hero h2
{
   color: #fff;
}

/* promos.css (loaded after the bundle) pins the home promo headline to the
   old body face at (0,2,1). Mirror it so the display face lands there too;
   its white colour over the photo is correct and is left alone. */
.container-left div.fs-1
{
   font-family: var(--mc-display);
}

/* ---- Links ----------------------------------------------- */
/* QA round 1 universal rule on the new site: hyperlinks are ALWAYS
   underlined and hover to the light blue. */
/* Scoped to CONTENT, not the whole document. The redesign's nav and footer are
   now sitewide chrome and colour their own links with Tailwind utilities
   (text-white, hover:text-sky); a bare `a:link` at (0,1,1) outranks `.text-white`
   at (0,1,0), which turned every nav link dark blue on dark wood. Scoping keeps
   this rule doing its actual job — restyling body copy links. */
/* `:not(.button)` is LOAD-BEARING, not tidiness. `main a:link` is (0,1,2) and
   `a.button { color:#fff }` is only (0,1,1), so without it the link colour won
   the resting state of every legacy button — dark blue text on a dark button —
   while `a.button:hover` (0,2,1) still won the hover. That is exactly the
   "button text isn't readable" screenshot in the client's 2026-07-31 notes.
   The legacy stylesheet paints the link band as a background IMAGE, so the
   redesigned rule replaces that image with the requested dark-blue version. */
main a:not(.button):link, main a:not(.button):visited,
#content a:not(.button):link, #content a:not(.button):visited,
article a:not(.button):link, article a:not(.button):visited,
.mc-page a:not(.button):not(:has(.mc-button)):link,
.mc-page a:not(.button):not(:has(.mc-button)):visited
{
   color: var(--mc-accent);
   background: linear-gradient(to bottom, var(--mc-accent) 0%, var(--mc-accent) 100%) 0 100% repeat-x;
   background-size: 4px 1px;
   text-decoration: underline;
}

main a:not(.button):hover, main a:not(.button):active,
#content a:not(.button):hover, #content a:not(.button):active,
article a:not(.button):hover, article a:not(.button):active,
.mc-page a:not(.button):not(:has(.mc-button)):hover,
.mc-page a:not(.button):not(:has(.mc-button)):active
{
   background-size: 4px 50px;
   color: var(--mc-accent-light);
   text-decoration: underline;
}

/* global.css:293 scopes content links as `main a:not(.button)`, which at
   (0,2,2) outranks a bare `a:link`. Mirror the selector exactly rather than
   escalating with !important, so this stays a normal, overridable rule. */
main a:not(.button)
{
   color: var(--mc-accent);
   background: linear-gradient(to bottom, var(--mc-accent) 0%, var(--mc-accent) 100%) 0 100% repeat-x;
   background-size: 4px 1px;
   text-decoration: underline;
}

main a:not(.button):hover
{
   background-size: 4px 50px;
   color: var(--mc-accent-light);
   text-decoration: underline;
}

/* Navigation, buttons and logos opt out of the link treatment. */
#nav a, #nav a:link, #nav a:visited, #nav a:hover,
nav a, nav a:link, nav a:visited, nav a:hover,
header a, header a:link, header a:visited, header a:hover,
footer a, footer a:link, footer a:visited, footer a:hover,
.button a, .button a:link, .button a:visited, .button a:hover,
a.button, a.button:link, a.button:visited, a.button:hover
{
   text-decoration: none;
}

/* ---- Buttons --------------------------------------------- */
/* New-site button: display face, uppercase, tracked, 5px radius,
   no drop shadow. Hover swaps to the pair's LIGHT colour with the
   DARK colour as text (dark blue -> light blue), per the Figma prototype. */
a.button, input[type=submit].button, button.button, .button a
{
   font-family: var(--mc-display);
   letter-spacing: 2px;
   text-transform: uppercase;
   border-radius: 5px;
   box-shadow: none;
   transition: background-color 150ms ease, color 150ms ease;
}

a.button, input[type=submit].button, button.button
{
   background-color: var(--mc-accent);
   color: #fff;
}

a.button:hover, a.button:active,
input[type=submit].button:hover,
button.button:hover,
.button a:hover
{
   background-color: var(--mc-accent-light);
   color: var(--mc-accent);
}

/* Button label colour, stated at a specificity that beats any CONTENT-scoped
   link rule (`main a…` is (0,1,2); these are (0,2,2)). The `:not(.button)`
   above already keeps this layer's own rules off buttons — this covers
   global.css's and any page stylesheet's. */
.button a:link, .button a:visited,
main a.button:link, main a.button:visited,
#content a.button:link, #content a.button:visited,
article a.button:link, article a.button:visited
{
   color: #fff;
}

main a.button:hover, main a.button:active,
#content a.button:hover, article a.button:hover
{
   color: var(--mc-accent);
}

/* form.css styles the newsletter/search submits as `.inputForm
   input[type=submit]` (0,1,2) — they are buttons without the .button class,
   so they need the treatment too or they stay on the old palette. */
.inputForm input[type=submit], .inputForm a.button
{
   font-family: var(--mc-display);
   letter-spacing: 2px;
   text-transform: uppercase;
   border-radius: 5px;
   background-color: var(--mc-accent);
   color: #fff;
   box-shadow: none;
}

.inputForm input[type=submit]:hover, .inputForm input[type=submit]:active,
.inputForm a.button:hover
{
   background-color: var(--mc-accent-light);
   color: var(--mc-accent);
}

/* The newsletter signup submit carries no class and sits outside .inputForm.
   Scoped to `main` on purpose: the header's "GO >" search submit is site
   chrome, like the nav, and is deliberately left on its existing styling. */
main input[type=submit]
{
   font-family: var(--mc-display);
   letter-spacing: 2px;
   text-transform: uppercase;
   border-radius: 5px;
   background-color: var(--mc-accent);
   color: #fff;
   box-shadow: none;
}

main input[type=submit]:hover, main input[type=submit]:active
{
   background-color: var(--mc-accent-light);
   color: var(--mc-accent);
}

/* The section landing pages (/about, /craft, /grow, /research) style their
   buttons as `#pageFrameLanding a.button`, which carries an ID and so
   outranks the rules above. Mirror the selector. */
#pageFrameLanding a.button, #pageFrameLanding a.button:link, #pageFrameLanding a.button:visited
{
   font-family: var(--mc-display);
   letter-spacing: 2px;
   text-transform: uppercase;
   border-radius: 5px;
   background-color: var(--mc-accent);
   color: #fff;
   box-shadow: none;
}

#pageFrameLanding a.button:hover, #pageFrameLanding a.button:active
{
   background-color: var(--mc-accent-light);
   color: var(--mc-accent);
}

/* The GovDelivery newsletter embed ships its own `#GD-snippet-form
   input[type=submit]` rule, an ID selector that outranks the ones above. */
#GD-snippet-form input[type=submit]
{
   font-family: var(--mc-display);
   letter-spacing: 2px;
   text-transform: uppercase;
   border-radius: 5px;
   background-color: var(--mc-accent);
   color: #fff;
   box-shadow: none;
}

#GD-snippet-form input[type=submit]:hover
{
   background-color: var(--mc-accent-light);
   color: var(--mc-accent);
}

/* ---- Form controls --------------------------------------- */
input, select, textarea
{
   font-family: var(--mc-body);
   color: var(--mc-espresso);
}

/*------------------------------------------------------------
   Promote Michigan Crafted + Craft Beverage Summit
   ------------------------------------------------------------
   Client, 2026-07-31: "is it possible to update the line designs,
   hyperlinks, and button styles on these two pages to match the new
   ones?"  Both pages already borrow the redesign's vocabulary
   (.mc-animation-line, .mc-h1/.mc-h3) from page-michigan-crafted.css,
   so this aligns the values rather than restyling the pages.

   Everything below was MEASURED against the redesigned home page, not
   eyeballed — the deltas are noted per rule.
------------------------------------------------------------*/

/* Line pairs rendered 10px thick here against 6px on the new pages:
   page-michigan-crafted.css:205 sets `border-width: 10px !important`,
   which beats the 6px each variant declares through the border-bottom
   shorthand. Matching !important is the only way past it. */
.mc-animation-line
{
   border-width: 6px !important;
}

/* The new pages hold the line at 0.5 opacity / 0.2 scale until it
   scrolls into view, then grow it in and KEEP it there. The legacy
   copy of the animation has no start state and no `forwards`, so the
   line sat fully drawn, popped, and settled back — the same 2s
   keyframes, but without the reveal. */
.mc-animation-line
{
   opacity: 0.5;
   scale: 0.2;
}

.mc-line-in-view
{
   animation: appear 2s ease 0s 1 normal forwards running;
}

@media (prefers-reduced-motion: reduce)
{
   .mc-animation-line { opacity: 1; scale: 1; }
   .mc-line-in-view { animation: none; }
}

/* Off-token line colours (#1E3B72/#A3BEDE/#2C4516/#98B747 against the
   brand #1e3a72/#a1bede/#2d4516/#97b748). Close enough to look right
   alone, visibly off beside a redesigned section. */
.mc-animation-line-1-right, .mc-animation-line-4-right { border-bottom-color: var(--mc-superior-blue); }
.mc-animation-line-1-left,  .mc-animation-line-4-left  { border-bottom-color: var(--mc-sky); }
.mc-animation-line-2-right { border-bottom-color: var(--mc-maroon); }
.mc-animation-line-2-left  { border-bottom-color: var(--mc-coral); }
.mc-animation-line-3-right { border-bottom-color: var(--mc-forest); }
.mc-animation-line-3-left  { border-bottom-color: var(--mc-green); }

/* Buttons: square, sentence-case and untracked here; the new site's are
   5px radius, uppercase and tracked 2px, with no drop shadow. Sizes are
   left alone — these pages run their own 35px scale and the client
   asked about styles, not sizes. */
.mc-button
{
   border-radius: 5px;
   text-transform: uppercase;
   letter-spacing: 2px;
   box-shadow: none;
   transition: background-color 150ms ease, color 150ms ease;
}

/* Hover is the pair's LIGHT colour with the DARK one as text. The red
   and green variants already do this; blue fell through to a generic
   `.mc-button:hover { background: #000 }`, which is the one hover on
   these pages that does not exist anywhere in the new design. */
.mc-button-blue   { background: var(--mc-superior-blue); }
.mc-button-red    { background: var(--mc-maroon); }
.mc-button-green  { background: var(--mc-forest); }

.mc-button-blue:hover  { background: var(--mc-sky);   color: var(--mc-superior-blue); }
.mc-button-red:hover   { background: var(--mc-coral); color: var(--mc-maroon); }
.mc-button-green:hover { background: var(--mc-green); color: var(--mc-forest); }

/* `#pageFrameLanding .mc-h3` is an ID selector, so it outranks the
   sitewide h3 rule above and kept these subheads black. Same family
   already; this is the dark blue the client asked for. */
#pageFrameLanding .mc-h3
{
   color: var(--mc-superior-blue);
}