/* ==========================================================================
   TCA 2026 Announcement Bar
   Two custom properties control the whole thing. The PHP overrides these at
   :root via wp_add_inline_style from the CONFIG constants, so this file's
   values are just defaults.
   ========================================================================== */
:root{
	--tca-bg:#00B0DA;      /* bar background — Dentaltown light blue */
	--tca-accent:#e0a72e;  /* award gold accent */
	--tca-fg:#ffffff;
}

.tca-bar{
	background:var(--tca-bg);
	color:var(--tca-fg);
	font-size:14px;
	line-height:1.4;
	text-align:center;
	position:relative;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.tca-bar a{
	display:block;
	color:inherit;
	text-decoration:none;
	padding:11px 44px;
	min-height:42px;
}
.tca-bar a:hover .tca-cta{text-decoration:none}

.tca-msg{
	display:none;
	align-items:center;
	justify-content:center;
	gap:9px;
	flex-wrap:wrap;
}
.tca-msg.is-on{display:flex;animation:tcaFade .45s ease}
@keyframes tcaFade{from{opacity:0}to{opacity:1}}

.tca-flag{
	background:var(--tca-accent);
	color:#231a02;
	font-size:11px;
	font-weight:800;
	letter-spacing:.07em;
	text-transform:uppercase;
	padding:3px 8px;
	border-radius:3px;
	white-space:nowrap;
}
.tca-cta{
	text-decoration:underline;
	text-underline-offset:2px;
	font-weight:700;
	white-space:nowrap;
}
.tca-close{
	position:absolute;right:8px;top:50%;transform:translateY(-50%);
	background:none;border:0;color:var(--tca-fg);opacity:.65;
	font-size:20px;line-height:1;cursor:pointer;padding:6px 10px;
}
.tca-close:hover,
.tca-close:focus-visible{opacity:1}

/* Mobile: keep the award flag chip visible (it carries the campaign identity).
   flex-wrap lets it sit on its own line above the message. */
@media (max-width:600px){
	.tca-bar{font-size:13px}
	.tca-bar a{padding:10px 40px}
	.tca-msg{gap:5px 9px}
	.tca-flag{font-size:10px;padding:2px 7px}
}

/* Reduced motion: no fade, but the bar still rotates. */
@media (prefers-reduced-motion:reduce){
	.tca-msg.is-on{animation:none}
}