/* ============================================================
   LAYOUT.CSS — Header, Footer, Page Layouts, Responsive
   AI Digital Guides Theme v1.0.0
   ============================================================ */

/* ── SITE HEADER — Floating pill style ───────────────────── */
.site-header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1180px;
  z-index: 9000;
  background: rgba(17,17,40,0.72);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(124,58,237,0.22);
  border-radius: 60px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset;
  transition: background 0.3s ease, box-shadow 0.3s ease, top 0.3s ease;
}
.site-header.scrolled {
  background: rgba(13,13,26,0.92);
  box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,58,237,0.18) inset;
  top: 10px;
}
.site-header .container { max-width: none; padding: 0 8px 0 16px; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 16px;
  padding: 0 12px;
}

/* Logo */
.site-logo, .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
}
.site-logo__icon, .footer-logo__icon {
  width: 34px; height: 34px;
  background: var(--grad-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.custom-logo-link img { max-height: 44px; width: auto; }

/* Nav menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.nav-menu li a {
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}
.nav-menu li a:hover,
.nav-menu li.current-menu-item > a,
.nav-menu li.current_page_item > a { color: var(--purple-light); background: rgba(79,70,229,0.12); }


/* Primary nav — centered between logo and CTA */

/* Services dropdown */
.nav-menu .menu-item-has-children { position: relative; }
.nav-menu .nav-submenu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #111128;
  border: 1px solid rgba(79,70,229,.25);
  border-radius: 12px;
  padding: 8px;
  list-style: none;
  z-index: 200;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.nav-menu .menu-item-has-children:hover > .nav-submenu,
.nav-menu .menu-item-has-children:focus-within > .nav-submenu { display: block; }
.nav-submenu li a {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 8px 14px;
  border-radius: 8px;
  transition: var(--transition-fast);
  white-space: nowrap;
}
.nav-submenu li a:hover { color: var(--purple-light); background: rgba(79,70,229,.1); }
.nav-arrow { font-size: 0.65rem; opacity: 0.6; margin-left: 2px; transition: transform .2s; }
.menu-item-has-children:hover .nav-arrow { transform: rotate(180deg); }

.primary-nav { flex: 1; display: flex; justify-content: center; }

/* CTA nav button */
.nav-cta {
  font-size: 0.82rem;
  margin-left: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nav-toggle__bar {
  display: block;
  width: 20px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO LAYOUT ──────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(60px + 16px + 60px); /* floating header height + top offset + breathing room */
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
}
.hero__bg-glow {
  position: absolute;
  width: 800px; height: 600px;
  background: radial-gradient(ellipse,rgba(124,58,237,0.12),transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.hero__inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 60px;
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.35);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--purple-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-badge__dot { width:6px; height:6px; background:var(--magenta); border-radius:50%; flex-shrink:0; animation: pulse 2s infinite; }
.hero__title { font-size: clamp(2.2rem,4.2vw,4rem); letter-spacing:-0.04em; line-height:1; margin-bottom:20px; }
.hero__sub  { color:var(--text-muted); font-size:0.97rem; line-height:1.75; max-width:480px; margin-bottom:22px; }
.hero__meta { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:30px; }
.hero-meta__item { font-size:0.81rem; color:var(--text-muted); font-weight:500; }
.hero__cta  { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero__visual { position:relative; display:flex; align-items:center; justify-content:center; height:400px; }

/* ── PAGE HERO ────────────────────────────────────────────── */
.page-hero {
  padding: calc(var(--nav-h) + 60px) 0 60px;
  text-align: center;
  background: var(--bg);
}
.page-hero__inner { max-width: 700px; margin: 0 auto; }
.page-hero__title { margin-bottom: 16px; }
.page-hero__sub   { color:var(--text-muted); font-size:0.93rem; line-height:1.7; max-width:580px; margin:0 auto 28px; }
.hero-stats { display:flex; gap:40px; justify-content:center; flex-wrap:wrap; margin-top:28px; }

/* ── ABOUT SECTION ────────────────────────────────────────── */
.about-section { background: var(--bg); }
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about__content .section-title { margin-bottom:16px; }
.about__bio { font-size:0.93rem; line-height:1.75; max-width:440px; margin-bottom:20px; }
.cert-chips { display:flex; flex-wrap:wrap; gap:6px; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ── SERVICES SECTION ─────────────────────────────────────── */
.services-section { background: var(--bg-2); border-top:1px solid var(--border); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ── PROJECTS SECTION ─────────────────────────────────────── */
.projects-section { background: var(--bg); border-top:1px solid var(--border); }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ── AI TOOLS SECTION ─────────────────────────────────────── */
.tools-preview-section { background: var(--bg-2); border-top:1px solid var(--border); }
.tools-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.tools-grid--home { max-width: 680px; }
.tools-grid--full { gap:16px; }

/* ── BLOG PREVIEW ─────────────────────────────────────────── */
.blog-preview-section { background: var(--bg); border-top:1px solid var(--border); }
.posts-grid { display:grid; gap:20px; }
.posts-grid--3 { grid-template-columns:repeat(3,1fr); }
.posts-grid--2 { grid-template-columns:repeat(2,1fr); }

/* ── PROCESS SECTION ──────────────────────────────────────── */
.process-section { background: var(--bg-2); border-top:1px solid var(--border); }

/* ── CONTACT SECTION ──────────────────────────────────────── */
.contact-section { background: var(--bg); border-top:1px solid var(--border); position:relative; overflow:hidden; }
.contact-section__glow {
  position:absolute;
  width:700px; height:500px;
  background:radial-gradient(ellipse,rgba(124,58,237,0.1),transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.contact-inner { text-align:center; position:relative; z-index:1; max-width:640px; margin:0 auto; }
.contact-sub { color:var(--text-muted); font-size:0.93rem; line-height:1.7; max-width:480px; margin:0 auto 36px; }
.contact-cta   { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.contact-links { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.contact-link  { display:flex; align-items:center; gap:7px; font-size:0.83rem; font-weight:600; color:var(--text-muted); }
.contact-link:hover { color:var(--purple-light); }

/* ── BLOG PAGE LAYOUT ─────────────────────────────────────── */
.blog-page-wrap { padding-block: 60px 100px; background: var(--bg); }
.blog-page-inner { display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; }
.blog-main { min-width: 0; }
.blog-sidebar { position:sticky; top:calc(var(--nav-h) + 20px); }

/* ── SUBMIT TOOL SECTION ──────────────────────────────────── */
.submit-tool-section { background: var(--bg-2); border-top:1px solid var(--border); }
.submit-tool-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px; max-width:580px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.submit-tool-form { display:flex; flex-direction:column; gap:12px; }

/* ── POST PAGE LAYOUT ─────────────────────────────────────── */
.post-page-wrap { padding-block: 60px 100px; background:var(--bg); }
.post-page-inner { display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start; }
.post-article-col { min-width:0; }
.post-hero { padding:calc(var(--nav-h) + 60px) 0 40px; background:var(--bg); border-bottom:1px solid var(--border); }
.post-hero__inner { max-width:760px; margin:0 auto; text-align:center; }
.post-hero__title { font-size:clamp(1.6rem,3.5vw,2.9rem); margin-bottom:20px; }
.post-featured-img { max-height:440px; overflow:hidden; background:var(--card-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.post-featured-img__img { width:100%; height:100%; object-fit:cover; max-height:440px; }
.post-foot { margin-top:40px; padding-top:24px; border-top:1px solid rgba(124,58,237,0.15); }
.post-foot__tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.post-foot__tags-label { font-size:0.78rem; font-weight:700; color:var(--text-muted); letter-spacing:0.06em; text-transform:uppercase; }
.post-nav { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.post-nav__link { font-size:0.84rem; font-weight:600; color:var(--purple-light); max-width:48%; }
.post-nav__link:hover { color:var(--magenta); }
.related-posts { margin-top:40px; }
.related-posts__label { margin-bottom:16px; }

/* ── SINGLE AI TOOL ───────────────────────────────────────── */
.tool-single-wrap { padding:calc(var(--nav-h) + 60px) 0 100px; }
.tool-single { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px; }
.tool-single__header { display:flex; gap:24px; align-items:flex-start; margin-bottom:32px; padding-bottom:28px; border-bottom:1px solid var(--border); }
.tool-single__icon { width:80px; height:80px; background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(224,64,251,0.2)); border:1px solid var(--border); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:2.5rem; flex-shrink:0; }
.tool-single__title { font-size:1.8rem; margin-bottom:10px; }
.tool-single__chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }

/* ── PAGE LAYOUT (general) ────────────────────────────────── */
.page-wrap { padding:calc(var(--nav-h) + 60px) 0 100px; }
.page-inner { max-width:760px; margin:0 auto; }
.page-title { font-size:clamp(1.6rem,3.5vw,2.7rem); margin-bottom:20px; }
.page-featured-img { width:100%; border-radius:var(--radius-xl); margin-bottom:32px; }
.page-content .entry-content { margin-top: 28px; }

/* ── 404 ──────────────────────────────────────────────────── */
.error-404 { min-height:calc(100vh - var(--nav-h)); display:flex; align-items:center; padding-top:var(--nav-h); }
.error-404__inner { text-align:center; padding:60px 0; }
.error-404__icon  { font-size:5rem; margin-bottom:16px; animation:rocketFloat 3s ease-in-out infinite; }
.error-404__code  { font-family:var(--font-head); font-weight:800; font-size:clamp(5rem,15vw,10rem); background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.error-404__title { font-size:1.8rem; margin-bottom:10px; }
.error-404__desc  { color:var(--text-muted); margin-bottom:32px; }
.error-404__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:32px; }
.error-404 .search-bar { max-width:400px; }

/* ── SITE FOOTER ──────────────────────────────────────────── */
.site-footer { background:var(--bg); border-top:1px solid var(--border); }
.footer-main { padding-block: 48px; }
.footer-grid { display:grid; grid-template-columns:35fr 20fr 20fr 25fr; gap:32px; }
.footer-col--brand .footer-logo { margin-bottom: 11px; }
.footer-logo { font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--text); }
.footer-logo__icon { width:28px; height:28px; border-radius:7px; font-size:0.85rem; }
.footer-tagline { color:var(--text-muted); font-size:0.79rem; line-height:1.6; max-width:210px; margin-bottom:16px; }
.footer-social { display:flex; gap:8px; }
.footer-col__title { font-family:var(--font-head); font-weight:700; font-size:0.82rem; margin-bottom:13px; color:var(--text); letter-spacing:0.04em; text-transform:uppercase; }
.footer-links { display:flex; flex-direction:column; gap:7px; list-style:none; }
.footer-links a, .footer-links li a { color:var(--text-muted); font-size:0.79rem; transition:color 0.2s; }
.footer-links a:hover, .footer-links li a:hover { color:var(--text); }
.footer-nl-sub { color:var(--text-muted); font-size:0.78rem; line-height:1.5; margin-bottom:12px; }
.footer-bottom { padding-block:16px; border-top:1px solid var(--border); }
.footer-bottom__inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.footer-copy, .footer-role { font-size:0.75rem; color:var(--text-muted); }

/* ── TOOLS PAGE CONTENT ───────────────────────────────────── */
.tools-page-content { padding-block:60px 100px; background:var(--bg); }
.tools-no-results { color:var(--text-muted); text-align:center; padding:40px; font-size:0.9rem; }

/* ─────────────────────────────────────────────────────────── */
/* ── RESPONSIVE BREAKPOINTS ────────────────────────────────── */
/* ─────────────────────────────────────────────────────────── */

/* DESKTOP LG (1100px and below) */
@media (max-width:1100px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-col--newsletter { grid-column:1; }
}

/* TABLET (900px and below) */
@media (max-width:900px) {
  :root { --nav-h: 60px; }

  /* Nav */
  .primary-nav { display:none; position:absolute; top:var(--nav-h); left:0; right:0; background:rgba(13,13,26,0.98); border-bottom:1px solid var(--border); padding:16px 24px; }
  .primary-nav.is-open { display:block; }
  .nav-menu { flex-direction:column; align-items:flex-start; gap:4px; }
  .nav-menu li { width:100%; }
  .nav-menu li a { display:block; padding:10px 14px; }
  .nav-cta { display:none; }
  .nav-toggle { display:flex; }
  .theme-toggle { display:flex; } /* Always show on mobile */

  /* Hero */
  .hero__inner { grid-template-columns:1fr; text-align:center; }
  .hero__visual { display:none; }
  .hero__sub    { max-width:100%; margin-inline:auto; }
  .hero__meta   { justify-content:center; }
  .hero__cta    { justify-content:center; }

  /* About */
  .about-inner { grid-template-columns:1fr; }
  .about__bio { max-width:100%; }

  /* Grids */
  .services-grid { grid-template-columns:1fr 1fr; }
  .projects-grid { grid-template-columns:1fr 1fr; }
  .posts-grid--3 { grid-template-columns:1fr 1fr; }
  .process-steps { grid-template-columns:1fr 1fr; gap:32px; }
  .process-steps__line { display:none; }

  /* Blog */
  .blog-page-inner { grid-template-columns:1fr; }
  .blog-sidebar    { position:static; }
  .featured-post-card { grid-template-columns:1fr; }

  /* Post */
  .post-page-inner { grid-template-columns:1fr; }
  .post-article-col { width:100%; }
  .blog-sidebar { position:static; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr 1fr; }
}

/* MOBILE (600px and below) */
@media (max-width:600px) {
  .services-grid { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  .posts-grid--3 { grid-template-columns:1fr; }
  .posts-grid--2 { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .stats-grid    { grid-template-columns:1fr 1fr; }
  .hero__cta     { flex-direction:column; align-items:center; }
  .contact-cta   { flex-direction:column; align-items:center; }
  .footer-grid   { grid-template-columns:1fr; }
  .footer-bottom__inner { flex-direction:column; text-align:center; }
  .form-row      { grid-template-columns:1fr; }
  .author-box    { flex-direction:column; }
  .filter-bar__inner { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .hero__badge   { font-size:0.65rem; text-align:center; justify-content:center; }
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .blog-sidebar { display:none; }
  body { background:#fff; color:#000; }
  a { color:#000; }
  .btn--primary { background:#000; }
}