/*
Theme Name: Xcitation Classic Vibrant
Theme URI: https://xcitationsoftware.com
Author: Xcitation Software
Author URI: https://xcitationsoftware.com
Description: A vibrant, classic-editor–friendly theme with a responsive layout and brandable colors. Minimal footprint (no admin hooks). Perfect for Classic Editor.
Version: 1.0.3
Requires at least: 5.5
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xcitation-classic-vibrant
Tags: blog, one-column, two-columns, classic, custom-logo, custom-menu, featured-images, sticky-post, translation-ready
*/

/* ===== Brand system ===== */
:root{
  --brand-1:#2d20d5;
  --brand-2:#7b3fe4;
  --ink:#1f2937;
  --muted-ink:#6b7280;
  --bg:#0b1020;
  --card:#ffffff;
  --border:#e5e7eb;
  --radius:14px;
  --container:1120px;
}

html, body {margin:0; padding:0;}
body{
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:linear-gradient(135deg,var(--bg),#0e1530 60%);
}

/* Container */
.wrap{max-width:var(--container); margin:0 auto; padding:0 20px;}

/* Header */
.site-header{
  color:#fff;
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2));
  position:sticky; top:0; z-index:30;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.header-inner{display:flex; align-items:center; gap:22px; padding:16px 0;}
.site-branding{display:flex; align-items:center; gap:14px; min-height:48px; padding-left:16px;} /* tiny left pad */
.site-title{font-weight:800; letter-spacing:.2px; margin:0; font-size:22px;}
.site-title a{color:#fff; text-decoration:none;}
.site-description{color:rgba(255,255,255,.85); font-size:13px; margin-top:-4px}

/* Logo */
.custom-logo{height:40px; width:auto; display:block;}
.logo-fallback{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-weight:800;
}

/* ===== Primary nav (with dropdowns) ===== */
.primary-nav{margin-left:auto; position:relative;}
.primary-nav .menu{list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap;}
.primary-nav .menu > li{position:relative}

/* top-level links */
.primary-nav a{
  color:#fff; text-decoration:none; font-weight:600; letter-spacing:.2px;
  padding:8px 12px; border-radius:999px; display:inline-block;
}
.primary-nav .current-menu-item > a,
.primary-nav a:hover{background:rgba(255,255,255,.18);}

/* caret for items with children */
.primary-nav .menu-item-has-children > a::after{
  content:"▾"; font-size:.8em; margin-left:.35em; opacity:.9;
}

/* dropdown panel — fixed to remove hover gap */
.primary-nav .sub-menu{
  --panel-bg: linear-gradient(120deg, rgba(31,122,224,.98), rgba(123,63,228,.98));
  position:absolute; left:0; top:100%;
  min-width: 220px;
  list-style:none; padding:14px 10px 10px; /* top padding = hover-safe bridge */
  margin:0;
  background:var(--panel-bg);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  display:none; /* hidden until hover/focus */
  z-index:40;
  gap:0;
}

/* show on hover and keyboard focus */
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu{display:block}
/* keep open while hovering the panel itself (prevents flicker) */
.primary-nav .sub-menu:hover{display:block}

/* submenu items */
.primary-nav .sub-menu li{position:relative}
.primary-nav .sub-menu a{
  display:block; padding:8px 10px; border-radius:8px; white-space:nowrap;
}
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu .current-menu-item > a{
  background:rgba(255,255,255,.18);
}

/* third level flies out to the right by default */
.primary-nav .sub-menu .sub-menu{top:0; left:100%; margin-left:10px;}

/* keep the rightmost dropdown inside the viewport */
.primary-nav .menu > li:last-child > .sub-menu{right:0; left:auto;}
/* and make that dropdown’s third level fly out to the LEFT */
.primary-nav .menu > li:last-child > .sub-menu .sub-menu{
  left:auto; right:calc(100% + 10px);
}

/* ===== Main layout ===== */
main{margin:28px 0;}
.content{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(2,6,23,.15);
  overflow:hidden;
}
.content-inner{padding:28px;}

/* Cards (archives/posts) */
.post-card{border-bottom:1px solid var(--border); padding-bottom:22px; margin-bottom:22px}
.post-card:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.post-card h2{margin:0 0 6px; font-size:24px}
.post-meta{color:var(--muted-ink); font-size:12px; margin-bottom:10px}

/* Links / buttons */
a{color:var(--brand-1);}
.button,
.wp-block-button__link{
  background:var(--brand-1);
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px;
  padding:10px 14px; border-radius:10px; display:inline-block;
  box-shadow:0 6px 18px rgba(31,122,224,.35);
}
.button:hover{filter:brightness(1.07)}

/* Footer */
.site-footer{color:#fff; opacity:.9; padding:26px 0 40px; text-align:center}
.site-footer a{color:#fff}
.footer-inner{opacity:.9}

/* Images */
img{max-width:100%; height:auto; border-radius:10px}

/* Forms */
input, textarea, select{
  font:inherit; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; width:100%; box-sizing:border-box;
}

/* Classic editor alignment */
.alignleft{float:left;margin:.5rem 1rem .5rem 0}
.alignright{float:right;margin:.5rem 0 .5rem 1rem}
.aligncenter{display:block;margin:.5rem auto}

/* Responsive */
@media (max-width: 900px){
  .primary-nav a{padding:10px 14px}   /* bigger tap area */
  .primary-nav{z-index:50}            /* make sure dropdowns sit above content */
}
@media (max-width: 720px){
  .site-description{display:none}
  .header-inner{gap:14px;}
  .content-inner{padding:20px;}
}

/* Center the CTA block horizontally */
.entry-content .app-cta-wrap{
  display:flex;                /* give it a flex context */
  justify-content:center;      /* center its child (the row) */
  margin:0 !important;
  padding:0 !important;
}

.entry-content .app-cta-row{
  display:flex;
  align-items:center;
  justify-content:center;      /* center the icon + badge inside the row */
  gap:20px;
  flex-wrap:wrap;
  width:100%;                  /* <-- key: take full content width */
  margin:0 auto !important;    /* and center the row itself just in case */
  line-height:0;               /* prevent extra vertical rhythm */
}

/* Safety: kill any theme floats that could push items left */
.entry-content .app-cta-row img{ float:none !important; }
.entry-content .app-cta-row a{ display:block; }