/*
 * custom.css — Project-specific styles and Bootstrap overrides.
 *
 * This file is loaded after bootstrap.min.css and style.css so any rule
 * here will take precedence. Add component-level customisations here
 * rather than editing Bootstrap or style.css directly.
 */

/* =============================================================================
   Links — Bootstrap's reboot sets text-decoration: underline as the base
   state for every <a>; this site doesn't want that anywhere by default.
   Any component that DOES want an underline (e.g. a text link inside body
   copy) can still opt in locally — this only removes the sitewide default.
   ============================================================================= */

a,
a:hover,
a:focus,
a:active {
	text-decoration: none;
}

/* =============================================================================
   CTA Buttons — shared markup rendered by bennelongia_render_cta_buttons()
   (inc/custom-functions.php), used by any section on any page/template.
   Each button's own colours/padding/font/border are set inline (admin-
   configured per button, per the Button (CTA) custom field); this file only
   handles layout, hover behaviour, and the icon. Global (not scoped to one
   page's CSS file) since multiple sections across different templates
   reuse the same component.
   ============================================================================= */

.cta-button {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	text-decoration: none;
	white-space:     nowrap;
	transition:      background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.cta-button:hover,
.cta-button:focus {
	background-color: var( --cta-hover-bg, inherit );
	color:            var( --cta-hover-color, inherit );
	text-decoration:  none;
}

.cta-button--full-width {
	width:           100%;
	justify-content: center;
}

/* Each button carries its own alignment rather than the wrapper reading
   its children's classes (avoids relying on :has(), which isn't supported
   in every browser this theme might need to run in). */
.cta-button--align-center {
	margin-inline: auto;
}

.cta-button--align-right {
	margin-left: auto;
}

.cta-button__icon {
	width:   1em;
	height:  1em;
	display: inline-block;
}

@media ( max-width: 767.98px ) {
	/* Each button's padding/font-size are admin-configured inline styles
	   (see bennelongia_render_cta_button() in inc/custom-functions.php) and
	   can be sized for a wide desktop layout — inline styles win over normal
	   CSS, so !important is the only way to rein them in responsively. */
	.cta-button {
		padding:   14px 28px !important;
		font-size: 17px !important;
	}
}

@media ( max-width: 575.98px ) {
	.cta-button {
		justify-content: center;
		padding:         12px 20px !important;
		font-size:       16px !important;
	}

	.cta-button--align-center,
	.cta-button--align-right {
		margin: 0; /* Stacked buttons at this width — auto-margins would fight a column layout. */
	}
}