/* ----------------------------------------------------------
   BUTTON SYSTEM — Primary / Secondary — Dark / Light
   Font: Atkinson Hyperlegible
   Usage: Add classes like .btn-primary-dark or .btn-secondary-light
----------------------------------------------------------- */

:root {
  /* Core Palette */
  --color-primary: #30758D;     /* Blue tone */
  --color-dark: #555555;        /* Text dark gray */
  --color-white: #FFFFFF;
}

/* ELEMENTOR UNIVERSAL BUTTON */

.style-guide-buttons {
	padding: 50px!important
}

/* Out of box elementor button styling  */
a.elementor-button.elementor-button-link.elementor-size-sm {
	padding: 8px 50px;
	background: #30758D!important;
	padding: 8px 50px;
	font-weight: 700;
	color: #fff!important;
}

a.elementor-button.elementor-button-link.elementor-size-sm:hover {
	padding: 8px 50px;
	background: #555!important;
	padding: 8px 50px;
	font-weight: 700;
	color: #fff!important;
	text-decoration: none;
	font-style: normal;
}
/* Out of box elementor button styling End */

/* --------------------------------------------------------------
   ELEMENTOR BUTTON STYLE — SECONDARY LIGHT
   --------------------------------------------------------------
   ▶ PURPOSE:
   This class creates the “Primary & Secondary” button design

   ▶ HOW TO USE IN ELEMENTOR:
   1. Add an Elementor "Button" widget.
   2. Go to the **Advanced** tab → **CSS Classes**.
   3. Enter: btn-secondary-light   (no dot).
   4. Elementor automatically adds its own button markup:
         <a class="elementor-button elementor-button-link elementor-size-sm">
   5. This CSS targets that exact structure, so the button styling applies properly.
---------------------------------------------------------------- */

/* Primary Light */
.btn-primary-light a.elementor-button.elementor-button-link.elementor-size-sm {
	background: #fff!important;
	padding: 8px 50px;
	font-weight: 700;
	color: #555!important;
}
.btn-primary-light a.elementor-button.elementor-button-link.elementor-size-sm:hover {
	background: #555!important;
	color: #fff!important;
	font-style: normal;
	text-decoration: none;
}


/* Primary Light Ends */

/* Secondary Dark (rest) */
.btn-secondary-dark a.elementor-button.elementor-button-link.elementor-size-sm {
	background: #30758D!important;
	padding: 10px 50px;
	font-weight: 700;
	font-size:25px;
	color: #fff!important;
}
.btn-secondary-dark a.elementor-button.elementor-button-link.elementor-size-sm:hover {
	background: #555!important;
	color: #fff!important;
	font-style: normal;
	text-decoration: none;
}

/* Secondary Dark (rest) Ends */


/* Secondary Light (rest) */
.btn-secondary-light a.elementor-button.elementor-button-link.elementor-size-sm {
	background: #fff!important;
	padding: 10px 50px;
	font-weight: 700;
	font-size:25px;
	color: #555!important;
}
.btn-secondary-light a.elementor-button.elementor-button-link.elementor-size-sm:hover {
	background: #555!important;
	color: #fff!important;
	font-style: normal;
	text-decoration: none;
}

/* Secondary Light (rest) Ends */


/* Accessibility focus */
.btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* Optional: spacing utilities */
.btn + .btn {
  margin-left: 10px;
}

/* Non-Elementor buttons */
input[type="submit"] {
	padding: 7px 50px!important;
	font-size: 20px!important;
}

input[type="submit"]:hover {
	color: #fff!important;
	font-style: normal!important
}