/*
Theme Name: 1in4
Theme URI: https://1in4.nl
Author: 1in4
Description: Custom Gutenberg-friendly theme for 1in4.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: 1in4
*/

/* =========================
   1in4 Design System
   ========================= */
:root {
  --blue-deep: #1A3D7C;
  --blue-dark: #0F2650;
  --turquoise: #2BB7A9;
  --green: #65D26E;
  --orange: #F6A623;
  --light-gray: #F9FAFB;
  --text-dark: #111827;
  --text-muted: #6B7280;
  --white: #ffffff;
}

/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-dark);
  background: #ffffff;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* WordPress helpers */
.wp-block-group { margin: 0; }
.wp-site-blocks, main { display: block; }

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header / Navigation */
header {
  background: var(--blue-deep);
  color: var(--white);
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.25rem;
}

.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 2px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.95rem;
  align-items: center;
}

/* wp_nav_menu outputs <li> items (we set items_wrap to %3$s) */
nav li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
nav a {
  opacity: 0.85;
}
nav a:hover { opacity: 1; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
}

.btn-primary {
  background: var(--orange);
  color: var(--blue-dark);
}
.btn-primary:hover { filter: brightness(1.05); }

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.1); }

/* Make WP button block look like our button */
.wp-block-button .wp-block-button__link {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}
.wp-block-button.btn.btn-primary .wp-block-button__link {
  background: var(--orange);
  color: var(--blue-dark);
}
.wp-block-button.btn.btn-primary .wp-block-button__link:hover { filter: brightness(1.05); }

/* HERO */
.hero { padding: 3rem 0 4rem; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.hero-eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

.hero-title {
  font-size: clamp(2.1rem, 3vw + 1rem, 3rem);
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--white);
}

.hero-subtitle {
  font-size: 1.05rem;
  max-width: 32rem;
  opacity: 0.92;
  color: var(--white);
}

.hero-cta {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.hero-note { font-size: 0.9rem; opacity: 0.9; color: var(--white); }
.hero-tagline { margin-top: 1rem; font-size: 0.85rem; opacity: 0.85; color: var(--white); }

.hero-factuur-card {
  background: rgba(255,255,255,0.06);
  border-radius: 1.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}

.hero-factuur-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  opacity: 0.95;
  color: var(--white);
}

.hero-factuur-amount { font-size: 1.2rem; font-weight: 600; margin: 0; color: var(--white); }

.installments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.installment {
  background: rgba(255,255,255,0.12);
  border-radius: 0.9rem;
  padding: 0.7rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--white);
}
.installment--highlight {
  background: var(--orange);
  color: var(--blue-dark);
  font-weight: 600;
}
.installment-label { opacity: 0.9; margin: 0; }
.installment-value { margin-top: 0.25rem; font-size: 0.9rem; margin-bottom: 0; }

/* Sections */
section { padding: 3.5rem 0; }
.section-light { background: var(--light-gray); }

.section-heading {
  font-size: 1.7rem;
  margin-bottom: 0.75rem;
  color: var(--blue-dark);
}

.section-subtitle {
  font-size: 0.98rem;
  color: var(--text-muted);
  max-width: 36rem;
  margin-top: 0;
}

/* Steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.step-card {
  background: var(--white);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 10px 25px rgba(15,23,42,0.05);
  border: 1px solid #E5E7EB;
}

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(43,183,169,0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--turquoise);
  margin-bottom: 0.75rem;
}

.step-title { font-weight: 600; margin: 0 0 0.25rem; }
.step-text { font-size: 0.95rem; color: var(--text-muted); margin: 0; }

/* Benefits */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.benefit-card {
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid #E5E7EB;
  background: #ffffff;
}

.benefit-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(101,210,110,0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.benefit-title { font-weight: 600; margin: 0 0 0.25rem; }
.benefit-text { font-size: 0.95rem; color: var(--text-muted); margin: 0; }

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(43,183,169,0.1);
  color: var(--turquoise);
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Testimonial */
.testimonial-section {
  background: var(--turquoise);
  color: var(--white);
}
.testimonial-card { max-width: 640px; margin: 0 auto; text-align: center; }
.testimonial-quote { font-size: 1.25rem; font-weight: 500; margin: 0 0 1rem; }
.testimonial-meta { font-size: 0.95rem; opacity: 0.9; margin: 0; }

/* CTA bottom */
.cta-section {
  background: var(--blue-deep);
  color: var(--white);
  text-align: center;
}
.cta-title { font-size: 1.8rem; margin: 0 0 0.75rem; }
.cta-text {
  font-size: 0.98rem;
  max-width: 32rem;
  margin: 0 auto 1.75rem;
  opacity: 0.9;
}

/* Default page content spacing */
.page-content {
  padding: 2.5rem 0 3.5rem;
}
.page-content .container > *:first-child { margin-top: 0; }

/* Footer */
footer {
  background: var(--blue-dark);
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  padding: 1.25rem 0;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

/* Language switcher (optional) */
.lang-switcher {
  display: inline-flex;
  gap: 0.75rem;
  margin-left: 1.5rem;
  font-size: 0.9rem;
  align-items: center;
}
.lang-switcher a { opacity: 0.85; }
.lang-switcher a:hover { opacity: 1; }

/* Responsive */
@media (max-width: 880px) {
  nav { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 2rem; }
  header { padding-bottom: 1.5rem; }
  .installments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================
   Gutenberg / WP block normalization
   ========================= */

/* WordPress shpesh shton margin të madh te headings/paragraphs */
.wp-block-heading,
.wp-block-paragraph,
.wp-block-list,
.wp-block-group,
.wp-block-columns,
.wp-block-buttons {
  margin-top: 0;
  margin-bottom: 0;
}

/* Pastaj ne e kontrollojmë spacing-un me section padding që e kemi tashmë */
.front-page section + section { margin-top: 0; }

/* Columns: bëje si grid i HTML-it */
.hero-grid.wp-block-columns {
  gap: 3rem;
  margin: 0;
}
@media (max-width: 880px) {
  .hero-grid.wp-block-columns { gap: 2rem; }
}

/* Siguro që columns të mos kenë padding/margin të çuditshëm */
.wp-block-columns { margin: 0; }
.wp-block-column { padding: 0; }

/* Buttons: mos lejo WP t’i ndryshojë */
.wp-block-buttons { margin: 0; }
.wp-block-button { margin: 0; }

/* Group blocks: mos shto margin automatik */
.wp-block-group > * + * { margin-top: 0.75rem; } /* spacing i kontrolluar */

/* =========================
   Gutenberg layout fixes
   ========================= */

/* HERO duhet me qenë blu (si HTML) */
.hero { background: var(--blue-deep); color: var(--white); }

/* Gutenberg Columns zakonisht janë flex; ne duam grid si HTML */
.hero-grid.wp-block-columns{
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem;
  margin: 0 !important;
}
@media (max-width: 880px){
  .hero-grid.wp-block-columns{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Force installments grid to behave like pure HTML */
.installments{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Gutenberg wraps Group content in inner container; remove that layout layer */
.installments > .wp-block-group__inner-container{
  display: contents !important;
}

@media (max-width: 880px){
  .installments{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Force header/nav to match hero (blue) ===== */
body > header,
header {
  background: var(--blue-deep) !important;
  color: var(--white) !important;
}

/* Make sure inner wrappers don't paint white */
header .container,
header .top-bar {
  background: transparent !important;
}

/* Make all header text/links white */
header,
header a,
header nav a,
header .logo,
header .logo a,
header .logo-mark {
  color: var(--white) !important;
}

/* Just in case list items have their own colors */
header nav li,
header nav li a {
  color: var(--white) !important;
}

/* ===== Installments equal width like HTML ===== */
.installment {
  width: 100%;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.installment-label,
.installment-value {
  margin: 0;
}