/* ==========================================================================
   Header Top-Right CTA Buttons — Modern Stylesheet
   For: Sekondi Takoradi Metropolitan Assembly site header (header.php)

   Load this in <head>, after the theme's own stylesheets. header.php
   already contains:
     <link rel="stylesheet" href="css/header-modern.css" type="text/css" media="all">
   right before the .site-header-top-right block, so no further wiring
   is needed.

   This replaces the old inline <style> block and the duplicate/mismatched
   class attributes previously on each CTA link (some had TWO class
   attributes — browsers just used the first and silently dropped the
   second, so the buttons never actually matched each other visually).
   ========================================================================== */

:root{
	--hd-green:       #4f8a2b;
	--hd-green-dark:  #3d6c20;
	--hd-red:         #cd2122;
	--hd-red-dark:    #a51c1d;
	--hd-radius:      999px;
	--hd-font:        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.dp-topcta{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.dp-topcta__btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 16px;
	border-radius: var(--hd-radius);
	background: var(--hd-green);
	color: #fff;
	font-family: var(--hd-font);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease, opacity .2s ease;
}

.dp-topcta__btn i{
	font-size: 12px;
	opacity: .85;
	transition: opacity .2s ease;
}

.dp-topcta__btn:hover,
.dp-topcta__btn:focus-visible{
	background: var(--hd-green-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.dp-topcta__btn:hover i,
.dp-topcta__btn:focus-visible i{
	opacity: 1;
}

.dp-topcta__btn:active{
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(0,0,0,.15);
}

.dp-topcta__btn:focus-visible{
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* "Download Forms" is an in-page action rather than an external portal
   link, so it gets a distinct accent color to stand apart from the rest */
.dp-topcta__btn--accent{
	background: var(--hd-red);
}

.dp-topcta__btn--accent:hover,
.dp-topcta__btn--accent:focus-visible{
	background: var(--hd-red-dark);
}

/* --------------------------------------------------------------------
   Responsive — collapse to icon-only pills as the topbar narrows, so
   four buttons never wrap awkwardly or crowd out the phone number
   -------------------------------------------------------------------- */

@media (max-width: 1199px){
	.dp-topcta__btn span{
		display: none;
	}
	.dp-topcta__btn{
		width: 36px;
		padding: 0;
		justify-content: center;
	}
	.dp-topcta__btn i{
		font-size: 14px;
		opacity: 1;
	}
}

@media (max-width: 767px){
	.dp-topcta{
		gap: 6px;
	}
	.dp-topcta__btn{
		height: 32px;
		width: 32px;
	}
}
