/*
 * Travelers Hope — block style variations.
 *
 * Loaded on the front end AND inside the block editor, so what the owner sees
 * while editing is what visitors get. Everything here uses only the
 * --wp--preset--* custom properties generated by theme.json, because the
 * theme's own --th-* tokens are not guaranteed to resolve inside the editor
 * canvas.
 */

/* ------------------------------------------------------------ Alignments */

/*
 * The classic page and post templates print the content inside .th-wrap, which
 * is already width-limited. Without this, a wide or full-width block would be
 * indented a second time and end up narrower than the text beside it. No
 * viewport-width tricks here on purpose — they overflow as soon as a
 * scrollbar appears.
 */
.th-wrap > .alignwide,
.th-wrap > .alignfull {
	max-width: none;
	width: auto;
}

/* ---------------------------------------------------------------- Groups */

/* Block > Styles > "Elevated card" */
.wp-block-group.is-style-th-elevated {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--lift);
	padding: var(--wp--preset--spacing--30);
}

/* Block > Styles > "Bordered panel" */
.wp-block-group.is-style-th-panel {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
}

/* Block > Styles > "Tinted panel" */
.wp-block-group.is-style-th-tinted {
	background-color: var(--wp--preset--color--surface);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
}

/* A tinted or bordered panel used as a full-width band should not look like a
   floating card, so drop the rounding when it spans the page. */
.wp-block-group.alignfull.is-style-th-tinted,
.wp-block-group.alignfull.is-style-th-panel,
.wp-block-group.alignfull.is-style-th-elevated {
	border-radius: 0;
}

/* --------------------------------------------------------------- Buttons */

/* Block > Styles > "Outline" */
.wp-block-button.is-style-th-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy);
	box-shadow: none;
}

.wp-block-button.is-style-th-outline .wp-block-button__link:hover,
.wp-block-button.is-style-th-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* An outline button sitting on a navy band has to flip to light. */
.has-navy-background-color .wp-block-button.is-style-th-outline .wp-block-button__link,
.has-navy-deep-background-color .wp-block-button.is-style-th-outline .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-th-outline .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

.has-navy-background-color .wp-block-button.is-style-th-outline .wp-block-button__link:hover,
.has-navy-deep-background-color .wp-block-button.is-style-th-outline .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-th-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-deep);
}

/* Block > Styles > "Navy button" */
.wp-block-button.is-style-th-navy .wp-block-button__link {
	background-color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 8px;
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-th-navy .wp-block-button__link:hover,
.wp-block-button.is-style-th-navy .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--navy-light);
	border-color: var(--wp--preset--color--navy-light);
	color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------ Paragraphs */

/* Block > Styles > "Lead paragraph" */
p.is-style-th-lead {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
	max-width: 60ch;
}

/* Centred lead text has to centre its own box, not just its words. */
p.is-style-th-lead.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

/* Keep the lead readable when it sits on a dark band. */
.has-navy-background-color p.is-style-th-lead,
.has-navy-deep-background-color p.is-style-th-lead,
.wp-block-cover p.is-style-th-lead {
	color: inherit;
	opacity: 0.92;
}

/* Block > Styles > "Eyebrow label" */
p.is-style-th-kicker {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--gold-deep);
	margin-bottom: var(--wp--preset--spacing--10);
}

.has-navy-background-color p.is-style-th-kicker,
.has-navy-deep-background-color p.is-style-th-kicker,
.wp-block-cover p.is-style-th-kicker {
	color: var(--wp--preset--color--gold-tint);
}

/* ------------------------------------------------------------------ List */

/* Block > Styles > "Ticked list" */
ul.wp-block-list.is-style-th-checklist {
	list-style: none;
	padding-left: 0;
}

ul.wp-block-list.is-style-th-checklist li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
}

ul.wp-block-list.is-style-th-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--wp--preset--color--gold-deep);
}

.has-navy-background-color ul.wp-block-list.is-style-th-checklist li::before,
.has-navy-deep-background-color ul.wp-block-list.is-style-th-checklist li::before,
.wp-block-cover ul.wp-block-list.is-style-th-checklist li::before {
	color: var(--wp--preset--color--gold);
}

/* ------------------------------------------------------------- Separator */

/* Block > Styles > "Brand rule" — a short gold rule under a heading. */
.wp-block-separator.is-style-th-rule {
	background-color: var(--wp--preset--color--gold);
	border: 0;
	height: 3px;
	width: 64px;
	max-width: 64px;
	margin-left: 0;
	margin-right: auto;
	opacity: 1;
}

.wp-block-separator.is-style-th-rule.aligncenter,
.has-text-align-center .wp-block-separator.is-style-th-rule {
	margin-left: auto;
	margin-right: auto;
}