/**
 * Main Stylesheet - Component Styles
 *
 * This file contains component-specific styles.
 * Global styles, reset, and variables are in global.css
 *
 * @package CARE-INF
 * @since 1.0.0
 */

/* ==========================================================================
   Layout
   ========================================================================== */

.site {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.site-header {
	width: 100%;
	padding: 0;
	border-bottom: 1px solid var(--care-inf-border-color);
	margin-bottom: 0;
	background: var(--care-inf-bg-color);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--care-inf-spacing-md);
	margin-bottom: 0;
	flex-shrink: 0;
}

.custom-logo-link {
	display: block;
	transition: transform 0.3s ease;
}

.custom-logo-link:hover {
	transform: scale(1.05);
}

.custom-logo-link img,
.site-branding img {
	max-height: 100px;
	width: auto;
	height: auto;
	display: block;
}

.site-title {
	font-size: 1.5rem;
	margin: 0;
}

.site-title a {
	color: var(--care-inf-primary);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.site-title a:hover {
	text-decoration: none;
	color: var(--care-inf-accent);
}

.site-description {
	font-size: 0.875rem;
	color: #666;
	margin: 0;
}

/* ==========================================================================
   Navigation - Base Styles
   ========================================================================== */

/* Base navigation styles - landing-page.css has specific overrides */
.main-navigation {
	margin-top: 0;
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.menu-toggle {
	display: none;
}

.nav-menu {
	list-style: none;
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
}

.nav-menu li {
	margin: 0;
}

.nav-menu a {
	color: var(--care-inf-primary);
	padding: var(--care-inf-spacing-xs) 0;
	display: block;
	font-weight: 500;
	transition: var(--care-inf-transition);
	text-decoration: none;
}

.nav-menu a:hover {
	color: var(--care-inf-accent);
}

/* ==========================================================================
   Content
   ========================================================================== */

.site-main {
	width: 100%;
	padding: 0;
}

/* Non-front-page content gets a contained width */
.site-main:not(.front-page) {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 20px;
}

.entry-header {
	margin-bottom: 1.5rem;
}

.entry-title {
	margin-bottom: 0.5rem;
}

.entry-title a {
	color: var(--care-inf-text-color);
}

.entry-title a:hover {
	color: #0073aa;
	text-decoration: none;
}

.entry-meta {
	font-size: 0.875rem;
	color: #666;
	margin-bottom: 1rem;
}

.entry-content {
	margin-bottom: 1.5rem;
}

.entry-content img {
	max-width: 100%;
	height: auto;
}

.post-thumbnail {
	margin-bottom: 1.5rem;
}

.post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

.entry-footer {
	font-size: 0.875rem;
	color: #666;
	padding-top: 1rem;
	border-top: 1px solid var(--care-inf-border-color);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
	margin-top: 2rem;
}

.widget {
	margin-bottom: 2rem;
	padding: 1.5rem;
	background: var(--care-inf-bg-light);
	border-radius: 4px;
}

.widget-title {
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	width: 100%;
	margin-top: 0;
	padding: 0;
	border-top: none;
	background: none;
}

.footer-widgets {
	margin-bottom: 2rem;
}

.footer-widget-area {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
}

.site-info {
	text-align: center;
	font-size: 0.875rem;
	color: #666;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--care-inf-border-color);
}

.site-info a {
	color: var(--care-inf-primary);
	font-weight: 500;
}

.site-info a:hover {
	color: var(--care-inf-accent);
}

/* ==========================================================================
   Buttons & Interactive Elements
   ========================================================================== */

/* Button styles are in global.css - Component-specific button overrides in landing-page.css */

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Utility classes are in global.css - Component-specific utilities here if needed */

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.footer-widget-area {
		grid-template-columns: 1fr;
	}
}

/* Mobile menu styles are in landing-page.css */