/* Container: CSS Grid with Divi breakpoints */
.nkhp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* desktop */
    gap: 2rem;
}

/* Tablet (Divi ~ 981px and down) */
@media (max-width: 980px) {
    .nkhp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phone (Divi ~ 767px and down) */
@media (max-width: 767px) {
    .nkhp-grid {
        grid-template-columns: 1fr;
    }
}

/* Card base */
.nkhp-plan-card {
  background:#102942;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nkhp-plan-card:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.nkhp-card-link { color:inherit; text-decoration:none; display:block; height:100%; }

/* Thumb */
.nkhp-thumb { --nkhp-card-ratio:16/9; --nkhp-fit:cover; aspect-ratio:var(--nkhp-card-ratio); overflow:hidden; width:100%; }
.nkhp-thumb img { width:100%; height:100%; object-fit:var(--nkhp-fit); display:block; }

/* Content */
.nkhp-card-content { padding:1rem; }
.nkhp-title { font-size:26px!important; margin:0 0 .5rem 0;padding:0; font-weight:500; color:#fff}
.nkhp-byline { margin-bottom:0rem; color:#eee; }

/* Meta row with icons */
.nkhp-meta {
  --icon:30px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
}

.nkhp-meta .meta {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  line-height:1.2;
}

.plan-card-icon {
  width:var(--icon);
  height:var(--icon);
  flex:0 0 var(--icon);
  display:block;
  max-width:none; /* guards against theme img rules */
}


.nkhp-meta span {
    display: inline-block;
    margin-right: 10px;
    font-size: 0.9rem;
}

/* Gallery grid (responsive; Divi-like breakpoints) */
.nkhp-gallery {
  display: grid;
  gap: 1rem;
  /* default columns via CSS var (set by class and media queries) */
  --nkhp-cols: 3;
  grid-template-columns: repeat(var(--nkhp-cols), 1fr);

  /* frame controls (can be overridden inline by shortcode) */
  --nkhp-gallery-ratio: 4/3;
  --nkhp-gallery-fit: cover;
}

/* class-based column helpers (from shortcode's nkhp-cols-N) */
.nkhp-gallery:where(.nkhp-cols-1) { --nkhp-cols: 1; }
.nkhp-gallery:where(.nkhp-cols-2) { --nkhp-cols: 2; }
.nkhp-gallery:where(.nkhp-cols-3) { --nkhp-cols: 3; }
.nkhp-gallery:where(.nkhp-cols-4) { --nkhp-cols: 4; }
.nkhp-gallery:where(.nkhp-cols-5) { --nkhp-cols: 5; }
.nkhp-gallery:where(.nkhp-cols-6) { --nkhp-cols: 6; }

/* Divi-style breakpoints: 3 → 2 → 1 */
@media (max-width: 980px) {
  .nkhp-gallery { --nkhp-cols: 2; }
}
@media (max-width: 767px) {
  .nkhp-gallery { --nkhp-cols: 1; }
}

/* Reset figure spacing so grid gap is the only spacing */
.nkhp-gallery .nkhp-gallery-item {
  margin: 0;
}

/* Frame wrapper ensures uniform tile height without server crops */
.nkhp-gallery .nkhp-frame {
  aspect-ratio: var(--nkhp-gallery-ratio);
  overflow: hidden;
  width: 100%;
  display: block;
}
.nkhp-gallery .nkhp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: var(--nkhp-gallery-fit);
  display: block;
}

/* Optional: caption styling */
.nkhp-gallery .nkhp-caption {
  font-size: 0.9rem;
  color: #666;
  margin-top: .35rem;
}

.nkhp-gallery .nkhp-frame {
  aspect-ratio: var(--nkhp-gallery-ratio, 4/3); /* fallback */
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.nkhp-gallery .nkhp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: var(--nkhp-gallery-fit, cover);   /* fallback */
  display: block;
}

/* Force gallery images to fill the frame so object-fit can crop */
.nkhp-gallery .nkhp-gallery-item a.nkhp-lightbox { 
  display: block; 
  width: 100% !important;
  height: 100% !important;
}

.nkhp-gallery .nkhp-gallery-item .nkhp-frame {
  aspect-ratio: var(--nkhp-gallery-ratio, 4/3);
  overflow: hidden;
  width: 100%;
  display: block;
}

/* Stronger selector + resets override Divi/global rules */
.nkhp-gallery .nkhp-gallery-item .nkhp-frame > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: var(--nkhp-gallery-fit, cover) !important;
  display: block;
}

.nkhp-gallery .nkhp-gallery-item > .nkhp-frame > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: var(--nkhp-gallery-fit, cover) !important;
  display: block;
}

/* Lightbox overlay */
.nkhp-lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999; /* sit above Divi header etc. */
}
.nkhp-lb-overlay.open { display: flex; }
.nkhp-lb-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.nkhp-lb-close {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 2rem;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nkhp-lb-nav .prev, .nkhp-lb-nav .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  border: 0;
  color: #fff;
  font-size: 2rem;
  width: 48px; height: 56px;
  cursor: pointer;
  border-radius: 6px;
}
.nkhp-lb-nav .prev { left: 16px; }
.nkhp-lb-nav .next { right: 16px; }

/* Roof section */
.nkhp-roof-profiles-wrap { margin-top: 1.25rem; }
.nkhp-roof-heading { margin: 0;padding:0; }
.nkhp-roof-intro { margin: 0 0 .75rem; }

/* Cards (same as before) */
.nkhp-roof-profiles { display: grid; gap: 12px; }
.nkhp-roof-inline { display: flex; flex-wrap: wrap; gap: 12px; }
.nkhp-roof-inline .nkhp-roof-item { flex: 1 1 280px; }

.nkhp-roof-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: 12px;
  /*padding: 12px 14px;
  border: 2px solid currentColor;
  border-radius: 6px;*/
}
.nkhp-roof-icon svg { width: 36px; height: 36px; display: block; }
.nkhp-roof-title { font-weight: 700; line-height: 1.2; margin-bottom: 2px; }
.nkhp-roof-desc {  }


/* Key Features row (single plan page) */
.nkhp-key-features {
  margin: 1.25rem 0 0 0;
}

.nkhp-key-features__heading {
  margin: 0 0 .75rem 0;
}

.nkhp-key-features__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
}

.nkhp-key-features__item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
}

.nkhp-key-features__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.nkhp-key-features__label {
  font-size: 20px;
  line-height: 1.2;
}

/* Specifications list */
.nkhp-specifications {
  margin: 0 0 1.25rem 0;
}

.nkhp-specifications__heading {
  margin: 0 0 .75rem 0;
}

.nkhp-specifications__list {
  list-style: none;
  margin: 0;
  padding: 0!important;
  display: grid;
  gap: .5rem 2rem;
  
}

/* Two column layout by default */
.nkhp-specifications--cols-2 .nkhp-specifications__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* One column layout */
.nkhp-specifications--cols-1 .nkhp-specifications__list {
  grid-template-columns: 1fr;
}

.nkhp-specifications__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 .4em 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.nkhp-specifications__label {
  font-weight: 600;
}

.nkhp-specifications__value {
  text-align: right;
  opacity: .9;
}


.nkhp-mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: #e7e0c8;
  padding: 40px;
  display: none;
  z-index: 9999;
}

.nkhp-mega-menu.open {
  display: block;
}

.nkhp-plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.nkhp-plan-card {
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.nkhp-plan-card__img img {
  width: 100%;
  height: auto;
}

.nkhp-plan-card__title {
  font-weight: 600;
  margin-top: 0px;
}

.nkhp-plan-card__meta {
  font-size: 14px;
  margin-top: 0px;
  margin-bottom:10px
}

.nkhp-plan-card__roof {
  font-size: 13px;
  margin-top: 4px;
}


/* Tablet (Divi ~ 981px and down) */
@media (max-width: 980px) {
    .nkhp-plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phone (Divi ~ 767px and down) */
@media (max-width: 767px) {
    .nkhp-plans-grid {
        grid-template-columns: 1fr;
    }
}
/* NKHP Mega Menu (contained dropdown, scoped to Divi menu only) */

/* Anchor dropdown to the menu item */
.et_pb_menu .et-menu > li.nkhp-plans-menu,
.et_pb_menu .et-menu > li.grannyflat-menu {
  position: relative;
}

/* Prevent Divi clipping the dropdown (menu wrappers only) */
.et_pb_menu__wrap,
.et_pb_menu__menu,
.et_pb_menu__menu > nav,
.et_pb_menu__menu > nav > ul {
  overflow: visible !important;
}

/* Dropdown panel (contained) */
.et_pb_menu .et-menu > li.nkhp-plans-menu > .nkhp-mega-menu,
.et_pb_menu .et-menu > li.grannyflat-menu > .nkhp-mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, calc(100vw - 40px));
  background: #102841;
  padding: 30px;
  display: none;
  z-index: 999999;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  border-radius: 0px;
}

/* Open on hover and when JS sets .open */
.et_pb_menu .et-menu > li.nkhp-plans-menu:hover > .nkhp-mega-menu,
.et_pb_menu .et-menu > li.nkhp-plans-menu > .nkhp-mega-menu.open,
.et_pb_menu .et-menu > li.grannyflat-menu:hover > .nkhp-mega-menu,
.et_pb_menu .et-menu > li.grannyflat-menu > .nkhp-mega-menu.open {
  display: block;
}

/* Grid layout (menu only) */
.et_pb_menu .nkhp-mega-menu .nkhp-plans-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .et_pb_menu .nkhp-mega-menu .nkhp-plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .et_pb_menu .nkhp-mega-menu .nkhp-plans-grid {
    grid-template-columns: 1fr;
  }
}

/* Card styling (menu only) */
.et_pb_menu .nkhp-mega-menu .nkhp-plan-card {
  text-align: center;
  text-decoration: none;
  color: #fff;
  background:transparent;
}

.et_pb_menu .nkhp-mega-menu .nkhp-plan-card__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0px;
}

.et_pb_menu .nkhp-mega-menu .nkhp-plan-card__title {
  font-weight: 600;
  margin-top: 10px;
}

.et_pb_menu .nkhp-mega-menu .nkhp-plan-card__meta,
.et_pb_menu .nkhp-mega-menu .nkhp-plan-card__roof {
  font-size: 10px;
  margin-top: 4px;
}