@charset "utf-8";
/* ==========================================================================
   Marcus Today — Global Button System
   --------------------------------------------------------------------------
   File:     wp-content/themes/rhodos-child/css/mt-buttons.css
   Loaded:   rhodos-child/functions.php -> mt_buttons_styles() @ priority 999
   Docs:     /intellecta-prototypes  (live reference page)

   USAGE — combine one class from each axis. Solid + normal are the defaults,
   so the common case is just two classes.

     <a class="mt-btn pink">Free Trial</a>
     <a class="mt-btn gold large">Explore Portfolios</a>
     <a class="mt-btn white outline larger">Learn More</a>
     <a class="mt-btn navy outline small">Read the PDS</a>

     Colour   pink | gold | white | navy          (required)
     Style    solid | outline                     (default: solid)
     Size     small | normal | large | larger      (default: normal)
     Extras   block  — full width
              on-dark — lifts pink/gold for navy backgrounds

   DESIGN NOTE — why this cannot clash with anything on the site.
   The modifier classes (.pink, .white, .small ...) assign ONLY CSS custom
   properties. No theme, plugin or Bootstrap rule anywhere on this site sets
   an --mtb-* property, so modifiers can never be overridden no matter what
   specificity another stylesheet uses. Only the base rule consumes those
   properties, and it is written with a doubled class (.mt-btn.mt-btn) to
   clear the theme's .scheme_default .x rules — notably .scheme_default
   .white in rhodos-child/style.css, which would otherwise force white text.

   The bare words .pink / .white / .small are never styled on their own —
   they only ever take effect when combined with .mt-btn.

   Bootstrap 5.3 is loaded globally on this site, which is why this system
   deliberately avoids the .btn-* namespace entirely.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens — change a brand colour here and it changes everywhere
   -------------------------------------------------------------------------- */
:root {
	/* Pink — Elementor kit "Accent" / "Dark pink" */
	--mtb-pink:         #E00B5A;
	--mtb-pink-dark:    #E00b5A80; /* #8c1144; #cc1454*/
	--mtb-pink-light:   #E00B5A;

	/* Gold — sourced from the home page Rev Slider hero */
	--mtb-gold:         #AB8D4D;
	--mtb-gold-dark:    #AB8D4DAB;
	--mtb-gold-light:   #FFD084;

	/* Navy — Elementor kit "Primary" / "New Dark Blue" */
	--mtb-navy:         #001B71;
	--mtb-navy-dark:    #0D1F5C;

	/* White — hover uses kit "Light Blue" */
	--mtb-white:        #FFFFFF;
	--mtb-white-hover:  #3dc9fe;

	/* Shape & motion */
	--mtb-radius:       15px;
	--mtb-border-width: 1.5px;
	--mtb-font-weight:  600;
	--mtb-transition:   .25s ease;
	--mtb-focus-ring:   rgba(31, 116, 219, .65);
}


/* --------------------------------------------------------------------------
   2. Variable defaults — low specificity (0,1,0) so every modifier wins
   -------------------------------------------------------------------------- */
.mt-btn {
	--mtb-bg:        transparent;
	--mtb-fg:        var(--mtb-navy);
	--mtb-bd:        currentColor;
	--mtb-bg-hover:  transparent;
	--mtb-fg-hover:  var(--mtb-navy);
	--mtb-bd-hover:  currentColor;

	--mtb-pad-y:     10px;
	--mtb-pad-x:     22px;
	--mtb-size:      15px;
}


/* --------------------------------------------------------------------------
   3. Base — doubled class (0,2,0) to clear .scheme_default .x theme rules
   -------------------------------------------------------------------------- */
.mt-btn.mt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	box-sizing: border-box;
	margin: 0;
	padding: var(--mtb-pad-y) var(--mtb-pad-x);
	border: var(--mtb-border-width) solid var(--mtb-bd);
	border-radius: var(--mtb-radius);
	background-color: var(--mtb-bg);
	background-image: none;
	color: var(--mtb-fg);
	font-family: inherit;
	font-size: var(--mtb-size);
	font-weight: var(--mtb-font-weight);
	font-style: normal;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	vertical-align: middle;
	cursor: pointer;
	box-shadow: none;
	transition:
		background-color var(--mtb-transition),
		border-color     var(--mtb-transition),
		color            var(--mtb-transition);
}

/* Extra guard (0,3,0) — the theme scopes almost everything under
   body.scheme_default, so this keeps us ahead regardless of load order. */
.scheme_default .mt-btn.mt-btn {
	background-color: var(--mtb-bg);
	border-color: var(--mtb-bd);
	color: var(--mtb-fg);
}

.mt-btn.mt-btn:hover,
.mt-btn.mt-btn:focus,
.scheme_default .mt-btn.mt-btn:hover,
.scheme_default .mt-btn.mt-btn:focus {
	background-color: var(--mtb-bg-hover);
	border-color: var(--mtb-bd-hover);
	color: var(--mtb-fg-hover);
	text-decoration: none;
}

/* Keyboard focus ring — none of the current site buttons have one */
.mt-btn.mt-btn:focus-visible {
	outline: 3px solid var(--mtb-focus-ring);
	outline-offset: 2px;
}

.mt-btn.mt-btn[disabled],
.mt-btn.mt-btn.disabled {
	opacity: .5;
	pointer-events: none;
}

/* Icons sit inline without inheriting theme button icon positioning */
.mt-btn.mt-btn > iconify-icon,
.mt-btn.mt-btn > i,
.mt-btn.mt-btn > svg {
	flex: 0 0 auto;
	line-height: 1;
}


/* --------------------------------------------------------------------------
   4. Colours — solid is the default, .outline overrides it (0,3,0)
   -------------------------------------------------------------------------- */

/* --- Pink ---------------------------------------------------------------- */
.mt-btn.pink {
	--mtb-bg:       var(--mtb-pink);
	--mtb-fg:       var(--mtb-white);
	--mtb-bd:       var(--mtb-pink);
	--mtb-bg-hover: var(--mtb-pink-dark);
	--mtb-fg-hover: var(--mtb-white);
	--mtb-bd-hover: var(--mtb-pink-dark);
}
.mt-btn.pink.outline {
	--mtb-bg:       transparent;
	--mtb-fg:       var(--mtb-pink);
	--mtb-bd:       var(--mtb-pink);
	--mtb-bg-hover: var(--mtb-pink);
	--mtb-fg-hover: var(--mtb-white);
	--mtb-bd-hover: var(--mtb-pink);
}

/* --- Gold ---------------------------------------------------------------- */
.mt-btn.gold {
	--mtb-bg:       var(--mtb-gold);
	--mtb-fg:       var(--mtb-white);
	--mtb-bd:       var(--mtb-gold);
	--mtb-bg-hover: var(--mtb-gold-dark);
	--mtb-fg-hover: var(--mtb-white);
	--mtb-bd-hover: var(--mtb-gold-dark);
}
.mt-btn.gold.outline {
	--mtb-bg:       transparent;
	--mtb-fg:       var(--mtb-gold);
	--mtb-bd:       var(--mtb-gold);
	--mtb-bg-hover: var(--mtb-gold);
	--mtb-fg-hover: var(--mtb-white);
	--mtb-bd-hover: var(--mtb-gold);
}

/* --- Navy — the workhorse for white backgrounds -------------------------- */
.mt-btn.navy {
	--mtb-bg:       var(--mtb-navy);
	--mtb-fg:       var(--mtb-white);
	--mtb-bd:       var(--mtb-navy);
	--mtb-bg-hover: var(--mtb-navy-dark);
	--mtb-fg-hover: var(--mtb-white);
	--mtb-bd-hover: var(--mtb-navy-dark);
}
.mt-btn.navy.outline {
	--mtb-bg:       transparent;
	--mtb-fg:       var(--mtb-navy);
	--mtb-bd:       var(--mtb-navy);
	--mtb-bg-hover: var(--mtb-navy);
	--mtb-fg-hover: var(--mtb-white);
	--mtb-bd-hover: var(--mtb-navy);
}

/* --- White — intended for navy backgrounds ------------------------------- */
.mt-btn.white {
	--mtb-bg:       var(--mtb-white);
	--mtb-fg:       var(--mtb-navy);
	--mtb-bd:       var(--mtb-white);
	--mtb-bg-hover: var(--mtb-white-hover);
	--mtb-fg-hover: var(--mtb-navy);
	--mtb-bd-hover: var(--mtb-white-hover);
}
.mt-btn.white.outline {
	--mtb-bg:       transparent;
	--mtb-fg:       var(--mtb-white);
	--mtb-bd:       var(--mtb-white);
	--mtb-bg-hover: var(--mtb-white);
	--mtb-fg-hover: var(--mtb-navy);
	--mtb-bd-hover: var(--mtb-white);
}


/* --------------------------------------------------------------------------
   5. .on-dark — lifts pink & gold to stay legible on navy.
      Declared after the outline rules so equal-specificity ties resolve here.
   -------------------------------------------------------------------------- */
.mt-btn.gold.on-dark {
	--mtb-bg:       var(--mtb-gold);
	--mtb-fg:       var(--mtb-white);
	--mtb-bd:       var(--mtb-gold);
	--mtb-bg-hover: var(--mtb-gold-dark);
	--mtb-fg-hover: var(--mtb-white);
	--mtb-bd-hover: var(--mtb-gold-light);
}
.mt-btn.gold.outline.on-dark {
	--mtb-bg:       transparent;
	--mtb-fg:       var(--mtb-gold);
	--mtb-bd:       var(--mtb-gold);
	--mtb-bg-hover: var(--mtb-gold-dark);
	--mtb-fg-hover: var(--mtb-white);
	--mtb-bd-hover: var(--mtb-gold-light);
}
.mt-btn.pink.on-dark {
	--mtb-bg:       var(--mtb-pink);
	--mtb-fg:       var(--mtb-white);
	--mtb-bd:       var(--mtb-pink);
	--mtb-bg-hover: var(--mtb-pink-dark);
	--mtb-fg-hover: var(--mtb-white);
	--mtb-bd-hover: var(--mtb-pink-light);
}
.mt-btn.pink.outline.on-dark {
	--mtb-bg:       transparent;
	--mtb-fg:       var(--mtb-pink-light);
	--mtb-bd:       var(--mtb-pink-light);
	--mtb-bg-hover: var(--mtb-pink-light);
	--mtb-fg-hover: var(--mtb-navy);
	--mtb-bd-hover: var(--mtb-pink-light);
}


/* --------------------------------------------------------------------------
   6. Sizes
   -------------------------------------------------------------------------- */
.mt-btn.small  { --mtb-pad-y:  6px; --mtb-pad-x: 14px; --mtb-size: 13px; }
.mt-btn.normal { --mtb-pad-y: 10px; --mtb-pad-x: 22px; --mtb-size: 15px; }
.mt-btn.large  { --mtb-pad-y: 13px; --mtb-pad-x: 30px; --mtb-size: 17px; }
.mt-btn.larger { --mtb-pad-y: 16px; --mtb-pad-x: 38px; --mtb-size: 20px; }


/* --------------------------------------------------------------------------
   7. Layout helpers
   -------------------------------------------------------------------------- */
.mt-btn.mt-btn.block {
	display: flex;
	width: 100%;
}

/* Optional wrapper for a row of buttons */
.mt-btn-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}


/* --------------------------------------------------------------------------
   8. Interop — ONLY applies when .mt-btn is added to a theme/Elementor
      button widget. The theme's own button rules use !important
      (rhodos-child/style.css:44-51,157-158), so matching it is unavoidable
      here. This block is deliberately the only place !important appears.
   -------------------------------------------------------------------------- */
.mt-btn.sc_button,
.mt-btn.elementor-button,
.mt-btn.theme_button {
	background-image: none !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	padding: var(--mtb-pad-y) var(--mtb-pad-x) !important;
	border-width: var(--mtb-border-width) !important;
	border-radius: var(--mtb-radius) !important;
	font-size: var(--mtb-size) !important;
}

.scheme_default .mt-btn.sc_button:not(.sc_button_bg_image),
.scheme_default .mt-btn.elementor-button {
	background-color: var(--mtb-bg) !important;
	border-color: var(--mtb-bd) !important;
	color: var(--mtb-fg) !important;
}

.scheme_default .mt-btn.sc_button:not(.sc_button_bg_image):not([disabled]):hover,
.scheme_default .mt-btn.elementor-button:not([disabled]):hover {
	background-color: var(--mtb-bg-hover) !important;
	border-color: var(--mtb-bd-hover) !important;
	color: var(--mtb-fg-hover) !important;
}

/* Inner text spans of the theme/Elementor widgets must not re-colour */
.mt-btn .sc_button_text,
.mt-btn .sc_button_title,
.mt-btn .elementor-button-text,
.mt-btn .elementor-button-content-wrapper {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}


/* --------------------------------------------------------------------------
   9. Responsive — step the two big sizes down on phones
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.mt-btn.large  { --mtb-pad-y: 11px; --mtb-pad-x: 22px; --mtb-size: 16px; }
	.mt-btn.larger { --mtb-pad-y: 13px; --mtb-pad-x: 26px; --mtb-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.mt-btn.mt-btn { transition: none; }
}