/* ============================================================
   FreshFold Laundry — Main Stylesheet
   WordPress-style Theme: style.css
   Theme Name:    FreshFold Laundry
   Theme URI:     https://freshfoldlaundry.com
   Author:        FreshFold Team
   Version:       1.0.0
   Description:   Professional Laundry Service Theme
   Text Domain:   freshfold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── CSS Variables ── */
:root {
  --primary:        #2B7FD4;
  --primary-light:  #EBF4FF;
  --primary-dark:   #1A5FA8;
  --accent:         #5BB8F5;
  --text-dark:      #1A2340;
  --text-body:      #4A5568;
  --text-light:     #718096;
  --bg-white:       #FFFFFF;
  --bg-soft:        #F7FAFC;
  --bg-grey:        #EDF2F7;
  --border:         #E2E8F0;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 16px rgba(43,127,212,0.10);
  --shadow-lg:      0 8px 32px rgba(43,127,212,0.14);
  --radius:         12px;
  --radius-lg:      20px;
  --transition:     0.25s ease;
  --font-heading:   'Playfair Display', serif;
  --font-body:      'DM Sans', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--bg-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-heading); color: var(--text-dark); line-height: 1.25; }
a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; object-fit: cover; }
ul { list-style: none; }

/* ── Layout ── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ── Utility ── */
.section-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-light);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.section-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 16px; }
.section-sub { font-size: 1.05rem; color: var(--text-light); max-width: 560px; margin: 0 auto 52px; }
.text-center { text-align: center; }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 14px 32px; border-radius: 8px; border: none; cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 12px rgba(43,127,212,0.25);
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(43,127,212,0.32); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--primary);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 13px 30px; border-radius: 8px; border: 2px solid var(--primary); cursor: pointer;
  transition: all var(--transition);
}
.btn-outline:hover { background: var(--primary); color: #fff; }

.btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--primary);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 14px 32px; border-radius: 8px; border: none; cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.btn-white:hover { background: var(--primary-light); transform: translateY(-2px); }