/**
 * Components
 *
 * Reusable UI shared by more than one block: buttons, eyebrows, rich-text
 * defaults. Anything used by a single block lives in that block's own CSS.
 *
 * @package Norwegian_Flagstone
 */

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

/*
 * Figma spec: height 34px, radius 5px, Cabin 500 16px / 140%.
 * Width is padding-driven rather than the fixed 103px from the design file so
 * labels of any length stay centred and never truncate.
 */
.nf-btn {
	align-items: center;
	border: var(--nf-border-width) solid transparent;
	border-radius: var(--nf-radius);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--nf-font-body);
	font-size: var(--nf-fs-body);
	font-weight: var(--nf-font-weight-medium);
	gap: var(--nf-space-2xs);
	justify-content: center;
	line-height: var(--nf-lh-body);
	min-height: var(--nf-control-height);
	padding: var(--nf-space-3xs) var(--nf-control-padding-x);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--nf-transition),
		border-color var(--nf-transition),
		color var(--nf-transition);
	white-space: nowrap;
}

.nf-btn:focus-visible {
	outline: 2px solid var(--nf-color-accent);
	outline-offset: 2px;
}

/* Gold — the primary call to action ("Planner"). */
.nf-btn--gull {
	background-color: var(--nf-gull);
	color: var(--nf-mork-sort);
}

.nf-btn--gull:hover,
.nf-btn--gull:focus {
	background-color: var(--nf-gull-hover);
	color: var(--nf-mork-sort);
}

/* Dark — secondary ("Learn more"). */
.nf-btn--dark {
	background-color: var(--nf-mork-sort);
	color: var(--nf-lys);
}

.nf-btn--dark:hover,
.nf-btn--dark:focus {
	background-color: var(--nf-mork-sort-hover);
	color: var(--nf-lys);
}

/* Light — for use on dark or photographic backgrounds. */
.nf-btn--light {
	background-color: var(--nf-lys);
	color: var(--nf-mork-sort);
}

.nf-btn--light:hover,
.nf-btn--light:focus {
	background-color: var(--nf-white);
	color: var(--nf-mork-sort);
}

/* Outlines inherit the surrounding text colour via .nf-on-dark/.nf-on-light. */
.nf-btn--outline {
	background-color: transparent;
	border-color: currentcolor;
	color: var(--nf-color-text);
}

.nf-btn--outline:hover,
.nf-btn--outline:focus {
	background-color: var(--nf-color-text);
	border-color: var(--nf-color-text);
	color: var(--nf-color-bg);
}

.nf-on-dark .nf-btn--outline:hover,
.nf-on-dark .nf-btn--outline:focus {
	background-color: var(--nf-lys);
	color: var(--nf-mork-sort);
}

/* Text-only link button. */
.nf-btn--text {
	background-color: transparent;
	border-radius: 0;
	color: var(--nf-color-text);
	min-height: 0;
	padding-inline: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.nf-btn--text:hover,
.nf-btn--text:focus {
	color: var(--nf-color-link-hover);
	text-decoration-thickness: 2px;
}

/* Size modifiers. */
.nf-btn--s {
	font-size: var(--nf-fs-small);
	min-height: 1.75rem;
	padding-inline: var(--nf-space-s);
}

.nf-btn--l {
	min-height: 2.75rem;
	padding-inline: var(--nf-space-l);
}

.nf-btn--block {
	width: 100%;
}

/* Eyebrow / overline ------------------------------------------------------- */

.nf-eyebrow {
	display: block;
	font-family: var(--nf-font-body);
	font-size: var(--nf-fs-small);
	font-weight: var(--nf-font-weight-medium);
	letter-spacing: var(--nf-tracking-wide);
	margin-bottom: var(--nf-space-2xs);
	text-transform: uppercase;
}

/* Display headings --------------------------------------------------------- */

/*
 * Caesura display type. Hero and section titles both use this so the family,
 * weight and balance behaviour stay identical across blocks.
 */
/* margin-block, not margin — a shorthand here would silently reset the inline
   margins that blocks use for centring. */
.nf-display {
	font-family: var(--nf-font-display);
	font-weight: var(--nf-font-weight-bold);
	line-height: var(--nf-lh-display);
	margin-block: 0;
	text-wrap: balance;
}

/* Rich text ---------------------------------------------------------------- */

/* Wrapper for editor-supplied WYSIWYG output. */
.nf-richtext > :first-child {
	margin-top: 0;
}

.nf-richtext > :last-child {
	margin-bottom: 0;
}

.nf-richtext a:not(.nf-btn) {
	text-decoration: underline;
}

/* Editor placeholder ------------------------------------------------------- */

/*
 * Shown inside the block editor when a block has no content yet, so an empty
 * block is still selectable instead of collapsing to zero height.
 */
.nf-block-placeholder {
	align-items: center;
	background-color: var(--nf-mork-sort-15);
	border: 1px dashed var(--nf-mork-sort-50);
	border-radius: var(--nf-radius);
	color: var(--nf-mork-sort);
	display: flex;
	font-family: var(--nf-font-body);
	font-size: var(--nf-fs-small);
	justify-content: center;
	min-height: 6rem;
	padding: var(--nf-space-m);
	text-align: center;
}