/* =========================================================================
   Generation Connections landing page (FortisAlberta.com / Sitefinity)
   Every rule is scoped to .der-landing so nothing here affects the rest of the
   site, and generic site styles have a harder time overriding this page.

   Before publishing: replace https://www.fortisalberta.com/images/default-source/default-album/solarfarm.png (2 places) with the
   banner image's Sitefinity library URL.
   ========================================================================= */

.der-landing{
  --fa-blue:#002855;
  --fa-yellow:#FFC72C;
  --fa-process-blue:#0085CA;
  --fa-light-blue:#99D6EA;
  --fa-dark-grey:#333333;
  --fa-grey:#666666;
  --fa-light-grey:#CCCCCC;
  --page-bg:#f7f9fb;
  --white:#ffffff;
  --border:#d6dde4;
  --soft-blue:#eef7fb;
  --image-blue:#eef3f7;
  --panel-blue:#f5f8fa;
  --row-border:#e8edf1;
  --table-stripe:#f7f7f7;
  --soft-yellow:#fff7dc;
  --blue-text-on-dark:#edf5fb;
}

.der-landing *,
.der-landing *::before,
.der-landing *::after{
  box-sizing:border-box;
}

.der-landing{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--page-bg);
  color:var(--fa-dark-grey);
}

/* Neutralize site-wide styles that may already exist for these common class
   names (.page, .section, .button, .note, .contact). The page's own rules
   further down then set exactly what this page needs. */
.der-landing .page,
.der-landing .section,
.der-landing .button,
.der-landing .note,
.der-landing .contact{
  float:none;
  width:auto;
  min-height:0;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  font-family:inherit;
  text-transform:none;
  letter-spacing:normal;
}

.der-landing .site-banner{
  position:relative;
  min-height:50vh;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(0,40,85,0.96) 0%, rgba(0,40,85,0.86) 42%, rgba(0,133,202,0.38) 100%),
    url("https://www.fortisalberta.com/images/default-source/default-album/solarfarm.png") center right / cover no-repeat;
  border-bottom:8px solid var(--fa-yellow);
  color:var(--white);
  display:flex;
  align-items:center;
}

.der-landing .site-banner::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:46%;
  height:12px;
  background:var(--fa-process-blue);
}

.der-landing .site-banner-inner{
  position:relative;
  z-index:1;
  max-width:1040px;
  margin:0 auto;
  padding:76px 24px 88px;
  width:100%;
}

.der-landing .site-banner h1{
  margin:0;
  font-size:76px;
  line-height:0.98;
  font-weight:800;
  max-width:720px;
}

.der-landing .site-banner p{
  max-width:600px;
  margin:18px 0 0;
  color:var(--blue-text-on-dark);
  font-size:22px;
  line-height:1.45;
  font-weight:700;
}

.der-landing .site-banner-kicker{
  display:inline-block;
  margin-bottom:18px;
  padding:8px 12px;
  background:var(--fa-yellow);
  color:var(--fa-blue);
  font-size:14px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.der-landing .bulletin-pin{
  max-width:1040px;
  margin:24px auto 0;
  padding:0 24px;
}

.der-landing .bulletin-pin-inner{
  background:var(--soft-yellow);
  border:1px solid #e6c95b;
  border-left:8px solid var(--fa-yellow);
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.der-landing .bulletin-pin-actions{
  display:flex;
  flex:0 0 auto;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.der-landing .bulletin-pin strong{
  color:var(--fa-blue);
  font-size:17px;
}

.der-landing .bulletin-pin span{
  display:block;
  margin-top:4px;
  color:var(--fa-dark-grey);
  line-height:1.45;
}

.der-landing .bulletin-pin a{
  background:var(--fa-blue);
  color:var(--white);
  text-decoration:none;
  font-weight:800;
  padding:10px 14px;
  border:2px solid var(--fa-blue);
}

.der-landing .bulletin-pin a:hover{
  background:var(--fa-process-blue);
  color:var(--white);
  border-color:var(--fa-process-blue);
}

.der-landing .bulletin-pin a.secondary{
  background:transparent;
  color:var(--fa-blue);
}

.der-landing .bulletin-pin a.secondary:hover{
  background:var(--fa-blue);
  color:var(--white);
  border-color:var(--fa-blue);
}

.der-landing .bulletin-pin a:focus{
  outline:3px solid var(--fa-yellow);
  outline-offset:3px;
}

.der-landing .page{
  max-width:1040px;
  margin:0 auto;
  padding:36px 24px 64px;
}

.der-landing .section{
  margin-top:40px;
}

.der-landing .page > .section:first-child{
  margin-top:0;
}

.der-landing .section h2{
  color:var(--fa-blue);
  font-size:32px;
  line-height:1.15;
  margin:0 0 10px;
  font-weight:800;
}

.der-landing .path-finder{
  background:var(--white);
  border:none;
  border-top:4px solid var(--fa-blue);
  padding:24px 24px 28px;
  box-shadow:0 6px 18px rgba(0,40,85,0.08);
}

.der-landing .path-finder h2{
  font-size:28px;
  margin-bottom:6px;
}

.der-landing .path-finder .section-intro{
  max-width:760px;
  font-size:16px;
  color:var(--fa-dark-grey);
  margin-bottom:20px;
}

.der-landing .library-download{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  margin:24px 0 0;
  padding:20px 2px 0;
  border-top:1px solid var(--border);
}

.der-landing .library-download p{
  margin:0;
  color:var(--fa-dark-grey);
  font-size:14px;
  line-height:1.45;
}

.der-landing .library-download strong{
  color:var(--fa-blue);
}

.der-landing .library-download-link{
  flex:0 0 auto;
  color:var(--fa-blue);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}

.der-landing .library-download-link:hover{
  color:var(--fa-process-blue);
  text-decoration:underline;
}

.der-landing .library-download-link:focus-visible{
  outline:3px solid var(--fa-yellow);
  outline-offset:3px;
}

.der-landing .hosting-capacity{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 28px;
  background:var(--soft-blue);
  border:1px solid var(--border);
  border-left:6px solid var(--fa-process-blue);
}

.der-landing .hosting-capacity-copy h2{
  margin:0 0 8px;
  font-size:26px;
}

.der-landing .hosting-capacity-copy p{
  max-width:680px;
  margin:0;
  color:var(--fa-dark-grey);
  line-height:1.55;
}

.der-landing .hosting-capacity .button{
  flex:0 0 auto;
  width:auto;
  margin:0;
  white-space:nowrap;
}

.der-landing .section-intro{
  max-width:820px;
  margin:0 0 24px;
  color:var(--fa-grey);
  font-size:17px;
  line-height:1.55;
}

.der-landing .path-tabs{
  background:var(--white);
  border:none;
  border-top:1px solid var(--border);
  box-shadow:none;
  min-width:0;
  overflow:hidden;
}

.der-landing .path-tabs > input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.der-landing .tab-list{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap:6px;
  padding:8px;
  border-bottom:1px solid var(--border);
  background:#f0f5f8;
}

.der-landing .tab-list label{
  min-width:0;
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 8px 18px;
  background:var(--white);
  color:var(--fa-blue);
  font-weight:800;
  font-size:18px;
  text-align:center;
  line-height:1.18;
  overflow-wrap:break-word;
  cursor:pointer;
  border:1px solid var(--border);
  border-bottom:4px solid transparent;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.der-landing .tab-list label:last-child{
  border-right:1px solid var(--border);
}

.der-landing .tab-list label:hover{
  background:var(--soft-blue);
  border-color:var(--fa-process-blue);
}

.der-landing #tab-small-mg:checked ~ .tab-list label[for="tab-small-mg"],
.der-landing #tab-large-mg:checked ~ .tab-list label[for="tab-large-mg"],
.der-landing #tab-commercial-der:checked ~ .tab-list label[for="tab-commercial-der"],
.der-landing #tab-small-der:checked ~ .tab-list label[for="tab-small-der"],
.der-landing #tab-standby:checked ~ .tab-list label[for="tab-standby"]{
  background:var(--fa-blue);
  color:var(--white);
  border-color:var(--fa-blue);
  border-bottom-color:var(--fa-yellow);
}

.der-landing .tab-panels{
  min-width:0;
  padding:0;
}

.der-landing .tab-panel{
  display:none;
  grid-template-columns:minmax(0, 1fr);
  min-width:0;
  min-height:400px;
}

.der-landing #tab-small-mg:checked ~ .tab-panels #panel-small-mg,
.der-landing #tab-large-mg:checked ~ .tab-panels #panel-large-mg,
.der-landing #tab-commercial-der:checked ~ .tab-panels #panel-commercial-der,
.der-landing #tab-small-der:checked ~ .tab-panels #panel-small-der,
.der-landing #tab-standby:checked ~ .tab-panels #panel-standby{
  display:grid;
}

.der-landing .tab-content{
  min-width:0;
  padding:32px 36px;
}

.der-landing .path-kicker{
  color:var(--fa-process-blue);
  font-weight:800;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.der-landing .tab-content h3{
  color:var(--fa-blue);
  font-size:34px;
  line-height:1.15;
  margin:0 0 12px;
}

.der-landing .tab-content p{
  color:var(--fa-dark-grey);
  line-height:1.55;
  margin:0 0 16px;
}

.der-landing .path-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.der-landing .path-actions .button{
  width:auto;
  min-width:190px;
}

.der-landing .process-roadmap{
  margin-top:16px;
  border:1px solid var(--border);
  background:#f8fafc;
  min-width:0;
}

.der-landing .process-roadmap > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  color:var(--fa-blue);
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  list-style:none;
}

.der-landing .process-roadmap > summary::-webkit-details-marker,
.der-landing .stage-step > summary::-webkit-details-marker{
  display:none;
}

.der-landing .process-roadmap > summary::after{
  content:"+";
  flex:0 0 auto;
  color:var(--fa-process-blue);
  font-size:22px;
  line-height:1;
}

.der-landing .process-roadmap[open] > summary{
  border-bottom:1px solid var(--border);
}

.der-landing .process-roadmap[open] > summary::after{
  content:"−";
}

.der-landing .process-roadmap > summary:hover,
.der-landing .stage-step > summary:hover{
  background:var(--soft-blue);
}

.der-landing .process-roadmap summary:focus-visible{
  outline:3px solid var(--fa-yellow);
  outline-offset:3px;
}

.der-landing .stage-list{
  min-width:0;
  padding:12px;
}

.der-landing .stage-step{
  background:var(--white);
  border:1px solid var(--row-border);
}

.der-landing .stage-step + .stage-step{
  margin-top:8px;
}

.der-landing .stage-step > summary{
  display:grid;
  grid-template-columns:78px 1fr auto;
  gap:10px;
  align-items:center;
  padding:11px 12px;
  cursor:pointer;
  list-style:none;
  color:var(--fa-blue);
  font-weight:800;
}

.der-landing .stage-step > summary::after{
  content:"+";
  color:var(--fa-process-blue);
  font-size:20px;
  line-height:1;
}

.der-landing .stage-step[open] > summary{
  border-bottom:1px solid var(--row-border);
}

.der-landing .stage-step[open] > summary::after{
  content:"−";
}

.der-landing .stage-number{
  color:var(--fa-grey);
  font-size:12px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.der-landing .stage-step p{
  margin:0;
  padding:11px 14px 13px 100px;
  font-size:14px;
  line-height:1.5;
}

.der-landing .project-sample{
  margin:16px 12px 14px;
  padding:14px;
  background:var(--white);
  border:1px solid var(--border);
  min-width:0;
}

.der-landing .project-sample figcaption{
  margin-bottom:10px;
  color:var(--fa-blue);
  font-weight:800;
}

.der-landing .project-sample-note{
  margin:0 0 12px;
  color:var(--fa-grey);
  font-size:12px;
  line-height:1.4;
}

.der-landing .gantt-preview{
  display:block;
  width:100%;
  height:560px;
  border:1px solid var(--border);
  background:#2b2b2b;
}

.der-landing .gantt-actions{
  margin-top:12px;
}

.der-landing .gantt-actions .button{
  width:auto;
}

.der-landing .path-resources{
  margin-top:16px;
  border:1px solid var(--border);
  background:var(--white);
}

.der-landing .path-resources summary{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
  padding:13px 14px;
  color:var(--fa-blue);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  list-style:none;
}

.der-landing .path-resources summary::-webkit-details-marker{
  display:none;
}

.der-landing .path-resources summary::after{
  content:"";
  width:7px;
  height:7px;
  margin:-4px 4px 0 2px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}

.der-landing .path-resources[open] summary{
  color:var(--fa-blue);
  border-bottom:1px solid var(--row-border);
}

.der-landing .path-resources[open] summary::after{
  margin-top:4px;
  transform:rotate(225deg);
}

.der-landing .path-resources summary:hover{
  background:var(--soft-blue);
}

.der-landing .path-resources summary:focus-visible{
  outline:3px solid var(--fa-yellow);
  outline-offset:3px;
}

.der-landing .resource-count{
  color:var(--fa-grey);
  font-size:11px;
  font-weight:700;
  padding:3px 7px;
  border-radius:999px;
  background:var(--soft-blue);
  white-space:nowrap;
}

.der-landing .path-resource-list{
  max-height:min(420px, 55vh);
  padding:2px 14px 8px;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.der-landing .resource-group + .resource-group{
  margin-top:9px;
}

.der-landing .resource-group[hidden]{
  display:none;
}

.der-landing .resource-group h4{
  margin:8px 0 3px;
  padding:7px 8px;
  color:var(--fa-blue);
  background:#f8fafc;
  border-left:3px solid var(--fa-process-blue);
  font-size:12px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.der-landing .path-resource-list a{
  display:block;
  color:var(--fa-blue);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  padding:10px 3px;
  border-top:1px solid var(--row-border);
  text-decoration:none;
  overflow-wrap:anywhere;
}

.der-landing .path-resource-list a:first-child{
  border-top:0;
}

.der-landing .resource-group a:first-of-type{
  border-top:0;
}

.der-landing .path-resource-list a:hover{
  color:var(--fa-process-blue);
  text-decoration:underline;
}

.der-landing .path-resource-list a:focus{
  outline:3px solid var(--fa-yellow);
  outline-offset:3px;
}

.der-landing .resource-filter{
  padding:12px 14px;
  background:transparent;
  border-bottom:1px solid var(--row-border);
}

.der-landing .resource-filter label{
  display:block;
  margin-bottom:6px;
  color:var(--fa-grey);
  font-size:12px;
  font-weight:700;
}

.der-landing .resource-filter input{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border:1px solid var(--fa-light-grey);
  border-radius:2px;
  background:var(--white);
  color:var(--fa-dark-grey);
  font:inherit;
}

.der-landing .resource-filter input:focus{
  outline:3px solid var(--fa-yellow);
  outline-offset:2px;
  border-color:var(--fa-blue);
}

.der-landing .resource-filter-status{
  min-height:17px;
  margin:6px 0 0;
  color:var(--fa-grey);
  font-size:12px;
}

.der-landing .resource-empty{
  margin:0;
  padding:16px 2px;
  color:var(--fa-grey);
}

.der-landing .simple-list{
  list-style:none;
  padding:0;
  margin:0 0 18px;
}

.der-landing .simple-list li{
  position:relative;
  padding:8px 0 8px 25px;
  border-bottom:1px solid var(--row-border);
  line-height:1.4;
}

.der-landing .simple-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  width:9px;
  height:9px;
  background:var(--fa-yellow);
}

.der-landing .note{
  background:var(--soft-yellow);
  border-left:5px solid var(--fa-yellow);
  padding:13px 15px;
  margin-bottom:18px;
  font-size:14px;
  line-height:1.45;
}

.der-landing .note strong{
  color:var(--fa-blue);
}

.der-landing .note a{
  color:var(--fa-blue);
  font-weight:800;
}

.der-landing .note a:hover{
  color:var(--fa-process-blue);
}

.der-landing .note a:focus-visible{
  outline:3px solid var(--fa-yellow);
  outline-offset:2px;
}

.der-landing .note p{
  margin:0;
}

.der-landing .note p + p{
  margin-top:8px;
}

.der-landing .note .warning-line{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #e6c95b;
}

.der-landing .note .simple-list{
  margin:4px 0 0;
}

.der-landing .button{
  display:inline-block;
  margin-top:auto;
  background:var(--fa-blue);
  color:var(--white);
  text-decoration:none;
  font-weight:800;
  line-height:1.25;
  padding:14px 18px;
  text-align:center;
  border:2px solid var(--fa-blue);
  width:100%;
}

.der-landing .button:hover{
  background:var(--fa-process-blue);
  border-color:var(--fa-process-blue);
}

.der-landing .button:focus{
  outline:3px solid var(--fa-yellow);
  outline-offset:3px;
}

.der-landing .button.secondary{
  background:var(--white);
  color:var(--fa-blue);
}

.der-landing .button.secondary:hover{
  background:var(--fa-blue);
  color:var(--white);
}

.der-landing .contact a:focus{
  outline:3px solid var(--fa-yellow);
  outline-offset:3px;
}

.der-landing .contact{
  margin-top:40px;
  background:var(--white);
  color:var(--fa-dark-grey);
  border:1px solid var(--border);
  border-left:5px solid var(--fa-yellow);
  padding:24px 28px;
  position:relative;
  overflow:hidden;
}

.der-landing .contact::before{
  content:none;
}

.der-landing .contact h2{
  margin:0 0 8px;
  color:var(--fa-blue);
  font-size:26px;
}

.der-landing .contact p{
  margin:0 0 10px;
  line-height:1.6;
  color:var(--fa-dark-grey);
}

.der-landing .contact p:last-child{
  margin-bottom:0;
}

.der-landing .contact a{
  color:var(--fa-blue);
  font-weight:800;
}

@media (max-width:980px){
  .der-landing .tab-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .der-landing .tab-list label{
    min-height:80px;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }

  .der-landing .tab-list label:last-child{
    grid-column:1 / -1;
  }

  .der-landing .tab-panel{
    grid-template-columns:1fr;
    min-height:0;
  }
}

@media (max-width:700px){
  .der-landing .section{
    margin-top:28px;
  }

  .der-landing .hosting-capacity{
    align-items:stretch;
    flex-direction:column;
    gap:16px;
    padding:20px;
  }

  .der-landing .hosting-capacity .button{
    width:100%;
    white-space:normal;
  }

  .der-landing .library-download{
    align-items:stretch;
    flex-direction:column;
    gap:14px;
  }

  .der-landing .library-download-link{
    white-space:normal;
  }

  .der-landing .site-banner{
    min-height:48vh;
    background:
        linear-gradient(180deg, rgba(0,40,85,0.96) 0%, rgba(0,40,85,0.88) 58%, rgba(0,133,202,0.56) 100%),
        url("https://www.fortisalberta.com/images/default-source/default-album/solarfarm.png") center / cover no-repeat;
  }

  .der-landing .site-banner-inner{
    padding:58px 16px 64px;
  }

  .der-landing .site-banner h1{
    font-size:52px;
  }

  .der-landing .site-banner p{
    font-size:20px;
  }

  .der-landing .site-banner-kicker{
    font-size:12px;
    margin-bottom:14px;
  }

  .der-landing .bulletin-pin{
    margin-top:16px;
    padding:0 16px;
  }

  .der-landing .bulletin-pin-inner{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:15px 16px;
  }

  .der-landing .bulletin-pin a{
    width:100%;
    text-align:center;
  }

  .der-landing .bulletin-pin-actions{
    width:100%;
  }

  .der-landing .page{
    padding:24px 16px 40px;
  }

  .der-landing .path-finder{
    padding:18px;
  }

  .der-landing .path-finder h2{
    font-size:25px;
  }

  .der-landing .path-finder .section-intro{
    font-size:15px;
    margin-bottom:16px;
  }

  .der-landing .tab-list{
    grid-template-columns:1fr;
    gap:4px;
  }

  .der-landing .tab-list label{
    grid-column:auto;
    min-height:60px;
    justify-content:flex-start;
    text-align:left;
    padding:14px 16px;
    border-right:1px solid var(--border);
    border-bottom:4px solid transparent;
    font-size:18px;
  }

  .der-landing .tab-content{
    padding:24px 18px;
  }

  .der-landing .tab-content h3{
    font-size:25px;
  }

  .der-landing .path-actions .button{
    width:100%;
  }

  .der-landing .stage-step > summary{
    grid-template-columns:64px 1fr auto;
  }

  .der-landing .stage-step p{
    padding:11px 14px 13px;
  }

  .der-landing .project-sample{
    margin-right:8px;
    margin-left:8px;
  }

  .der-landing .gantt-preview{
    display:none;
  }

  .der-landing .gantt-actions .button{
    width:100%;
  }

  .der-landing .contact{
    margin-top:28px;
    padding:20px;
  }

  .der-landing .path-resources summary{
    gap:8px;
    padding:12px;
    font-size:15px;
  }

  .der-landing .resource-count{
    font-size:11px;
  }

  .der-landing .path-resource-list{
    padding-right:12px;
    padding-left:12px;
  }
}

/* ---- Additions for running inside a Sitefinity template ---------------- */

/* Keep site-wide heading/link styles from leaking in */
.der-landing h1,
.der-landing h2,
.der-landing h3,
.der-landing h4{
  font-family:inherit;
  letter-spacing:normal;
  text-transform:none;
}

/* Fix: the resource filter hides individual links with the hidden attribute,
   but ".path-resource-list a { display:block }" was overriding it */
.der-landing .path-resource-list a[hidden],
.der-landing .resource-empty[hidden]{
  display:none;
}

/* OPTIONAL: if the template puts this content in a centred column and you want
   the banner to stretch edge to edge, remove the comment markers below. */
/*
.der-landing .site-banner{
  width:100vw;
  margin-left:calc(50% - 50vw);
}
*/