/*
Theme Name:   Foxiz Child – Democracy Cup
Theme URI:    https://www.parliamentdemocracycup.com.gh/
Description:  Democracy Cup branding for Foxiz: red palette, Barlow Condensed and Inter, red header, dark footer, rounded cards.
Author:       Democracy Cup
Template:     foxiz
Version:      1.0.5
Text Domain:  foxiz-child
*/

/* ==========================================================================
   Brand palette and fonts.
   This file loads after Foxiz's own CSS and Theme Options, so these values
   win: change the brand colours and fonts here, not in Theme Options.
   ========================================================================== */
:root {
	--dc-red: #c62832;
	--dc-red-dark: #a41f28;
	--dc-red-deep: #86171d;
	--dc-ink: #1c1a1b;
	--dc-grey: #6b5859;
	--dc-off-white: #fbf1f1;
	--dc-line: #f0dcdc;
	--dc-black: #17161a;
	--dc-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--dc-body: "Inter", "Helvetica Neue", Arial, sans-serif;

	/* Accent */
	--g-color: var(--dc-red);
	--g-color-90: #c62832e6;
	--body-fcolor: var(--dc-ink);

	/* Fonts */
	--body-family: var(--dc-body);
	--input-family: var(--dc-body);
	--tagline-family: var(--dc-body);
	--h1-family: var(--dc-display);
	--h2-family: var(--dc-display);
	--h3-family: var(--dc-display);
	--h4-family: var(--dc-display);
	--h5-family: var(--dc-display);
	--h6-family: var(--dc-display);
	--menu-family: var(--dc-display);
	--submenu-family: var(--dc-display);
	--btn-family: var(--dc-display);
	--cat-family: var(--dc-display);
	--meta-family: var(--dc-body);
	--dwidgets-family: var(--dc-display);

	/* Menus and buttons in the old site's uppercase style */
	--menu-transform: uppercase;
	--menu-fweight: 600;
	--menu-fspace: 0.04em;
	--submenu-transform: uppercase;
	--submenu-fspace: 0.03em;
	--btn-transform: uppercase;
	--btn-fspace: 0.06em;
	--cat-fspace: 0.12em;

	/* Softer, rounder corners like the old cards */
	--round-3: 6px;
	--round-5: 10px;
	--round-7: 14px;

	/* Red header with white menu (dropdowns stay white) */
	--nav-bg: var(--dc-red-deep);
	--nav-bg-from: var(--dc-red-deep);
	--nav-bg-to: var(--dc-red-deep);
	--nav-bg-glass: #86171dee;
	--nav-bg-glass-from: #86171dee;
	--nav-bg-glass-to: #86171dee;
	--nav-color: #fff;
	--nav-color-10: #ffffff26;
	--nav-color-h: #fff;
	--nav-color-h-accent: #fff;

	/* Facebook's own blue for share buttons (Foxiz default is a pale blue) */
	--fb-color: #1877f2;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Logo sits on a white chip so it reads on the red bar, as on the old site */
.header-wrap .logo-wrap img,
.header-mobile .logo-wrap img {
	background: #fff;
	border-radius: 50%;
	padding: 3px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}

.header-mobile-wrap {
	background: var(--nav-bg);
	color: var(--nav-color);
}

/* Active and hovered menu item: white underline on the red bar */
.header-wrap .main-menu > li > a:hover,
.header-wrap .main-menu > li.current-menu-item > a {
	color: #fff;
}

/* ==========================================================================
   Section headings (Foxiz Heading block): bold condensed uppercase
   ========================================================================== */
.block-h .heading-title {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 800;
}

/* ==========================================================================
   Breaking news ticker: readable headline, solid red "Breaking" badge
   ========================================================================== */
.block-breaking-news .breaking-news-title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

.block-breaking-news .breaking-news-heading {
	padding: 6px 12px;
	background-color: var(--dc-red);
	color: #fff;
	font-family: var(--dc-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.block-breaking-news .breaking-news-heading i {
	color: #fff;
}

@media (max-width: 767px) {
	.block-breaking-news .breaking-news-title {
		font-size: 15px;
	}
}

/* ==========================================================================
   Cards and images
   ========================================================================== */
.p-featured,
.p-featured img,
.overlay-holder {
	border-radius: var(--round-7);
}

.p-grid .p-featured,
.block-hrc .p-featured {
	box-shadow: 0 10px 30px rgba(140, 26, 32, 0.12);
}

/* ==========================================================================
   Footer: near-black like the old site
   ========================================================================== */
.footer-wrap,
.footer-wrap .footer-has-bg {
	background-color: var(--dc-black);
	color: rgba(255, 255, 255, 0.75);
}

.footer-wrap a,
.footer-wrap .widget-title,
.footer-wrap h1,
.footer-wrap h2,
.footer-wrap h3,
.footer-wrap h4,
.footer-wrap h5,
.footer-wrap h6 {
	color: #fff;
}

.footer-wrap a:hover {
	color: var(--dc-red);
}

/* Column headings: white, bold, uppercase (Foxiz's light scheme makes them small and grey).
   Foxiz puts the text in an inner element coloured by --heading-color. */
.footer-wrap .widget-heading {
	--heading-color: #fff;
}

.footer-wrap .widget-heading .heading-title,
.footer-wrap .widget-heading .heading-title > * {
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Column links: plain light text like the old footer, red on hover */
.footer-wrap .textwidget ul {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-wrap .textwidget a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 400;
	text-decoration: none;
	background-image: none;
	box-shadow: none;
}

.footer-wrap .textwidget a:hover {
	color: var(--dc-red);
}

/* Logo on a round white badge, as in the header. Foxiz caps the logo box with --flogo-height
   (50px, 80% of that on phones), so size the badge from the box to keep it a circle. */
.footer-wrap {
	--flogo-height: 64px;
}

.footer-wrap .footer-logo img {
	width: auto;
	height: 100%;
	max-height: none;
	aspect-ratio: 1 / 1;
	padding: 6px;
	object-fit: contain;
	background: #fff;
	border-radius: 50%;
}

/* ==========================================================================
   Helper classes for Elementor sections (Advanced → CSS Classes)
   dc-tint  – the old site's soft pink section background
   dc-dark  – near-black section with white text
   ========================================================================== */
.dc-tint {
	background-color: var(--dc-off-white);
}

.dc-dark {
	background-color: var(--dc-black);
	color: rgba(255, 255, 255, 0.8);
}

.dc-dark h1,
.dc-dark h2,
.dc-dark h3,
.dc-dark .heading-title {
	color: #fff;
}