/*
 * BP06 — style.css
 * =================
 * Base stylesheet. Uses CSS custom properties from themes.css.
 * All components are theme-agnostic — they just use var(--color-*).
 *
 * Import order in HTML:
 *   1. themes.css  (defines the variables)
 *   2. style.css   (uses the variables)
 *
 * Layout approach:
 *   - Colour themes (t01-t12): use .layout-elegant (default)
 *   - Style themes modify layout via data-theme selectors in themes.css
 */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family:    var(--font-body);
  font-size:      var(--font-size-base);
  line-height:    var(--line-height-body);
  color:          var(--color-text);
  background:     var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family:    var(--font-heading);
  line-height:    1.25;
  color:          var(--color-text);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; }

p { color: var(--color-text); }

a { color: var(--color-accent); text-decoration: none; transition: opacity .15s; }
a:hover { opacity: .8; }

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

/* ── Container ───────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 760px; }
.container-xs { max-width: 560px; }

/* ── Template toggle bar ─────────────────────────────────────────────────── */
.tpl-bar {
  background:   var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding:       10px 0;
  position:      sticky;
  top:           0;
  z-index:       200;
}

.tpl-bar-inner {
  display:        flex;
  align-items:    center;
  gap:            12px;
  flex-wrap:      wrap;
}

.tpl-bar-label {
  font-size:     .72rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:         var(--color-text-muted);
  white-space:   nowrap;
}

.tpl-swatches { display: flex; gap: 4px; flex-wrap: wrap; }

.tpl-swatch {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  border:        2.5px solid transparent;
  cursor:        pointer;
  padding:       0;
  display:       flex;
  overflow:      hidden;
  transition:    transform .15s, border-color .15s;
  flex-shrink:   0;
}

.tpl-swatch span { flex: 1; }
.tpl-swatch:hover { transform: scale(1.15); }
.tpl-swatch.active { border-color: var(--color-text); transform: scale(1.1); }

.tpl-dropdown { display: none; }

.tpl-bar-cta {
  margin-left:   auto;
  background:    var(--color-btn-bg);
  color:         var(--color-btn-text) !important;
  padding:       7px 18px;
  border-radius: var(--radius-btn);
  font-size:     .8rem;
  font-weight:   600;
  white-space:   nowrap;
  transition:    background .15s;
}

.tpl-bar-cta:hover {
  background: var(--color-btn-hover);
  opacity:    1;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.site-header {
  background:    var(--color-nav-bg);
  border-bottom: 1px solid var(--color-border);
  position:      sticky;
  top:           49px; /* below tpl-bar */
  z-index:       100;
  transition:    box-shadow .2s;
}

.site-header.scrolled { box-shadow: var(--shadow-md); }

.nav-container {
  height:        64px;
  display:       flex;
  align-items:   center;
  gap:           8px;
}

.nav-logo {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-right:  auto;
  text-decoration: none;
}

.nav-logo img { height: 40px; width: auto; }

.nav-logo-text {
  font-family:   var(--font-heading);
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--color-nav-text);
}

.nav-links {
  display:       flex;
  align-items:   center;
  gap:           4px;
}

.nav-link {
  padding:       8px 12px;
  border-radius: var(--radius-sm);
  font-size:     .875rem;
  font-weight:   500;
  color:         var(--color-nav-text);
  text-decoration: none;
  transition:    background .15s;
}

.nav-link:hover { background: var(--color-surface-alt); opacity: 1; }
.nav-link.active { background: var(--color-surface-alt); font-weight: 600; }

.nav-cta {
  background:    var(--color-btn-bg);
  color:         var(--color-btn-text) !important;
  padding:       8px 18px;
  border-radius: var(--radius-btn);
  font-weight:   600;
  margin-left:   8px;
  transition:    background .15s;
}

.nav-cta:hover { background: var(--color-btn-hover); opacity: 1; }

.nav-hamburger {
  display:       none;
  flex-direction: column;
  gap:           5px;
  background:    none;
  border:        none;
  cursor:        pointer;
  padding:       6px;
}

.nav-hamburger span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--color-nav-text);
  border-radius: 2px;
  transition:    transform .2s;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  padding:        12px 28px;
  border-radius:  var(--radius-btn);
  font-family:    var(--font-body);
  font-size:      .9rem;
  font-weight:    600;
  letter-spacing: .01em;
  cursor:         pointer;
  border:         none;
  transition:     background .15s, transform .1s;
  text-decoration: none;
}

.btn:active { transform: scale(.98); }

.btn-primary {
  background:    var(--color-btn-bg);
  color:         var(--color-btn-text);
}

.btn-primary:hover { background: var(--color-btn-hover); opacity: 1; }

.btn-outline {
  background:    transparent;
  color:         var(--color-btn-bg);
  border:        2px solid var(--color-btn-bg);
}

.btn-outline:hover { background: var(--color-btn-bg); color: var(--color-btn-text); opacity: 1; }

.btn-ghost {
  background:    rgba(255,255,255,.15);
  color:         var(--color-hero-text);
  border:        1.5px solid rgba(255,255,255,.3);
}

.btn-ghost:hover { background: rgba(255,255,255,.25); opacity: 1; }

.btn-lg { padding: 14px 36px; font-size: 1rem; }
.btn-sm { padding: 8px 18px; font-size: .8rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  background:    var(--color-hero-bg);
  color:         var(--color-hero-text);
  padding:       var(--section-py) 0;
  position:      relative;
  overflow:      hidden;
}

.hero::before {
  content:       '';
  position:      absolute;
  inset:         0;
  background:    url('/assets/images/hero-pattern.svg') center/cover no-repeat;
  opacity:       .05;
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; max-width: 680px; }

.hero-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  background:     rgba(255,255,255,.12);
  border:         1px solid rgba(255,255,255,.2);
  color:          rgba(255,255,255,.9);
  padding:        5px 14px;
  border-radius:  50px;
  font-size:      .78rem;
  font-weight:    600;
  letter-spacing: .04em;
  margin-bottom:  20px;
}

.hero h1 {
  color:         var(--color-hero-text);
  margin-bottom: 16px;
}

.hero p {
  color:         rgba(255,255,255,.82);
  font-size:     1.05rem;
  max-width:     560px;
  margin-bottom: 32px;
}

.hero-cta-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding: var(--section-py) 0; }
.section-alt { background: var(--color-surface-alt); }

.section-title {
  text-align:    center;
  margin-bottom: 52px;
}

.section-title h2 { margin-bottom: 10px; }

.section-title p {
  font-size:     1.05rem;
  color:         var(--color-text-muted);
  max-width:     560px;
  margin:        0 auto;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       28px;
  transition:    box-shadow .2s, transform .2s;
}

.card:hover {
  box-shadow:    var(--shadow-md);
  transform:     translateY(-2px);
}

/* ── Grid layouts ────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ── About section ───────────────────────────────────────────────────────── */
.about-grid {
  display:         grid;
  grid-template-columns: 1fr 1.2fr;
  gap:             60px;
  align-items:     center;
}

.about-image {
  border-radius: var(--radius-lg);
  overflow:      hidden;
  aspect-ratio:  4/3;
  background:    var(--color-surface-alt);
}

.about-image img {
  width:   100%;
  height:  100%;
  object-fit: cover;
}

.about-content h2 { margin-bottom: 16px; }

.about-content p {
  color:         var(--color-text-muted);
  margin-bottom: 14px;
}

.about-stats {
  display:       flex;
  gap:           32px;
  margin-top:    28px;
  padding-top:   24px;
  border-top:    1px solid var(--color-border);
}

.stat-num {
  display:       block;
  font-family:   var(--font-heading);
  font-size:     2.2rem;
  font-weight:   700;
  color:         var(--color-accent);
  line-height:   1;
}

.stat-label {
  font-size:     .78rem;
  color:         var(--color-text-muted);
  font-weight:   500;
}

/* ── Services ────────────────────────────────────────────────────────────── */
.service-card {
  padding:          24px;
  background:       var(--color-surface);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  border-top:       3px solid var(--color-accent);
  transition:       box-shadow .2s, transform .2s;
}

.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.service-icon {
  font-size:     1.8rem;
  margin-bottom: 12px;
  line-height:   1;
}

.service-card h3 { margin-bottom: 8px; }

.service-card p {
  font-size:     .875rem;
  color:         var(--color-text-muted);
  line-height:   1.65;
}

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.gallery-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   12px;
}

.gallery-item {
  aspect-ratio:  4/3;
  overflow:      hidden;
  border-radius: var(--radius-md);
  cursor:        pointer;
  position:      relative;
  background:    var(--color-surface-alt);
}

.gallery-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .3s;
}

.gallery-item:hover img { transform: scale(1.05); }

.gallery-overlay {
  position:    absolute;
  inset:       0;
  background:  rgba(0,0,0,.4);
  opacity:     0;
  transition:  opacity .2s;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   1.8rem;
  color:       #fff;
}

.gallery-item:hover .gallery-overlay { opacity: 1; }

/* ── Testimonials ────────────────────────────────────────────────────────── */
.testimonial-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       28px;
  position:      relative;
}

.testimonial-card::before {
  content:     '"';
  font-family: var(--font-heading);
  font-size:   4rem;
  line-height: 1;
  color:       var(--color-accent);
  opacity:     .3;
  position:    absolute;
  top:         12px;
  left:        20px;
}

.testimonial-text {
  font-size:     .95rem;
  line-height:   1.7;
  color:         var(--color-text);
  margin-bottom: 16px;
  padding-top:   20px;
}

.testimonial-author {
  font-size:     .8rem;
  font-weight:   600;
  color:         var(--color-text-muted);
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.pricing-grid {
  display:     grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:         24px;
  max-width:   700px;
  margin:      0 auto;
}

.pricing-card {
  background:    var(--color-surface);
  border:        2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       32px;
  position:      relative;
  transition:    border-color .2s, box-shadow .2s;
}

.pricing-card.featured {
  border-color:  var(--color-accent);
  box-shadow:    var(--shadow-lg);
}

.pricing-badge {
  position:      absolute;
  top:           -12px;
  left:          50%;
  transform:     translateX(-50%);
  background:    var(--color-accent);
  color:         var(--color-btn-text);
  padding:       3px 14px;
  border-radius: 50px;
  font-size:     .72rem;
  font-weight:   700;
  white-space:   nowrap;
}

.pricing-price {
  font-family:   var(--font-heading);
  font-size:     2.8rem;
  font-weight:   700;
  color:         var(--color-accent);
  margin:        12px 0 4px;
  line-height:   1;
}

.pricing-price span {
  font-size:     1rem;
  font-weight:   400;
  color:         var(--color-text-muted);
}

.pricing-features {
  list-style:    none;
  margin:        20px 0 24px;
}

.pricing-features li {
  padding:       8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size:     .875rem;
  display:       flex;
  align-items:   center;
  gap:           8px;
}

.pricing-features li::before {
  content:       '✓';
  color:         var(--color-accent);
  font-weight:   700;
  font-size:     .8rem;
  flex-shrink:   0;
}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-grid {
  display:       grid;
  grid-template-columns: 1fr 1.5fr;
  gap:           60px;
  align-items:   start;
}

.contact-form-box {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       32px;
}

.form-group { margin-bottom: 16px; }

.form-group label {
  display:       block;
  font-size:     .78rem;
  font-weight:   600;
  margin-bottom: 5px;
  color:         var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.form-group input,
.form-group textarea,
.form-group select {
  width:         100%;
  padding:       10px 14px;
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family:   var(--font-body);
  font-size:     .9rem;
  color:         var(--color-text);
  background:    var(--color-bg);
  transition:    border-color .15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline:       none;
  border-color:  var(--color-accent);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-alert {
  padding:       10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size:     .875rem;
}

.form-alert.success { background: #d1fae5; color: #065f46; }
.form-alert.error   { background: #fee2e2; color: #991b1b; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background:    var(--color-hero-bg);
  color:         var(--color-hero-text);
  padding:       48px 0 28px;
}

.footer-inner {
  display:       grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap:           48px;
  margin-bottom: 36px;
}

.footer-brand p {
  color:         rgba(255,255,255,.6);
  font-size:     .875rem;
  margin-top:    12px;
  max-width:     280px;
}

.footer-tagline {
  color:         rgba(255,255,255,.6);
  font-size:     .85rem;
  margin-top:    8px;
}

.footer-nav h4, .footer-contact h4 {
  font-size:     .72rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:         rgba(255,255,255,.5);
  margin-bottom: 14px;
}

.footer-nav a {
  display:       block;
  color:         rgba(255,255,255,.7);
  font-size:     .875rem;
  margin-bottom: 8px;
  text-decoration: none;
  transition:    color .15s;
}

.footer-nav a:hover { color: #fff; opacity: 1; }

.footer-contact p {
  color:         rgba(255,255,255,.7);
  font-size:     .875rem;
  margin-bottom: 6px;
}

.footer-bottom {
  padding-top:   24px;
  border-top:    1px solid rgba(255,255,255,.1);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  font-size:     .78rem;
  color:         rgba(255,255,255,.4);
  flex-wrap:     wrap;
  gap:           10px;
}

.social-links { display: flex; gap: 10px; }

.social-link {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  background:    rgba(255,255,255,.1);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         rgba(255,255,255,.7);
  font-size:     .85rem;
  transition:    background .15s;
  text-decoration: none;
}

.social-link:hover { background: rgba(255,255,255,.2); opacity: 1; }

/* ── WhatsApp button ─────────────────────────────────────────────────────── */
.wa-btn {
  position:      fixed;
  bottom:        24px;
  right:         24px;
  width:         52px;
  height:        52px;
  background:    #25D366;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #fff;
  box-shadow:    0 4px 16px rgba(37,211,102,.4);
  z-index:       9990;
  transition:    transform .2s;
  text-decoration: none;
}

.wa-btn:hover { transform: scale(1.1); opacity: 1; }

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox {
  display:        none;
  position:       fixed;
  inset:          0;
  background:     rgba(0,0,0,.92);
  z-index:        9999;
  align-items:    center;
  justify-content: center;
}

.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: var(--radius-md); }

.lightbox-close {
  position:    absolute;
  top:         16px;
  right:       20px;
  font-size:   2rem;
  color:       #fff;
  cursor:      pointer;
  line-height: 1;
  background:  none;
  border:      none;
}

/* ── Page hero ───────────────────────────────────────────────────────────── */
.page-hero {
  background:  var(--color-hero-bg);
  color:       var(--color-hero-text);
  padding:     60px 0;
}

.page-hero h1 { color: var(--color-hero-text); margin-bottom: 8px; }
.page-hero p  { color: rgba(255,255,255,.75); font-size: 1.05rem; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.mt-auto     { margin-top: auto; }
.sr-only     { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-py: 56px; }

  .tpl-swatches  { display: none; }
  .tpl-dropdown  { display: block; padding: 6px 10px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: .8rem; background: var(--color-surface); color: var(--color-text); }

  .nav-links     { display: none; position: fixed; top: 113px; left: 0; right: 0; background: var(--color-nav-bg); border-bottom: 1px solid var(--color-border); flex-direction: column; padding: 8px; box-shadow: var(--shadow-lg); z-index: 9999; gap: 2px; }
  .nav-links.open { display: flex; }
  .nav-hamburger { display: flex; }
  .nav-cta       { margin-left: 0; margin-top: 4px; text-align: center; }

  .about-grid    { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid  { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner  { grid-template-columns: 1fr; gap: 32px; }
  .grid-2        { grid-template-columns: 1fr; }
  .grid-3        { grid-template-columns: 1fr; }
  .grid-4        { grid-template-columns: repeat(2, 1fr); }
  .about-stats   { flex-wrap: wrap; gap: 20px; }
}

@media (max-width: 480px) {
  .grid-4        { grid-template-columns: 1fr; }
  .hero-cta-group { flex-direction: column; }
  .pricing-grid  { grid-template-columns: 1fr; }
}

/* ── Style theme layout overrides ────────────────────────────────────────── */

/* s01 Elegant — centred hero, bigger whitespace */
html[data-theme="s01"] .hero-inner { max-width: 800px; margin: 0 auto; text-align: center; }
html[data-theme="s01"] .hero-cta-group { justify-content: center; }
html[data-theme="s01"] .hero p { margin-left: auto; margin-right: auto; }
html[data-theme="s01"] .nav-link { letter-spacing: .06em; font-size: .8rem; text-transform: uppercase; }

/* s02 Bold — full-width nav, uppercase headings */
html[data-theme="s02"] h1,
html[data-theme="s02"] h2,
html[data-theme="s02"] h3 { text-transform: uppercase; letter-spacing: -.01em; }
html[data-theme="s02"] .hero { padding: 100px 0; }
html[data-theme="s02"] .service-card { border-top: 4px solid var(--color-accent); border-radius: 0; }
html[data-theme="s02"] .card { border-radius: 0; border-left: 4px solid var(--color-accent); }
html[data-theme="s02"] .nav-container { border-bottom: none; }

/* s03 Modern — grid-based, tight spacing */
html[data-theme="s03"] .section-title { text-align: left; }
html[data-theme="s03"] .section-title p { margin: 0; }
html[data-theme="s03"] .card { border-radius: var(--radius-md); }

/* s04 Warm — rounded everything */
html[data-theme="s04"] .hero { border-radius: 0 0 40px 40px; }
html[data-theme="s04"] .card { border-radius: var(--radius-xl); }
html[data-theme="s04"] .service-card { border-top: none; border-radius: var(--radius-xl); }

/* s05 Dark — inverted cards */
html[data-theme="s05"] .card { background: var(--color-surface); border-color: var(--color-border); }
html[data-theme="s05"] .section-alt { background: var(--color-surface-alt); }
html[data-theme="s05"] .pricing-card { background: var(--color-surface); }
html[data-theme="s05"] .nav-container { border-bottom-color: var(--color-border); }