/*
Theme Name: Pro Grade Home Science
Theme URI: https://example.com
Author: Pro Grade Home Science Team
Author URI: https://example.com
Description: A custom WordPress theme built for the Pro Grade Home Science brand.  The design is inspired by professional building science companies and aims to educate homeowners about their houses through blog posts, product reviews and video content.  The home page includes a hero banner, about section, embedded video, blog and review listings and a call‑to‑action for a free home maintenance checklist.  This theme is mobile‑friendly and uses modern CSS techniques and WordPress best practices.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prograde-homescience
Tags: custom‑theme, blog, responsive, one‑page, two‑column, custom‑menu, education
*/

:root {
  --primary-color: #0a304e;
  --secondary-color: #f47820;
  --light-bg: #f8f9fa;
  --dark-text: #1a2b3d;
  --muted-text: #546e7a;
  --white: #ffffff;
  --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  --card-hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--white);
  color: var(--dark-text);
  line-height: 1.6;
}

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

ul {
  list-style: none;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Header styles */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

#site-header .nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
}

#site-header .logo {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-color);
  gap: 0.4rem;
}

#site-header .logo-icon i {
  font-size: 1.4rem;
  color: var(--secondary-color);
}

#site-header .logo-text {
  font-weight: 700;
}

nav.primary-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

nav.primary-menu ul.menu {
  display: flex;
  gap: 1.5rem;
}

nav.primary-menu ul.menu li a {
  font-weight: 500;
  color: var(--dark-text);
  transition: color 0.3s;
}

nav.primary-menu ul.menu li a:hover {
  color: var(--secondary-color);
}

/* Nav actions group */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* Call‑to‑action button in the nav */
.nav-cta {
  background: var(--secondary-color);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.3s;
  white-space: nowrap;
}

.nav-cta:hover {
  background: #e76b1c;
}

/* Hamburger / nav toggle for mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 21px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  z-index: 1100;
  order: 3;
}

.nav-toggle span {
  display: block;
  height: 3px;
  background: var(--primary-color);
  border-radius: 2px;
  transition: var(--transition);
}

/* Hero Section */
#hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 85vh;
  color: var(--white);
  overflow: hidden;
  margin-top: 60px;
}

#hero .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('./assets/hero.png');
  background-size: cover;
  background-position: center;
  z-index: -2;
}

#hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
}

#hero .hero-content h1 {
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 700;
}

#hero .hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.3s, color 0.3s;
  text-decoration: none;
  cursor: pointer;
}

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

.btn-primary:hover {
  background: #e76b1c;
}

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

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

/* Generic section styling */
.section {
  padding: 4rem 0;
  background: var(--white);
}

.section h2 {
  text-align: center;
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.section .section-subtitle {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem auto;
  color: var(--muted-text);
}

/* About Section */
#about {
  background: var(--light-bg);
}

#about .about-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  gap: 2rem;
}

#about .about-text h2 {
  text-align: left;
}

#about .about-text p {
  margin-bottom: 1rem;
  color: var(--muted-text);
  font-size: 1rem;
}

#about .about-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}

/* Video Section */
#video {
  background: var(--white);
  text-align: center;
}

#video .video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 2rem auto;
  max-width: 800px;
}

#video .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Blogs Section */
#blogs {
  background: var(--light-bg);
}

#blogs .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

#blogs .blog-card {
  background: var(--white);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}

#blogs .blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-hover-shadow);
}

#blogs .blog-card .blog-icon {
  font-size: 2rem;
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

#blogs .blog-card h3 {
  font-size: 1.25rem;
  color: var(--primary-color);
  margin-bottom: 0.75rem;
  flex-grow: 0;
}

#blogs .blog-card p {
  font-size: 0.95rem;
  color: var(--muted-text);
  flex-grow: 1;
}

#blogs .blog-card .read-more {
  margin-top: 1rem;
  color: var(--secondary-color);
  font-weight: 600;
  align-self: flex-start;
  transition: color 0.3s;
}

#blogs .blog-card .read-more:hover {
  color: #e76b1c;
}

/* Reviews Section */
#reviews {
  background: var(--white);
}

#reviews .review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

#reviews .review-card {
  background: var(--light-bg);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
  text-align: left;
}

#reviews .review-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-hover-shadow);
}

#reviews .review-card h3 {
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

#reviews .review-card .stars {
  color: var(--secondary-color);
  margin-bottom: 0.75rem;
}

#reviews .review-card p {
  font-size: 0.95rem;
  color: var(--muted-text);
  margin-bottom: 1rem;
}

#reviews .review-card .read-more {
  color: var(--secondary-color);
  font-weight: 600;
  transition: color 0.3s;
}

#reviews .review-card .read-more:hover {
  color: #e76b1c;
}

/* Call‑to‑action Section */
#cta {
  background: var(--primary-color);
  color: var(--white);
  text-align: center;
  padding: 4rem 0;
}

#cta h2 {
  margin-bottom: 0.75rem;
  font-size: 1.8rem;
  color: var(--white);
}

#cta p {
  margin-bottom: 1.5rem;
  color: #dfe9f2;
}

#cta .btn-primary {
  background: var(--secondary-color);
  color: var(--white);
}

/* Footer */
#site-footer {
  background: var(--primary-color);
  color: var(--white);
  padding: 3rem 0 1.5rem 0;
}

#site-footer .footer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

#site-footer .footer-about {
  flex: 1;
  min-width: 220px;
}

#site-footer .footer-about h4 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}

#site-footer .footer-about p {
  font-size: 0.9rem;
  color: #dfe9f2;
  line-height: 1.5;
}

#site-footer .footer-links {
  display: flex;
  gap: 2rem;
  flex: 2;
  min-width: 220px;
}

#site-footer .footer-column h5 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: var(--secondary-color);
}

#site-footer .footer-column ul li {
  margin-bottom: 0.5rem;
}

#site-footer .footer-column ul li a {
  font-size: 0.9rem;
  color: #dfe9f2;
  transition: color 0.3s;
}

#site-footer .footer-column ul li a:hover {
  color: var(--secondary-color);
}

#site-footer .footer-social h5 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: var(--secondary-color);
}

#site-footer .social-icons {
  display: flex;
  gap: 1rem;
}

#site-footer .social-icons li a {
  font-size: 1.2rem;
  color: #dfe9f2;
  transition: color 0.3s;
}

#site-footer .social-icons li a:hover {
  color: var(--secondary-color);
}

#site-footer .footer-bottom {
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
  font-size: 0.8rem;
  color: #dfe9f2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#site-footer .footer-bottom .disclaimer {
  max-width: 800px;
}

/* Responsive navigation */
@media (max-width: 768px) {
  nav.primary-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 5%;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
  }

  nav.primary-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  nav.primary-menu ul.menu {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-actions {
    display: none;
  }

  .nav-cta {
    align-self: stretch;
    text-align: center;
  }

  .nav-toggle {
    display: flex;
  }

  #hero {
    height: 75vh;
  }

  #hero .hero-content h1 {
    font-size: 2rem;
  }
}

/* Back to top button */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--secondary-color);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

#back-to-top:hover {
  background: #e76b1c;
}