/* Shared ADA / mobile / SEO helper styles for China King */

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100000;
  background: #000;
  color: #fff;
  padding: 0.75rem 1rem;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  overflow: visible;
  outline: 3px solid #ffd700;
  outline-offset: 2px;
}

/* Visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.navbar-toggle:focus-visible {
  outline: 3px solid #1a73e8 !important;
  outline-offset: 2px !important;
}

/* Footer copyright + accessibility */
.w3agile_footer_copy p a {
  color: #fff;
  text-decoration: underline;
  margin-left: 0.75em;
}
.w3agile_footer_copy p a:hover,
.w3agile_footer_copy p a:focus {
  color: #ffd700;
}

/* Larger back-to-top touch target */
#toTop {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
}

/* Contact map responsive */
.map iframe {
  width: 100% !important;
  max-width: 100%;
  height: 450px;
  border: 0;
}

/* Contact form labels */
.w3_agile_mail_grid label {
  display: block;
  text-align: left;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
  color: #333;
}
.captcha-refresh {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
  padding: 0.35rem 0.75rem;
  min-height: 44px;
  border: 1px solid #666;
  background: #f5f5f5;
  cursor: pointer;
}

/* Gallery grid: avoid forced 25% on mid widths */
@media (max-width: 991px) {
  .gallery-grids .gallery-grid.col-md-4 {
    width: 50%;
    float: left;
  }
}
@media (max-width: 480px) {
  .gallery-grids .gallery-grid.col-md-4 {
    width: 100%;
    float: none;
  }
}

/* Menu category list on tablets/phones */
@media (max-width: 768px) {
  #menus .menus li,
  .menus li {
    width: 50% !important;
    float: left;
  }
}
@media (max-width: 480px) {
  #menus .menus li,
  .menus li {
    width: 100% !important;
    float: none;
  }
}

/* Mobile header: remove right-side gap from .navbar { width: 93%/90% } */
@media (max-width: 767px) {
  .header-w3-agileits,
  .inner-header-agile,
  .navbar.navbar-default,
  .navbar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .inner-header-agile {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .navbar-default .navbar-toggle {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .navbar-toggle {
    margin-right: 0 !important;
  }
  div#bs-example-navbar-collapse-1 {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .navbar-collapse.collapse.in,
  .navbar-collapse.collapsing {
    width: 100% !important;
  }
  ul.nav.navbar-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}

/* ---- Contrast fixes (WCAG AA ~4.5:1) ---- */

/* Hero overlay: only darken the slideshow (not the nav) */
#demo-1 {
  background-color: #1a1a1a !important;
  position: relative;
}
#demo-1.zs-enabled .zs-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.45) 50%,
    rgba(0, 0, 0, 0.55) 100%
  );
}
#demo-1 .demo-inner-content {
  position: relative;
  z-index: 3;
}

/* Lighter navigation bar */
.inner-header-agile {
  background: rgba(40, 18, 16, 0.38) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.header-w3-agileits {
  position: relative;
  z-index: 5;
}

/* Keep nav link text bright white on translucent bar */
.navbar-default .navbar-nav > li > a {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.navbar-header h1 a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
p.s-log {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Hero: shadow only on headline (red-box area); block sits lower */
.baner-info {
  display: block;
  max-width: 920px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  padding-top: 14em !important;
  background: transparent !important;
  border-radius: 0;
  box-sizing: border-box;
}

.baner-headline {
  display: block;
  padding: 0.85em 1.15em 1em;
  background: rgba(0, 0, 0, 0.68);
  border-radius: 6px;
  margin: 0 auto 1.25em;
  max-width: 100%;
  box-sizing: border-box;
}

.baner-info h3,
.baner-info h4 {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow:
    0 0 2px #000,
    0 1px 3px rgba(0, 0, 0, 1),
    0 2px 10px rgba(0, 0, 0, 0.95);
}
.baner-headline h3 {
  margin: 0.15em 0 !important;
}
.baner-info h4 {
  margin: 0.5em 0 1.4em 0 !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(0, 0, 0, 0.8);
}
.baner-info h3 span {
  color: #d4ff9a !important;
  font-weight: 700 !important;
  text-shadow:
    0 0 2px #000,
    0 1px 3px rgba(0, 0, 0, 1),
    0 2px 10px rgba(0, 0, 0, 0.95);
}
.baner-info h3 span[style*="color"],
.baner-info h3 span[style*="COLOR"] {
  color: #ffffff !important;
}

@media (max-width: 1280px) {
  .baner-info {
    padding-top: 11em !important;
  }
}

@media (max-width: 991px) {
  .baner-info {
    padding-top: 8em !important;
  }
}

@media (max-width: 767px) {
  .baner-info {
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 7em !important;
  }
  .baner-headline {
    padding: 0.7em 0.8em 0.85em;
    margin-bottom: 1em;
  }
  .baner-info h3 {
    font-size: 1.35em !important;
    line-height: 1.35 !important;
    letter-spacing: 0.5px !important;
  }
  .baner-info h4 {
    font-size: 0.85em !important;
    letter-spacing: 3px !important;
    margin: 0.75em 0 1.2em 0 !important;
  }
}

/* CTA buttons: darken red so white text passes */
a.read {
  background: #a81010 !important;
  color: #ffffff !important;
}
a.read:hover,
a.read:focus {
  background: #156b15 !important;
  color: #ffffff !important;
}

/* Footer copyright strip: darken red; keep white link readable */
.w3agile_footer_copy {
  background: #5c0a0a !important;
}
.w3agile_footer_copy p {
  color: #ffffff !important;
}
.w3agile_footer_copy p a {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.w3agile_footer_copy p a:hover,
.w3agile_footer_copy p a:focus {
  color: #ffffff !important;
  text-decoration-thickness: 2px;
}

/* Breadcrumb: white text on bright #FF3333 fails AA — darken bar */
.w3_breadcrumb {
  background: #5c0a0a !important;
}
.breadcrumb-inner ul li,
.breadcrumb-inner ul li i {
  color: #ffffff !important;
}
.breadcrumb-inner ul li a {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.breadcrumb-inner ul li a:hover,
.breadcrumb-inner ul li a:focus {
  color: #ffffff !important;
  text-decoration-thickness: 2px;
}

/* Nav active / open: clearer green + white text */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > li > a.active,
.navbar-default .navbar-nav > li > a.active:hover,
.navbar-default .navbar-nav > li > a.active:focus {
  background: #1f8a1f !important;
  color: #ffffff !important;
  text-shadow: none;
}

/* Gallery dish titles: white over photos fails — solid dark label */
.grid figure {
  background: #111 !important;
}
.grid figure figcaption {
  color: #ffffff !important;
}
figure.effect-apollo figcaption::before {
  background: rgba(0, 0, 0, 0.65) !important;
}
figure.effect-apollo p,
.grid figure p {
  opacity: 1 !important;
  color: #ffffff !important;
  background: #111111 !important;
  padding: 0.45em 0.8em !important;
  margin: 1em !important;
  max-width: calc(100% - 2em) !important;
  border-right: 4px solid #7acc5a !important;
  text-align: right;
  text-shadow: none !important;
}
figure.effect-apollo:hover p {
  opacity: 1 !important;
}

/* Contact form submit: white on #E34234 fails AA */
.w3_agile_mail_grid input[type="submit"],
form[name="form1"] input[type="submit"] {
  background: #8a1010 !important;
  color: #ffffff !important;
  border: none !important;
}
.w3_agile_mail_grid input[type="submit"]:hover,
.w3_agile_mail_grid input[type="submit"]:focus,
form[name="form1"] input[type="submit"]:hover,
form[name="form1"] input[type="submit"]:focus {
  background: #5c0a0a !important;
  color: #ffffff !important;
}

/* Footer quick-links active item */
.footer-info-grid.links li.active a,
.w3l-footer .links li.active a {
  color: #ffffff !important;
  background: transparent !important;
  font-weight: 700;
  text-decoration: underline;
}

/* Location page */
.location-panel {
  max-width: 720px;
  margin: 0 auto 2.5em;
  text-align: center;
}
.location-info {
  padding: 0 1rem 1rem;
}
.location-block {
  margin-bottom: 1.75rem;
}
.location-block h3 {
  font-size: 1.25em;
  font-weight: 600;
  color: #5c0a0a;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}
.location-block p {
  font-size: 1.05em;
  line-height: 1.7;
  color: #333;
  letter-spacing: 0.5px;
}
.location-block a {
  color: #0f5c0f;
  font-weight: 700;
  text-decoration: underline;
  font-size: 1.15em;
}
.location-block a:hover,
.location-block a:focus {
  color: #8a1010;
}
.location-actions {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.location-directions {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.85em 1.8em !important;
  font-weight: 700;
}
.location-map {
  margin-top: 0.5rem;
}
.location-map iframe {
  display: block;
  width: 100% !important;
  height: 450px;
  border: 0;
}
.location-map-link {
  text-align: center;
  margin: 0.75rem 0 1.5rem;
  font-size: 1em;
}
.location-map-link a {
  color: #0f5c0f;
  font-weight: 700;
  text-decoration: underline;
}
.location-map-link a:hover,
.location-map-link a:focus {
  color: #8a1010;
}
@media (max-width: 767px) {
  .location-map iframe {
    height: 300px;
  }
}