/*
Theme Name: Hong Kong Game Gear Zone
Theme URI: https://www.hkggz.com/
Author: Hong Kong Game Gear Zone
Author URI: https://www.hkggz.com/
Description: Official theme for Hong Kong Game Gear Zone (HKGGZ), operated by Linke Computer Limited. Matches the approved homepage and is intended for the existing WordPress site, keeping current posts, pages and permalinks. Compatible with Elementor, Yoast SEO and Contact Form 7.
Version: 1.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hkggz
Tags: translation-ready, custom-menu, featured-images, blog
*/

/* WordPress-specific additions. Approved visual design lives in css/theme.css. */

/* Sticky header sits below the Toolbar when the user is logged in. */
.admin-bar .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

html {
  scroll-padding-top: calc(var(--header-h) + 12px);
}
.admin-bar {
  scroll-padding-top: calc(var(--header-h) + 44px);
}

.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--ink);
  clip: auto !important;
  clip-path: none;
  color: #fff;
  display: block;
  font-size: 0.9rem;
  height: auto;
  left: 0.5rem;
  line-height: normal;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  top: 0.5rem;
  width: auto;
  z-index: 100000;
}

/* Neutral content area for ordinary posts/pages. Not applied to Elementor canvases. */
.theme-content {
  padding: 2.6rem 0 4.2rem;
  background: var(--white);
  color: var(--text);
}
.theme-content .page-header,
.theme-content .entry-header,
.theme-content .archive-intro {
  margin-bottom: 1.6rem;
}
.theme-content .page-header h1,
.theme-content .entry-header h1,
.theme-content .archive-intro h1 {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.theme-content .entry-meta,
.theme-content .archive-intro p,
.theme-content .archive-intro-body,
.theme-content .search-summary {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.theme-content .featured-image {
  margin: 0 0 1.4rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a1a1a;
}
.theme-content .featured-image img {
  width: 100%;
  height: auto;
}

.theme-content .entry-content {
  max-width: 46rem;
}
.theme-content.theme-content-wide .entry-content,
.theme-content .posts-list,
.theme-content .archive-intro,
.theme-content .page-header,
.theme-content .pagination,
.theme-content .post-back,
.theme-content .no-results,
.theme-content .search-panel {
  max-width: none;
}

.theme-content .entry-content > *:first-child { margin-top: 0; }
.theme-content .entry-content > * + * { margin-top: 1em; }
.theme-content .entry-content h2,
.theme-content .entry-content h3,
.theme-content .entry-content h4 {
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}
.theme-content .entry-content h2 { font-size: 1.45rem; }
.theme-content .entry-content h3 { font-size: 1.2rem; }
.theme-content .entry-content p,
.theme-content .entry-content li {
  line-height: 1.75;
}
.theme-content .entry-content ul,
.theme-content .entry-content ol {
  padding-left: 1.25rem;
}
.theme-content .entry-content blockquote {
  margin: 1.2rem 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--red);
  color: var(--muted);
}
.theme-content .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.theme-content .entry-content th,
.theme-content .entry-content td {
  border: 1px solid var(--line);
  padding: 0.45rem 0.6rem;
  text-align: left;
}
.theme-content .entry-content pre,
.theme-content .entry-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.theme-content .entry-content pre {
  overflow: auto;
  padding: 1rem;
  background: var(--paper);
  border-radius: var(--radius-sm);
}
.theme-content .entry-content .wp-caption,
.theme-content .entry-content .wp-block-image {
  margin: 1.2rem 0;
}
.theme-content .entry-content figcaption,
.theme-content .entry-content .wp-caption-text {
  color: var(--muted);
  font-size: 0.86rem;
  margin-top: 0.4rem;
}
.theme-content .entry-content .alignleft {
  float: left;
  margin: 0.3rem 1.2rem 0.8rem 0;
}
.theme-content .entry-content .alignright {
  float: right;
  margin: 0.3rem 0 0.8rem 1.2rem;
}
.theme-content .entry-content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.theme-content .entry-content .alignwide {
  max-width: min(var(--max), 100%);
}
.theme-content .entry-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.theme-content .page-links {
  margin-top: 1.5rem;
  font-weight: 600;
}

/* Elementor pages: no extra theme typography wrapper around the canvas. */
.site-main-elementor {
  background: var(--white);
}

/* Archives, blog index, search results */
.posts-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.post-card:hover {
  border-color: var(--red);
  color: inherit;
  transform: translateY(-2px);
}
.post-card .thumb {
  aspect-ratio: 16 / 10;
  background: var(--paper);
  overflow: hidden;
}
.post-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-card .post-card-body {
  padding: 0.95rem 1.05rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.post-card .post-date {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}
.post-card h2 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 600;
}
.post-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.post-card .go {
  margin-top: auto;
  padding-top: 0.55rem;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--red-deep);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 2rem 0 0;
  align-items: center;
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.pagination .page-numbers.current {
  background: var(--paper);
}

.post-back {
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.post-back a {
  font-weight: 600;
  text-decoration: none;
}
.post-back a:hover { text-decoration: underline; }

.no-results,
.search-panel {
  color: var(--muted);
}
.theme-search {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 0;
  max-width: 28rem;
}
.theme-search label { position: absolute; }
.theme-search .search-field {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  min-height: 44px;
}
.theme-search .search-submit {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.65rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  min-height: 44px;
}
.theme-search .search-submit:hover { background: var(--red-deep); }

.theme-content .articles-all-link,
.cases .cases-library-link {
  margin: 0.45rem 0 0;
}
.theme-content .articles-all-link a,
.cases .cases-library-link a {
  font-weight: 600;
  text-decoration: none;
}
.theme-content .articles-all-link a:hover,
.cases .cases-library-link a:hover {
  text-decoration: underline;
}

/* Compact search in the homepage cases header. Does not replace .theme-search on 404 / articles pages. */
.theme-search.theme-search-cases {
  margin: 0;
  max-width: 22.5rem;
  width: 100%;
  flex: 1 1 16rem;
  align-self: flex-end;
  min-width: 0;
}
.theme-search.theme-search-cases .search-field,
.theme-search.theme-search-cases .search-submit {
  min-height: 44px;
}
@media (max-width: 640px) {
  .theme-search.theme-search-cases {
    max-width: none;
    flex-basis: 100%;
  }
}

.error-404 .helpful-links {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}
.error-404 .helpful-links a { font-weight: 600; }

/* Contact Form 7 — typography only, do not restyle layout aggressively. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  max-width: 100%;
}
.wpcf7-form input[type="submit"],
.wpcf7-form input[type="button"] {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  min-height: 44px;
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--red-deep);
}

@media (max-width: 720px) {
  .posts-list { grid-template-columns: 1fr; }
  .theme-content { padding: 2rem 0 3.2rem; }
  .theme-content .entry-content .alignleft,
  .theme-content .entry-content .alignright {
    float: none;
    margin: 0.8rem 0;
  }
}


/* Dedicated booking page: keep the official widget comfortable, not cramped. */
.theme-booking {
  padding-bottom: 0;
  background: #f6f5f3;
}
.theme-booking .booking-lead-wrap {
  padding-top: 0.4rem;
  padding-bottom: 0;
}
.theme-booking .booking-lead {
  margin: 0 0 0.2rem;
  max-width: 40rem;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}
.theme-booking .booking-lead-wrap .entry-content {
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
}
.theme-booking .hkggz-calendly {
  padding-top: 1.6rem;
}
@media (max-width: 720px) {
  .theme-booking {
    padding-bottom: 0;
  }
}