/* =========================================================
   SEA LICENSING — HONDURAS
   FINAL UI SYSTEM

   No runtime-generated classes.
   Only permanent HTML structure is targeted.
   ========================================================= */


/* =========================================================
   01 — NEVER DARKEN PARENT PANELS
   ========================================================= */

.hnd2 .hnd2-panel,
.hnd2 .hnd2-panel:hover,
.hnd2 .hnd2-panel:focus-within{
  transform:none !important;
}


.hnd2 .hnd2-panel::before,
.hnd2 .hnd2-panel::after{
  pointer-events:none !important;
}


/* section headings always remain dark */

.hnd2 .hnd2-panel > h2,
.hnd2 .hnd2-panel > h3,
.hnd2 .hnd2-panel > h4{
  color:#0b3046 !important;
}


.hnd2 .hnd2-panel > p{
  color:#607985 !important;
}



/* =========================================================
   02 — SHARED LEAF CARD TRANSITIONS
   ========================================================= */

.hnd2 .hnd2-docitem,

.hnd2 .hnd2-procedure > .hnd2-step,

.hnd2 .hnd2-form-grid > *,

#official-resources .hnd2-resource-grid > *{
  position:relative !important;

  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    background .30s ease,
    border-color .30s ease,
    box-shadow .30s ease,
    color .25s ease !important;
}



/* remove old pseudo dark layers */

.hnd2 .hnd2-docitem::before,
.hnd2 .hnd2-procedure > .hnd2-step::before,
.hnd2 .hnd2-form-grid > *::before,
#official-resources .hnd2-resource-grid > *::before{
  content:none !important;
  display:none !important;
}



/* =========================================================
   03 — REQUIRED DOCUMENTS
   ========================================================= */

.hnd2 .hnd2-docitem:hover,
.hnd2 .hnd2-docitem:focus-within{
  transform:translateY(-2px) !important;

  background:
    linear-gradient(
      135deg,
      #10384f 0%,
      #194f70 54%,
      #3379a3 100%
    ) !important;

  border-color:#58bde2 !important;

  box-shadow:
    0 13px 28px
    rgba(5,44,65,.17) !important;
}


/* title */

.hnd2 .hnd2-docitem:hover b,
.hnd2 .hnd2-docitem:hover strong,
.hnd2 .hnd2-docitem:hover h3,
.hnd2 .hnd2-docitem:hover h4,

.hnd2 .hnd2-docitem:focus-within b,
.hnd2 .hnd2-docitem:focus-within strong{
  color:#ffffff !important;
  opacity:1 !important;
}


/* description */

.hnd2 .hnd2-docitem:hover small,
.hnd2 .hnd2-docitem:hover p,

.hnd2 .hnd2-docitem:focus-within small,
.hnd2 .hnd2-docitem:focus-within p{
  color:#d7e9f2 !important;
  opacity:1 !important;
}


/* number */

.hnd2 .hnd2-docitem:hover i,
.hnd2 .hnd2-docitem:focus-within i{
  color:#08769e !important;

  background:#e4f7fc !important;

  border-color:#99dff0 !important;

  box-shadow:
    0 4px 12px
    rgba(0,0,0,.11) !important;
}



/* =========================================================
   04 — ALL PROCEDURE ROWS
   COC / COE / SHIP REGISTRATION
   ========================================================= */

.hnd2 .hnd2-procedure > .hnd2-step:hover,
.hnd2 .hnd2-procedure > .hnd2-step:focus-within{
  transform:translateY(-2px) !important;

  background:
    linear-gradient(
      135deg,
      #10384f 0%,
      #194f70 52%,
      #3379a3 100%
    ) !important;

  background-image:
    linear-gradient(
      135deg,
      #10384f 0%,
      #194f70 52%,
      #3379a3 100%
    ) !important;

  border-color:#58bde2 !important;

  box-shadow:
    0 13px 28px
    rgba(4,44,65,.17) !important;
}


/* absolutely force procedure titles white */

.hnd2 .hnd2-procedure > .hnd2-step:hover b,
.hnd2 .hnd2-procedure > .hnd2-step:hover strong,
.hnd2 .hnd2-procedure > .hnd2-step:hover h3,
.hnd2 .hnd2-procedure > .hnd2-step:hover h4,
.hnd2 .hnd2-procedure > .hnd2-step:hover h5,

.hnd2 .hnd2-procedure > .hnd2-step:focus-within b,
.hnd2 .hnd2-procedure > .hnd2-step:focus-within strong{
  color:#ffffff !important;
  opacity:1 !important;
}


/* nested span title */

.hnd2 .hnd2-procedure > .hnd2-step:hover > span > b,
.hnd2 .hnd2-procedure > .hnd2-step:hover > span > strong{
  color:#ffffff !important;
  opacity:1 !important;
}


/* description */

.hnd2 .hnd2-procedure > .hnd2-step:hover small,
.hnd2 .hnd2-procedure > .hnd2-step:hover p,
.hnd2 .hnd2-procedure > .hnd2-step:hover > span > small,

.hnd2 .hnd2-procedure > .hnd2-step:focus-within small,
.hnd2 .hnd2-procedure > .hnd2-step:focus-within p{
  color:#d7e9f2 !important;
  opacity:1 !important;
}


/* procedure number */

.hnd2 .hnd2-procedure > .hnd2-step:hover > i,
.hnd2 .hnd2-procedure > .hnd2-step:focus-within > i{
  color:#08769e !important;

  background:#e3f7fc !important;

  border-color:#98deef !important;

  box-shadow:
    0 4px 12px
    rgba(0,0,0,.11) !important;
}



/* =========================================================
   05 — APPLICATION FORMS / MEDICAL / OFFICIAL FORMS
   ========================================================= */

.hnd2 .hnd2-form-grid > *:hover,
.hnd2 .hnd2-form-grid > *:focus-within{
  transform:translateY(-4px) !important;

  background:
    linear-gradient(
      135deg,
      #10384f 0%,
      #194f70 52%,
      #3379a3 100%
    ) !important;

  background-image:
    linear-gradient(
      135deg,
      #10384f 0%,
      #194f70 52%,
      #3379a3 100%
    ) !important;

  border-color:#58bde2 !important;

  box-shadow:
    0 17px 35px
    rgba(5,45,66,.18) !important;
}


/* titles */

.hnd2 .hnd2-form-grid > *:hover h2,
.hnd2 .hnd2-form-grid > *:hover h3,
.hnd2 .hnd2-form-grid > *:hover h4,
.hnd2 .hnd2-form-grid > *:hover h5,
.hnd2 .hnd2-form-grid > *:hover b,
.hnd2 .hnd2-form-grid > *:hover strong{
  color:#ffffff !important;
  opacity:1 !important;
}


/* descriptions */

.hnd2 .hnd2-form-grid > *:hover p,
.hnd2 .hnd2-form-grid > *:hover small{
  color:#d7e9f2 !important;
  opacity:1 !important;
}


/* labels */

.hnd2 .hnd2-form-grid > *:hover span{
  color:#91def7 !important;
}


/* action */

.hnd2 .hnd2-form-grid > *:hover a{
  color:#9be5ff !important;
}


/* PDF / MED / REQ / DGMM icons */

.hnd2 .hnd2-form-grid > *:hover i{
  color:#08769e !important;

  background:#e4f7fc !important;

  border-color:#99dff0 !important;
}



/* =========================================================
   06 — SEAMAN BOOK PDF CARDS
   In case they are not using hnd2-form-grid
   ========================================================= */

#seaman-book a[href$=".pdf"]{
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    background .30s ease,
    border-color .30s ease,
    box-shadow .30s ease !important;
}


#seaman-book a[href$=".pdf"]:hover,
#seaman-book a[href$=".pdf"]:focus{
  transform:translateY(-4px) !important;

  background:
    linear-gradient(
      135deg,
      #10384f 0%,
      #194f70 52%,
      #3379a3 100%
    ) !important;

  border-color:#58bde2 !important;

  box-shadow:
    0 17px 35px
    rgba(5,45,66,.18) !important;

  color:#ffffff !important;
}


#seaman-book a[href$=".pdf"]:hover *{
  color:#ffffff !important;
}



/* =========================================================
   07 — OFFICIAL RESOURCES GRID
   Exact equal columns
   ========================================================= */

#official-resources .hnd2-resource-grid{
  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:14px !important;

  align-items:stretch !important;
}



/* =========================================================
   08 — OFFICIAL RESOURCE CARDS
   SAME HEIGHT + SAME INTERNAL GEOMETRY
   ========================================================= */

#official-resources .hnd2-resource-grid > *{
  box-sizing:border-box !important;

  min-width:0 !important;

  height:220px !important;
  min-height:220px !important;

  margin:0 !important;

  padding:
    22px 22px 20px !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:flex-start !important;

  text-align:left !important;

  overflow:hidden !important;
}



/* remove random inherited margins from ALL direct children */

#official-resources
.hnd2-resource-grid > *
> *{
  flex:none;

  margin-left:0 !important;
  margin-right:0 !important;
}



/* =========================================================
   09 — TOP KICKER
   01 / CERTIFICATION etc.
   ========================================================= */

#official-resources
.hnd2-resource-grid > *
> span:first-child:not(.sl-resource-action){
  height:18px !important;
  min-height:18px !important;

  margin:
    0 0 6px 0 !important;

  padding:0 !important;

  display:block !important;

  font-size:7px !important;
  line-height:1 !important;

  white-space:nowrap !important;
}



/* =========================================================
   10 — BADGE
   CERT / REG / INFO / GO
   ========================================================= */

#official-resources
.hnd2-resource-grid > *
> i{
  width:31px !important;
  min-width:31px !important;
  max-width:31px !important;

  height:31px !important;
  min-height:31px !important;
  max-height:31px !important;

  margin:
    0 0 8px 0 !important;

  padding:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;
}



/* =========================================================
   11 — TITLES
   ========================================================= */

#official-resources
.hnd2-resource-grid > *
> h3,

#official-resources
.hnd2-resource-grid > *
> h4{
  width:100% !important;

  height:26px !important;
  min-height:26px !important;

  margin:
    0 0 6px 0 !important;

  padding:0 !important;

  color:#0b3046 !important;

  font-size:16px !important;
  line-height:1.2 !important;

  opacity:1 !important;
}



/* =========================================================
   12 — DESCRIPTIONS
   ========================================================= */

#official-resources
.hnd2-resource-grid > *
> p{
  width:100% !important;

  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  color:#607985 !important;

  font-size:10.5px !important;
  line-height:1.5 !important;

  opacity:1 !important;
}



/* =========================================================
   13 — BOTTOM ACTION
   Force all four to exact same bottom line
   ========================================================= */

#official-resources
.hnd2-resource-grid > *
> .sl-resource-action{
  margin:
    auto 0 0 0 !important;

  padding:0 !important;

  height:18px !important;
  min-height:18px !important;

  display:flex !important;

  align-items:center !important;

  color:#168fbc !important;

  font-size:10px !important;
  line-height:1 !important;

  white-space:nowrap !important;

  opacity:1 !important;
}



/* =========================================================
   14 — RESOURCE CARD DARK HOVER
   ========================================================= */

#official-resources
.hnd2-resource-grid > *:hover,

#official-resources
.hnd2-resource-grid > *:focus-within{
  transform:
    translateY(-4px) !important;

  background:
    linear-gradient(
      135deg,
      #10384f 0%,
      #194f70 52%,
      #3379a3 100%
    ) !important;

  background-image:
    linear-gradient(
      135deg,
      #10384f 0%,
      #194f70 52%,
      #3379a3 100%
    ) !important;

  border-color:#58bde2 !important;

  box-shadow:
    0 17px 35px
    rgba(5,45,66,.18) !important;

  padding:
    22px 22px 20px !important;
}



/* heading white */

#official-resources
.hnd2-resource-grid > *:hover
> h3,

#official-resources
.hnd2-resource-grid > *:hover
> h4{
  color:#ffffff !important;
  opacity:1 !important;
}



/* description */

#official-resources
.hnd2-resource-grid > *:hover
> p{
  color:#d7e9f2 !important;
  opacity:1 !important;
}



/* top label */

#official-resources
.hnd2-resource-grid > *:hover
> span:first-child:not(.sl-resource-action){
  color:#8eddf7 !important;
}



/* badge */

#official-resources
.hnd2-resource-grid > *:hover
> i{
  color:#08769e !important;

  background:#e3f7fc !important;

  border-color:#98deef !important;
}



/* bottom action */

#official-resources
.hnd2-resource-grid > *:hover
> .sl-resource-action{
  color:#a0e7ff !important;

  transform:
    translateX(4px) !important;
}



/* =========================================================
   15 — FALLBACK FOR RESOURCE TITLE MARKUP
   ========================================================= */

#official-resources
.hnd2-resource-grid > *:hover b,

#official-resources
.hnd2-resource-grid > *:hover strong{
  color:#ffffff !important;
}



/* =========================================================
   16 — KEYBOARD FOCUS
   ========================================================= */

.hnd2 .hnd2-docitem:focus-within,

.hnd2 .hnd2-procedure > .hnd2-step:focus-within,

.hnd2 .hnd2-form-grid > *:focus-within,

#official-resources
.hnd2-resource-grid > *:focus-within{
  outline:
    2px solid
    rgba(80,192,230,.48) !important;

  outline-offset:
    2px !important;
}



/* =========================================================
   17 — TABLET
   ========================================================= */

@media(max-width:900px){

  #official-resources
  .hnd2-resource-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}



/* =========================================================
   18 — MOBILE
   ========================================================= */

@media(max-width:600px){

  #official-resources
  .hnd2-resource-grid{
    grid-template-columns:
      1fr !important;
  }


  #official-resources
  .hnd2-resource-grid > *{
    height:205px !important;
    min-height:205px !important;
  }

}



/* =========================================================
   19 — TOUCH
   ========================================================= */

@media(hover:none){

  .hnd2 .hnd2-docitem:hover,

  .hnd2 .hnd2-procedure
  > .hnd2-step:hover,

  .hnd2 .hnd2-form-grid
  > *:hover,

  #official-resources
  .hnd2-resource-grid
  > *:hover{
    transform:none !important;
  }

}