/* ==========================================================================
   BE Authentic Design System
   Brand guide v1 — be-authentic.me
   Shared dark theme with teal accent
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
	/* Brand — teal primary */
	--arc-accent:       #5FCEAB;
	--arc-accent-light: #7FDEBD;
	--arc-accent-dark:  #3DAB8A;
	--arc-accent-muted: #4A9E82;
	--arc-teal:         #5FCEAB;
	--arc-gold:         #CCA86B;
	--arc-steel-blue:   #7B93A8;

	/* Backgrounds */
	--arc-bg-deep:     #0D0D0F;
	--arc-bg-surface:  #1A1A1F;
	--arc-bg-elevated: #252530;
	--arc-border:      #2E2E3A;

	/* Semantic */
	--arc-success:     #5FCEAB;
	--arc-warning:     #CCA86B;
	--arc-error:       #E07A5F;
	--arc-info:        #7BA3C9;

	/* Text */
	--arc-text:        #FFFFFF;
	--arc-text-sec:    #A0A0A8;
	--arc-text-muted:  #6B6B75;
	--arc-text-accent: #7FDEBD;

	/* Typography */
	--arc-font:        'Open Sans', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Spacing */
	--arc-radius:      6px;
	--arc-radius-lg:   12px;
}

/* ---------- Global ---------- */
html,
body,
body.beauth-dark {
	background-color: var(--arc-bg-deep);
	color: var(--arc-text);
	font-family: var(--arc-font);
}

/* Force dark on all Astra structural wrappers */
#page,
#content,
.site,
.ast-container,
.ast-separate-container,
.ast-separate-container #primary,
.ast-separate-container #content > .ast-container,
.ast-plain-container,
.ast-page-builder-template .site-content,
.ast-single-post .site-content,
#primary,
#secondary,
.site-main,
.site-content,
.ast-full-width-layout,
.ast-full-width-layout .ast-container,
.ast-full-width-primary-sidebar,
.ast-right-sidebar,
.ast-left-sidebar,
.ast-no-sidebar,
.ast-box-layout,
.ast-plain-container .site-content .ast-container,
.ast-separate-container .site-content .ast-container {
	background-color: var(--arc-bg-deep) !important;
}

/* Astra separate container boxes — dark surface */
.ast-separate-container .site-main > .ast-article-single,
.ast-separate-container .site-main > .ast-article-post,
.ast-separate-container .ast-archive-description,
.ast-separate-container .ast-author-box {
	background-color: var(--arc-bg-surface);
}

::selection {
	background: var(--arc-accent);
	color: var(--arc-bg-deep);
}

a {
	color: var(--arc-accent);
	transition: color 0.2s ease;
}
a:hover,
a:focus {
	color: var(--arc-accent-light);
}

/* ---------- Header / Site Identity ---------- */
.ast-site-identity {
	display: flex;
	align-items: center;
}

/* Logo sizing — override Astra inline width */
.site-logo-img .custom-logo,
.custom-logo-link img,
.custom-logo {
	max-height: 40px !important;
	width: auto !important;
	height: auto !important;
}
.ast-site-identity .custom-logo-link {
	max-width: 48px;
}

/* Header avatar (logged in) */
.beauth-header-avatar {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.beauth-hex-ring {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	background: var(--arc-teal);
	clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
	flex-shrink: 0;
}
.ast-site-identity .beauth-hex-avatar,
.beauth-header-avatar .beauth-hex-avatar,
img.beauth-hex-avatar {
	width: 38px !important;
	height: 38px !important;
	max-width: 38px !important;
	clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%) !important;
	object-fit: cover !important;
	border: none !important;
	border-radius: 0 !important;
	display: block !important;
}
.beauth-header-name {
	color: var(--arc-text);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}

.site-title,
.site-title a {
	color: var(--arc-text) !important;
	font-family: var(--arc-font);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.main-header-bar,
.ast-primary-header-bar {
	background-color: var(--arc-bg-deep) !important;
	border-bottom: 1px solid var(--arc-border);
}

.main-header-menu .menu-link,
.ast-header-break-point .ast-mobile-popup-drawer .menu-link,
.main-navigation a {
	color: var(--arc-text-sec) !important;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}
.main-header-menu .menu-link:hover,
.main-navigation a:hover {
	color: var(--arc-accent) !important;
}

/* Current / active nav item */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link {
	color: var(--arc-accent) !important;
}

/* ---------- Page Headers ---------- */
.ast-page-builder-template .site-content > .ast-container,
.entry-header {
	background-color: var(--arc-bg-deep);
}

.entry-title,
h1, h2, h3, h4, h5, h6 {
	color: var(--arc-text);
	font-family: var(--arc-font);
	font-weight: 700;
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Teal accent for special headings */
.arc-heading-accent {
	color: var(--arc-text-accent);
}

/* ---------- Content ---------- */
.site-content,
.ast-container {
	background-color: var(--arc-bg-deep);
}

.entry-content p,
.entry-content li {
	color: var(--arc-text-sec);
	line-height: 1.75;
}

/* Cards / elevated surfaces */
.arc-card,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
	background-color: var(--arc-bg-surface);
	border: 1px solid var(--arc-border);
	border-radius: var(--arc-radius-lg);
	padding: 2rem;
}

/* ---------- Buttons ---------- */
.ast-button,
.button,
button,
input[type="submit"],
.wp-block-button__link {
	background-color: var(--arc-accent) !important;
	color: var(--arc-bg-deep) !important;
	border: none !important;
	border-radius: var(--arc-radius) !important;
	font-family: var(--arc-font);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.85rem;
	padding: 0.75em 1.75em;
	transition: background-color 0.2s ease, transform 0.15s ease;
}
.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--arc-accent-light) !important;
	transform: translateY(-1px);
}

/* Outline / ghost button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--arc-accent) !important;
	border: 2px solid var(--arc-accent) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--arc-accent) !important;
	color: var(--arc-bg-deep) !important;
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	background-color: var(--arc-bg-surface);
	color: var(--arc-text);
	border: 1px solid var(--arc-border);
	border-radius: var(--arc-radius);
	font-family: var(--arc-font);
	transition: border-color 0.2s ease;
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--arc-accent);
	outline: none;
	box-shadow: 0 0 0 2px rgba(95, 206, 171, 0.15);
}

/* ---------- Footer ---------- */
.site-footer,
.ast-footer-overlay,
.site-below-footer-wrap,
.site-above-footer-wrap,
.ast-footer-row-inline,
footer.site-footer,
.ast-builder-footer-grid-columns,
.site-footer-above-section-1,
.site-footer-primary-section-1,
.site-footer-below-section-1,
.ast-builder-grid-row {
	background-color: var(--arc-bg-deep) !important;
	border-top: 1px solid var(--arc-border);
}

.site-footer,
.site-footer a,
.ast-small-footer,
.ast-builder-layout-element,
.ast-footer-copyright {
	color: var(--arc-text-muted);
}
.site-footer a:hover {
	color: var(--arc-accent);
}

/* Social icons in footer */
.site-footer .ast-social-icon-image-wrap svg,
.site-footer .ast-builder-social-element svg {
	fill: var(--arc-accent-muted);
}
.site-footer .ast-builder-social-element:hover svg {
	fill: var(--arc-accent);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: var(--arc-bg-deep);
}
::-webkit-scrollbar-thumb {
	background: var(--arc-border);
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--arc-accent-muted);
}

/* ---------- Mobile / Responsive ---------- */
@media (max-width: 921px) {
	/* Mobile menu drawer */
	.ast-mobile-popup-drawer .ast-mobile-popup-inner {
		background-color: var(--arc-bg-surface) !important;
	}
	.ast-mobile-popup-drawer .menu-link {
		border-color: var(--arc-border) !important;
	}

	h1 { font-size: 2rem; }
	h2 { font-size: 1.5rem; }
}

/* ---------- Utility Classes ---------- */
.arc-accent    { color: var(--arc-accent); }
.arc-teal      { color: var(--arc-teal); }
.arc-gold      { color: var(--arc-gold); }
.arc-bg-surface { background-color: var(--arc-bg-surface); }
.arc-bg-elevated { background-color: var(--arc-bg-elevated); }
.arc-border     { border: 1px solid var(--arc-border); }
.arc-text-sec   { color: var(--arc-text-sec); }
.arc-text-muted { color: var(--arc-text-muted); }

/* Teal gradient text for headings */
.arc-gradient-text {
	background: linear-gradient(135deg, var(--arc-accent-light), var(--arc-accent), var(--arc-accent-dark));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Subtle teal glow for featured elements */
.arc-glow {
	box-shadow: 0 0 20px rgba(95, 206, 171, 0.1);
}

/* Fade-in animation */
.arc-fade-in {
	animation: arcFadeIn 0.6s ease-out forwards;
	opacity: 0;
}
@keyframes arcFadeIn {
	to { opacity: 1; }
}