/*
Theme Name: TSM Inspired Theme
Theme URI: https://example.com/tsm-inspired-theme
Author: Your Name
Author URI: https://example.com
Description: A modern, animated theme inspired by TSM Law, focusing on a clean header and footer.
Version: 1.3.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tsm-inspired-theme
Tags: custom-logo, custom-menu, law-firm, responsive-layout, full-width-template
*/

/*
 * ==========================================================================
 * 1. Global & Reset
 * ==========================================================================
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
		"Segoe UI Symbol";
	font-size: 16px;
	line-height: 1.6;
	color: #333;
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#content {
	flex-grow: 1;
	/* Add padding to account for the sticky header's height */
	/* Adjust 90px to your header's final height */
	padding-top: 90px; 
}

/* Main content container */
.container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem; /* 20px */
	padding-right: 1.25rem; /* 20px */
}

a {
	color: #0073aa;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

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

/*
 * ==========================================================================
 * 2. Accessibility
 * ==========================================================================
 */

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -1;
}

.skip-link:focus {
	left: 6px;
	top: 6px;
	width: auto;
	height: auto;
	padding: 10px 15px;
	background: #fff;
	color: #333;
	border: 2px solid #333;
	border-radius: 4px;
	overflow: auto;
	z-index: 100000;
	text-decoration: none;
	font-weight: 600;
}

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

/*
 * ==========================================================================
 * 3. Header (New Minimalist Style)
 * ==========================================================================
 */

.site-header {
	/*
	 * --- UPDATED FOR BLUR/TRANSPARENT EFFECT ---
	 * Changed background-color to be semi-transparent
	 * Added -webkit-backdrop-filter for Safari and backdrop-filter for other browsers
	 * Changed border to be a lighter, semi-transparent white for a "glass" edge
	 */
	background-color: rgba(204, 204, 204, 0.5); /* Semi-transparent grey */
	-webkit-backdrop-filter: blur(10px); /* For Safari */
	backdrop-filter: blur(10px); /* The blur effect */

	border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Light "glass" edge */
	box-shadow: none;
	
	/* Sticky Header Style */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/* --- MODIFICATION: Reverted z-index --- */
	z-index: 1000; /* Back to 1000, so overlays can cover icons */
	height: 90px; /* Fixed height for layout */
	padding: 0 1.25rem; /* 20px */
}

.header-container {
	height: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* --- THIS SECTION HAS BEEN MODIFIED --- */
/* Logo styling */
.site-branding {
	flex-shrink: 0;
	/* UPDATED: Make flex to align logo and text */
	display: flex;
	align-items: center;
	gap: 1rem; /* Space between logo and text */
	position: relative; /* NEW: Needed for z-index to work */
	
	/* --- MODIFICATION: Set z-index to be highest --- */
	z-index: 10003; /* Must be > overlays (10001, 10002) */
}
/* --- END OF MODIFIED SECTION --- */

/* NEW: Wrapper for title/tagline */
.site-branding-text {
	display: flex;
	flex-direction: column;
}


/* Style for text-based site title */
.site-branding .site-title {
	font-family: "Times New Roman", Times, serif; /* Serif font like image */
	font-size: 2rem; /* 32px */
	font-weight: 400;
	color: #222;
	text-decoration: none;
	letter-spacing: 1px;
	margin: 0;
	line-height: 1.2; /* Added for better spacing */
}
.site-branding .site-title a {
	color: inherit;
	text-decoration: inherit;
}

/* NEW: Style for Site Description (Tagline) */
.site-branding .site-description {
	font-size: 0.9rem;
	color: #555;
	margin: 0.1rem 0 0; /* Small top margin */
	font-family: 'Inter', sans-serif; /* Match body font */
	letter-spacing: normal;
	line-height: 1.4; /* Added for spacing */
}


/* Style for image-based logo */
.custom-logo-link {
	display: block;
}
.custom-logo {
    max-height: 60px; /* Adjust logo size */
    width: auto;
}

/* Header Icons */
.header-right-icons {
	display: flex;
	align-items: center;
	gap: 1.25rem; /* 20px */
}

.search-toggle,
.primary-menu-toggle {
	display: block;
	background: none;
	border: none;
	padding: 8px;
	margin: 0;
	cursor: pointer;
	color: #222;
}

.search-toggle svg,
.primary-menu-toggle .hamburger-icon {
	width: 24px;
	height: 24px;
	color: #222;
	stroke: currentColor;
}
.search-toggle svg {
	stroke-width: 2;
}

.hamburger-icon {
	display: block;
	width: 24px;
	height: 20px;
	position: relative;
}

.hamburger-icon .line {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #222;
	position: absolute;
	left: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-icon .line:nth-child(1) { top: 3px; }
.hamburger-icon .line:nth-child(2) { top: 9px; }
.hamburger-icon .line:nth-child(3) { top: 15px; }

/*
 * ==========================================================================
 * 4. Full-Screen Navigation Overlay (NEW TSM-LAW STYLE)
 * ==========================================================================
 */

/* --- THIS SECTION HAS BEEN MODIFIED --- */
.main-navigation {
	position: fixed;
	/* REMOVED: top, left, width, height */
	background-color: rgba(255, 255, 255, 0.85); /* Made slightly more transparent for blur */
	z-index: 10001; /* Below header (1000) & logo (10003) */

	/* Hidden by default */
	visibility: hidden;
	opacity: 0;
	/* UPDATED: New transform for a "pop" animation */
	transform: scale(0.98) translateY(-10px);
	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
	
	/* Enable scrolling if content overflows on small screens */
	overflow-y: auto; 

	/* --- NEW STYLES FOR 3D INSET --- */
	inset: 20px; /* This creates the 20px space on all 4 sides */
	width: auto;   /* Let 'inset' control the width */
	height: auto;  /* Let 'inset' control the height */
	border-radius: 12px; /* Stylish rounded corners */
	border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle 'glass' border */
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* The "3D" shadow effect */
	
	/* Adds a modern blur effect, similar to your header */
	-webkit-backdrop-filter: blur(20px); 
	backdrop-filter: blur(20px);
}
/* --- END OF MODIFIED SECTION --- */


/* Inner container for centering */
.main-navigation .nav-menu-inner {
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Pushes columns to top, posts to bottom */
	padding: 8rem 4rem 4rem;
	position: relative;
	min-height: 100%; /* Ensure it tries to fill the screen */
}

/* Close Button */
.nav-close-button {
	position: absolute;
	top: 2.5rem;
	right: 2.5rem;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	color: #222; /* Black close button */
}
.nav-close-button .close-icon {
	width: 28px;
	height: 28px;
	stroke: currentColor;
	stroke-width: 2;
}

/* Menu Columns Wrapper */
/* --- MODIFICATION: Changed to 4 columns --- */
.nav-menu-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem; /* Slightly smaller gap */
	width: 100%;
}

.nav-menu-column-title {
	font-family: "Times New Roman", Times, serif; /* Match branding */
	font-size: 1.25rem; /* --- MODIFICATION: Made smaller for 4 cols --- */
	font-weight: 400;
	color: #222;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.nav-menu-column-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu-column-list li {
	margin-bottom: 0.75rem; /* --- MODIFICATION: Tighter list --- */
}

.nav-menu-column-list a {
	font-family: 'Inter', sans-serif; /* Use modern sans-serif for links */
	font-size: 1rem; /* --- MODIFICATION: Made smaller for 4 cols --- */
	font-weight: 400;
	color: #333;
	text-decoration: none;
	/* UPDATED: Added for stylish hover */
	display: inline-block;
	transition: color 0.2s ease, transform 0.2s ease;
}

.nav-menu-column-list a:hover {
	color: #0073aa; /* Standard hover color */
	text-decoration: none;
	/* UPDATED: Stylish hover effect */
	transform: translateX(5px);
}

/* --- NEW: Sub Menu Styling --- */
.nav-menu-column-list .sub-menu {
	list-style: none;
	margin: 0.5rem 0 0.5rem 0.75rem;
	padding: 0;
	border-left: 2px solid #e0e0e0;
}
.nav-menu-column-list .sub-menu li {
	margin-bottom: 0.5rem;
}
.nav-menu-column-list .sub-menu a {
	font-size: 0.9rem; /* Smaller sub-item text */
	color: #555;
	padding-left: 0.75rem;
}
.nav-menu-column-list .sub-menu a:hover {
	color: #0073aa;
}


/* Latest Posts Section */
.nav-menu-latest-posts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	width: 100%;
	border-top: 1px solid #e0e0e0;
	padding-top: 2rem;
	margin-top: 4rem; /* Space between links and posts */
}

.latest-post-item .post-category {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	color: #777;
	letter-spacing: 0.5px;
	margin-bottom: 0.5rem;
}

.latest-post-item .post-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0.5rem 0;
	line-height: 1.4;
}

.latest-post-item .post-title a {
	color: #333;
	text-decoration: none;
}
.latest-post-item .post-title a:hover {
	text-decoration: underline;
}

.latest-post-item .post-read-more {
	display: inline-block;
	color: #0073aa;
	margin-top: 0.5rem;
}
.latest-post-item .post-read-more svg {
	width: 24px;
	height: 24px;
	transition: transform 0.2s ease;
}
.latest-post-item .post-read-more:hover svg {
	transform: translateX(5px);
}

/*
 * ==========================================================================
 * 4.5. Navigation Animations (NEW SECTION)
 * ==========================================================================
 */

/* 1. Set the initial (hidden) state for all elements */
.nav-menu-column-title,
.nav-menu-column-list li,
.nav-menu-latest-posts {
	opacity: 0;
	transform: translateY(15px);
	/* Set the transition for when menu closes */
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 2. Define the (visible) state when menu is open */
body.nav-menu-open .nav-menu-column-title,
body.nav-menu-open .nav-menu-column-list li,
body.nav-menu-open .nav-menu-latest-posts {
	opacity: 1;
	transform: translateY(0);
	/* Set the transition for when menu opens */
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 3. Add staggered delays for the "slide up" effect */

/* --- THIS RULE HAS BEEN MODIFIED --- */
/* Delay for Menu Overlay itself (from section 4) */
body.nav-menu-open .main-navigation {
	transform: scale(1) translateY(0); /* Final state for the new "pop" animation */
	opacity: 1;
}
/* --- END OF MODIFIED RULE --- */

/* --- MODIFICATION: Updated delays for 4 columns --- */
/* Delay for Column 1 */
body.nav-menu-open .nav-menu-column:nth-child(1) .nav-menu-column-title,
body.nav-menu-open .nav-menu-column:nth-child(1) .nav-menu-column-list li {
	transition-delay: 0.1s;
}

/* Delay for Column 2 */
body.nav-menu-open .nav-menu-column:nth-child(2) .nav-menu-column-title,
body.nav-menu-open .nav-menu-column:nth-child(2) .nav-menu-column-list li {
	transition-delay: 0.15s;
}

/* Delay for Column 3 */
body.nav-menu-open .nav-menu-column:nth-child(3) .nav-menu-column-title,
body.nav-menu-open .nav-menu-column:nth-child(3) .nav-menu-column-list li {
	transition-delay: 0.2s;
}

/* Delay for Column 4 */
body.nav-menu-open .nav-menu-column:nth-child(4) .nav-menu-column-title,
body.nav-menu-open .nav-menu-column:nth-child(4) .nav-menu-column-list li {
	transition-delay: 0.25s;
}
/* (Staggering for 5-8 is handled by list items) */


/* Delay for Latest Posts */
body.nav-menu-open .nav-menu-latest-posts {
	transition-delay: 0.3s;
}

/* 4. Stagger list items *within* columns for an even smoother effect */
/* We add a tiny delay to each subsequent list item */
body.nav-menu-open .nav-menu-column-list li:nth-child(1) { transition-delay: 0.15s; }
body.nav-menu-open .nav-menu-column-list li:nth-child(2) { transition-delay: 0.2s; }
body.nav-menu-open .nav-menu-column-list li:nth-child(3) { transition-delay: 0.25s; }
body.nav-menu-open .nav-menu-column-list li:nth-child(4) { transition-delay: 0.3s; }
body.nav-menu-open .nav-menu-column-list li:nth-child(5) { transition-delay: 0.35s; }
/* (You can add more if your menus are longer) */

/* And we combine the column delay with the item delay */
body.nav-menu-open .nav-menu-column:nth-child(2) li:nth-child(1) { transition-delay: 0.2s; }
body.nav-menu-open .nav-menu-column:nth-child(2) li:nth-child(2) { transition-delay: 0.25s; }
/* ... */
body.nav-menu-open .nav-menu-column:nth-child(3) li:nth-child(1) { transition-delay: 0.25s; }
body.nav-menu-open .nav-menu-column:nth-child(3) li:nth-child(2) { transition-delay: 0.3s; }
/* ... */
body.nav-menu-open .nav-menu-column:nth-child(4) li:nth-child(1) { transition-delay: 0.3s; }
body.nav-menu-open .nav-menu-column:nth-child(4) li:nth-child(2) { transition-delay: 0.35s; }
/* ... */


/*
 * ==========================================================================
 * 5. Menu Open/Close States (Toggled by JS)
 * ==========================================================================
 */

/* When menu is open, show the overlay */
body.nav-menu-open .main-navigation {
	visibility: visible;
}

/* Animate the hamburger icon to an 'X' */
body.nav-menu-open .primary-menu-toggle .line:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
body.nav-menu-open .primary-menu-toggle .line:nth-child(2) {
	opacity: 0;
}
body.nav-menu-open .primary-menu-toggle .line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Hide scrollbar on body when overlay is open */
body.nav-menu-open,
body.search-overlay-open {
	overflow: hidden;
}


/*
 * ==========================================================================
 * 6. Search Overlay & Form
 * ==========================================================================
 */

/* --- THIS SECTION HAS BEEN MODIFIED (1/2) --- */
.search-overlay {
	position: fixed;
	background-color: rgba(255, 255, 255, 0.85); /* Match nav */
	z-index: 10002; /* Below logo (10003) */
	display: flex;
	justify-content: center;
	align-items: center;

	/* Hidden by default */
	visibility: hidden;
	opacity: 0;
	/* UPDATED: New transform for a "pop" animation */
	transform: scale(0.98) translateY(-10px);
	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;

	/* --- MODIFICATION: "Cut off" the bottom --- */
	top: 10px;
	left: 10px;
	right: 10px;
	height: 300px; /* Set a fixed height */
	/* REMOVED: inset: 10px; */
	/* REMOVED: height: auto; */

	width: auto;   /* Let 'inset' control the width */
	border-radius: 12px; /* Stylish rounded corners */
	border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle 'glass' border */
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); /* The "3D" shadow effect */
	
	/* Adds a modern blur effect, similar to your header */
	-webkit-backdrop-filter: blur(20px); 
	backdrop-filter: blur(20px);
}
/* --- END OF MODIFIED SECTION --- */


.search-close-button {
	position: absolute;
	top: 2.5rem;
	right: 2.5rem;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	color: #222;
}
.search-close-button .close-icon {
	width: 28px;
	height: 28px;
	stroke: currentColor;
	stroke-width: 2;
}

.search-overlay-content {
	width: 100%;
	/* --- MODIFICATION 1.2: Made search bar wider --- */
	max-width: 550px; /* Was 400px */
	padding: 2rem;
}

.search-overlay .search-form {
	display: flex;
	border-bottom: 2px solid #222;
	position: relative;
}

.search-overlay .search-field {
	flex-grow: 1;
	/* --- MODIFICATION 1.3: Made text bigger --- */
	font-size: 1.75rem; /* Was 1.5rem */
	font-family: "Times New Roman", Times, serif;
	color: #222;
	border: none;
	background: transparent;
	padding: 0.5rem;
	padding-right: 40px; /* Space for button */
	width: 100%;
}
.search-overlay .search-field:focus {
	outline: none;
}

.search-overlay .search-submit {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: #222;
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}
.search-overlay .search-submit svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 2;
}


/* --- THIS SECTION HAS BEEN MODIFIED (2/2) --- */
/* When search is open, show the overlay */
body.search-overlay-open .search-overlay {
	visibility: visible;
	opacity: 1;
	transform: scale(1) translateY(0); /* Added for "pop" animation */
}
/* --- END OF MODIFIED SECTION --- */


/*
 * ==========================================================================
 * 7. Footer (Dynamic)
 * ==========================================================================
 */

/* --- THIS ENTIRE SECTION HAS BEEN REPLACED --- */

.site-footer {
	/* Background is set inline by footer.php */
	color: #d1d1d1;
	padding: 4rem 0 0; /* Padding at top, bottom bar adds its own */
	font-size: 0.95rem;
	position: relative;
	overflow: hidden; /* For newsletter pseudo-element */
}

.footer-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.footer-main-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 2fr; /* Layout like image */
	gap: 2.5rem;
	margin-bottom: 3rem;
}

/* Column 1: Info */
.footer-info-logo {
	margin-bottom: 2rem;
}

/* --- NEW: Style for Footer Logo --- */
.footer-info-logo .custom-logo,
.footer-info-logo .footer-logo-image {
	max-height: 40px; /* Smaller logo in footer */
	width: auto;
	filter: brightness(0) invert(1); /* Makes logo white */
}
.footer-info-logo .footer-site-title {
	font-family: "Times New Roman", Times, serif;
	font-size: 2rem;
	font-weight: 400;
	color: #ffffff;
	margin: 0;
}
.footer-info-logo .footer-site-title a {
	color: inherit;
	text-decoration: none;
}

.footer-info-block {
	margin-bottom: 1.5rem;
}
.footer-info-block .footer-info-title {
	font-size: 1rem;
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 0.5rem 0;
}
.footer-info-block address,
.footer-info-block p {
	font-style: normal;
	line-height: 1.7;
	margin: 0.25rem 0;
}
.footer-info-block a {
	color: #d1d1d1;
	text-decoration: none;
}
.footer-info-block a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* Column 2 & 3: Nav Menus */
/* --- NEW: Style for Nav Menu Titles --- */
.footer-nav-widget .footer-widget-title {
	font-size: 1rem;
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 1.5rem 0;
	/* This matches the style of .footer-info-title */
}

.footer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-nav-list li {
	margin-bottom: 0.75rem;
}
.footer-nav-list a {
	color: #d1d1d1;
	text-decoration: none;
	font-size: 1rem;
}
.footer-nav-list a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* Column 4: Newsletter */
.footer-newsletter-widget {
	background: rgba(255, 255, 255, 0.05); /* Faint dark bg */
	padding: 2.5rem;
	border-radius: 12px;
	position: relative;
	overflow: hidden; /* For pseudo-element */
}
/* This creates the green circle effect */
.footer-newsletter-widget::before {
	content: '';
	position: absolute;
	bottom: -150px;
	right: -150px;
	width: 300px;
	height: 300px;
	background: rgba(118, 172, 120, 0.5); /* Example green, you can change */
	border-radius: 50%;
	filter: blur(50px);
	z-index: 1;
}

.footer-newsletter-widget .footer-widget-title {
	font-size: 1.25rem;
	color: #ffffff;
	margin-top: 0;
	margin-bottom: 1.5rem;
	position: relative;
	z-index: 2;
}

.footer-newsletter-form {
	position: relative;
	z-index: 2;
}

/* Styling for a generic form or shortcode */
.footer-newsletter-form .newsletter-form-field,
.footer-newsletter-form .wpcf7-form-control-wrap {
	position: relative;
	margin-bottom: 1rem;
}

.footer-newsletter-form input[type="email"] {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	color: #ffffff;
	font-size: 1rem;
	padding: 0.75rem 2.5rem 0.75rem 0;
}
.footer-newsletter-form input[type="email"]::placeholder {
	color: #aaa;
}
.footer-newsletter-form input[type="email"]:focus {
	outline: none;
	border-bottom-color: #ffffff;
}

.footer-newsletter-form .newsletter-submit,
.footer-newsletter-form input[type="submit"] {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background: none;
	border: none;
	color: #ffffff;
	cursor: pointer;
	padding: 0 0.5rem;
}
.footer-newsletter-form input[type="submit"] {
	/* Specificity for CF7 */
	padding: 0.5rem !important;
	margin: 0 !important;
	width: auto !important;
	font-size: 1.5rem; /* Make arrow bigger */
}
.footer-newsletter-form .newsletter-submit svg {
	width: 24px;
	height: 24px;
}
/* Hide default CF7 button text */
.footer-newsletter-form input[type="submit"] {
	font-family: 'Times New Roman', Times, serif;
	content: '\2192'; /* Right Arrow */
	color: #fff;
	font-size: 24px;
}


.footer-newsletter-privacy {
	font-size: 0.7rem;
	color: #aaa;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-top: 1.5rem;
	position: relative;
	z-index: 2;
}

/* Footer Bottom Bar */
.footer-bottom-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding: 1.5rem 0;
	margin-top: 3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.footer-bottom-bar p {
	margin: 0;
}

.footer-bottom-social {
	display: flex;
	gap: 1.5rem;
}
.footer-bottom-social a {
	color: #d1d1d1;
	text-decoration: none;
}
.footer-bottom-social a:hover {
	color: #ffffff;
}

.footer-bottom-terms {
	color: #d1d1d1;
}
.footer-bottom-terms a {
	color: #d1d1d1;
	text-decoration: none;
}
.footer-bottom-terms a:hover {
	color: #ffffff;
}

/* --- MODIFIED: Copyright & Developer Credit --- */
.footer-bottom-copyright {
	color: #aaa;
	display: flex; /* Make items sit side-by-side */
	flex-wrap: wrap; /* Allow stacking */
	justify-content: flex-end;
	gap: 1rem; /* Space between copyright and dev link */
	text-align: right;
}

.footer-developer-credit a {
	color: #aaa;
	text-decoration: none;
	text-transform: none; /* Developer name is not uppercase */
}
.footer-developer-credit a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/*
 * ==========================================================================
 * 8. Basic Content Styles
 * ==========================================================================
 */

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

.entry-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-top: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin-bottom: 1.5rem;
}

.entry-content {
	max-width: 800px; /* Readable line length for content */
}

/*
 * ==========================================================================
 * 9. Responsive (UPDATED)
 * ==========================================================================
 */


/* --- Tablet Breakpoint (992px) --- */
/* For tablets in portrait */
@media (max-width: 992px) {
	/* Reduce nav padding */
	.main-navigation .nav-menu-inner {
		padding: 6rem 3rem 3rem;
	}
	
	/* --- MODIFICATION: 2-col nav grid on tablet --- */
	.nav-menu-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
	}
	
	/* Keep latest posts in 2 columns, but add margin */
	.nav-menu-latest-posts {
		margin-top: 3rem;
		gap: 1.5rem;
	}

	/* Disable complex staggering on mobile */
	body.nav-menu-open .nav-menu-column-list li,
	body.nav-menu-open .nav-menu-column:nth-child(2) li,
	body.nav-menu-open .nav-menu-column:nth-child(3) li {
		transition-delay: 0.2s; /* All items fade in together */
	}

	/* --- Footer Responsive --- */
	.footer-main-grid {
		grid-template-columns: 1fr 1fr; /* 2x2 grid */
	}
	.footer-newsletter-widget {
		grid-column: span 2; /* Make newsletter full width */
	}

	/* --- MODIFIED: Center copyright/dev on tablet --- */
	.footer-bottom-bar {
		flex-direction: column;
		gap: 1.5rem;
	}
	.footer-bottom-copyright {
		justify-content: center;
		text-align: center;
	}
}


/* --- Mobile Breakpoint (768px) --- */
/* For smaller tablets and large phones */
@media (max-width: 768px) {
	.site-header {
		height: 80px;
		padding: 0 1.5rem; /* Increased padding slightly */
	}
	#content {
		padding-top: 80px;
	}
	.site-branding .site-title {
		font-size: 1.75rem;
	}
	.custom-logo {
		max-height: 50px;
	}
	.header-right-icons {
		gap: 0.75rem;
	}

	/* --- NEW: Responsive Typography --- */
	h1, 
	.entry-title, 
	.page-title {
		font-size: 2rem; /* Was 2.5rem */
		line-height: 1.2;
	}

	h2, 
	.portal-title {
		font-size: 1.75rem; /* Was 2rem */
	}

	h3, 
	.portal-dashboard-module h3 {
		font-size: 1.35rem; /* Was 1.5rem */
	}

	.portal-form-wrapper {
		/* Add padding for large phones, 480px query will override for small phones */
		padding: 2.5rem 1.5rem; 
	}
	/* --- End Responsive Typography --- */


	/* --- MODIFICATION 1.4: Made mobile text bigger --- */
	/* Adjust search overlay for mobile */
	.search-overlay .search-field {
		font-size: 1.25rem; /* Was 1.15rem */
	}

	/* Adjust close button positions */
	.nav-close-button,
	.search-close-button {
		top: 1.5rem;
		right: 1.5rem;
	}

	/* --- Responsive Menu Overlay --- */
	/* Further reduce nav padding for phones */
	.main-navigation .nav-menu-inner {
		padding: 6rem 2rem 3rem;
	}

	/* --- MODIFICATION: 1-col nav grid on mobile --- */
	.nav-menu-columns {
		grid-template-columns: 1fr;
	}
	.nav-menu-column-title {
		font-size: 1.3rem;
		margin-bottom: 1rem;
	}
	.nav-menu-column-list a {
		font-size: 1rem;
	}
	.nav-menu-column-list li {
		margin-bottom: 0.75rem;
	}
	/* Stack latest posts on mobile */
	.nav-menu-latest-posts {
		grid-template-columns: 1fr;
	}
	.latest-post-item .post-title {
		font-size: 1rem;
	}

	/* --- Footer Responsive (Mobile) --- */
	.footer-main-grid {
		grid-template-columns: 1fr; /* Stack all columns */
	}
	.footer-newsletter-widget {
		grid-column: auto; /* Reset column span */
	}

	.footer-bottom-bar {
		flex-direction: column;
		gap: 1.5rem;
		text-align: center;
	}
	
	/* --- NEW: Mobile Social Links Fix --- */
	.footer-bottom-social {
		order: 1; /* Social on top */
		flex-wrap: wrap; /* Allow links to wrap */
		justify-content: center; /* Center the links */
	}
	
	.footer-bottom-terms {
		order: 2; /* Terms in middle */
	}
	.footer-bottom-copyright {
		order: 3; /* Copyright at bottom */
		justify-content: center; /* Center items */
	}
}


/*
 * ==========================================================================
 * 10. NEW: Secure Portal Styles
 * ==========================================================================
 */

/* --- Container for Login/Forgot Password pages --- */
.portal-login-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f4f4f4;
	padding-top: 0; /* Override default content padding */
}

/* * On login/forgot password pages, we hide the main header and admin bar.
 * We use the body class to do this.
*/
body.page-template-page-template-login-php .site-header,
body.page-template-page-template-forgot-password-php .site-header,
body.page-template-page-template-login-php #wpadminbar,
body.page-template-page-template-forgot-password-php #wpadminbar {
	display: none;
}

/* On login pages, we remove the top padding from the header */
body.page-template-page-template-login-php #content,
body.page-template-page-template-forgot-password-php #content {
	padding-top: 0;
	flex-grow: 1;
	display: flex;
	/* align-items: center;  <-- REMOVED to allow content to top-align */
	justify-content: center;
	padding: 6rem 2rem; /* UPDATED: Added top/bottom padding for spacing */
}


/* --- Main Form Wrapper --- */
.portal-form-wrapper {
	width: 100%;
	max-width: 440px;
	background-color: #ffffff;
	padding: 2.5rem;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	border: 1px solid #e0e0e0;
}

@media (max-width: 480px) {
	.portal-form-wrapper {
		padding: 2rem 1.5rem;
	}
}

.portal-title {
	font-family: "Times New Roman", Times, serif;
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0.5rem;
	color: #222;
}
.portal-subtitle {
	text-align: center;
	color: #555;
	margin-top: 0;
	margin-bottom: 2rem;
	font-size: 1rem;
}

/* --- Form Elements --- */
.portal-form-row {
	margin-bottom: 1.5rem;
}
.portal-form-row label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	color: #333;
}
.portal-form-row .input {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.portal-form-row .input:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.portal-form-row.remember-forgot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.9rem;
	margin-bottom: 2rem;
	flex-wrap: wrap; /* Allow wrapping on small screens */
	gap: 1rem;
}
.portal-remember {
	font-weight: 400;
	display: flex; /* Aligns checkbox and text */
	align-items: center;
}
.portal-remember input {
	margin-right: 0.5rem;
	position: relative;
	top: 0; /* Removed top: 1px */
}
.portal-forgot-link {
	font-weight: 600;
	text-decoration: none;
}
.portal-forgot-link:hover {
	text-decoration: underline;
}

/* --- Button --- */
.portal-button {
	width: 100%;
	padding: 0.85rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: #ffffff;
	background-color: #0073aa; /* Primary blue */
	border: none;
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.portal-button:hover {
	background-color: #005a87;
	box-shadow: 0 4px 15px rgba(0, 115, 170, 0.2);
}
.portal-button.secondary {
	background-color: #6c757d;
}
.portal-button.secondary:hover {
	background-color: #5a6268;
}


/* --- Messages (Error/Success) --- */
.portal-message {
	padding: 1rem;
	margin-bottom: 1.5rem;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 0.95rem;
}
.portal-message.error {
	background-color: #f8d7da;
	border-color: #f5c6cb;
	color: #721c24;
}
.portal-message.success {
	background-color: #d4edda;
	border-color: #c3e6cb;
	color: #155724;
}
.portal-back-link {
	text-align: center;
	margin-top: 2rem;
}
.portal-back-link a {
	font-weight: 600;
}


/*
 * ==========================================================================
 * 11. NEW: Secure Workspace Styles
 * ==========================================================================
 */

.portal-workspace-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	border-bottom: 2px solid #e0e0e0;
	padding-bottom: 1.5rem;
}
.portal-user-info {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap; /* Allow wrapping */
}
.portal-welcome {
	font-size: 1.1rem;
	font-weight: 600;
	color: #333;
}
.portal-logout-link {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #0073aa;
	border: 1px solid #0073aa;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.2s ease;
}
.portal-logout-link:hover {
	background-color: #0073aa;
	color: #ffffff;
	text-decoration: none;
}

.portal-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}
.portal-dashboard-module {
	background-color: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 2rem;
}
.portal-dashboard-module h3 {
	font-family: "Times New Roman", Times, serif;
	font-size: 1.5rem;
	margin-top: 0;
	margin-bottom: 1rem;
	color: #222;
}
.portal-dashboard-module ul {
	list-style: disc;
	padding-left: 1.25rem;
}
.portal-dashboard-module li {
	margin-bottom: 0.5rem;
}

/*
 * ==========================================================================
 * 12. Animation Styles
 * ==========================================================================
 */

.animate-fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}