/*
 * Ever Social framework theme — main stylesheet.
 *
 * The brand aesthetic (colors, typography, buttons, header/footer look)
 * extracted from the original Ever Social site design. Content-free:
 * no page, pricing, testimonial, or client-specific styles live here.
 * Styled classes match the generic markup in header.php, footer.php,
 * and the templates: site-header, site-branding, site-nav, nav-menu,
 * site-footer, site-main, entry-content, etc.
 */

/* -------------------------------------------------------------------------
   1. Design tokens (brand)
   ------------------------------------------------------------------------- */
:root {
	--black: #1a1a1a;
	--white: #ffffff;
	--gray: #5d5d5d;
	--border: #e0e0e0;
	--accent: #3a4f43;
	--accent-light: #4a6a58;
	--accent-muted: #7b8677;
	--accent-dark: #2a3d33;
	--cream: #eae6e1;
	--radius: 12px;
	--max-width: 1200px;
	--font: 'Pontano Sans', sans-serif;
	--header-height: 74px;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font);
	color: var(--black);
	background: var(--white);
	line-height: 1.6;
	overflow-x: hidden;
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
	height: auto;
}

/* -------------------------------------------------------------------------
   3. Accessibility
   ------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--accent);
	color: var(--white);
	padding: 12px 20px;
	font-weight: 700;
}

.skip-link:focus {
	left: 0;
	top: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   4. Typography
   ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 16px;
}

h1 {
	font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
	font-size: clamp(2rem, 4vw, 3rem);
}

h2::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: var(--accent);
	margin: 12px 0 0;
	border-radius: 2px;
}

h3 {
	font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

h4 {
	font-size: 1.1rem;
}

/* -------------------------------------------------------------------------
   5. Layout utilities
   ------------------------------------------------------------------------- */
.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* Full-width blocks break out of the content container edge-to-edge.
   Editor options enabled by add_theme_support( 'align-wide' ) in
   functions.php. */
.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: auto;
}

/* Wide blocks extend past the content container within a 1280px cap. */
.alignwide {
	margin-left: calc(50% - min(50vw, 640px));
	margin-right: calc(50% - min(50vw, 640px));
	max-width: min(1280px, 100vw);
	width: auto;
}

/* Full-width sections: content inside a full-bleed strip stays at the
   same width as the content container (matches .container), so every
   section's content lines up left and right with the rest of the page.
   The trust bar (ever-social-trust-bar) is the exception: it is a thin
   banner whose short points spread across the full strip by design. */
.alignfull:not(.ever-social-trust-bar) > * {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Full-width coloured strips get a little breathing room top/bottom.
   The trust bar sets its own padding natively; this covers sections
   that don't (e.g. Core Services). Override per section in the editor:
   click the section -> Dimensions -> Padding. */
.wp-block-group.alignfull.has-background {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Full-width sections sit flush against each other: two coloured
   strips in a row (e.g. a cream band next to a green band) must not
   have the theme's default block gap (the white line) between them.
   Transparent sections keep the default gap so they still breathe. */
.entry-content > .wp-block-group.alignfull + .wp-block-group.alignfull {
	margin-top: 0;
}

/* Transparent (constrained) sections between full-width strips get
   proper vertical breathing room instead of the skinny 1.2em block
   gap - matches the section rhythm of the design (100px sections). */
.entry-content > .wp-block-group:not(.alignfull):not(.alignwide) {
	padding-top: 100px;
	padding-bottom: 100px;
}

/* Trust bar only: the strip's short trust points should be vertically
   centred, so zero the default paragraph bottom margin inside the trust
   bar (hooked by its ever-social-trust-bar class). Other full-width
   sections (e.g. Core Services) keep normal paragraph spacing. */
.ever-social-trust-bar .wp-block-columns,
.ever-social-trust-bar p {
	margin-top: 0;
	margin-bottom: 0;
}

/* Core Services: ensure the supporting line keeps its gap above the
   cards even if an older snippet version (that zeroed all banner
   paragraph margins) is still present in Additional CSS. The pattern
   also sets this margin natively on the sub-line paragraph. */
.wp-block-group.alignfull.has-background.ever-social-services p {
	margin-bottom: 16px;
}

/* "How It Works" step cards — card look + hover lift.
   Hooked by .ever-social-steps on the section's Group block. */
.ever-social-steps > .wp-block-columns > .wp-block-column {
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ever-social-steps > .wp-block-columns > .wp-block-column:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* "Core Services" cards — same hover lift as the step cards. */
.ever-social-services > .wp-block-columns > .wp-block-column {
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ever-social-services > .wp-block-columns > .wp-block-column:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* "Pricing" cards — same hover lift. The second columns block in the
   section holds the pricing cards (the first holds the contract boxes).
   Hooked by .ever-social-pricing on the section's Group block. */
.ever-social-pricing > .wp-block-columns:last-of-type > .wp-block-column {
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ever-social-pricing > .wp-block-columns:last-of-type > .wp-block-column:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* "Why Us" cards — same hover lift as the step cards.
   Hooked by .ever-social-why on the section's Group block. */
.ever-social-why > .wp-block-columns > .wp-block-column {
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ever-social-why > .wp-block-columns > .wp-block-column:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* "Testimonials" cards — same hover lift as the step cards.
   Hooked by .ever-social-testimonials on the section's Group block. */
.ever-social-testimonials > .wp-block-columns > .wp-block-column {
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ever-social-testimonials > .wp-block-columns > .wp-block-column:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

section {
	padding: 100px 0;
}

.text-center {
	text-align: center;
}

.text-center h2::after {
	margin-left: auto;
	margin-right: auto;
}

.text-gray {
	color: var(--gray);
}

.section-label {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--gray);
	margin-bottom: 12px;
}

/* -------------------------------------------------------------------------
   6. Buttons (brand pill style — the client adds buttons in page content)
   ------------------------------------------------------------------------- */
.btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 0.95rem;
	transition: all 0.3s ease;
	cursor: pointer;
	border: 2px solid var(--accent);
}

.btn-primary {
	background: var(--accent);
	color: var(--white);
}

/* Keep .btn buttons readable inside entry content (beats .entry-content a). */
.entry-content .btn-primary {
	color: var(--white);
}

.btn-primary:hover,
.btn-primary:focus {
	background: transparent;
	color: var(--accent);
}

.btn-secondary {
	background: transparent;
	color: var(--accent);
}

.entry-content .btn-secondary {
	color: var(--accent);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background: var(--accent);
	color: var(--white);
}

/* Give the block editor's native button block the same brand pill look. */
.wp-block-button__link {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: inherit;
	background: var(--accent);
	color: var(--white);
	border: 2px solid var(--accent);
	transition: all 0.3s ease;
	cursor: pointer;
}

/* Button links inside content areas must beat the generic link color rule. */
.entry-content .wp-block-button__link {
	color: var(--white);
	text-decoration: none;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--accent);
	text-decoration: none;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background: transparent;
	color: var(--accent);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--accent);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background: var(--accent);
	color: var(--white);
}

/* -------------------------------------------------------------------------
   7. Header
   ------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
	animation: fadeInDown 0.6s ease;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 24px;
	max-width: var(--max-width);
	margin: 0 auto;
}

.site-branding {
	display: flex;
	align-items: center;
}

.custom-logo-link img {
	max-height: 80px;
	width: auto;
}

.site-title {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--black);
}

.site-title:hover,
.site-title:focus {
	color: var(--accent);
}

/* Bundled brand wordmark (default when no custom logo is set) */
.site-logo {
	display: block;
	line-height: 0;
}

.brand-logo {
	max-height: 80px;
	width: auto;
	display: block;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.site-logo:hover .brand-logo,
.site-logo:focus .brand-logo {
	opacity: 0.7;
}

/* Mobile nav toggle (hidden on desktop) */
.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
}

.menu-toggle span[aria-hidden='true'] {
	width: 24px;
	height: 2px;
	background: var(--accent);
	transition: 0.3s;
}

/* -------------------------------------------------------------------------
   8. Navigation
   ------------------------------------------------------------------------- */
.site-nav {
	display: flex;
	align-items: center;
}

.nav-menu {
	display: flex;
	gap: 32px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu li {
	position: relative;
}

.nav-menu a {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 400;
	transition: opacity 0.2s;
	padding: 8px 0;
}

.nav-menu a:hover,
.nav-menu a:focus {
	opacity: 0.6;
}

.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a,
.nav-menu .current_page_item > a {
	color: var(--accent);
	font-weight: 700;
}

/* Dropdown submenus (desktop) */
.nav-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
	min-width: 200px;
	position: absolute;
	top: 100%;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 10;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-menu .sub-menu li {
	padding: 0 16px;
}

.nav-menu .sub-menu a {
	display: block;
	padding: 8px 0;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   9. Footer
   ------------------------------------------------------------------------- */
.site-footer {
	background: var(--accent-dark);
	padding: 60px 0 30px;
}

.footer-info {
	text-align: center;
	margin-bottom: 24px;
}

.site-footer .site-name {
	color: var(--white);
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 4px;
}

.site-footer .site-tagline {
	font-size: 0.9rem;
	color: var(--accent-muted);
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	margin-bottom: 40px;
}

.footer-widget-column .widget-title {
	color: var(--white);
	font-size: 1rem;
	margin-bottom: 16px;
}

.footer-widget-column .widget {
	margin-bottom: 24px;
}

.footer-widget-column .widget:last-child {
	margin-bottom: 0;
}

.footer-widget-column .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-widget-column .widget li {
	margin-bottom: 8px;
}

.footer-widget-column .widget li:last-child {
	margin-bottom: 0;
}

.footer-widget-column .widget a,
.footer-widget-column .widget p {
	font-size: 0.9rem;
	color: var(--accent-muted);
	transition: color 0.2s ease;
}

.footer-widget-column .widget p {
	margin-bottom: 8px;
}

.footer-widget-column .widget p:last-child {
	margin-bottom: 0;
}

.footer-widget-column .widget a:hover,
.footer-widget-column .widget a:focus {
	color: var(--white);
}

.footer-social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--white);
	transition: background 0.2s ease, opacity 0.2s ease;
}

.social-link:hover,
.social-link:focus {
	background: var(--accent-light);
	opacity: 1;
}

.social-link:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

.social-link svg {
	width: 20px;
	height: 20px;
	display: block;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 24px;
	text-align: center;
	font-size: 0.85rem;
	color: var(--accent-muted);
}

/* -------------------------------------------------------------------------
   10. Main content area
   ------------------------------------------------------------------------- */
.site-main {
	padding: calc(var(--header-height) + 90px) 0 80px;
}

.site-main--front {
	padding-top: calc(var(--header-height) + 90px);
}

.site-main--blank {
	padding-top: calc(var(--header-height) + 90px);
}

.entry-header {
	margin-bottom: 24px;
}

.entry-title a {
	color: var(--black);
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--accent);
}

/* Editor content typography */
.entry-content > * + * {
	margin-top: 1.2em;
}

.entry-content p {
	margin-bottom: 16px;
}

.entry-content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content a:hover,
.entry-content a:focus {
	text-decoration: none;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 2em;
}

.entry-content h2::after {
	margin: 12px 0 0;
}

/* Centered headings keep the accent underline centered instead of
   left-aligned inside the content column. */
.entry-content h2.has-text-align-center::after {
	margin-left: auto;
	margin-right: auto;
}

.entry-content ul,
.entry-content ol {
	padding-left: 24px;
	margin-bottom: 16px;
}

.entry-content li {
	margin-bottom: 6px;
}

.entry-content blockquote {
	border-left: 4px solid var(--accent);
	background: #f4f6f4;
	padding: 20px 24px;
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 1.1rem;
	font-style: italic;
	color: var(--gray);
	margin: 24px 0;
}

.entry-content blockquote p {
	margin-bottom: 0;
}

.entry-content img {
	border-radius: var(--radius);
}

.entry-content figure {
	margin: 24px 0;
}

.entry-content figcaption {
	font-size: 0.85rem;
	color: var(--gray);
	text-align: center;
	margin-top: 8px;
}

/* -------------------------------------------------------------------------
   11. Contact form
   ------------------------------------------------------------------------- */
.ever-social-contact-form .form-group {
	margin-bottom: 20px;
}

.ever-social-contact-form .form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 0.95rem;
	color: var(--black);
}

.ever-social-contact-form .form-group input[type="text"],
.ever-social-contact-form .form-group input[type="email"],
.ever-social-contact-form .form-group select,
.ever-social-contact-form .form-group textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	font-family: var(--font);
	font-size: 0.95rem;
	color: var(--black);
	background: var(--white);
	transition: border-color 0.2s;
}

.ever-social-contact-form .form-group input[type="text"]:focus,
.ever-social-contact-form .form-group input[type="email"]:focus,
.ever-social-contact-form .form-group select:focus,
.ever-social-contact-form .form-group textarea:focus {
	outline: none;
	border-color: var(--accent);
}

.ever-social-contact-form .form-group textarea {
	resize: vertical;
	min-height: 120px;
}

.ever-social-contact-form .form-group p {
	font-size: 0.8rem;
	color: var(--accent-muted);
	margin: 4px 0 8px;
}

.ever-social-contact-form .form-submit {
	margin-top: 8px;
}

.ever-social-contact-form .form-submit .btn {
	width: 100%;
	text-align: center;
}

.ever-social-contact-form .form-note {
	font-size: 0.85rem;
	color: var(--accent-muted);
	margin-top: 12px;
}

/* -------------------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.site-nav {
		display: none;
	}

	.site-nav.open {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--white);
		padding: 24px;
		border-bottom: 1px solid var(--border);
		align-items: stretch;
	}

	.site-nav.open .nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.site-nav.open .nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		border-radius: 0;
		background: transparent;
		padding: 4px 0 4px 16px;
		min-width: 0;
	}

	.menu-toggle {
		display: flex;
	}
}

@media (max-width: 600px) {
	section {
		padding: 60px 0;
	}

	.site-main {
		padding: calc(var(--header-height) + 40px) 0 60px;
	}

	.site-main--front {
		padding-top: calc(var(--header-height) + 40px);
	}

	.site-main--blank {
		padding-top: calc(var(--header-height) + 40px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}