/*
Theme Name: AK Tech Globe
Theme URI: https://aktechglobe.com/
Author: AK Tech
Description: WordPress theme based on the AK Tech Globe Figma design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ak-tech-globe
Tags: custom-logo, custom-menu, featured-images, responsive-layout
*/

:root {
  --ak-blue: #0b8fe8;
  --ak-blue-dark: #0569b7;
  --ak-navy: #061523;
  --ak-ink: #101828;
  --ak-muted: #64748b;
  --ak-soft: #f1f8fe;
  --ak-line: #d9e8f4;
  --ak-white: #ffffff;
  --ak-radius: 6px;
  --ak-max: 1180px;
  --ak-font: Inter, Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ak-white);
  color: var(--ak-ink);
  font-family: var(--ak-font);
  font-size: 16px;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { display: block; height: auto; max-width: 100%; }
.ak-container { margin: 0 auto; max-width: var(--ak-max); padding: 0 22px; }
.skip-link { background: var(--ak-blue); color: #fff; left: 1rem; padding: .65rem 1rem; position: fixed; top: -5rem; z-index: 1000; }
.skip-link:focus { top: 1rem; }

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--ak-line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header__inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  min-height: 76px;
}
.site-branding { align-items: center; display: flex; gap: 10px; min-width: 190px; }
.site-logo-mark {
  align-items: center;
  background: linear-gradient(135deg, var(--ak-blue), #37c3ff);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}
.site-title { color: var(--ak-navy); display: block; font-size: 1.05rem; font-weight: 900; line-height: 1.1; }
.site-description { color: var(--ak-muted); display: block; font-size: .75rem; font-weight: 600; }
.primary-navigation ul { align-items: center; display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.primary-navigation a { color: #334155; font-size: .94rem; font-weight: 700; }
.primary-navigation a:hover, .primary-navigation .current-menu-item > a { color: var(--ak-blue); }
.nav-toggle {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-radius);
  cursor: pointer;
  display: none;
  height: 42px;
  justify-content: center;
  width: 42px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  background: var(--ak-navy);
  content: "";
  display: block;
  height: 2px;
  position: relative;
  width: 18px;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

.ak-button, .wp-block-button__link, button[type="submit"], input[type="submit"] {
  align-items: center;
  background: var(--ak-blue);
  border: 0;
  border-radius: var(--ak-radius);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 44px;
  padding: .75rem 1.1rem;
}
.ak-button--light { background: #fff; color: var(--ak-blue); }
.ak-button--outline { background: transparent; border: 1px solid var(--ak-line); color: var(--ak-navy); }

.hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 48%, rgba(241,248,254,.74) 100%),
    url("assets/images/hero.jpg") center / cover;
  padding: 82px 0 56px;
}
.hero__inner { align-items: center; display: grid; gap: 48px; grid-template-columns: 1fr .82fr; }
.eyebrow { color: var(--ak-blue); display: inline-flex; font-size: .8rem; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.hero h1 { color: var(--ak-navy); font-size: clamp(2.4rem, 5vw, 4.75rem); letter-spacing: 0; line-height: .98; margin: 14px 0 20px; max-width: 690px; }
.hero p { color: #475569; font-size: 1.08rem; margin: 0; max-width: 610px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__panel {
  background: #fff;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-radius);
  box-shadow: 0 22px 60px rgba(6, 21, 35, .14);
  overflow: hidden;
}
.hero__panel img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.hero__panel-footer { align-items: center; display: flex; gap: 12px; justify-content: space-between; padding: 16px; }
.hero__panel-footer strong { color: var(--ak-navy); display: block; font-size: 1.35rem; line-height: 1; }
.hero__panel-footer span { color: var(--ak-muted); font-size: .84rem; }

.section { padding: 76px 0; }
.section--soft { background: var(--ak-soft); }
.section--dark { background: var(--ak-navy); color: #fff; }
.section__header { margin-bottom: 34px; max-width: 760px; }
.section__header h1, .section__header h2 { color: inherit; font-size: clamp(1.9rem, 4vw, 3.2rem); letter-spacing: 0; line-height: 1.08; margin: 8px 0 12px; }
.section__header p { color: var(--ak-muted); margin: 0; }
.section--dark .section__header p { color: #bed4e7; }

.service-grid, .portfolio-grid, .process-grid, .blog-grid { display: grid; gap: 18px; }
.service-grid { grid-template-columns: repeat(3, 1fr); }
.portfolio-grid, .process-grid { grid-template-columns: repeat(4, 1fr); }
.blog-grid { grid-template-columns: repeat(3, 1fr); }
.service-card, .portfolio-card, .process-card, .post-card {
  background: #fff;
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-radius);
  min-height: 100%;
  overflow: hidden;
}
.service-card, .process-card, .post-card { padding: 22px; }
.service-card__icon {
  align-items: center;
  background: #e8f5ff;
  border-radius: var(--ak-radius);
  color: var(--ak-blue);
  display: inline-flex;
  font-weight: 900;
  height: 46px;
  justify-content: center;
  margin-bottom: 16px;
  width: 46px;
}
.service-card h3, .process-card h3, .post-card h2 { color: var(--ak-navy); font-size: 1.12rem; line-height: 1.25; margin: 0 0 9px; }
.service-card p, .process-card p, .post-card p { color: var(--ak-muted); margin: 0; }
.portfolio-card img { aspect-ratio: 1 / 1.08; object-fit: cover; width: 100%; }
.portfolio-card__body { padding: 16px; }
.portfolio-card h3 { color: var(--ak-navy); font-size: 1rem; margin: 0 0 4px; }
.portfolio-card p { color: var(--ak-muted); font-size: .9rem; margin: 0; }
.process-card strong { color: var(--ak-blue); display: block; font-size: .84rem; margin-bottom: 14px; }

.cta-band {
  align-items: center;
  background: var(--ak-blue);
  border-radius: var(--ak-radius);
  color: #fff;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr auto;
  padding: 32px;
}
.cta-band h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.05; margin: 0 0 8px; }
.cta-band p { color: #e6f6ff; margin: 0; }
.content-wrap { padding: 70px 0; }
.entry-content { color: #334155; max-width: 820px; }
.entry-content a { color: var(--ak-blue); }
.post-card__image { aspect-ratio: 16 / 10; background: var(--ak-soft); border-radius: var(--ak-radius); margin: -8px -8px 18px; overflow: hidden; }
.post-card__image img { height: 100%; object-fit: cover; width: 100%; }
.post-card__meta { color: var(--ak-blue); display: block; font-size: .82rem; font-weight: 800; margin-bottom: 8px; }

.site-footer { background: #030b13; color: #a8c0d6; padding: 34px 0; }
.site-footer__inner { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
.footer-navigation ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; width: 1px; }

@media (max-width: 980px) {
  .hero__inner, .cta-band { grid-template-columns: 1fr; }
  .service-grid, .portfolio-grid, .process-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .ak-container { padding: 0 16px; }
  .site-header__inner { min-height: 68px; }
  .nav-toggle { display: inline-flex; }
  .primary-navigation { background: #fff; border-bottom: 1px solid var(--ak-line); display: none; left: 0; padding: 14px 18px; position: absolute; right: 0; top: 68px; }
  .primary-navigation.is-open { display: block; }
  .primary-navigation ul { align-items: stretch; flex-direction: column; gap: 8px; }
  .primary-navigation a { display: block; padding: 9px 0; }
  .hero { padding: 54px 0 42px; }
  .section { padding: 56px 0; }
  .service-grid, .portfolio-grid, .process-grid, .blog-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 24px; }
  .site-footer__inner, .footer-navigation ul { align-items: flex-start; flex-direction: column; }
}