/* -- Bug Out theme ------------------------------------------------------------ */
/* Theme:  Bug Out (pest control, Austin TX) */
/* Source: Bug Out Homepage Figma + ../Bug Out Design/Bug Out Homepage.html      */
/* This is the LOADED copy (via _site.ctx /styles/site/theme.css). Canonical     */
/* record lives at themes/bug-out/theme.css. Keep the two in sync.               */
/* px -> rem conversions use the coded root (~18px): rem = px / 18.              */

:root {

	/* -- Border Radius -------------------------------------------------------- */
	/* Bug Out buttons/frames: 16px rounded (16 / 18 = 0.889rem) all corners.    */

	--bdr-rds: 0rem;
	--bdr-tl-rds: 0;
	--bdr-tr-rds: 0;
	--bdr-br-rds: 0;
	--bdr-bl-rds: 0;

	/* -- Card Border Radius --------------------------------------------------- */
	/* Bug Out cards are SQUARE (radius 1).                                      */

	--bdr-rds-crd: 0rem;
	--bdr-tl-rds-crd: 0;
	--bdr-tr-rds-crd: 0;
	--bdr-br-rds-crd: 0;
	--bdr-bl-rds-crd: 0;

	/* -- Box Shadow (frame: x4 / y6) ------------------------------------------ */
	/* 4px -> 0.222rem, 6px -> 0.333rem.                                         */

	--bx-sdw-x:   0.222rem;
	--bx-sdw-y:   0.333rem;
	--bx-sdw-blr: 0rem;
	--bx-sdw-o:   0;

	/* -- Desktop Box Shadow --------------------------------------------------- */

	--bx-sdw-dsk-x:   0.222rem;
	--bx-sdw-dsk-y:   0.333rem;
	--bx-sdw-dsk-blr: 0rem;
	--bx-sdw-dsk-o:   0;

	/* -- Card Box Shadow ------------------------------------------------------ */

	--bx-sdw-crd-x:   0.222rem;
	--bx-sdw-crd-y:   0.333rem;
	--bx-sdw-crd-blr: 0rem;
	--bx-sdw-crd-o:   0;

	/* -- Callout Box Shadow (x6 / y6) ----------------------------------------- */
	/* 6px -> 0.333rem. Used by the floating sticker callouts.                   */

	--bx-sdw-co-x:   0.333rem;
	--bx-sdw-co-y:   0.333rem;
	--bx-sdw-co-blr: 0rem;
	--bx-sdw-co-o:   0;

	/* -- Button text — match the artifact exactly (overrides fonts.css) -------- */
	/* Artifact buttons: Archivo, weight 400 (normal), Title Case (no transform),
	   no tracking, 20px. fonts.css defaults to SUSE / bold / uppercase / 0.04em. */
	--btn-ff: var(--fnt-t);   /* Archivo (display family) */
	--btn-w:  400;            /* normal weight */
	--btn-tt: none;           /* Title Case, not uppercase */
	--btn-ls: 0;              /* no letter-spacing */
	--btn-s:  1.111rem;       /* 20px ÷18 */

	/* -- Button V1 Padding (artifact: 16px / 25px = 0.889rem / 1.389rem) ------- */

	--btn-v1-pd-t: 0.889rem;
	--btn-v1-pd-b: 0.889rem;
	--btn-v1-pd-l: 1.389rem;
	--btn-v1-pd-r: 1.389rem;
	--btn-v1-pd: var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l);

	/* -- Button V1 Border Radius (16px = 0.889rem all corners) ---------------- */

	--btn-v1-bdr-rds-tl: 0rem;
	--btn-v1-bdr-rds-tr: 0rem;
	--btn-v1-bdr-rds-br: 0rem;
	--btn-v1-bdr-rds-bl: 0rem;
	--btn-v1-bdr-rds: var(--btn-v1-bdr-rds-tl) var(--btn-v1-bdr-rds-tr) var(--btn-v1-bdr-rds-br) var(--btn-v1-bdr-rds-bl);

	/* -- Button V1 Box Shadow (stacked-outline: x4 / y6) ---------------------- */

	--btn-v1-bx-sdw-x:   0.222rem;
	--btn-v1-bx-sdw-y:   0.333rem;
	--btn-v1-bx-sdw-blr: 0rem;
	--btn-v1-bx-sdw-o:   0;

	/* -- Button V1 Border (Alt Variant) --------------------------------------- */

	--btn-v1-bdr-w:   2px;
	--btn-v1-bdr-stl: solid;

	--btn-v2-pd-t: 0.889rem; /* artifact 16px */
	--btn-v2-pd-b: 0.889rem; /* artifact 16px */
	--btn-v2-pd-l: 1.389rem; /* artifact 25px */
	--btn-v2-pd-r: 1.389rem; /* artifact 25px */
	--btn-v2-pd: var(--btn-v2-pd-t) var(--btn-v2-pd-r) var(--btn-v2-pd-b) var(--btn-v2-pd-l); /* { readonly: true  } */

	/* -- Button V2 Border Radius (16px = 0.889rem) ---------------------------- */

	--btn-v2-bdr-rds-tl: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Top Left'  } */
	--btn-v2-bdr-rds-tr: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Top Right'  } */
	--btn-v2-bdr-rds-br: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Bottom Right'  } */
	--btn-v2-bdr-rds-bl: 0rem; /* { min: 0, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Bottom Left'  } */
	--btn-v2-bdr-rds: var(--btn-v2-bdr-rds-tl) var(--btn-v2-bdr-rds-tr) var(--btn-v2-bdr-rds-br) var(--btn-v2-bdr-rds-bl); /* { readonly: true  } */

	/* -- Button V2 Box Shadow ------------------------------------------------- */

	--btn-v2-bx-sdw-x: 0rem; /* { min: 0,  max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'X\' Position' } */
	--btn-v2-bx-sdw-y: 0rem; /* { min: 0,  max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'Y\' Position' } */
	--btn-v2-bx-sdw-blr: 0rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V1 Box Shadow Blur' } */
	--btn-v2-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V1 Box Shadow Opacity' } */

	--btn-v2-bdr-w: 2px; /* { min: 1, max: 3, step: 0.1, friendly: 'Button V1 Border Width'  } */
	--btn-v2-bdr-stl: solid; /* { friendly: 'Button V1 Border Style'  } */

	/* -- Button Transitions --------------------------------------------------- */

	--btn-trn-sp: 0.3s;
	--btn-trn-tf: ease;

	/* -- Input / Form --------------------------------------------------------- */
	/* radius 8px = 0.444rem, height 36px = 2rem, padding 6px = 0.333rem.        */

	--inp-bdr-rds: 0.444rem;
	--inp-h:       2rem;
	--inp-pd:      0.333rem;

	/* -- Flair (Shapes & Decorative) ------------------------------------------ */

	--flr-bx-w: 297;
	--flr-bx-w-mbl: 162;
	--flr-bx-w-clc: calc((var(--flr-bx-w-mbl) * 1px) + (var(--flr-bx-w) - var(--flr-bx-w-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));
	--flr-mrg-tp: 1rem;
	--flr-mrg-bt: 1rem;
	--shape-opacity: 0.08;
	--flr-inline-s: 3.556rem;   /* inline brand flair (FlairLeft) size — drives .flr-lft */

	/* -- Containers & Cards Border -------------------------------------------- */

	--crd-bdr-w:       2px;
	--bg-bx-bdr-thc:   2px;
	--bg-bx-bdr-clr-o: 1;

	/* -- Dividers & Separators ------------------------------------------------ */

	--bdr-stl:   solid;
	--bdr-w:     2px;
	--bdr-clr-o: 0.3;

	/* -- Title Big letter-spacing override (-2) ------------------------------- */
	/* -2px / 18 = -0.111rem.                                                    */

	/* removed: --fnt-t-big-ls is owned by fonts.css (-0.02em, proportional, matches artifact) */

}

/* ════════════════════════════════════════════════════════════════════════════
   Bug Out STACKED-OUTLINE BUTTON
   Reproduces the artifact's `.btn-stack` (Bug Out Homepage.html):
     light: box-shadow: 4px 6px 0 -1.5px <bg>, 4px 6px 0 0 var(--lt-txt);
     dark : box-shadow: 4px 6px 0 -1.5px var(--black), 4px 6px 0 0 #fff;
   2px solid border + 16px radius with a hard offset stacked shadow. Inner
   offset color is the button's own surface (var(--btn-bg)); outer is the ink
   (var(--lt-txt) light / #ffffff dark).
   ════════════════════════════════════════════════════════════════════════════ */

/* DYNAMIC stacked outline: the border + outer offset use --text-color (the
   palette's ink — near-black on light themes, white/cream on dark themes, and it
   follows nested .lk-bg/.ulk-bg flips too), and the inner sliver uses
   --background (the panel surface), so the shadow + border always read against
   whatever theme the button sits in. Scoped to [data-colors] (0,3,0) so it beats
   the framework button shadow in theme-structure.css (0,2,0). */
[data-colors] .btn.v1,
[data-colors] .btn.v2 {
	position: relative;
	border-color: var(--text-color);
	box-shadow:
		4px 6px 0 -1.5px var(--background),
		4px 6px 0 0 var(--btn-stack-ink, var(--text-color));
	transition:
		box-shadow var(--btn-trn-sp) var(--btn-trn-tf) 0s,
		transform var(--btn-trn-sp) var(--btn-trn-tf) 0s;

	svg * {
		transition: 0.3s ease 0s !important;
	}

	@media (hover: hover) and (pointer: fine) {
		&:is(a:hover, a:focus-visible),
		a:is(:hover, :focus-visible) & {
			transform: translate(2px, 3px);
			box-shadow:
				1px 2px 0 -1.5px var(--background),
				1px 2px 0 0 var(--btn-stack-ink, var(--text-color));
		}
	}
}

/* v1 needs an explicit border width/style (only the color is dynamic above). */
[data-colors] .btn.v1 {
	border-width: var(--btn-v1-bdr-w);
	border-style: var(--btn-v1-bdr-stl);
}

/* -- Inline brand flair (FlairLeft) — sized centrally via this class so every inline
   placement matches. Header usage (.flr_hd > svg) keeps its own larger sizing via
   higher specificity. font-size is the knob; width:1em maps it to the flair width. */
.flr-lft {
	display: block;
	width: 1em;
	height: auto;
	font-size: var(--flr-inline-s);
}

/* -- Kicker: simple inline accent (no skew) ------------------------------------ */
.fnt_t-k {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/* -- Custom list bullet (square, brand accent) -------------------------------- */
.cnt-stl li {
	position: relative;
	padding-left: 1.2rem;
	&::before {
		content: '' !important;
		position: absolute !important;
		top: .55rem !important;
		left: 0 !important;
		width: 0.7em !important;
		height: 0.7em !important;
		background-color: var(--buttons) !important;
		border-radius: 0 !important;
		background-image: none !important;
	}
}