/*
Theme Name: Cedmaxx
Theme URI: https://cedmaxx.com
Author: Cedmaxx Digital Agency
Description: Strategy-first dark theme for Cedmaxx Digital Marketing & SEO Agency. Fully customizable via Appearance → Customize.
Version: 3.0
License: GNU General Public License v2 or later
Text Domain: cedmaxx
Tags: dark, seo, agency, marketing, blog, one-column, two-columns, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready
*/

/* =============================================
   CSS VARIABLES — controlled by Customizer
   Appearance → Customize → Cedmaxx: Colors
   ============================================= */
:root {
  --black:      #050508;
  --dark:       #0a0a12;
  --card:       #0f0f1a;
  --blue:       #00aaff;
  --blue-dim:   #0088cc;
  --blue-glow:  rgba(0,170,255,0.18);
  --white:      #f0f4ff;
  --muted:      #7a8099;
  --border:     rgba(0,170,255,0.12);
  --accent:     #00aaff;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.6;
}
/* Prevent scroll when mobile nav is open */
body.nav-open { overflow: hidden; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* =============================================
   CUSTOM CURSOR
   ============================================= */
body { cursor: none; }
.cursor {
  width:12px; height:12px;
  background: var(--blue);
  border-radius:50%;
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  transition:transform .1s ease;
  mix-blend-mode:screen;
}
.cursor-ring {
  width:36px; height:36px;
  border:1px solid rgba(0,170,255,.5);
  border-radius:50%;
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9998;
  transition:all .18s ease;
}

/* =============================================
   NAVIGATION
   ============================================= */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 6vw;
  background:rgba(5,5,8,.9);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
  overflow:visible;
}
.site-header.scrolled { box-shadow:0 4px 30px rgba(0,0,0,.5); }
.site-logo {
  font-family:'Bebas Neue',sans-serif;
  font-size:1.9rem; letter-spacing:2px; color:var(--white);
  display:flex; align-items:center; gap:0;
}
.site-logo span { color:var(--blue); }
.site-logo img { max-height:45px; width:auto; }

/* =============================================
   NAV MENU — Desktop
   ============================================= */
#primary-nav { position:static; }
#primary-nav .nav-links {
  display:flex; gap:2.4rem; list-style:none; margin:0; padding:0;
  align-items:center;
}
#primary-nav .nav-links li { position:relative; }
#primary-nav .nav-links > li > a {
  font-family:'Syne',sans-serif;
  font-size:.82rem; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); transition:color .3s;
  white-space:nowrap;
  display:flex; align-items:center; gap:.3rem;
}
#primary-nav .nav-links a:hover,
#primary-nav .nav-links .current-menu-item > a,
#primary-nav .nav-links .current_page_ancestor > a,
#primary-nav .nav-links .current_page_item > a { color:var(--blue); }

/* Dropdown arrow — top level only */
#primary-nav .nav-links > li.menu-item-has-children > a::after {
  content:'▾'; font-size:.65rem; opacity:.6;
  transition:transform .25s; display:inline-block;
}
#primary-nav .nav-links > li.menu-item-has-children:hover > a::after {
  transform:rotate(180deg);
}

/* ── LEVEL 1 DROPDOWN — opens downward ── */
#primary-nav .nav-links > li > .sub-menu {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  min-width:230px;
  background:rgba(6,6,14,.98);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.5rem 0;
  z-index:1100;
  box-shadow:0 20px 50px rgba(0,0,0,.7);
}
/* Top caret on level 1 only */
#primary-nav .nav-links > li > .sub-menu::before {
  content:'';
  position:absolute; top:-5px; left:16px;
  width:8px; height:8px;
  background:rgba(6,6,14,.98);
  border-left:1px solid var(--border);
  border-top:1px solid var(--border);
  transform:rotate(45deg);
}
/* Show level 1 */
#primary-nav .nav-links > li:hover > .sub-menu {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}

/* ── LEVEL 2 FLY-OUT — opens to the right ── */
#primary-nav .nav-links .sub-menu li { position:relative; }
#primary-nav .nav-links .sub-menu .sub-menu {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateX(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  position:absolute;
  top:0;
  left:100%;            /* attach to right edge of parent */
  margin-left:4px;
  min-width:200px;
  background:rgba(6,6,14,.98);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.5rem 0;
  z-index:1200;
  box-shadow:0 20px 50px rgba(0,0,0,.7);
}
#primary-nav .nav-links .sub-menu .sub-menu::before { display:none; }
/* Show level 2 fly-out */
#primary-nav .nav-links .sub-menu li:hover > .sub-menu {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
/* Arrow on level 1 items that have children → pointing right */
#primary-nav .nav-links .sub-menu li.menu-item-has-children > a::after {
  content:'›';
  font-size:1rem; opacity:.5;
  margin-left:auto;
  transition:opacity .2s;
}
#primary-nav .nav-links .sub-menu li.menu-item-has-children:hover > a::after {
  opacity:1; color:var(--blue);
}

/* ── ALL DROPDOWN ITEMS ── */
#primary-nav .nav-links .sub-menu li a {
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem 1.2rem;
  font-family:'Syne',sans-serif;
  font-size:.75rem; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--muted);
  transition:color .2s, background .2s, padding-left .2s;
  white-space:nowrap;
}
#primary-nav .nav-links .sub-menu li a::before {
  content:''; width:4px; height:4px; flex-shrink:0;
  background:var(--border); border-radius:50%;
  transition:background .2s;
}
/* Don't show dot on items that have children (they show › instead) */
#primary-nav .nav-links .sub-menu li.menu-item-has-children > a::before { display:none; }
#primary-nav .nav-links .sub-menu li a:hover {
  color:var(--blue);
  background:rgba(0,170,255,.05);
  padding-left:1.5rem;
}
#primary-nav .nav-links .sub-menu li a:hover::before { background:var(--blue); }

/* Divider */
#primary-nav .nav-links .sub-menu li.menu-divider {
  border-top:1px solid var(--border); margin:.3rem 0;
}

.nav-cta {
  font-family:'Syne',sans-serif;
  font-size:.82rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  padding:.6rem 1.6rem;
  background:transparent; border:1px solid var(--blue);
  color:var(--blue); border-radius:2px;
  transition:all .3s; white-space:nowrap;
}
.nav-cta:hover { background:var(--blue); color:var(--black); }

/* Mobile hamburger */
.menu-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.menu-toggle span {
  width:24px; height:2px;
  background:var(--white); border-radius:2px; transition:all .3s;
  display:block;
}
.menu-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.open span:nth-child(2) { opacity:0; }
.menu-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* =============================================
   PAGE WRAPPER
   ============================================= */
.site-main { padding-top:80px; }

/* =============================================
   SHARED SECTION STYLES
   ============================================= */
section { padding:7rem 6vw; }
.section-label {
  font-family:'Syne',sans-serif;
  font-size:.72rem; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--blue); margin-bottom:1rem;
}
.section-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.8rem,5vw,4.5rem);
  letter-spacing:1px; line-height:1; margin-bottom:1.4rem;
}
.section-sub {
  font-size:1rem; color:var(--muted);
  line-height:1.8; max-width:480px; font-weight:300;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary {
  font-family:'Syne',sans-serif;
  font-size:.88rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  padding:1rem 2.4rem; background:var(--blue);
  color:var(--black); border:none; border-radius:2px;
  display:inline-block; transition:all .3s; cursor:pointer;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,170,255,.35); color:var(--black); }
.btn-secondary {
  font-family:'Syne',sans-serif;
  font-size:.88rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  padding:1rem 2.4rem; background:transparent;
  color:var(--white); border:1px solid rgba(240,244,255,.15);
  border-radius:2px; display:inline-block; transition:all .3s;
}
.btn-secondary:hover { border-color:var(--blue); color:var(--blue); }

/* =============================================
   MARQUEE
   ============================================= */
.marquee-section {
  padding:1.2rem 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow:hidden; background:rgba(0,170,255,.03);
}
.marquee-track { display:flex; gap:3rem; animation:marquee 22s linear infinite; width:max-content; }
.marquee-item {
  font-family:'Syne',sans-serif; font-size:.78rem;
  font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
  display:flex; align-items:center; gap:1.5rem;
}
.marquee-item::after { content:'◆'; color:var(--blue); font-size:.5rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* =============================================
   SERVICES GRID
   ============================================= */
.services-section { background:var(--dark); }
.services-header {
  display:flex; justify-content:space-between;
  align-items:flex-end; margin-bottom:4rem;
  flex-wrap:wrap; gap:2rem;
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px; background:var(--border); border:1px solid var(--border);
}
.service-card {
  background:var(--card); padding:2.8rem 2.4rem;
  position:relative; overflow:hidden; transition:background .4s;
}
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  transform:scaleX(0); transition:transform .5s ease;
}
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover { background:#111120; }
.service-icon {
  width:48px; height:48px; background:var(--blue-glow);
  border:1px solid rgba(0,170,255,.2); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.6rem; font-size:1.4rem;
}
.service-card h3 { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:.8rem; }
.service-card p { font-size:.9rem; color:var(--muted); line-height:1.7; font-weight:300; }
.service-num {
  position:absolute; top:2rem; right:2rem;
  font-family:'Bebas Neue',sans-serif; font-size:3.5rem;
  color:rgba(0,170,255,.05); line-height:1; pointer-events:none;
}

/* =============================================
   BLOG / POST CARDS
   ============================================= */
.posts-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;
}
.post-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:4px; overflow:hidden; transition:border-color .3s,transform .3s;
}
.post-card:hover { border-color:rgba(0,170,255,.35); transform:translateY(-4px); }
.post-thumb-placeholder {
  width:100%; height:200px;
  background:linear-gradient(135deg,var(--dark),#0a0a20);
  display:flex; align-items:center; justify-content:center; font-size:2.5rem;
}
.post-card-body { padding:1.8rem; }
.post-category {
  font-family:'Syne',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--blue); margin-bottom:.6rem;
}
.post-card-body h2, .post-card-body h3 {
  font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700;
  line-height:1.4; margin-bottom:.8rem; color:var(--white);
}
.post-card-body h2 a, .post-card-body h3 a { color:var(--white); transition:color .3s; }
.post-card-body h2 a:hover, .post-card-body h3 a:hover { color:var(--blue); }
.post-card-body p { font-size:.88rem; color:var(--muted); line-height:1.7; margin-bottom:1.2rem; }
.post-meta {
  display:flex; gap:1rem; font-size:.75rem; color:var(--muted);
  border-top:1px solid var(--border); padding-top:1rem; margin-top:1rem;
}
.read-more {
  font-family:'Syne',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--blue); display:inline-flex; align-items:center; gap:.4rem;
  transition:gap .3s;
}
.read-more:hover { gap:.8rem; color:var(--blue); }

/* =============================================
   SINGLE POST / PAGE CONTENT
   ============================================= */
.single-post-hero { padding:8rem 6vw 4rem; background:var(--dark); border-bottom:1px solid var(--border); }
.single-post-hero h1 {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.5rem,5vw,4.5rem);
  letter-spacing:1px; line-height:1.05; margin-bottom:1.5rem;
}
.post-content-wrap { display:grid; grid-template-columns:1fr 300px; gap:4rem; padding:5rem 6vw; }
.post-content h2 { font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:700; margin:2.5rem 0 1rem; }
.post-content h3 { font-family:'Syne',sans-serif; font-size:1.2rem; font-weight:700; margin:2rem 0 .8rem; }
.post-content p { font-size:1rem; color:#b0b8cc; line-height:1.9; margin-bottom:1.5rem; }
.post-content a { color:var(--blue); border-bottom:1px solid rgba(0,170,255,.3); }
.post-content ul, .post-content ol { margin:1rem 0 1.5rem 1.5rem; color:#b0b8cc; line-height:1.9; }
.post-content blockquote {
  border-left:3px solid var(--blue); padding:1rem 1.5rem;
  background:var(--card); margin:2rem 0; font-style:italic; color:var(--muted);
}
.post-content code { background:var(--card); color:var(--blue); padding:.2rem .5rem; border-radius:3px; font-size:.88em; }
.post-content pre { background:var(--card); border:1px solid var(--border); padding:1.5rem; border-radius:4px; overflow-x:auto; margin:1.5rem 0; }
.post-content img { border-radius:4px; border:1px solid var(--border); margin:2rem 0; }

/* =============================================
   SIDEBAR & WIDGETS
   ============================================= */
.sidebar { display:flex; flex-direction:column; gap:2rem; }
.widget { background:var(--card); border:1px solid var(--border); border-radius:4px; padding:1.8rem; }
.widget-title {
  font-family:'Syne',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--blue);
  margin-bottom:1.2rem; padding-bottom:.8rem; border-bottom:1px solid var(--border);
}
.widget ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.widget ul li a { font-size:.88rem; color:var(--muted); transition:color .3s; display:flex; align-items:center; gap:.5rem; }
.widget ul li a::before { content:'→'; color:var(--blue); font-size:.7rem; }
.widget ul li a:hover { color:var(--blue); }

/* WP default widget styles */
.widget_search .search-form { display:flex; }
.widget_search .search-field {
  flex:1; padding:.7rem 1rem; background:var(--dark);
  border:1px solid var(--border); color:var(--white);
  font-family:'DM Sans',sans-serif; border-radius:2px 0 0 2px; outline:none;
}
.widget_search .search-field:focus { border-color:var(--blue); }
.widget_search .search-submit {
  padding:.7rem 1rem; background:var(--blue); border:none;
  color:var(--black); cursor:pointer; border-radius:0 2px 2px 0;
}
.widget_tag_cloud .tagcloud a {
  display:inline-block; padding:.3rem .8rem; margin:.2rem;
  border:1px solid var(--border); border-radius:100px;
  font-size:.75rem !important; color:var(--muted); transition:all .3s;
}
.widget_tag_cloud .tagcloud a:hover { border-color:var(--blue); color:var(--blue); }
.widget_calendar table { width:100%; border-collapse:collapse; font-size:.82rem; }
.widget_calendar th, .widget_calendar td { padding:.4rem; text-align:center; color:var(--muted); }
.widget_calendar td a { color:var(--blue); }
.widget_recent_comments li { padding:.4rem 0; border-bottom:1px solid var(--border); font-size:.85rem; color:var(--muted); }

/* =============================================
   PAGE HERO
   ============================================= */
.page-hero {
  padding:9rem 6vw 5rem; background:var(--dark);
  border-bottom:1px solid var(--border); position:relative; overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 80% at 80% 50%,rgba(0,170,255,.06) 0%,transparent 70%);
}
.page-hero h1 {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem,6vw,5.5rem);
  letter-spacing:2px; line-height:1; position:relative; z-index:1;
}
.page-hero p { font-size:1.1rem; color:var(--muted); line-height:1.8; max-width:560px; margin-top:1.2rem; position:relative; z-index:1; }

/* =============================================
   CTA BANNER (footer of every page)
   ============================================= */
.cta-banner { text-align:center; padding:8rem 6vw; position:relative; overflow:hidden; }
.cta-banner-bg { position:absolute; inset:0; background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(0,170,255,.08) 0%,transparent 70%); }
.cta-form { display:flex; max-width:480px; margin:0 auto; border:1px solid var(--border); border-radius:2px; overflow:hidden; }
.cta-input { flex:1; padding:1rem 1.4rem; background:var(--card); border:none; color:var(--white); font-family:'DM Sans',sans-serif; font-size:.9rem; outline:none; }
.cta-input::placeholder { color:var(--muted); }
.cta-submit { font-family:'Syne',sans-serif; font-size:.82rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:1rem 1.8rem; background:var(--blue); color:var(--black); border:none; cursor:pointer; transition:all .3s; white-space:nowrap; }
.cta-submit:hover { background:#33bbff; }
.cta-note { font-size:.78rem; color:var(--muted); margin-top:1rem; }

/* =============================================
   FOOTER
   ============================================= */
.site-footer { background:var(--dark); }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:4rem; padding:5rem 6vw 4rem; }
.footer-brand .footer-logo { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:2px; margin-bottom:1rem; display:block; }
.footer-brand .footer-logo span { color:var(--blue); }
.footer-brand p { font-size:.88rem; color:var(--muted); line-height:1.8; max-width:260px; }
.footer-col h4 { font-family:'Syne',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--white); margin-bottom:1.2rem; }

/* Footer nav menus — WordPress generated */
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.footer-col ul li a { font-size:.88rem; color:var(--muted); transition:color .3s; }
.footer-col ul li a:hover { color:var(--blue); }
/* WordPress adds .menu class to footer nav */
.footer-col .menu { list-style:none; display:flex; flex-direction:column; gap:.7rem; padding:0; margin:0; }
.footer-col .menu li a { font-size:.88rem; color:var(--muted); transition:color .3s; }
.footer-col .menu li a:hover { color:var(--blue); }

.footer-bottom { padding:1.5rem 6vw; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:.8rem; color:var(--muted); }
.footer-socials { display:flex; gap:1rem; }
.footer-socials a { width:36px; height:36px; border:1px solid var(--border); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--muted); transition:all .3s; font-family:'Syne',sans-serif; font-weight:700; }
.footer-socials a:hover { border-color:var(--blue); color:var(--blue); }

/* =============================================
   PAGINATION
   ============================================= */
.pagination { display:flex; gap:.5rem; justify-content:center; padding:3rem 6vw; flex-wrap:wrap; }
.pagination a, .pagination span { font-family:'Syne',sans-serif; font-size:.82rem; font-weight:700; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:2px; color:var(--muted); transition:all .3s; }
.pagination a:hover, .pagination .current { border-color:var(--blue); color:var(--blue); }

/* =============================================
   COMMENTS
   ============================================= */
.comments-area { padding:0 6vw 5rem; max-width:800px; }
.comments-title { font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:1px; margin-bottom:2rem; }
.comment-list { list-style:none; }
.comment { padding:1.5rem 0; border-bottom:1px solid var(--border); }
.comment-author .fn { font-family:'Syne',sans-serif; font-weight:700; color:var(--white); }
.comment-metadata { font-size:.78rem; color:var(--muted); margin-top:.2rem; }
.comment-content p { font-size:.92rem; color:#b0b8cc; line-height:1.8; margin-top:.8rem; }
.comment-respond { margin-top:3rem; }
.comment-reply-title { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:1px; margin-bottom:1.5rem; }
.comment-form label { font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.4rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea { width:100%; padding:.8rem 1rem; background:var(--card); border:1px solid var(--border); color:var(--white); font-family:'DM Sans',sans-serif; font-size:.9rem; border-radius:2px; outline:none; margin-bottom:1rem; }
.comment-form input:focus, .comment-form textarea:focus { border-color:var(--blue); }
.comment-form .submit { font-family:'Syne',sans-serif; font-size:.85rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:.9rem 2rem; background:var(--blue); color:var(--black); border:none; cursor:pointer; border-radius:2px; transition:all .3s; }
.comment-form .submit:hover { box-shadow:0 8px 30px rgba(0,170,255,.3); }

/* =============================================
   ANIMATIONS & REVEAL
   ============================================= */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes pulse  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes breathe{ 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes spin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.orbit { position:absolute; border-radius:50%; border:1px dashed rgba(0,170,255,.12); animation:spin linear infinite; }
.orbit-1{width:200px;height:200px;top:50%;left:50%;margin:-100px 0 0 -100px;animation-duration:18s}
.orbit-2{width:310px;height:310px;top:50%;left:50%;margin:-155px 0 0 -155px;animation-duration:28s;animation-direction:reverse}
.orbit-3{width:420px;height:420px;top:50%;left:50%;margin:-210px 0 0 -210px;animation-duration:40s}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:1024px) {
  .footer-top { grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media (max-width:768px) {
  /* ── NAV: hide desktop links, show hamburger ── */
  #primary-nav .nav-links { display:none; }
  .nav-cta { display:none; }
  .menu-toggle { display:flex; z-index:1001; position:relative; }

  /* ── Mobile nav panel ── */
  #primary-nav .nav-links.open {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:80px;
    left:0;
    right:0;
    height:calc(100vh - 80px);
    overflow-y:auto;
    background:rgba(5,5,8,.99);
    padding:1.5rem 6vw 4rem;
    gap:0;
    border-top:1px solid var(--border);
    z-index:1001;
    -webkit-overflow-scrolling:touch;
  }

  /* Top-level nav items */
  #primary-nav .nav-links.open > li {
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  #primary-nav .nav-links.open > li > a {
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 0;
    font-size:.9rem; letter-spacing:1.5px;
    color:var(--white);
  }
  #primary-nav .nav-links.open > li > a:hover { color:var(--blue); }

  /* Arrow on parent items */
  #primary-nav .nav-links.open li.menu-item-has-children > a::after {
    content:'▾'; font-size:.75rem; opacity:.7;
    transition:transform .3s; display:inline-block; margin-left:auto;
  }
  #primary-nav .nav-links.open li.menu-item-has-children.submenu-open > a::after {
    transform:rotate(180deg);
  }

  /* ── Accordion submenus ── */
  #primary-nav .nav-links.open .sub-menu {
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:none !important;
    position:static !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    padding:0 !important;
    margin:0 !important;
    min-width:unset !important;
    left:auto !important;
    top:auto !important;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }
  #primary-nav .nav-links.open li.submenu-open > .sub-menu {
    max-height:800px;
  }
  #primary-nav .nav-links.open .sub-menu::before { display:none; }
  #primary-nav .nav-links.open .sub-menu li.menu-item-has-children > a::after {
    content:'▾' !important; font-size:.75rem; margin-left:auto;
  }
  #primary-nav .nav-links.open .sub-menu li.menu-item-has-children.submenu-open > a::after {
    transform:rotate(180deg);
  }
  #primary-nav .nav-links.open .sub-menu li a {
    display:flex; align-items:center; gap:.7rem;
    padding:.75rem 0 .75rem 1.2rem;
    font-size:.8rem; letter-spacing:1px;
    color:var(--muted);
    border-bottom:1px solid rgba(255,255,255,.04);
    background:transparent !important;
  }
  #primary-nav .nav-links.open .sub-menu li a::before {
    content:''; width:4px; height:4px; flex-shrink:0;
    background:var(--border); border-radius:50%;
    transition:background .2s;
  }
  #primary-nav .nav-links.open .sub-menu li.menu-item-has-children > a::before { display:none; }
  #primary-nav .nav-links.open .sub-menu .sub-menu li a { padding-left:2.4rem !important; }
  #primary-nav .nav-links.open .sub-menu li:last-child a { border-bottom:none; margin-bottom:.5rem; }
  #primary-nav .nav-links.open .sub-menu li a:hover,
  #primary-nav .nav-links.open .sub-menu li a:active { color:var(--blue); padding-left:1.6rem; }
  #primary-nav .nav-links.open .sub-menu li a:hover::before { background:var(--blue); }

  /* ── Stack ALL 2-column grids ── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns:1.2fr 1fr"] {
    display: block !important;
  }
  [style*="grid-template-columns:1fr 1fr"] > *,
  [style*="grid-template-columns:1fr 1.4fr"] > *,
  [style*="grid-template-columns:1fr 1.3fr"] > *,
  [style*="grid-template-columns:1fr 1.2fr"] > *,
  [style*="grid-template-columns:1fr 1.5fr"] > *,
  [style*="grid-template-columns:1.2fr 1fr"] > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── RTL fix on services alternating rows ── */
  [style*="direction:rtl"]    { direction: ltr !important; }
  [style*="direction:rtl"] > * { direction: ltr !important; }

  /* ── Form inner rows ── */
  [style*="grid-template-columns:1fr 1fr;gap:1rem"] {
    grid-template-columns: 1fr !important;
  }

  /* ── CTA footer form ── */
  .cta-form { flex-direction:column; }
  .cta-input  { border-radius:2px 2px 0 0; }
  .cta-submit { border-radius:0 0 2px 2px; width:100%; }

  /* ── Process steps ── */
  .seo-process { grid-template-columns:1fr !important; }
  .seo-process::before { display:none; }
  .process-step { border-right:none !important; border-bottom:1px solid var(--border); padding:2rem 0 !important; }
  .process-step:last-child { border-bottom:none; }

  /* ── Card grids ── */
  .seo-type-grid, .local-work-grid, .tech-issues-grid,
  .onpage-checklist, .deliverables-grid, .audit-output-grid,
  .gbp-items-grid, .checklist-grid { grid-template-columns:1fr !important; }

  /* ── Blog & sidebar ── */
  .posts-grid        { grid-template-columns:1fr !important; }
  .post-content-wrap { grid-template-columns:1fr !important; }
  .sidebar           { display:none; }

  /* ── Footer ── */
  .footer-top    { grid-template-columns:1fr !important; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; gap:.8rem; }
  .footer-socials { justify-content:center; }

  /* ── Misc ── */
  .hero-stats { display:none !important; }

  /* ── Hero section mobile fixes ── */
  /* Badge pill — allow wrapping, prevent overflow */
  [style*="border-radius:100px"][style*="letter-spacing:2px"] {
    white-space:normal !important;
    font-size:.62rem !important;
    letter-spacing:1px !important;
    padding:.3rem .7rem !important;
    line-height:1.4 !important;
  }
  /* H1 — reduce minimum clamp size */
  [style*="font-size:clamp(4rem"] {
    font-size:clamp(2.8rem,11vw,5rem) !important;
    line-height:1 !important;
  }
  /* Hero buttons — stack vertically */
  [style*="animation:fadeUp 1s .3s"] {
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  /* Hero subtext */
  [style*="animation:fadeUp 1s .2s"] {
    font-size:.92rem !important;
    margin-bottom:1.8rem !important;
  }
}
@media (max-width:480px) {
  .services-grid { grid-template-columns:1fr; }
  .posts-grid    { grid-template-columns:1fr; }
}
