@charset "utf-8";
/* ============================================================
   Motorhome Life — buttons
   Every MHL button style in one file. Rewritten for 2.4.1 (Ben, 11 October 2026): buttons
   are named by their JOB, not their colour.

     class="btn"                 MAIN — gold pill, capitals, ►. The one action a page or a
                                 box is there for: Subscribe, Send message, Post comment.
     class="btn btn-secondary"   SECONDARY — blue pill, capitals, no ►. Utility actions:
                                 View more posts, Search, Go, Back to where you were.
     class="btn-txt"             TEXT LINK with a →, blue. Everything else: Read the post,
                                 the legal pages' cross-links, "or browse instead".

   Sizes and width are core's modifiers on top: btn--xs / --sm / --lg / --xl, btn--block.

   WHY ROLES (Ben): "more work now but less later … next project". A template says what a
   button is FOR; this file says what that looks like on MHL. A recolour, or another site,
   changes this file and never the markup. The names are the ones core's Form and Table
   classes already print (`btn btn-primary`, `btn btn-secondary`) and the admin uses.
   `btn-primary` needs no rule here — `.btn` alone is the main button — so a Form default
   of "btn btn-primary" simply comes out gold.

   ⚠ .btn-txt IS NOT .txt-link. .txt-link (base.css, main.css) is a link INSIDE a sentence;
   .btn-txt stands on its own line, like a button, and carries its own →.

   ⚠ LOADS AFTER /core_assets/css/base.css AND BEFORE THE COMPONENT STYLESHEETS
   (layouts/default.php) — after core so this file wins equal-specificity ties, before the
   components so a component's own `.thing:hover` still wins ITS tie. The BUTTONS section
   of base.css is the contract this file overrides; its header explains the rules (plain
   class selectors only; never style the bare <button>).

   ⚠ ORDER INSIDE THIS FILE IS LOAD-BEARING:
     - .btn-secondary comes AFTER .btn, so it wins every tie with it (one class each, and
       "btn btn-secondary" carries both).
     - The secondary hover lists `.btn-secondary.btn-hover` AFTER `.btn.btn-hover`.
       main.js adds .btn-hover to every <button> inside a <form> on mouseover, so without
       this the footer and search buttons would flash gold.
     - The sizes are TWO-class rules (.btn.btn--sm). `.btn` sets its own font-size, which
       would otherwise beat core's one-class .btn--sm / .btn--xl on load order.

   RE-POINTING A BUTTON FOR ONE BOX: every colour below is a --btn-* property, so a box can
   set them on itself and leave the markup alone — home.css does this for the homepage. A
   secondary button on a blue box, for example, would set
   --btn-secondary-bg:#fff; --btn-secondary-text:var(--mhl-blue) on that box.

   Retired in 2.4.1: .btn--blue (→ btn btn-secondary), .btn--gold (→ btn), .btn--navy
   (declared, never used), .home-btn, the .sidebar-btn family (→ btn / btn btn-secondary)
   and MHL's .btn-box colours in main.css (→ btn-txt, btn or btn btn-secondary). Core keeps
   .btn-box, which mwd still uses. The previous file is "buttons - v2 (pre-2.4.1).css".
   ============================================================ */

:root {
	/* main — the gold */
	--btn-main-border:        #c89b3f;
	--btn-main-text:          #111;
	--btn-main-bg:            linear-gradient(105deg, #d7a43a 0%, #e1bf63 38%, #f5e4a0 62%, #e0bb5a 82%, #cb9734 100%);
	--btn-main-bg-hover:      linear-gradient(105deg, #ddb04d 0%, #edd07a 45%, #fff0b8 70%, #e7c15e 90%, #d3a13d 110%);

	/* secondary — the blue.
	   ⚠ The footer's accent reads --btn-secondary-bg too (header_footer_v2.css, --ft-accent),
	   so the footer follows if this colour changes (Ben, 11 October 2026). */
	--btn-secondary-bg:       var(--mhl-blue, #1657aa);
	--btn-secondary-bg-hover: var(--mhl-blue-dark, #0f3f7d);
	--btn-secondary-text:     #fff;

	/* text link */
	--btn-link:               var(--mhl-blue, #1657aa);
	--btn-link-hover:         var(--mhl-blue-dark, #0f3f7d);

	--btn-radius:             999px;
}


/* ------------------------------------------------------------
   1. MAIN — .btn
   A gold pill in capitals with a ► (Ben, 11 October 2026).

   ⚠ The ► is BUILT IN here, where core makes it opt-in with .btn--arrow. Core's reason —
   the glyph and the room for it live in one rule so they cannot drift apart — holds: the
   padding below is the room. `btn--arrow` left in markup is redundant on MHL but harmless;
   this file loads later, so its padding and arrow position win the tie.
   ⚠ font-size is in EM, not rem, so a button scales with the box it sits in. The hero's
   .btn-row sets a fluid font-size for exactly that.
------------------------------------------------------------ */
.btn {
	padding:1.12em 3.1em 1.12em 2.2em;
	border:1px solid var(--btn-main-border);
	border-radius:var(--btn-radius);
	background:var(--btn-main-bg);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.42),
		inset 0 -1px 0 rgba(0,0,0,.10),
		0 3px 8px rgba(0,0,0,.12);
	color:var(--btn-main-text);

	font-size:.85em;
	font-weight:700;
	letter-spacing:.12em;
	line-height:100%;
	text-transform:uppercase;

	transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
/* ⚠ `.btn.btn-hover`, never a bare `.btn-hover` — see base.css's colour block. */
.btn:hover,
.btn.btn-hover {
	background:var(--btn-main-bg-hover);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.5),
		inset 0 -1px 0 rgba(0,0,0,.10),
		0 5px 14px rgba(0,0,0,.14);
	color:var(--btn-main-text);
}
.btn::after {
	content:"\25BA";
	position:absolute;
	right:1.5em;
	top:50%;
	transform:translateY(-50%);
	font-size:.75em;
}


/* ------------------------------------------------------------
   2. SECONDARY — .btn.btn-secondary
   A blue pill in capitals, with NO ►. Always written WITH .btn: class="btn btn-secondary".
   It keeps .btn's shape and lettering and changes the colour, the padding (no arrow to
   make room for) and the arrow itself.
------------------------------------------------------------ */
.btn-secondary {
	padding:1.12em 2.6em;
	border-color:var(--btn-secondary-bg);
	background:var(--btn-secondary-bg);
	box-shadow:none;
	color:var(--btn-secondary-text);
}
.btn-secondary:hover,
.btn-secondary.btn-hover {
	border-color:var(--btn-secondary-bg-hover);
	background:var(--btn-secondary-bg-hover);
	box-shadow:none;
	color:var(--btn-secondary-text);
}
.btn-secondary::after { content:none; }


/* ------------------------------------------------------------
   3. SIZES — two classes, so they beat .btn's own font-size whatever the order.
   In em, like .btn, so they still scale with their box. Core's one-class .btn--xs …
   serve any site that leaves .btn's font-size alone.
------------------------------------------------------------ */
.btn.btn--xs { font-size:.72em; letter-spacing:.1em; }
.btn.btn--sm { font-size:.78em; }
.btn.btn--lg { font-size:.95em; }
.btn.btn--xl { font-size:1.05em; }

/* .btn--block (full width) is core's and needs nothing here. */


/* ------------------------------------------------------------
   4. TEXT LINK — .btn-txt (core's link with a trailing →)
   MHL draws it in the site blue and in sentence case; core's is black capitals.
------------------------------------------------------------ */
/* ⚠ align-self:center — in a .btn-row (a flex row) beside a .btn, the link would otherwise
   stretch to the button's height, and core's → (top:44% of the box) drops below the words.
   It does nothing outside a flex row. */
.btn-txt {
	align-self:center;
	color:var(--btn-link);
	font-size:1rem;
	font-weight:700;
	letter-spacing:0;
	text-transform:none;
	transition:color .2s ease;
}
.btn-txt:hover { color:var(--btn-link-hover); }