/*
 * variables.css
 * Additional CSS custom properties and utility classes.
 * The root custom properties are defined in style.css.
 * This file adds component-level variables.
 */

/* ==========================================================================
   Buttons — Base Variables
   ========================================================================== */
:root {
	--btn-padding-y:     0.625rem;
	--btn-padding-x:     1.25rem;
	--btn-font-size:     0.9375rem;
	--btn-font-weight:   var(--font-weight-semibold);
	--btn-border-radius: var(--radius-sm);
	--btn-transition:    background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);

	/* Primary button */
	--btn-primary-bg:          var(--colour-green);
	--btn-primary-color:       var(--colour-navy-dark);
	--btn-primary-border:      var(--colour-green);
	--btn-primary-hover-bg:    var(--colour-green-dark);
	--btn-primary-hover-border: var(--colour-green-dark);

	/* Secondary button (outlined) */
	--btn-secondary-bg:         transparent;
	--btn-secondary-color:      var(--colour-white);
	--btn-secondary-border:     var(--colour-white);
	--btn-secondary-hover-bg:   var(--colour-white);
	--btn-secondary-hover-color: var(--colour-navy);

	/* Navy button */
	--btn-navy-bg:           var(--colour-navy);
	--btn-navy-color:        var(--colour-white);
	--btn-navy-hover-bg:     var(--colour-navy-light);
}

/* ==========================================================================
   Global Button Styles
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	font-family: var(--font-sans);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: 2px solid transparent;
	border-radius: var(--btn-border-radius);
	cursor: pointer;
	transition: var(--btn-transition);
}

.btn--primary {
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-color);
	border-color: var(--btn-primary-border);
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--btn-primary-hover-bg);
	border-color: var(--btn-primary-hover-border);
	color: var(--btn-primary-color);
	text-decoration: none;
}

.btn--secondary {
	background-color: var(--btn-secondary-bg);
	color: var(--btn-secondary-color);
	border-color: var(--btn-secondary-border);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
	background-color: var(--btn-secondary-hover-bg);
	color: var(--btn-secondary-hover-color);
	text-decoration: none;
}

.btn--navy {
	background-color: var(--btn-navy-bg);
	color: var(--btn-navy-color);
	border-color: var(--btn-navy-bg);
}
.btn--navy:hover,
.btn--navy:focus-visible {
	background-color: var(--btn-navy-hover-bg);
	border-color: var(--btn-navy-hover-bg);
	color: var(--btn-navy-color);
	text-decoration: none;
}

.btn--sm {
	padding: 0.375rem 0.875rem;
	font-size: var(--font-size-sm);
}

.btn--lg {
	padding: 0.875rem 1.75rem;
	font-size: var(--font-size-lg);
}

/* ==========================================================================
   Difficulty Badge Colours
   ========================================================================== */
.difficulty-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0.2em 0.7em;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--radius-full);
}

.difficulty-badge--beginner {
	background-color: #d4edda;
	color: #155724;
}

.difficulty-badge--intermediate {
	background-color: #fff3cd;
	color: #856404;
}

.difficulty-badge--advanced {
	background-color: #d1ecf1;
	color: #0c5460;
}

/* ==========================================================================
   Star Rating
   ========================================================================== */
.star--filled {
	color: #f9c74f;
}

.star--empty {
	color: var(--colour-grey-400);
}

/* ==========================================================================
   Affiliate / Legal Link Styles
   ========================================================================== */
.affiliate-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.5rem 1rem;
	background-color: var(--colour-green);
	color: var(--colour-navy-dark);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);
}
.affiliate-btn:hover {
	background-color: var(--colour-green-dark);
	color: var(--colour-navy-dark);
	text-decoration: none;
}