/* FILE: inc/style.css
 * Custom overrides for FlooringForMe.com
 * Bootstrap 5.3 is loaded via CDN; this file extends it.
 */

/* ---------------------------------------------------
   Global
--------------------------------------------------- */
body {
  background-color: #0b1020; /* deep slate */
  color: #f8fafc;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
}

a {
  transition: color .2s ease, background-color .2s ease;
}

/* ---------------------------------------------------
   Hero Section
--------------------------------------------------- */
#hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero .ffm-hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  z-index: 1;
}

#hero .ffm-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65);
}

#hero h1, 
#hero p {
  z-index: 2;
  position: relative;
}

.ffm-home-icon {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
  opacity: 0.9;
}

/* ---------------------------------------------------
   CTA Cards (Categories)
--------------------------------------------------- */
.ffm-card-cta {
  display: block;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}

.ffm-card-cta:hover,
.ffm-card-cta:focus {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  text-decoration: none;
}

.ffm-card-cta-media {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.ffm-card-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.ffm-card-cta:hover img {
  transform: scale(1.05);
}

.ffm-card-cta-body {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

.ffm-card-cta-body h3 {
  margin: 0;
  font-weight: 700;
}

.ffm-card-cta-body p {
  font-size: 0.875rem;
}

.ffm-icon {
  width: 32px;
  height: auto;
  margin-bottom: .25rem;
}

/* ---------------------------------------------------
   Sections
--------------------------------------------------- */
section {
  position: relative;
  z-index: 1;
}

.bg-dark-subtle {
  background-color: #1e293b !important;
}

/* ---------------------------------------------------
   How It Works
--------------------------------------------------- */
#how-it-works img {
  max-width: 180px;
}

/* ---------------------------------------------------
   Testimonials
--------------------------------------------------- */
#testimonials blockquote {
  font-size: 1.1rem;
  font-style: italic;
}

/* ---------------------------------------------------
   Footer
--------------------------------------------------- */
#site-footer {
  font-size: 0.9rem;
}

#site-footer a {
  color: #cbd5e1;
}

#site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ---------------------------------------------------
   Forms
--------------------------------------------------- */
form .form-control,
form .form-select {
  background-color: #0f172a;
  color: #fff;
  border-color: #334155;
}

form .form-control:focus,
form .form-select:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 0.2rem rgba(34,211,238,.25);
}

/* ---------------------------------------------------
   Utilities
--------------------------------------------------- */
.object-fit-cover {
  object-fit: cover !important;
}

.min-vh-75 {
  min-height: 75vh !important;
}




/* ---------------------------------------------------
   Responsive Media Queries
   Append this block to the end of inc/style.css
--------------------------------------------------- */

/* XS: <576px ----------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Hero */
  #hero { min-height: 64vh; }
  #hero .ffm-hero-bg img { filter: brightness(0.6); }
  #hero h1 { font-size: 1.75rem; line-height: 1.2; }
  #hero p.lead { font-size: 1rem; }
  .ffm-home-icon { right: 1rem; bottom: 1rem; width: 60px; }

  /* CTA Cards */
  .ffm-card-cta-media { height: 170px; }
  .ffm-card-cta-body { padding: 0.75rem 1rem; }
  .ffm-icon { width: 28px; }

  /* Sections spacing */
  section.py-5 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }

  /* Forms */
  form .form-control.form-control-lg,
  form .form-select.form-select-lg { font-size: 1rem; padding: 0.625rem 0.75rem; }

  /* Footer */
  #site-footer { text-align: left; }
}

/* SM: ≥576px ----------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767.98px) {
  #hero { min-height: 70vh; }
  #hero h1 { font-size: 2rem; }
  #hero p.lead { font-size: 1.05rem; }

  .ffm-card-cta-media { height: 190px; }
  .ffm-home-icon { width: 72px; }
}

/* MD: ≥768px ----------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  #hero { min-height: 72vh; }
  #hero h1 { font-size: 2.25rem; }
  #hero p.lead { font-size: 1.1rem; }

  .ffm-card-cta-media { height: 210px; }
  .ffm-home-icon { width: 80px; }

  /* Grid gutters slightly larger for tablet for visual breathing room */
  .container, .container-md {
    --bs-gutter-x: 1.25rem;
  }
}

/* LG: ≥992px ----------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #hero { min-height: 78vh; }
  #hero h1 { font-size: 2.5rem; }
  .ffm-card-cta-media { height: 230px; }
}

/* XL: ≥1200px ---------------------------------------------------------- */
@media (min-width: 1200px) {
  #hero { min-height: 82vh; }
  #hero h1 { font-size: 2.75rem; }
  .ffm-card-cta-media { height: 260px; }
}

/* XXL: ≥1400px --------------------------------------------------------- */
@media (min-width: 1400px) {
  #hero { min-height: 85vh; }
  #hero h1 { font-size: 3rem; }
  .ffm-card-cta-media { height: 300px; }
}

/* Orientation tweaks --------------------------------------------------- */
@media (orientation: landscape) and (max-width: 991.98px) {
  #hero { min-height: 65vh; }
  .ffm-card-cta-media { height: 180px; }
}

/* Reduced motion accessibility ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}