/* ============================================================
   KupiLED — WP Page Styles (Divi-structure compatible)
   Targets the HTML output by divi-stubs.php
   ============================================================ */

:root {
  --green:       #7ab32e;
  --green-dark:  #5c8a1a;
  --green-light: #f0f6e4;
  --text:        #3d3d3d;
  --text-light:  #777;
  --border:      #e5e5e5;
  --bg:          #fff;
  --bg-gray:     #f7f7f7;
  --radius:      3px;
  --max-w:       1080px;
  --font:        'Inter', Arial, sans-serif;
  --font-heading:'Jost', 'Inter', Arial, sans-serif;
  --shadow:      0 2px 12px rgba(0,0,0,.08);
}

/* ---- Page wrapper ---- */
.wp-page-content {
  font-family: var(--font);
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}
.wp-page-content a         { color: var(--green-dark); }
.wp-page-content a:hover   { text-decoration: underline; }
.wp-page-content img       { max-width: 100%; height: auto; }
.wp-page-content p         { margin: 0 0 1em; }
.wp-page-content h1, .wp-page-content h2, .wp-page-content h3,
.wp-page-content h4, .wp-page-content h5 {
  font-family: var(--font-heading);
  line-height: 1.25;
  margin: 0 0 .5em;
}
.wp-page-content h1 { font-size: 2.4rem; font-weight: 700; }
.wp-page-content h2 { font-size: 1.7rem; font-weight: 600; }
.wp-page-content h3 { font-size: 1.2rem; font-weight: 600; }
.wp-page-content h4 { font-size: 1rem;   font-weight: 600; }
.wp-page-content ul, .wp-page-content ol { padding-left: 1.4em; margin: 0 0 1em; }
.wp-page-content hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }

/* ============================================================
   Sections
   ============================================================ */
.et_pb_section {
  position: relative;
  padding: 40px 0;
}
.et_pb_fullwidth_section {
  padding: 0;
  overflow: hidden;
}

/* ============================================================
   Rows & columns
   ============================================================ */
.et_pb_row {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
/* gutters variants — gap handled uniformly above */
.et_pb_equal_columns > .et_pb_column { align-self: stretch; }

/* Column widths */
.et_pb_column        { box-sizing: border-box; min-width: 0; }
.et_pb_column_4_4    { flex: 0 0 100%; max-width: 100%; }
.et_pb_column_3_4    { flex: 0 0 calc(75% - 10px); max-width: calc(75% - 10px); }
.et_pb_column_2_3    { flex: 0 0 calc(66.666% - 14px); max-width: calc(66.666% - 14px); }
.et_pb_column_3_5    { flex: 0 0 calc(60% - 12px); max-width: calc(60% - 12px); }
.et_pb_column_1_2    { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }
.et_pb_column_2_5    { flex: 0 0 calc(40% - 12px); max-width: calc(40% - 12px); }
.et_pb_column_1_3    { flex: 0 0 calc(33.333% - 14px); max-width: calc(33.333% - 14px); }
.et_pb_column_1_4    { flex: 0 0 calc(25% - 15px); max-width: calc(25% - 15px); }
.et_pb_column_1_5    { flex: 0 0 calc(20% - 16px); max-width: calc(20% - 16px); }

/* ============================================================
   Fullwidth Header (hero)
   ============================================================ */
.et_pb_fullwidth_header {
  width: 100%;
  min-height: 60vh;
  background: #222 center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.et_pb_fullwidth_header_container {
  padding: 40px 20px;
}
.et_pb_fullwidth_header h1 {
  color: #fff;
  font-size: 2.8rem;
  margin-bottom: .4em;
}

/* ============================================================
   Text module
   ============================================================ */
.et_pb_text { margin-bottom: 10px; }
.et_pb_text_align_center .et_pb_text_inner { text-align: center; }
.et_pb_text_align_right  .et_pb_text_inner { text-align: right; }
.et_pb_text_inner > *:last-child { margin-bottom: 0; }

/* ============================================================
   Button
   ============================================================ */
.et_pb_button_module_wrapper {
  margin: 16px 0;
}
.et_pb_button_alignment_center { text-align: center; }
.et_pb_button_alignment_right  { text-align: right; }

a.et_pb_button {
  display: inline-block;
  padding: 12px 28px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background .18s, transform .12s;
  border: 2px solid var(--green);
}
a.et_pb_button:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ============================================================
   Blurb — top image (card)
   ============================================================ */
.et_pb_blurb { margin-bottom: 16px; }
.et_pb_blurb_position_top .et_pb_blurb_content {
  display: flex;
  flex-direction: column;
}
.et_pb_blurb_position_top .et_pb_main_blurb_image {
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: var(--radius);
}
.et_pb_blurb_position_top .et_pb_main_blurb_image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.et_pb_blurb_position_top.et_clickable:hover .et_pb_main_blurb_image img {
  transform: scale(1.04);
}
.et_pb_blurb_position_top .et_pb_module_header {
  font-size: .95rem;
  font-weight: 600;
  margin: 6px 0 0;
}
.et_pb_blurb_position_top .et_pb_module_header a {
  color: var(--text);
  text-decoration: none;
}
.et_pb_blurb_position_top .et_pb_module_header a:hover {
  color: var(--green);
  text-decoration: none;
}

/* ============================================================
   Blurb — left icon (checklist row)
   ============================================================ */
.et_pb_blurb_position_left .et_pb_blurb_content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.et_pb_blurb_position_left .et_pb_main_blurb_image {
  flex-shrink: 0;
  padding-top: 3px;
}
.et_pb_blurb_position_left .et_pb_main_blurb_image img {
  width: auto;
  height: auto;
  aspect-ratio: unset;
  object-fit: unset;
}
.et_pb_blurb_position_left .et_pb_blurb_container { flex: 1; }
.et_pb_blurb_position_left .et_pb_module_header {
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 2px;
  line-height: 1.5;
}
.et_pb_blurb_position_left .et_pb_module_header a {
  color: var(--text);
  text-decoration: none;
}
.et_pb_blurb_position_left .et_pb_blurb_description { font-size: .9rem; color: var(--text-light); }
.et_pb_blurb_position_left .et_pb_blurb_description p { margin: 0; }

/* ============================================================
   Number counter
   ============================================================ */
.et_pb_number_counter {
  text-align: center;
  padding: 20px 10px;
}
.et_pb_number_counter .percent p {
  font-size: 3rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  margin: 0 0 6px;
  font-family: var(--font-heading);
}
.et_pb_counter_title {
  font-size: .85rem;
  font-weight: 400;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
}

/* ============================================================
   CTA
   ============================================================ */
.et_pb_cta {
  background: var(--bg-gray);
  border-radius: 4px;
  padding: 36px 32px;
  text-align: center;
}
.et_pb_cta .et_pb_module_header { font-size: 1.6rem; margin-bottom: .5em; }
.et_pb_cta .et_pb_cta_description { margin-bottom: 1.2em; }
.et_pb_cta .et_pb_cta_button_wrapper { margin-top: 8px; }

/* ============================================================
   Dividers
   ============================================================ */
.et_pb_divider { padding: 8px 0; }
.et_pb_divider_internal { border: none; border-top: 1px solid var(--border); }

.dipi_divider .dipi-divider-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-light);
}
.dipi_divider .dipi-divider-wrap::before,
.dipi_divider .dipi-divider-wrap::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}

/* ============================================================
   Image module
   ============================================================ */
.et_pb_image { text-align: center; margin-bottom: 16px; }
.et_pb_image_wrap img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* ============================================================
   Tabs
   ============================================================ */
.et_pb_tabs { margin: 20px 0; }
.et_pb_tab  { padding: 16px 0; border-bottom: 1px solid var(--border); }

/* ============================================================
   Social links
   ============================================================ */
.et_pb_social_media_follow { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.et_pb_social_icon {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--bg-gray);
  border-radius: 2px;
  font-size: .85rem;
  color: var(--text);
  text-decoration: none;
}
.et_pb_social_icon:hover { background: var(--green); color: #fff; text-decoration: none; }

/* ============================================================
   Divi Plus FAQ Accordion — production-accurate styles
   ============================================================ */
.dipi_faq .dipi-faq-wrapper { display: none; }
.dipi_faq .dipi-faq-wrapper.ready { display: block; }

.dipi-faq-entry {
  border: 1px solid #54a2c0;
  background: #fff;
  padding: 10px 0;
  margin-bottom: 25px;
  transition: all .3s ease;
}
.dipi-faq-entry:last-of-type { margin-bottom: 0; }

.dipi-faq-entry.open {
  border-color: #a2c054;
}

.dipi-faq-title {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 50px 10px 20px;
  cursor: pointer;
  transition: all .3s ease;
}

.dipi-faq-title h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.4;
  color: #3f3f3f;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  width: 100%;
  transition: all .3s ease;
}

.dipi-faq-entry.open .dipi-faq-title h2 {
  font-weight: 600;
  color: #a2c054;
}

/* replace ETmodules icon chars with CSS chevrons */
.dipi-faq-icon-open,
.dipi-faq-icon-closed {
  display: none;
}
.dipi-faq-title::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 18px;
  height: 18px;
  border-right: 2px solid #54a2c0;
  border-bottom: 2px solid #54a2c0;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .3s ease, border-color .3s ease;
}
.dipi-faq-entry.open .dipi-faq-title::after {
  border-color: #a2c054;
  transform: translateY(-35%) rotate(225deg);
}

.dipi-faq-content {
  display: none;
  padding: 0 20px 20px 20px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6em;
  color: #3f3f3f;
  transition: all .3s ease;
}

.dipi-faq-entry.open .dipi-faq-content {
  display: block;
}

.dipi-faq-content p { margin: 0 0 .8em; }
.dipi-faq-content p:last-child { margin-bottom: 0; }
.dipi-faq-content ul { margin: .4em 0 .8em 1.4em; }
.dipi-faq-content li { margin-bottom: .3em; }
.dipi-faq-content a { color: #3f7bb5; }
.dipi-faq-content a:hover { text-decoration: underline; }

/* ============================================================
   O nama
   ============================================================ */
.o-nama-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px;
}

.o-nama-layout h1 {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #3f3f3f;
  margin: 0 0 20px;
}

.o-nama-layout h2 {
  font-size: 26px;
  font-weight: 600;
  color: #3f3f3f;
  margin: 32px 0 16px;
}

.o-nama-layout h3 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #54a2c0;
  margin: 0 0 10px;
}

.o-nama-lead {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: #3f3f3f;
  margin: 0 0 32px;
  max-width: 700px;
}

.o-nama-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 32px;
}

.o-nama-info-block {
  background: rgba(242,242,242,0.55);
  border-left: 3px solid #54a2c0;
  padding: 20px 24px;
}

.o-nama-info-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.o-nama-info-block ul li {
  font-size: 14px;
  font-weight: 300;
  color: #3f3f3f;
  padding: 4px 0;
  line-height: 1.5;
}

.o-nama-principles {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  counter-reset: p;
}

.o-nama-principles li {
  counter-increment: p;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
  font-size: 15px;
  font-weight: 300;
  color: #3f3f3f;
  line-height: 1.5;
}

.o-nama-principles li:last-child { border-bottom: none; }

.o-nama-principles li::before {
  content: counter(p);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: #a2c054;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}

.o-nama-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.o-nama-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}

/* ============================================================
   Kontakt
   ============================================================ */
.kontakt-layout {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 24px;
}

.kontakt-layout h1 {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #3f3f3f;
  margin: 0 0 8px;
}

.kontakt-lead {
  font-size: 16px;
  font-weight: 300;
  color: #666;
  margin: 0 0 32px;
}

.kontakt-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.kontakt-info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: rgba(242,242,242,0.55);
  border-radius: 3px;
  border-top: 3px solid #54a2c0;
}

.kontakt-info-card svg { flex-shrink: 0; margin-top: 2px; }

.kontakt-info-card strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #54a2c0;
  margin-bottom: 6px;
}

.kontakt-info-card p {
  font-size: 14px;
  font-weight: 300;
  color: #3f3f3f;
  margin: 0;
  line-height: 1.6;
}

.kontakt-info-card a { color: #3f3f3f; text-decoration: none; }
.kontakt-info-card a:hover { text-decoration: underline; }
.kontakt-info-card small { font-size: 12px; color: #888; }

.kontakt-form-section h2 {
  font-size: 22px;
  font-weight: 600;
  color: #3f3f3f;
  margin: 0 0 24px;
}

.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kontakt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.kontakt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kontakt-field label {
  font-size: 13px;
  font-weight: 500;
  color: #3f3f3f;
}

.kontakt-field input,
.kontakt-field textarea {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #3f3f3f;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}

.kontakt-field input:focus,
.kontakt-field textarea:focus { border-color: #54a2c0; }

.kontakt-field textarea { resize: vertical; min-height: 120px; }

.kontakt-gdpr label {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 8px;
  align-items: start;
  width: 100%;
  font-size: 12px;
  font-weight: 300;
  color: #666;
  line-height: 1.5;
  cursor: pointer;
}

.kontakt-gdpr input[type="checkbox"] { margin-top: 3px; }
.kontakt-gdpr a { color: #54a2c0; }

.kontakt-form-note {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .et_pb_column_1_4,
  .et_pb_column_1_3 { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }

  .et_pb_column_1_5,
  .et_pb_column_2_5 { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }

  .et_pb_column_3_5,
  .et_pb_column_2_3 { flex: 0 0 100%; max-width: 100%; }

  .et_pb_fullwidth_header { min-height: 40vh; }

  .dipi-faq-title h2 { font-size: 21px; }

  .o-nama-gallery { grid-template-columns: repeat(3, 1fr); }
  .kontakt-info-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .dipi-faq-title h2 { font-size: 17px; }
  .dipi-faq-title { padding: 3px 50px 3px 20px; }

  .o-nama-layout h1 { font-size: 32px; }
  .o-nama-info { grid-template-columns: 1fr; }
  .o-nama-gallery { grid-template-columns: repeat(2, 1fr); }

  .kontakt-info-row { grid-template-columns: 1fr; }
  .kontakt-form-row { grid-template-columns: 1fr; }
  .kontakt-layout h1 { font-size: 32px; }
}

@media (max-width: 600px) {
  .et_pb_column_1_4,
  .et_pb_column_1_3,
  .et_pb_column_1_2,
  .et_pb_column_1_5,
  .et_pb_column_2_3,
  .et_pb_column_2_5,
  .et_pb_column_3_4,
  .et_pb_column_3_5 { flex: 0 0 100%; max-width: 100%; }

  .et_pb_fullwidth_header { min-height: 220px; }
  .et_pb_section { padding: 24px 0; }
  .et_pb_number_counter .percent p { font-size: 2.2rem; }
}