/*
Theme Name: Move Assist
Theme URI: https://moveassistnow.com
Author: 
Author URI: 
Description: Custom theme for Move Assist - Senior move management, downsizing, and home organization services in the Coulee Region.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.9
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moveassist
*/

/* ------------------------------
   Base / Normalize-lite
------------------------------ */

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

html {
	font-size: 100%;
}

body {
	margin: 0;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------
   Typography
------------------------------ */

body,
button,
input,
select,
textarea {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	line-height: 1.25;
}

p {
	margin: 0 0 1em;
}

/* ------------------------------
   Links
------------------------------ */

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

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

/* ------------------------------
   Media
------------------------------ */

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

/* ------------------------------
   Layout Helpers
------------------------------ */

.site {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
}

/* ------------------------------
   WordPress Core
------------------------------ */

.alignleft { float: left; margin-right: 1rem; }
.alignright { float: right; margin-left: 1rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.875rem; }

/* ------------------------------
   Forms
------------------------------ */

input, textarea, select, button { font: inherit; }
button { cursor: pointer; }

/* ------------------------------
   Design / Brand
------------------------------ */

:root {
	--font-body: "Roboto", sans-serif;
	--font-heading: "Roboto Condensed", sans-serif;
	--light-green: #D7E4C5;
	--dark-green: #A4BF72;
	--light-blue: #CFEAF6;
	--alt-blue: #C6D8E9;
	--dark-blue: #5E99D3;
	--page-blue: #E6F4F5;
	--light-tan: #F9F3E5;
	--dark-tan: #E0C682;
	--soft-lavender: #C9C3E6;
	--soft-lavender-dark: #9E97C8;
}

body { font-family: var(--font-body); font-weight: 400; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; }

button {
	background-color: var(--dark-blue);
	border-radius: 10px;
	color: #FFF;
	font-weight: bold;
	padding: 30px;
	text-transform: uppercase;
}

#wrapper { max-width: 1200px; margin: 0 auto; }

/* Top Bar */
#topbar { align-items: center; display: flex; }

/* Desktop Menu */
#desktop-menu > div > ul {
	border-bottom: 2px solid #D7D8D9;
	display: flex;
	font-family: var(--font-heading);
	gap: 1rem;
	justify-content: space-between;
	list-style: none;
}

#desktop-menu a { text-decoration: none; text-transform: uppercase; }
#desktop-menu li:hover .sub-menu li { color: #000; }
#desktop-menu li.menu-item-has-children { position: relative; }
#desktop-menu li { padding-bottom: 1rem; }
#desktop-menu li a { padding: 1rem; }
#desktop-menu li .sub-menu li { padding-bottom: 0; }

#desktop-menu .sub-menu {
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	display: none;
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 180px;
	padding: 0;
	position: absolute;
	top: 100%;
	z-index: 1000;
}

#desktop-menu li a:hover,
#desktop-menu li a:hover .sub-menu li a:hover { background-color: var(--light-tan); color: var(--dark-blue); }

#desktop-menu li.menu-item-has-children:hover > .sub-menu { display: block; left: 0; position: absolute; z-index: 1000; }
#desktop-menu .sub-menu li a { display: block; padding: 8px 16px; white-space: nowrap; }
#desktop-menu .sub-menu li a:hover { background-color: var(--light-tan); color: var(--dark-blue); }
#desktop-menu .current-menu-item a:first-of-type { background-color: var(--dark-blue); color: #FFF; }

/* In-Page Nav */
#in-page-nav {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	list-style: none;
	padding: 1rem 0;
	position: relative;
	margin: 0 auto;
	width: 100%;
	z-index: 100;
}
#in-page-nav a { padding: 4px 10px; text-decoration: none; }
#in-page-nav a:hover { text-decoration: underline; }
.topbar { position: relative; z-index: 9999; }

/* Mobile Menu */
.mobile-menu-links {
	background-color: #FFF;
	border: 1px solid #000;
	display: none;
	min-width: 200px;
	position: absolute;
	top: 10px;
	z-index: 1000;
}
.mobile-menu-links ul { list-style: none; margin: 0 auto; padding: 0; }
.mobile-menu-links ul li a { display: block; text-decoration: none; }
.mobile-menu-links > div > ul > li a:hover { background-color: var(--light-tan); color: var(--dark-blue); }
.mobile-menu-links .sub-menu li:hover { background-color: var(--light-tan); color: var(--dark-blue); }
.mobile-menu-links ul li { border-bottom: 1px solid #000; }
.mobile-menu-links .sub-menu { display: none; border-top: 1px solid #ddd; }
.mobile-menu-links ul > li > a { padding: 10px; }
.mobile-menu-links .submenu-open > .sub-menu { display: block; }
.mobile-menu-links .menu-item-has-children > a { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu-links .menu-item-has-children > a::after { content: "+"; font-weight: bold; }
.mobile-menu-links .submenu-open > a::after { content: "–"; }

/* Hamburger */
.menu-toggle {
	align-items: flex-start;
	background: none;
	border: 0;
	cursor: pointer;
	height: 40px;
	padding-right: 5px;
	position: relative;
	width: 40px;
	z-index: 9999;
}
.hamburger,
.hamburger::before,
.hamburger::after {
	background: #000;
	content: "";
	display: block;
	height: 3px;
	position: absolute;
	transition: all 0.3s ease;
	width: 24px;
}
.hamburger { left: 8px; top: 50%; transform: translateY(-50%); }
.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }
.menu-open .hamburger { background: transparent; }
.menu-open .hamburger::before { top: 0; transform: rotate(45deg); }
.menu-open .hamburger::after { top: 0; transform: rotate(-45deg); }
#desktop-menu { display: none; }
.menu-open .mobile-menu-links { display: block; }

/* Header */
#site-logo { align-items: flex-start; max-width: 120px; width: 100%; }
#site-phone {
	color: var(--dark-blue);
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: bold;
	margin-left: auto;
	margin-right: 1rem;
	margin-top: .5rem;
	text-align: right;
	width: 100%;
}

/* Content */
.entry-content { background-color: var(--page-blue); }
.single-post .entry-content, .search .entry-content { background-color: #FFF; }
.indent { margin-left: 35px !important; }

/* Footer */
#footer { background-color: var(--light-green); height: 100%; padding: 1rem; }
#copyright { display: block; text-align: center; padding-top: 5%; width: 100%; }

/* Page Header Images */
.homepage, .services, .how-it-works, .about, .contact, .blogpage {
	background-color: var(--page-blue);
	aspect-ratio: auto;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
	margin-bottom: 0px;
	max-width: 100%;
	min-height: 400px;
	padding: 0;
	width: 100%;
}
.homepage { background-image: url('./images/home.png'); margin-bottom: 0px !important; }
.services { background-image: url('./images/services.png'); }
.how-it-works { background-image: url('./images/how-it-works.png'); }
.about { background-image: url('./images/about-header.png'); }
.contact { background-image: url('./images/contact-color.png'); }
.blogpage { background-image: url('./images/blog-header.png'); }

/* Home Page */
.home-featured-text { padding-bottom: 0 !important; }
.feature-box {
	background-color: var(--light-tan);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	height: auto;
	justify-content: start;
	margin: 2rem 1rem .5rem !important;
	min-height: auto;
	padding: 1rem;
	position: relative;
}
.home-box { margin: 1rem !important; }
.interior-light { background-color: #FFF; }
.interior-dark-feature-box {
	background-color: var(--dark-green);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	height: auto;
	justify-content: start;
	margin: .5rem !important;
	min-height: auto;
	padding: 1rem;
	position: relative;
}
.feature-box .wp-block-buttons { align-items: end !important; margin-top: auto !important; }
.intro-para { background-color: rgba(255,255,255,.7); padding: 10px; }
.home-featured-boxes { flex-wrap: wrap !important; gap: 0 !important; margin-bottom: 0px !important; margin-top: 0rem; }
#footer > ul.widget-area { list-style: none; }
.widget-container ul{ list-style: none !important; }
.quicklink-title { font-size: 2.5rem; }
.home-title { min-height: 55px; }
.inhomeservices { margin-bottom: 0; padding: 1rem; position: relative; }

/* Utilities */
.padded-1 { padding: .5rem; position: relative; }
.padded-2 { padding: 1rem; position: relative; }
.margin-top-1 { line-height: 2 !important; margin-top: 1rem !important; }
.margin-top-2 { margin-top: 2rem !important; }
.margin-top-3 { margin-top: 3rem !important; }

/* Page Backgrounds */
.light-blue { background-color: var(--light-blue); margin-bottom: 0; padding: 1rem 1rem 5rem; position: relative; }
.light-green { background-color: var(--light-green); margin-bottom: 0; padding: 1rem 1rem 5rem; position: relative; }
.light-tan { background-color: var(--light-tan); margin-bottom: 0; padding: 1rem 1rem 5rem; position: relative; }
.light-purple { background-color: var(--soft-lavender); margin-bottom: 0; padding: 1rem 1rem 5rem; position: relative; }
.bottomcta { padding: 4rem 2rem; margin-bottom: 0; }

/* Page Icons */
.page-icons:before { background-repeat: no-repeat; background-size: contain; content: ""; position: absolute; right: 0px; top: -40px; max-width: 100px; z-index: 10; }
.van:before { height: 323px; width: 207px; background-image: url(./images/senior-move.png); }
.downsizing:before { height: 288px; width: 197px; background-image: url(./images/downsizing.png); }
.tools:before { height: 323px; width: 197px; background-image: url(./images/inhome-services.png); }
.desk:before { height: 286px; width: 197px; background-image: url(./images/home-org.png); }
.cart:before { height: 276px; width: 179px; background-image: url(./images/managing-items.png); }
.planning:before { height: 288px; width: 210px; background-image: url(./images/planning-move.png); }
.sorting:before { height: 338px; width: 210px; background-image: url(./images/sorting-organizing.png); }
.timeline:before { height: 335px; width: 210px; background-image: url(./images/set-timeline.png); }
.movedate:before { height: 323px; width: 210px; background-image: url(./images/move-date.png); }
.newresidence:before { height: 288px; width: 207px; background-image: url(./images/new-residence.png); }
.pricing:before { height: 338px; width: 207px; background-image: url(./images/pricing.png); }
.local:before { height: 335px; width: 207px; background-image: url(./images/local-owned.png); }
.trusted:before { height: 288px; width: 207px; background-image: url(./images/trusted-associates.png); }
.insured:before { height: 286px; width: 207px; background-image: url(./images/fully-insured.png); }
.professional:before { height: 276px; width: 207px; background-image: url(./images/professional-confidential.png); }

/* Animations */
.feature-box { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.feature-box.visible { opacity: 1; transform: translateX(0); }

/* Gutenberg */
.wp-block-button__link, .search-submit, #nf-field-4 {
	background-color: var(--dark-blue);
	border: none !important;
	border-radius: 10px;
	color: #FFF;
	font-weight: bold;
	margin-top: 10px;
	padding: 10px 20px;
}

/* Back To Top */
#backToTop {
	position: fixed;
	bottom: 30px;
	font-weight: bold;
	right: 30px;
	background: #000;
	color: #fff;
	border: none;
	padding: 3px 14px;
	font-size: 24px;
	border-radius: 50%;
	cursor: pointer;
	display: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 9999;
}
#backToTop:hover { transform: translateY(-3px); opacity: 0.8; }

/* Entry */
.entry-title { font-size: 3rem; }
.entry-meta .author { display: inline-block; margin: 1rem 0; }

/* Blog */
.blog article { margin-bottom: 64px; padding-bottom: 48px; border-bottom: 1px solid #eee; }
.blog .post { background-color: #FFF; border-radius: 20px; padding: 10px; }
.blog .post-thumbnail img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-bottom: 24px; }
.blog h2.entry-title { font-size: 28px; line-height: 1.3; margin-bottom: 12px; }
.blog h2.entry-title a { text-decoration: none; color: #1f2933; }
.blog h2.entry-title a:hover { opacity: 0.7; }
.blog .entry-meta { font-size: 14px; color: #7a7a7a; margin-bottom: 16px; }
.blog .entry-summary { font-size: 18px; line-height: 1.7; margin-bottom: 16px; }
.blog .more-link { font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.2s ease; }
.blog .more-link:hover { border-color: currentColor; }

/* Single Post */
.single-post .site-main { max-width: 800px; margin: 0 auto; padding: 80px 24px; }
.single-post h1.entry-title { font-size: 42px; line-height: 1.2; margin-bottom: 16px; }
.single-post .entry-meta { font-size: 14px; color: #7a7a7a; margin-bottom: 32px; }
.single-post .entry-content { font-size: 18px; line-height: 1.8; color: #2c2c2c; }
.single-post .entry-content p { margin-bottom: 24px; }
.single-post .entry-content h2 { font-size: 28px; margin-top: 48px; margin-bottom: 16px; }
.single-post .entry-content h3 { font-size: 22px; margin-top: 32px; margin-bottom: 12px; }
.single-post .entry-content ul, .single-post .entry-content ol { margin: 24px 0 24px 24px; }
.single-post .entry-content li { margin-bottom: 12px; }
.single-post .entry-content img { width: 100%; height: auto; border-radius: 8px; margin: 32px 0; }
.single-post blockquote { border-left: 4px solid #dcdcdc; padding-left: 20px; margin: 32px 0; font-style: italic; color: #555; }
.post-thumbnail img { transition: transform 0.3s ease; }
.post-thumbnail img:hover { transform: scale(1.02); }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 12px; margin-top: 48px; }
.pagination a, .pagination span { padding: 8px 14px; border: 1px solid #ddd; border-radius: 6px; text-decoration: none; }

/* Comments */
.comments-area { margin-top: 80px; padding-top: 48px; border-top: 1px solid #eee; }
.comments-area h2.comments-title { font-size: 24px; margin-bottom: 32px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 48px 0; }
.comment { margin-bottom: 32px; }
#comments li, #comments ul { list-style: none !important; }
.comment-body { background: #f9f9f9; padding: 24px; border-radius: 8px; display: flex; flex-direction: column; gap: 16px; }
.comment-author img { border-radius: 50%; }
.comment-meta { margin-bottom: 12px; }
.comment-author { font-weight: 600; font-size: 16px; }
.comment-metadata { font-size: 13px; color: #7a7a7a; margin-top: 4px; }
.comment-content { font-size: 16px; line-height: 1.7; }
.comment-content p { margin-bottom: 16px; }
.reply a { font-size: 14px; font-weight: 600; text-decoration: none; color: #1f2933; transition: opacity 0.2s ease; }
.reply a:hover { opacity: 0.7; }
.comment-list .children { list-style: none; margin: 24px 0 0 40px; padding: 0; }
.comment-list .children .comment-body { background: #ffffff; border: 1px solid #eee; }
.comment-respond { margin-top: 64px; }
.comment-respond h3 { font-size: 22px; margin-bottom: 24px; }
.comment-form input, .comment-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; margin-bottom: 20px; }
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: #1f2933; }
.comment-form input[type="submit"] { width: auto; padding: 10px 20px; border: none; background: #1f2933; color: #ffffff; border-radius: 6px; font-weight: 600; cursor: pointer; transition: opacity 0.2s ease; }
.comment-form input[type="submit"]:hover { opacity: 0.85; }

/* Search & 404 */
.search h2 { font-size: 20px; }
.error404 h1.entry-title, .search h1.entry-title { font-size: 24px; font-weight: bold; margin: 10px auto; }
.search article { padding: 10px; }
.search article:nth-of-type(odd) { background-color: var(--light-tan); }
.search article:last-of-type { margin-bottom: 1rem; }
.error404 .entry-content, .search article.not-found, .search .entry-content { background-color: #FFF; padding: 1rem; }
.error404 .search-header, .search .search-header { display: flex; justify-content: center; }
.search-no-results .entry-title, .search-no-results .entry-content, .error404 .entry-title, .error404 .entry-content { text-align: center; }

/* ------------------------------
   Responsive
------------------------------ */

@media (min-width: 768px) and (max-width: 1024px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100%; flex-grow: 1; }
}

@media (min-width: 768px) {
	.homepage, .services, .how-it-works, .about, .contact, .blogpage { min-height: 520px; }
	.menu-toggle, .mobile-menu { display: none; }
	#desktop-menu { display: block; }
	.big-title { font-size: 3rem; }
	#site-logo { align-items: flex-start; max-width: 100%; width: 100%; }
	#site-phone { margin-top: 0; }
	.home-featured-text { padding-bottom: 0px; }
	.home-featured-boxes { margin-bottom: 0px !important; margin-top: 2rem; gap: 0 !important; }
	.padded-1 { padding: 1rem; position: relative; }
	.padded-2 { padding: 2rem; position: relative; }
	.page-icons:before { background-repeat: no-repeat; background-size: contain; content: ""; max-width: 100%; position: absolute; right: 0px; top: -60px; z-index: 10; }
	.entry-title { font-size: 3rem; }
}

@media (min-width: 1024px) {
	#in-page-nav { display: flex; flex-direction: row; justify-content: space-between; list-style: none; padding: 3rem 0; position: relative; margin: 0 auto; width: 90%; z-index: 100; }
	.intro-para { max-width: 50%; background-color: transparent; padding: 0px; }
	#desktop-menu > div > ul { padding-left: 15%; padding-right: 15%; }
}


/* Prevent stacking on desktop */
@media (min-width: 768px) {
    .wp-block-columns {
        flex-wrap: nowrap;
    }
}



/* ------------------------------
   Footer Columns
------------------------------ */
.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1rem 0;
}

.footer-col {
    flex: 1 1 150px;
}

.footer-col h3 {
    font-family: var(--font-heading);
    margin-bottom: .5rem;
}

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

.footer-col ul li {
    margin-bottom: .35rem;
}

/*.footer-col a {
    text-decoration: none;
}*/

.footer-col a:hover {
    text-decoration: underline;
}