/* Basic styles for the test website.  
 * The palette uses a deep blue for primary accents and a warm gold for calls to action.  
 * The layout is clean and mobile‑friendly with a consistent header, navigation, main content area and footer. */

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fafafa;
  /* Increase the base font size so paragraph text throughout the site is slightly larger. */
  font-size: 1.1rem;
}

header {
  background-color: #0a3d62; /* deep blue */
  color: #ffffff;
  padding: 15px 20px;
  display: flex;
  /* Make header items flexible, wrapping on narrow screens and aligning center. */
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* Keep header at top when scrolling. */
  position: sticky;
  top: var(--topbar-height,48px);
  z-index: 100;
}

/* Ensure the navigation spans the full width of the header so its items wrap naturally and remain centered across multiple rows */
header nav {
  flex: 1 1 100%;
}

header h1 {
  margin: 0;
  /* Slightly increase the site title font size for improved visibility */
  font-size: 1.6rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* Widen the spacing between navigation items to match the design
     reference.  A larger gap creates a more open, evenly spaced
     navigation across the width of the header. */
  gap: 32px;
  /* Allow the navigation to fill available space and center items for balance */
  flex: 1 1 auto;
  justify-content: center;
}

nav li {
  margin: 0;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  /* Increase the navigation text size for easier reading */
  font-size: 1.1rem;
  /* Add a transparent border and padding so a yellow border appears on hover */
  border: 2px solid transparent;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

nav a:hover {
  color: #fbd46d; /* light gold accent */
  border-color: #fbd46d;
}

/*
 * The hero section uses the service van as a background image.
 * Using `contain` ensures the entire van (and its "Computer Repair" wording)
 * is visible without cropping. Reducing the minimum height keeps the van
 * smaller so visitors can read the logo clearly. Padding is also lowered
 * slightly for a more compact hero across pages.
 */
/*
 * Hero section styling
 *
 * The hero uses a cropped version of our van photo that removes the technician's
 * toolbox while still showcasing the "Computer Repair" and "On‑Site Service"
 * wording.  We scale the image down and position it to the right so that
 * important text remains visible.  The hero content (badge, headline and
 * description) is aligned to the left of the section to avoid covering the
 * van lettering.  Padding on the left/right creates breathing room on large
 * screens, while the overlay uses a semi‑transparent dark blue to ensure
 * readability without completely obscuring the background.
 */
.hero {
  /* Use the cropped van image that removes the toolbox and phone number */
  /* Use a landscape crop of the van for better fit; no phone number or technician */
  background-image: url('images/van.jpg');
  /* Scale the background so its height fits the hero; width adjusts automatically. */
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(0,0,0,0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* Align hero content to the left side so it does not overlap the van text */
  align-items: center;
  padding: 40px 5%;
  /* Increase the hero height so the van can be displayed larger without cropping */
  min-height: 320px;
  box-sizing: border-box;
}

.hero p {
  margin: 0 0 20px 0;
  /* Increase paragraph size in the hero for clarity */
  font-size: 1.2rem;
  text-align: center;
  max-width: 700px;
}

.cta-button {
  background-color: #fbd46d;
  color: #0a3d62;
  /* Increase padding and font size for better visibility on call buttons */
  padding: 16px 32px;
  border: none;
  border-radius: 4px;
  /* Slightly larger font size to improve readability */
  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.cta-button:hover {
  background-color: #ffe598;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

section {
  margin-bottom: 40px;
}

h2 {
  color: #0a3d62;
  margin-bottom: 10px;
  /* Increase overall section heading size */
  font-size: 1.7rem;
}

h3 {
  color: #0a3d62;
  margin-top: 30px;
  margin-bottom: 10px;
  /* Increase subheading size */
  font-size: 1.4rem;
}

ul {
  padding-left: 20px;
}

ul li {
  margin-bottom: 8px;
}

/* Grid for service cards. Use a minimum width that forces three columns on larger screens. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card h3 {
  margin-top: 0;
  /* Slightly larger card heading for readability */
  font-size: 1.5rem;
}

.card p {
  flex-grow: 1;
  /* Increase the font size of card description */
  font-size: 1.1rem;
}

.card a {
  align-self: flex-start;
  margin-top: 15px;
  color: #0a3d62;
  font-weight: bold;
  text-decoration: none;
  /* Increase the font size of card links */
  font-size: 1.1rem;
}

.card a:hover {
  text-decoration: underline;
}

footer {
  background-color: #0a3d62;
  color: #ffffff;
  text-align: center;
  padding: 20px 10px;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a {
  color: #fbd46d;
  margin: 0 8px;
  text-decoration: none;
  /* Increase footer link size */
  font-size: 1rem;
}

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

/* Phone call text inside the header.  This appears to the right of the navigation on larger screens or below on small screens. */
/* Phone call text inside the header.  On larger screens this will span the full width below the navigation so the nav links remain centered. */
.phone {
  /* Remove auto-margin so it doesn’t push the navigation off to the side */
  margin: 0;
  /* Let the phone section occupy the full width of the header so the navigation can center properly */
  flex-basis: 100%;
  text-align: center;
  /* Increase the phone line size for better legibility */
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: bold;
  color: #ffffff;
}

/* Highlight the phone number within the phone line */
.phone a {
  color: #fbd46d;
  text-decoration: none;
  font-weight: bold;
  /* Match the phone link size with the phone line */
  font-size: 1.5rem;
}
.phone a:hover {
  text-decoration: underline;
}

/* Badge highlighting the years of experience.  Use within hero sections to emphasise longevity. */
.experience-badge {
  background-color: rgba(253, 212, 109, 0.9);
  color: #0a3d62;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
  margin-bottom: 10px;
  display: inline-block;
}

/* Container for the textual content inside hero sections. Adds a semi-transparent backdrop so text remains readable against the photo. */
.hero-content {
  /* Slightly lighter semi‑transparent backdrop for improved readability while
     still allowing the van graphics to remain visible. */
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(2px);
  padding: 20px;
  border-radius: 12px;
  /* Constrain the content to roughly half of the hero so it doesn’t overlap
     the background van image.  Width percentages ensure responsive
     behaviour on larger screens while still allowing stacking on small screens. */
  max-width: 600px;
  width: 50%;
  text-align: left;
  margin-top: 0;
}

/* Adjust hero heading and paragraphs within the hero-content */
.hero-content h2 {
  margin-top: 0;
  color: #0a3d62;
  font-size: 2.5rem;
}
.hero-content p {
  margin-bottom: 20px;
  color: #0a3d62;
  opacity: 0.92;
}

/* Alternate shading for service cards. Every other card uses a light background to improve readability */
/* Alternate shading for service cards. Use a slightly tinted background on odd cards and white on even cards. */
.card:nth-child(odd) {
  background-color: #f3f7fb; /* light blue-grey */
}
.card:nth-child(even) {
  background-color: #ffffff;
}

/* Enhanced footer styling.  The footer is divided into a top call-out, multiple columns and a bottom section. */
footer {
  background-color: #0a3d62;
  color: #ffffff;
  padding: 40px 20px;
  text-align: left;
}

/* Call-to-action text at the top of the footer */
.call-now {
  text-align: center;
  margin-bottom: 20px;
  /* Increase the call-out font size in the footer */
  font-size: 1.2rem;
}

.call-now a {
  color: #fbd46d;
  text-decoration: none;
}

.call-now a:hover {
  text-decoration: underline;
}

/* Columns for site links, service links, brands and service areas */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.footer-column h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #fbd46d;
}

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

.footer-column li {
  margin-bottom: 6px;
  line-height: 1.4;
}

.footer-column a {
  color: #ffffff;
  text-decoration: none;
}

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

/* Bottom section of the footer */
.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 20px;
}

.footer-bottom .footer-links {
  margin-top: 10px;
}

.footer-bottom .footer-links a {
  color: #fbd46d;
  margin: 0 6px;
  text-decoration: none;
  /* Increase bottom footer link size */
  font-size: 1rem;
}

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

.footer-bottom .seo-links {
  margin-top: 5px;
  /* Increase SEO link size slightly */
  font-size: 0.9rem;
}

.footer-bottom .seo-links a {
  color: #fbd46d;
  margin: 0 4px;
  text-decoration: none;
}

.footer-bottom .seo-links a:hover {
  text-decoration: underline;
}

/* SEO links at bottom of each page */
.seo-links {
  margin-top: 10px;
  font-size: 0.8rem;
}

.seo-links a {
  color: #fbd46d;
  margin: 0 4px;
  text-decoration: none;
}

.seo-links a:hover {
  text-decoration: underline;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .hero h2 {
    font-size: 1.5rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
  nav ul {
    gap: 10px;
  }
}

/*
 * Page‑specific hero positions
 *
 * To provide a subtle visual cue that each page is unique, adjust the
 * background position of the van image per page.  The horizontal position
 * stays on the right, but the vertical offset changes so the van shifts
 * slightly up or down between pages.  These classes should be added to the
 * hero element in each HTML file (e.g., class="hero hero--volusia").
 */
.hero--home     { background-position: 85% 15%; }
.hero--services { background-position: 85% 15%; }
.hero--volusia  { background-position: 85% 15%; }
.hero--seminole { background-position: 85% 15%; }
.hero--lake     { background-position: 85% 15%; }
.hero--flagler  { background-position: 85% 15%; }
.hero--experience { background-position: 85% 15%; }
.hero--contact  { background-position: 85% 15%; }
.hero--reviews  { background-position: 85% 15%; }
.hero--faq      { background-position: 85% 15%; }

/* The services page hero text box can be wider to occupy more space */
.hero--services .hero-content {
  /* Keep copy readable without dark overlay */
  background-color: rgba(255, 255, 255, 0.10);
  padding: 22px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.20);
  max-width: 620px;
  width: 40%;
  text-align: left;
}

/* Simple, Secure, Reliable (home steps) */
.steps{
  padding: 40px 0 10px;
}
.steps-title{
  font-size: 34px;
  margin: 0 0 18px;
  text-align:center;
}
.steps-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.step-card{
  background: #ffffff;
  border: 1px solid #dfe7ef;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(10, 61, 98, .08);
  text-align:center;
}
.step-num{
  width: 52px;
  height: 520px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 12px;
  font-weight: 900;
  font-size: 22px;
  background: #fbd46d;
  color: #0a3d62;
}
.step-card h3{
  margin: 0 0 8px;
}
.step-card p{
  margin: 0;
  color: #3d4b5a;
}
@media (max-width: 900px){
  .steps-grid{ grid-template-columns: 1fr; }
}




.hero-content .cta-button{
  background: #f6d06a;
  color: #0a3d62;
  border-radius: 10px;
  font-weight: 900;
  text-decoration: none;
  display: inline-block;
  padding: 12px 18px;
  border: 2px solid rgba(10,61,98,0.15);
}

/* ==================================================
   Home hero tuned to match approved screenshot
   ================================================== */

.hero.hero--split{
  background: #efefef !important;
  padding: 0 !important;
  min-height: unset !important;
}
.hero.hero--split::before,
.hero.hero--split::after{
  content: none !important;
}

.hero.hero--split .hero-split{
  max-width: 2048px;
  margin: 0 auto;
  padding: 2px 0 0;
  display: grid;
  grid-template-columns: 54.6% 45.4%;
  gap: 0;
  align-items: stretch;
}

.hero.hero--split .hero-left{
  background: #efefef;
  padding: 54px 76px 48px;
  display: flex;
}

.hero.hero--split .hero-panel{
  width: 100%;
  max-width: 870px;
  background: #7594ab;
  border-radius: 10px;
  padding: 28px 26px 14px;
  box-shadow: none;
  min-height: 460px;
  display: flex;
  flex-direction: column;
}

.hero.hero--split .experience-badge{
  align-self: flex-start;
  background: #f0cf68;
  color: #003b84;
  border: 0;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1.05;
  text-align: center;
  font-weight: 800;
  padding: 14px 18px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.hero.hero--split .hero-prompt{
  margin-top: 10px;
  margin-bottom: 0;
  font-weight: 800;
  text-align: center;
  color: #f0cf68;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  font-size: 1.35rem;
}
.hero.hero--split .hero-panel h2{
  color: #f7f7f7;
  text-align: center;
  text-shadow: 0 3px 10px rgba(0,0,0,0.35);
  font-size: clamp(2.8rem, 4.2vw, 4.6rem);
  line-height: 1.22;
  letter-spacing: -0.03em;
  margin: 34px 0 22px;
}

.hero.hero--split .hero-panel p{
  max-width: 880px;
  color: #f9f9f9;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.32);
  font-size: 1.15rem;
  line-height: 1.82;
  margin: 0 auto 22px;
}

.hero.hero--split .cta-button{
  align-self: flex-start;
  margin-top: auto;
  background: #f0cf68;
  color: #003b84;
  border: 0;
  border-radius: 8px;
  min-width: 325px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 20px 26px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.hero.hero--split .hero-right{
  min-width: 0;
  background: #efefef;
}

.hero.hero--split .hero-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* show full van text; no cropping */
  background: #f6f6f6; /* letterbox background */
}

@media (max-width: 1200px){
  .hero.hero--split .hero-left{
    padding: 36px 28px;
  }
  .hero.hero--split .hero-panel{
    min-height: 480px;
  }
  .hero.hero--split .hero-panel h2{
    font-size: clamp(2.3rem, 4vw, 3.5rem);
  }
}

@media (max-width: 980px){
  .hero.hero--split .hero-split{
    grid-template-columns: 1fr;
  }
  .hero.hero--split .hero-left{
    padding: 24px 16px 0;
  }
  .hero.hero--split .hero-panel{
    min-height: auto;
    padding: 22px 18px 20px;
  }
  .hero.hero--split .hero-panel h2{
    margin-top: 24px;
    font-size: 2.3rem;
  }
  .hero.hero--split .hero-panel p{
    text-align: left;
    line-height: 1.65;
  }
  .hero.hero--split .cta-button{
    min-width: 0;
    width: 100%;
  }
  .hero.hero--split .hero-img{
    min-height: 340px;
  }
}


/* Homepage hero image: restore van logo/text artwork */
.hero--home .hero-right {
  background: #ffffff;
}
.hero--home .hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: #ffffff;
}

/* Most Requested Services: pastel color blocks matching the reference feel */
#most-requested-services .card,
.card-grid .card {
  border-radius: 16px;
  border: 1px solid #b8cff3;
  box-shadow: none;
}
.card-grid .card:nth-child(1) { background: #dbe6f7; border-color: #a9c0ec; }
.card-grid .card:nth-child(2) { background: #dcefdc; border-color: #afd8af; }
.card-grid .card:nth-child(3) { background: #efe2cc; border-color: #ddc69a; }
.card-grid .card:nth-child(4) { background: #ddd9ef; border-color: #beb6e2; }
.card-grid .card:nth-child(5) { background: #efe9b9; border-color: #e0d87e; }
.card-grid .card:nth-child(6) { background: #dbe8f2; border-color: #b2cae1; }
.card-grid .card h3,
.card-grid .card p,
.card-grid .card a {
  color: #111111;
}
.card-grid .card a {
  text-decoration: none;
}
.card-grid .card a:hover {
  text-decoration: underline;
}


/* =========================================================
   Homepage mobile compaction
   ========================================================= */
@media (max-width: 820px){
  .hero.hero--split .hero-left{
    padding: 14px 12px 0 !important;
  }

  .hero.hero--split .hero-panel{
    min-height: auto !important;
    padding: 16px 14px 16px !important;
    border-radius: 12px !important;
  }

  .hero.hero--split .experience-badge{
    font-size: 0.9rem !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }

  .hero.hero--split .hero-panel h2{
    margin: 18px 0 14px !important;
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    line-height: 1.1 !important;
  }

  .hero.hero--split .hero-panel p{
    font-size: 1rem !important;
    line-height: 1.55 !important;
    text-align: left !important;
    margin-bottom: 16px !important;
  }

  .hero.hero--split .cta-button{
    width: 100% !important;
    min-width: 0 !important;
    font-size: 1rem !important;
    padding: 14px 18px !important;
  }

  .hero.hero--split .hero-img{
    min-height: 230px !important;
    max-height: 290px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
  }

  .container{
    padding: 16px !important;
  }

  section{
    margin-bottom: 26px !important;
  }

  .card-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* HERO responsive tuning: keep above-the-fold content fitting on typical laptops and phones */
@media (max-width: 1100px){
  .hero.hero--split .hero-left{ padding: 32px 44px 36px; }
  .hero.hero--split .hero-right{ padding: 32px 44px 36px; }
  .hero.hero--split .hero-panel{ min-height: 430px; }
  .hero.hero--split .hero-right{ min-height: 430px; }
}

@media (max-width: 900px){
  .hero.hero--split .hero-split{ grid-template-columns: 1fr; gap: 18px; }
  .hero.hero--split .hero-left{ padding: 26px 18px 26px; }
  .hero.hero--split .hero-right{ padding: 0 18px 22px; min-height: auto; }
  .hero.hero--split .hero-panel{ min-height: auto; }
  .hero.hero--split .hero-img{ height: auto; max-height: 420px; }
}