/* ==========================================================================
   protonsalesmy.com — Design System Override Layer (Muhaimin Proton)
   Loaded LAST (after Elementor/Astra CSS) so overrides win.
   Tokens sourced from PROTON_BRAND_TOKENS.md (official proton.com, extracted 2026-09-10)
   ========================================================================== */

:root {
  /* Official Proton brand tokens */
  --proton-red:       #E60019;   /* primary brand */
  --proton-red-hover: #B30013;
  --proton-red-deep:  #88000B;
  --proton-black:     #000000;
  --proton-white:     #FFFFFF;
  --proton-slate:     #2B333F;
  --proton-navy-1:    #1C1240;
  --proton-navy-2:    #080C1C;
  --proton-muted:     #73859F;
  --proton-gray-1:    #F5F5F5;
  --proton-gray-2:    #F1F2F3;
  --proton-border:    #DEDEDE;
  --proton-font: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --proton-radius-card: 12px;
  --proton-skew: -25deg;
}

/* --------------------------------------------------------------------------
   A. Colour consolidation — unify the source's 3 reds to official Proton red
   (#FE0018 / #C90808 / #DE0C0C / #DC3545  →  #E60019)
   -------------------------------------------------------------------------- */
:root,
.elementor-kit-7 {
  --e-global-color-accent:  #E60019 !important;
  --e-global-color-0928b02: #E60019 !important;
}

/* Elementor divider accent (section underline) */
.elementor-divider-separator,
.elementor-divider .elementor-divider-separator {
  border-color: #E60019 !important;
  background-color: #E60019 !important;
}

/* Red primary buttons (Info Lanjut on model cards, loan calculator Hantar) */
.elementor-button,
.elementor-element .elementor-button {
  transition: background-color 0.36s cubic-bezier(0.355, 0.005, 0.26, 1),
              color 0.36s cubic-bezier(0.355, 0.005, 0.26, 1),
              border-color 0.36s cubic-bezier(0.355, 0.005, 0.26, 1);
}

/* --------------------------------------------------------------------------
   B. Typography — apply official Proton typeface (Kanit) to headings, buttons
   and navigation. Body copy stays Plus Jakarta Sans / Roboto for readability.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-button,
.elementor-icon-box-title,
.elementor-icon-box-title a,
.menu-item a,
.elementor-nav-menu a,
.elementor-post__title {
  font-family: var(--proton-font) !important;
}

/* Kanit has no 800 weight — clamp heading weight to 700 (SemiBold) for the
   Montserrat-800 headings the source uses. */
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
  letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   C. Card & surface consistency — official Proton 12px radius
   -------------------------------------------------------------------------- */
.elementor-element[class*="elementor-element"] .e-con,
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  border-radius: var(--proton-radius-card);
}

/* --------------------------------------------------------------------------
   D. Gallery column repair
   Elementor sets --columns (and masonry item positions) via JS at runtime.
   This static clone has no JS, so the inline --columns:1 (mobile default) and
   absolute masonry items are wrong on desktop. Fix here, JS-free.
   -------------------------------------------------------------------------- */
@media (min-width: 1029px) {
  .e-gallery-grid { --columns: 4 !important; }
}
@media (min-width: 768px) and (max-width: 1028px) {
  .e-gallery-grid { --columns: 2 !important; }
}
@media (max-width: 767px) {
  .e-gallery-grid { --columns: 1 !important; }
}

.e-gallery-masonry {
  position: relative !important;
  height: auto !important;
  display: block !important;
  column-gap: 10px;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
@media (min-width: 1029px) {
  .e-gallery-masonry { column-count: 3; }
}
@media (min-width: 768px) and (max-width: 1028px) {
  .e-gallery-masonry { column-count: 2; }
}
@media (max-width: 767px) {
  .e-gallery-masonry { column-count: 1; }
}
.e-gallery-masonry .e-gallery-item {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  display: block !important;
  margin-bottom: 10px;
  break-inside: avoid;
}
/* Masonry item height: the baked --item-height is a mobile full-width value. */
.e-gallery-masonry .e-gallery-item .e-gallery-image,
.e-gallery-masonry .e-gallery-item .elementor-gallery-item__image {
  padding-bottom: 75% !important;
  height: auto !important;
}
.e-gallery-masonry .e-gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}