:root {
  --golden1: #8D6527;
  --white: #FFFFFF;
  --mud2: #EFEDE0;
  --gary1: #B0B0B0;
  --homePadding: 100px;
  --homeContactPadding: 30px;
}

@font-face {
  font-family: "MStiffHeiHKMedium";
  src: url("../font/MStiffHeiHK-Medium.otf") format("opentype");
  /* font-weight: 300; */
  font-style: normal;
  font-display: swap;
}

/* General Start */

body {
  background-color: var(--mud2);
}

.il-silverSeparator{
  width: 100%;
  height: 10px;
  background: linear-gradient(135deg, #dcdcdc, #b3b3b3, #AEAEAE, #dcdcdc);
}

.il-goldenSeparator{
  width: 100%;
  height: 10px;
  background: linear-gradient(135deg, #EFEDE0, #A7823D, #EFEDE0);
}

.il-normalFont{
  font-family: var(--bs-body-font-family);
}

/* PNG ornaments frame the CMS title without adding decorative screen-reader text. */
.il-homeTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 28px);
  width: 100%;
  color: var(--golden1);
  font-size: clamp(24px, 3vw, 35px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}



.il-homeTitle::before {
  background-image: url("../img/titleLeft.png");
}

.il-homeTitle::after {
  background-image: url("../img/titleRight.png");
}

.il-homeTitle-text {
  font-family: "MStiffHeiHKMedium", sans-serif;;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 75%;
  overflow-wrap: anywhere;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  font-size: 32pt;
  font-weight: lighter;
}

.il-headerStyle{

}

/* General End */

/* Menu Start */
#site-navigation .nav-link {
  position: relative;
  padding-bottom: 10px;
  color: var(--golden1);
  font-size: 14pt;
  font-family: "MStiffHeiHKMedium", sans-serif;
  font-weight: 500;
}

#site-navigation .nav-link::before {
  content: none;
}

#site-navigation .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--golden1);
  opacity: 0;
}

#site-navigation .nav-link.dropdown-toggle::after {
    content: "";
    display: inline-block;
    position: static;
    width: 0;
    height: 0;
    margin-left: 0.4em;
    vertical-align: 0.2em;
    background: none;
    opacity: 1;

    border-top: 0.3em solid currentColor;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

#site-navigation .dropdown-item{
    font-family: "MStiffHeiHKMedium", sans-serif;
}


#site-navigation .dropdown-item.active, .dropdown-item:active {
  background-color: var(--golden1);
  color: white;
}

#site-navigation .dropdown-menu{
  border: 4px solid var(--golden1);
}

/* Menu End */


/* homeIntro Start */
#homeIntro{
  background-color: var(--white);
}

#homeIntro .container{
  padding-top: var(--homePadding) !important;
  padding-bottom: var(--homePadding) !important;
}

#homeIntro h3{
    font-family: "MStiffHeiHKMedium", sans-serif;
    display: inline-block;
    color: var(--golden1);
    font-size: 40pt;
}

#homeIntro .il-subtitle{
  margin-left: 10pt;
  margin-top: 15px;
  font-size: 20pt;
  display: inline-block;
  color: var(--golden1);
  border-top: 1px solid var(--golden1);
  border-bottom: 1px solid var(--golden1);
  height: fit-content;
}

#homeIntro  p{
  font-size: 18pt;
}


#homeIntro  .il-titleHolder{
  text-align: center;
  padding: 20px;
  display: flex;
  justify-content: center;
  justify-items: center;
}

/* homeIntro End */

/* homeAwardCategory Start */

#homeAwardCategory .container{
  padding-top: var(--homePadding) !important;
  padding-bottom: var(--homePadding) !important;
}

.home-award-category-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

#homeAwardCategory{
  background-color: var(--mud2);
}

#homeAwardCategory .container{
  padding: 40px 0;
}

#homeAwardCategory .il-content{
  position: relative;
}

#homeAwardCategory .il-content{
  position: relative;
}

#homeAwardCategory .item0 .il-itemGrid, #homeAwardCategory .item2 .il-itemGrid{
  display: grid;
  grid-template-columns: auto 120px;
}

#homeAwardCategory .item1 .il-itemGrid, #homeAwardCategory .item3 .il-itemGrid{
  display: grid;
  grid-template-columns: 120px auto;
}

#homeAwardCategory .il-itemGrid .il-Title {
  position: relative;
  width: fit-content;
  overflow: visible;
}

#homeAwardCategory .il-itemGrid .il-Title::before {
  content: "\2727"; /* ✧ */
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  position: absolute;
  top: -0.65em;
  left: -0.65em;
  color: #b0b0b0;
  font-size: 40px;
  line-height: 1;
  pointer-events: none;
}

#homeAwardCategory .il-itemGrid .il-Title{
  color: var(--golden1);
  font-family: "MStiffHeiHKMedium", sans-serif;
  font-size: 18pt;
}

#homeAwardCategory .il-itemGrid .il-Title::first-letter{
  color: var(--golden1);
  font-size: 25pt;
}

#homeAwardCategory .il-itemGrid img{
  width: 100px;
  padding: 10px;
  justify-self: center;
}

#homeAwardCategory .item0 {
  background-color: white;
  padding: 50px 40px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

#homeAwardCategory .item1 {
  background-color: white;
  padding: 50px 40px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

#homeAwardCategory .item2 {
  background-color: white;
  padding: 50px 40px;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

#homeAwardCategory .item3 {
  background-color: white;
  padding: 50px 40px;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

/* homeAwardCategory End */


/* homeContact Start */
#homeContact{
  background-color: var(--mud2);
}

#homeContact .container{
  padding-top: var(--homePadding) !important;
  padding-bottom: var(--homePadding) !important;
}

/* homeContact End */

/* homeJudgeCriteria Start */
#homeJudgeCriteria .container{
  padding-top: var(--homePadding) !important;
  padding-bottom: var(--homePadding) !important;
}

#homeJudgeCriteria{
  background-color: var(--white);  
}

#homeJudgeCriteria .container{
  padding: 40px 0;
}
/* homeJudgeCriteria End */

/* homeContact Start */
#homeContact .container{
  padding-top: var(--homeContactPadding) !important;
  padding-bottom: var(--homeContactPadding) !important;
}

#homeContact .il-contactList{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

#homeContact .row > .il-item {
  position: relative;
}

#homeContact .il-contentHolder{
  text-align: center;
}


#homeContact .il-contentHolder img{
  height: 70px;
  width: auto;
  padding-top: 5px;
  padding-bottom: 10px;
  justify-self: center;
}

#homeContact .il-contentHolder div{
  display: inline-block;

}

#homeContact .il-contentHolder div + div{
  padding-left: 10px;
}

#homeContact h4{
  font-family: "MStiffHeiHKMedium", sans-serif;
  color: var(--golden1);
  font-weight: bold;
  padding: 0;
  margin: 0;
  font-size: 20pt;
  font-weight: lighter;
}

/* homeContact End */

/* Footer Start */
footer{
    background-color: var(--white);
}

.il-footerNav a{
  color: var(--golden1);
  font-size: 12pt;
  font-family: "MStiffHeiHKMedium", sans-serif;
}

.il-copyright{
  padding: 10px 0;
  background-color: var(--golden1);
  color: white;
}

/* Footer End */

/* Shared website styles. Add page-specific styles below as needed. */
main {
    min-height: 50vh;
}

.site-logo {
    display: block;
    width: auto;
    max-width: min(220px, 50vw);
    height: auto;
    max-height: 48px;
}

.winner-logo {
    max-width: 180px;
    max-height: 100px;
    object-fit: contain;
}

.winner-content {
    overflow-wrap: anywhere;
}

.winner-content pre {
    overflow-x: auto;
}

:root {
    --site-header-height: 74px;
}

.home-section[id] {
    scroll-margin-top: calc(var(--site-header-height) + 16px);
}


.gallery-thumbnail {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.gallery-image-link:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 4px;
}

.gallery-preview-image {
    max-height: 70vh;
    object-fit: contain;
}

.home-hero > img,
.home-lead-media > img {
    width: 100%;
    height: auto;

}

.home-lead-media > img {
  border-radius: 30px;
}

.home-sub-item {
    overflow-wrap: anywhere;
}

/* Footer website and strategic partner logos. */

.il-footerContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 40px;
  min-height: 82px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.il-footerNav {
  align-items: center;
  gap: 12px clamp(20px, 4vw, 64px);
  margin-bottom: 0;
}

.il-footerNav .nav-link {
  padding: 0;
}

.il-footerBranding {
  margin-left: auto;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px clamp(24px, 5vw, 80px);
}

.il-footerWebsiteLink {
  max-width: 100%;
}

.il-footerWebsiteLogo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(240px, 100%);
  max-height: 25px;
}

.il-footerPartners {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 16px 24px;
}

.il-footerPartnerLabel {
  margin: 0;
  color: #888;
  font-size: 14px;
  white-space: nowrap;
}

.il-footerSponsorLogos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 16px;
  flex: 0 0 auto;
  width: max-content;
}

.il-footerSponsorLogos img {
  display: block;
  max-width: min(120px, 100%);
  max-height: 48px;
  object-fit: contain;
  width: auto;
  max-width: 100%;
  height: 20px;  
}



/* Image section: decorative background with a separate content image. */
.home-img-section {
  position: relative;
  isolation: isolate;
}

.home-img-section-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: -1;
}

.home-img-section-inner {
  position: relative;
}

.home-img-section-content {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}

/* Judges page portraits. */
#judge-content {
  background-color: var(--mud2);
}

#judge-content h1{
  font-family: "MStiffHeiHKMedium", sans-serif;
  color: var(--golden1);
}

#judge-content .judge-photo {
  display: block;
  width: min(220px, calc(100% - 32px));
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  /* border-radius: 50%; */
  margin: 24px auto 0;
  /* border: 5px solid var(--golden1); */
}

#judge-content article{
  background: none;
  border: none;
}

#judge-content .il-title{
  font-family: "MStiffHeiHKMedium", sans-serif;
  font-size: 1.2rem;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  #homeIntro h3 {
      font-size: 30pt;
  }

  #homeIntro .il-subtitle{
    font-size: 15pt;
  }

  .il-footerSponsorLogos img{
    height: 15px;
  }

  .il-footerPartners{
    gap: 16px 10px;
  }

  .il-footerBranding {
    width: 100%;
    margin-left: 0;
  }

  .home-award-category-background{
    display: none;
  }

  #homeContact .il-contentHolder img{
    height: 60px;
    width: auto;
  }

  #homeContact h4 {
    font-size: 13pt;
  }

  #homeAwardCategory .item0 .il-itemGrid, 
  #homeAwardCategory .item1 .il-itemGrid, 
  #homeAwardCategory .item2 .il-itemGrid, 
  #homeAwardCategory .item3 .il-itemGrid
  {
    display: grid;
    grid-template-columns: auto;
  }

  #homeAwardCategory .item0, 
  #homeAwardCategory .item1, 
  #homeAwardCategory .item2, 
  #homeAwardCategory .item3 {
    padding: 20px 40px;
  }

  .il-homeTitle::before,
  .il-homeTitle::after {
    content: "";
    /* Combined grow factor 0.5 uses half the available space. */
    flex: 1.25 1 0;
    min-width: 24px;
    height: clamp(16px, 2.5vw, 30px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .il-homeTitle-text{
    font-size: 25pt;
  }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

  #site-navigation .nav-item{
    padding-left: 15px;
  }

  #site-navigation .nav-link:is(:hover, :focus-visible, .active)::after {
    opacity: 0;
  }  

.il-homeTitle::before,
.il-homeTitle::after {
  content: "";
  /* Combined grow factor 0.5 uses half the available space. */
  flex: 0.25 1 0;
  min-width: 24px;
  height: clamp(16px, 2.5vw, 30px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #homeContact .row > .il-item + .il-item::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 3px;
    background: linear-gradient(to bottom, #cbb784, #e4dcc4);
  }

  #site-navigation .nav-item + .nav-item{
    padding-left: 15px;
  }

  #site-navigation .nav-link:is(:hover, :focus-visible, .active)::after {
    opacity: 1;
  }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}

/* Motion preferences */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}