/**
 * Team Lizzie Bell tokens and shared pieces for the lp- components (events).
 *
 * Every value comes from the published pages, not from the old /events page.
 * Source of each value: lizzie-bell/site-style-audit.md.
 * Content width uses the site's .w-1200 utility class in the markup.
 */

/*--------------------------------------------------------------
# Tokens
--------------------------------------------------------------*/
:root {
	/* Color */
	--tlb-amber: var(--wp--preset--color--luminous-vivid-amber, #fcb900); /* button text */
	--tlb-green: #47ad03;           /* button border, separator, title banner */
	--tlb-yellow: #ffee00;          /* 8px borders, banner fill */
	--tlb-orange: #fa9c00;          /* button hover fill + border (style.css .orange-hover a:hover), banner word */
	--tlb-ink: #2e2c35;             /* links, intro text */
	--tlb-body: #404040;            /* body and headings */
	--tlb-white: #ffffff;
	--tlb-hero-bg: #221f1f;         /* behind the header image while it loads */
	--tlb-logo-backing: #222222;    /* CC .gala-logo-mobile */
	--tlb-link-hover: #191970;      /* style.css a:hover, a:focus, a:active */
	--tlb-divider: 2px dashed #2e2c35; /* CC .dotted-left707 (Our History) */

	/* Type (Roboto everywhere, headings 700) */
	--tlb-text-page-title: 62px;    /* inner page title banner */
	--tlb-text-page-title-mobile: 50px;
	--tlb-text-title-lg: 60px;      /* home hero / large section title */
	--tlb-text-title-lg-mobile: 50px;
	--tlb-text-title-md: 48px;      /* centered section title, yellow banner */
	--tlb-text-title-sm: 24px;      /* card / stat title (h2 default 1.5em) */
	--tlb-text-lead: 18px;          /* section paragraph */
	--tlb-text-body: 16px;

	/* Shape */
	--tlb-radius-card: 28px;
	--tlb-radius-image: 12px;
	--tlb-radius-bar: 6px;
	--tlb-radius-pill: 999px;
	--tlb-shadow-card: rgba(60, 64, 67, 0.3) 0 1px 2px 0, rgba(60, 64, 67, 0.15) 0 1px 3px 1px;

	/* Space */
	--tlb-space-section: 60px;      /* most used spacer on Home */
	--tlb-space-block: 40px;
	--tlb-gap-columns: 2em;         /* core columns gap */
	--tlb-gap-cards: 20px;
	--tlb-header-offset: 83px;      /* fixed masthead: 75px + 8px border */
	--tlb-icon-row: 48px;
}

/*--------------------------------------------------------------
# Shared components
--------------------------------------------------------------*/

/* Button row (wraps the core button markup from tlb_button())
--------------------------------------------- */
.lp-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Card button (Donate card size, Home button states)
   Normal: white fill, amber text, 2px green border (.green-border a).
   Hover/active: #fa9c00 fill and border, white text (style.css .orange-hover a:hover).
   Focus: site default a:focus outline (thin dotted). No transition, as on Home.
--------------------------------------------- */
.lp-link-button,
.lp-link-button:any-link {
	display: inline-block;
	padding: 12px 24px;
	border: 2px solid var(--tlb-green);
	border-radius: var(--tlb-radius-pill);
	background-color: var(--tlb-white);
	color: var(--tlb-amber);
	font-size: var(--tlb-text-lead); /* a = 18px (style.css p, a, span) */
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
}

.lp-link-button:hover,
.lp-link-button:active {
	border-color: var(--tlb-orange);
	background-color: var(--tlb-orange);
	color: var(--tlb-white);
}

/* Text link (secondary actions)
   Site link color, hover #191970; underline from global styles elements.link.
--------------------------------------------- */
.lp-text-link,
.lp-text-link:any-link {
	color: var(--tlb-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lp-text-link:hover,
.lp-text-link:active {
	color: var(--tlb-link-hover);
}

/* Dashed divider (dashed-line.svg, as on Home and How to Help)
--------------------------------------------- */
.lp-dashed-top {
	background: url("../images/dashed-line.svg") center top / 100% 10px no-repeat;
}