/*
Theme Name: PDK Civils & Construction
Theme URI: https://pdkon.co.za/
Description: Custom Astra child theme for PDK Civils & Construction.
Author: GrowthCraft
Author URI: https://growthcraft.org.za/
Template: astra
Version: 0.29.0

Changelog:
0.2.0 - Added the social-links component styles and a local
        screen-reader-text definition.
0.1.0 - Initial Stage 3 theme foundation.
*/

/*
 * PDK Civils & Construction
 * Theme foundation v0.2.0
 *
 * Production styles live in /assets/css/site.css.
 * This file carries the child-theme header WordPress needs to identify
 * the theme, plus small self-contained components added after the main
 * stylesheet was consolidated — keeping them here avoids another append
 * to the 9,000-line site.css.
 */

/* =========================================================
   SCREEN-READER TEXT
   The theme uses this class for the skip link and for the social
   labels, but it is not defined in site.css — it has been inherited
   from the Astra parent stylesheet. Defining it here too means a
   visually-hidden label can never render as visible text if Astra's
   CSS is ever dequeued or reordered.
   ========================================================= */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* =========================================================
   SOCIAL LINKS
   Shared by the header, mobile menu, footer and Contact page.
   Icons are inline SVG using currentColor, so each context sets
   the colour and the marks follow.
   ========================================================= */

.pdk-social {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pdk-social__link {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: inherit;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.pdk-social__icon {
	display: inline-flex;
	line-height: 0;
}

.pdk-social__link:hover,
.pdk-social__link:focus-visible {
	background: var(--pdk-gold, #c8a04b);
	border-color: var(--pdk-gold, #c8a04b);
	color: var(--pdk-navy, #071b3b);
}

.pdk-social__link:focus-visible {
	outline: 2px solid var(--pdk-gold, #c8a04b);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.pdk-social__link {
		transition: none;
	}
}

/* ---------- Header ---------- */

.pdk-social--header {
	gap: 8px;
	margin-right: 18px;
	color: var(--pdk-navy, #071b3b);
}

.pdk-social--header .pdk-social__link {
	width: 34px;
	height: 34px;
	border-color: rgba(7, 27, 59, .22);
}

/*
 * Over a dark hero the header is transparent until it scrolls, and the
 * menu switches to white — the icons have to follow, exactly as
 * .pdk-primary-menu does in site.css.
 */
body.has-overlay-hero .pdk-header:not(.is-scrolled) .pdk-social--header {
	color: var(--pdk-white, #fff);
}

body.has-overlay-hero .pdk-header:not(.is-scrolled) .pdk-social--header .pdk-social__link {
	border-color: rgba(255, 255, 255, .45);
}

/*
 * Hidden on smaller screens. The header already carries the logo, the
 * "Start a Project" button and the menu toggle; the same icons appear in
 * the mobile menu, so they are not lost.
 */
@media (max-width: 1080px) {
	.pdk-social--header {
		display: none;
	}
}

/* ---------- Mobile menu ---------- */

.pdk-social--mobile {
	margin-bottom: 22px;
	color: var(--pdk-white, #fff);
}

.pdk-social--mobile .pdk-social__link {
	border-color: rgba(255, 255, 255, .4);
}

/* ---------- Footer ---------- */

.pdk-social--footer {
	margin-top: 24px;
	color: var(--pdk-white, #fff);
}

.pdk-social--footer .pdk-social__link {
	border-color: rgba(255, 255, 255, .32);
}

/* ---------- Contact page ---------- */

.pdk-social--contact {
	margin-top: 26px;
	color: var(--pdk-navy, #071b3b);
}

.pdk-social--contact .pdk-social__link {
	border-color: rgba(7, 27, 59, .22);
}