/* ApexGenTech / Nexora — shared theme styles
   Colors/spacing match the source Nexora "Journey" design 1:1. Page-specific sections keep
   their original inline styles in the templates; this file covers resets, the font import,
   shared keyframes, and the nav/footer/cookie-banner components (which need real CSS instead
   of the design tool's onMouseEnter/state-driven show-hide). */

:root {
  --ink: #13221D;
  --sub: #4B5A54;
  --line: #DCE3DF;
  --card: #FFFFFF;
  --bg: #F5F6F3;
  --green: #163832;
  --green-dark: #0E211D;
  --amber: #E3A008;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

@keyframes heroFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-14px); } 100% { transform: translateY(0); } }

/* Scroll-reveal: elements start hidden via inline style in markup, main.js flips this class on
   when they enter the viewport (or immediately if IntersectionObserver/JS is unavailable). */
[data-reveal="1"] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal="1"].is-visible { opacity: 1; transform: translateY(0); }
.no-js [data-reveal="1"] { opacity: 1; transform: translateY(0); }

/* ---------- Header / nav ---------- */
.site-header { width: 100%; background: var(--green); font-family: 'IBM Plex Sans', sans-serif; box-sizing: border-box; position: relative; z-index: 40; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px clamp(20px, 5vw, 64px); max-width: 1440px; margin: 0 auto; box-sizing: border-box; }
.site-header__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.site-header__logo img { height: 38px; width: auto; display: block; }
.site-header__logo span { font-weight: 700; font-size: 19px; color: #FFFFFF; letter-spacing: -0.01em; }

.nav-desktop { display: none; align-items: center; gap: 28px; }
.nav-link { font-size: 14px; font-weight: 500; text-decoration: none; color: rgba(255,255,255,0.85); }
.nav-trigger { font-size: 14px; font-weight: 500; cursor: pointer; color: rgba(255,255,255,0.85); display: flex; align-items: center; gap: 4px; background: none; border: none; font-family: inherit; padding: 0; }
.nav-trigger span { font-size: 10px; }
.nav-cta { font-size: 14px; font-weight: 700; text-decoration: none; color: var(--green); background: var(--amber); padding: 10px 18px; border-radius: 4px; }

.nav-mega { position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border-top: 1px solid rgba(0,0,0,0.08); box-shadow: 0 20px 40px rgba(0,0,0,0.15); z-index: 41; display: none; }
.nav-mega.is-open { display: block; }
.nav-mega--services { right: 0; left: auto; }
.nav-mega__grid { max-width: 1200px; margin: 0 auto; padding: 40px clamp(20px, 5vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.nav-mega--services .nav-mega__grid { max-width: 900px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.nav-mega__heading { font-size: 12px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; }
.nav-mega__col { display: flex; flex-direction: column; gap: 10px; }
.nav-mega__col a { font-size: 14px; text-decoration: none; color: var(--sub); }
.nav-mega__col a:hover { color: var(--green); }
.nav-mega--services a { font-size: 14px; text-decoration: none; color: var(--sub); padding: 8px 0; }
.nav-mega__footer { border-top: 1px solid var(--line); padding: 16px clamp(20px, 5vw, 64px); display: flex; gap: 24px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.nav-mega--services .nav-mega__footer { max-width: 900px; padding: 14px clamp(20px, 5vw, 64px); }
.nav-mega__footer a.primary { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--green); }
.nav-mega__footer a.secondary { font-size: 13px; text-decoration: none; color: var(--sub); }

.nav-mobile-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 30px; cursor: pointer; flex-shrink: 0; background: none; border: none; padding: 0; }
.nav-mobile-toggle span { width: 100%; height: 2px; background: #FFFFFF; display: block; }

.nav-mobile-panel { display: none; flex-direction: column; gap: 4px; padding: 8px clamp(20px, 5vw, 64px) 24px; border-top: 1px solid rgba(255,255,255,0.12); }
.nav-mobile-panel.is-open { display: flex; }
.nav-mobile-panel a { font-size: 15px; font-weight: 600; text-decoration: none; color: #FFFFFF; padding: 10px 0; }
.nav-mobile-panel a.cta { font-size: 15px; font-weight: 700; text-decoration: none; color: var(--green); background: var(--amber); padding: 13px; border-radius: 4px; text-align: center; margin-top: 10px; }
.nav-mobile-group-toggle { font-size: 15px; font-weight: 600; color: #FFFFFF; padding: 10px 0; cursor: pointer; background: none; border: none; text-align: left; font-family: inherit; width: 100%; }
.nav-mobile-submenu { display: none; flex-direction: column; gap: 8px; padding-left: 14px; margin-bottom: 8px; }
.nav-mobile-submenu.is-open { display: flex; }
.nav-mobile-submenu a { font-size: 14px; color: rgba(255,255,255,0.75); padding: 4px 0; }

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .nav-mobile-toggle, .nav-mobile-panel { display: none !important; }
}

/* ---------- Footer ---------- */
.site-footer { width: 100%; background: var(--green-dark); font-family: 'IBM Plex Sans', sans-serif; box-sizing: border-box; }
.site-footer__inner { max-width: 1440px; margin: 0 auto; padding: 56px clamp(20px,5vw,64px) 28px; box-sizing: border-box; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 280px; }
.site-footer__brand-row { display: flex; align-items: center; gap: 10px; }
.site-footer__brand-row img { height: 34px; width: auto; }
.site-footer__brand-row span { font-weight: 700; font-size: 17px; color: #FFFFFF; }
.site-footer__brand p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.5); margin: 0; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col-heading { font-size: 12px; font-weight: 700; color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.site-footer__col a { font-size: 13px; text-decoration: none; color: rgba(255,255,255,0.55); display: inline-block; transition: color 0.2s ease, padding-left 0.2s ease; }
.site-footer__col a:hover { color: var(--amber); padding-left: 4px; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; }
.site-footer__copy { font-size: 12px; color: rgba(255,255,255,0.4); }
.site-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer__legal a { font-size: 12px; text-decoration: none; color: rgba(255,255,255,0.4); display: inline-block; transition: color 0.2s ease, padding-left 0.2s ease; }
.site-footer__legal a:hover { color: var(--amber); padding-left: 4px; }
.site-footer__legal button.linklike { font: inherit; font-size: 12px; background: none; border: none; padding: 0; cursor: pointer; color: rgba(255,255,255,0.4); transition: color 0.2s ease, padding-left 0.2s ease; }
.site-footer__legal button.linklike:hover { color: var(--amber); padding-left: 4px; }

/* ---------- Cookie banner ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: #13221D; border-top: 1px solid rgba(255,255,255,0.12); padding: 20px clamp(16px,4vw,40px); box-sizing: border-box; font-family: 'IBM Plex Sans', sans-serif; display: none; }
.cookie-banner.is-visible { display: block; }
.cookie-banner__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: space-between; }
.cookie-banner__text { flex: 1 1 380px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.8); }
.cookie-banner__text a { color: var(--amber); }
.cookie-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-banner__actions button { font-size: 13px; font-weight: 600; padding: 11px 18px; border-radius: 4px; cursor: pointer; font-family: inherit; }
.btn-ghost { border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #FFFFFF; }
.btn-white { border: 1px solid #FFFFFF; background: #FFFFFF; color: #13221D; font-weight: 700 !important; }
.btn-amber { border: none; background: var(--amber); color: #13221D; font-weight: 700 !important; }

.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 101; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.cookie-modal.is-visible { display: flex; }
.cookie-modal__box { background: #FFFFFF; border-radius: 8px; max-width: 520px; width: 100%; padding: 32px; box-sizing: border-box; font-family: 'IBM Plex Sans', sans-serif; }
.cookie-modal__title { font-weight: 700; font-size: 19px; color: #13221D; margin-bottom: 8px; }
.cookie-modal__desc { font-size: 13px; color: var(--sub); margin-bottom: 24px; line-height: 1.6; }
.cookie-modal__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cookie-modal__rows { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.cookie-modal__row-title { font-weight: 600; font-size: 14px; color: #13221D; }
.cookie-modal__row-desc { font-size: 12px; color: var(--sub); margin-top: 4px; }
.cookie-modal__always-on { font-size: 12px; font-weight: 700; color: var(--sub); flex-shrink: 0; padding-top: 2px; }
.cookie-modal__row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.cookie-modal__actions { display: flex; gap: 12px; justify-content: flex-end; }
.cookie-modal__actions button { font-size: 13px; font-weight: 600; padding: 11px 18px; border-radius: 4px; cursor: pointer; font-family: inherit; }
.btn-outline { border: 1px solid var(--line); background: #FFFFFF; color: #13221D; }

/* ---------- FAQ accordion (native details/summary) ---------- */
.faq-item { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 12px; background: #FFFFFF; }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 600; font-size: 15px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--sub); flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item__body { padding: 0 22px 20px; font-size: 14px; line-height: 1.65; color: var(--sub); }

/* ---------- Block-editor content (page.php) ---------- */
/* Classic theme, not a block theme, so wide/full alignment isn't automatic — this is the
   standard recipe: constrain normal content to a readable column, let "wide" blocks stretch to
   a wider column, and let "full" blocks break out to the viewport edges. */
.entry-content { padding: 0; }
.entry-content > * {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 6vw, 64px);
  padding-right: clamp(20px, 6vw, 64px);
  box-sizing: border-box;
}
.entry-content > .alignwide { max-width: 1320px; }
.entry-content > .alignfull {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}
.entry-content > .alignfull > .wp-block-cover__inner-container,
.entry-content > .alignfull .wp-block-group__inner-container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 6vw, 64px);
  padding-right: clamp(20px, 6vw, 64px);
  box-sizing: border-box;
}
.entry-content h1 { font-weight: 700; font-size: clamp(28px,5vw,40px); line-height: 1.15; margin: 0 0 20px; }
.entry-content h2 { font-weight: 700; font-size: clamp(22px,3.5vw,28px); margin: 40px 0 16px; }
.entry-content h3 { font-weight: 700; font-size: 18px; margin: 28px 0 10px; }
.entry-content p { font-size: 15px; line-height: 1.75; color: var(--sub); margin: 0 0 16px; }
.entry-content ul, .entry-content ol { font-size: 15px; line-height: 1.75; color: var(--sub); padding-left: 22px; }
.entry-content img { border-radius: 8px; }
.entry-content .wp-block-cover { padding: clamp(48px,8vw,72px) 0; }
.entry-content .wp-block-cover h1, .entry-content .wp-block-cover h2, .entry-content .wp-block-cover p { color: #FFFFFF; }
.entry-content .wp-block-button__link { text-decoration: none; font-size: 15px; font-weight: 700; color: var(--green); background: var(--amber); padding: 14px 28px; border-radius: 4px; }
.entry-content .eyebrow-block { font-size: 13px; font-weight: 700; color: var(--amber); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.entry-content .card-block { padding: 24px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px; }

/* ---------- Generic content helpers reused across page templates ---------- */
.container { max-width: 1320px; margin: 0 auto; padding: clamp(48px,8vw,88px) clamp(20px,6vw,64px); box-sizing: border-box; }
.eyebrow { font-size: 13px; font-weight: 700; color: var(--amber); text-transform: uppercase; letter-spacing: 0.05em; }
.btn-primary { text-decoration: none; font-size: 15px; font-weight: 700; color: var(--green); background: var(--amber); padding: 15px 28px; border-radius: 4px; display: inline-block; }
.btn-secondary-dark { text-decoration: none; font-size: 15px; font-weight: 600; color: #FFFFFF; padding: 15px 8px; border-bottom: 1px solid rgba(255,255,255,0.4); display: inline-block; }
.placeholder-note { background: #FFF7E6; border: 1px dashed var(--amber); color: #6B4E00; font-size: 13px; line-height: 1.6; padding: 14px 18px; border-radius: 6px; margin-bottom: 28px; }
.form-success { background: #EAF6EF; border: 1px solid #1C8C7C; color: #0E211D; font-size: 14px; padding: 16px 20px; border-radius: 6px; margin-bottom: 24px; }
.form-error { background: #FDEBEA; border: 1px solid #B3261E; color: #7A1913; font-size: 14px; padding: 16px 20px; border-radius: 6px; margin-bottom: 24px; }