/* =========================================================
   PAR THTECH MEDIA — INNER PAGE POLISH
   Loaded on every page except the finalized homepage.
   Purpose: readability, sticky-nav alignment, modal safety,
   accessible skip-link behavior and CTA contrast.
   ========================================================= */

/* Keep the accessibility skip link out of the visual canvas unless keyboard-focused. */
.skip-link{
  position:fixed!important;
  left:16px!important;
  top:94px!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:30000!important;
}
.skip-link:focus,.skip-link:focus-visible{
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:11px 15px!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  opacity:1!important;
  pointer-events:auto!important;
  background:#fff!important;
  color:#08101d!important;
  border-radius:10px!important;
  box-shadow:0 12px 34px rgba(0,0,0,.28)!important;
}

/* Make secondary in-page navigation sit to the right on desktop/laptop.
   On touch/small screens it returns to left-aligned horizontal scrolling. */
@media (min-width:901px){
  .consult-jump-nav .container,
  .aa-jump-nav .container,
  .n8n-jump-nav .container,
  .cm-jump-nav .container,
  .maint-jump-nav .container,
  .aeo-sticky-nav .container,
  .geo-sticky .container,
  .llmo-sticky .container,
  .about-subnav .container,
  .cases-subnav .container,
  .work-subnav .container,
  .cloud-section-nav .container,
  .ecdev-section-nav .container,
  .aiapp-section-nav .container,
  .wd-section-nav .container,
  .ppc-section-nav-inner,
  .lg-section-nav-inner,
  .ec-section-nav-inner,
  .pm-section-nav-inner,
  .ls-section-nav-inner,
  .seo-section-nav-inner,
  .smm-section-nav-inner{
    justify-content:flex-end!important;
  }
  .ppc-section-nav-inner>span,
  .lg-section-nav-inner>span,
  .ec-section-nav-inner>span,
  .pm-section-nav-inner>span,
  .ls-section-nav-inner>span,
  .seo-section-nav-inner>span,
  .smm-section-nav-inner>span{
    margin-right:auto!important;
  }
}
@media (max-width:900px){
  .consult-jump-nav .container,
  .aa-jump-nav .container,
  .n8n-jump-nav .container,
  .cm-jump-nav .container,
  .maint-jump-nav .container,
  .aeo-sticky-nav .container,
  .geo-sticky .container,
  .llmo-sticky .container,
  .about-subnav .container,
  .cases-subnav .container,
  .work-subnav .container,
  .cloud-section-nav .container,
  .ecdev-section-nav .container,
  .aiapp-section-nav .container,
  .wd-section-nav .container,
  .ppc-section-nav-inner,
  .lg-section-nav-inner,
  .ec-section-nav-inner,
  .pm-section-nav-inner,
  .ls-section-nav-inner,
  .seo-section-nav-inner,
  .smm-section-nav-inner{
    justify-content:flex-start!important;
  }
}

/* Secondary/light CTA contrast: never allow white text on a browser-default white button. */
.btn-ghost-light,.btn-hero-ghost{
  appearance:none!important;
  -webkit-appearance:none!important;
  background:rgba(255,255,255,.045)!important;
  color:#f7f9fc!important;
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.btn-ghost-light:hover,.btn-ghost-light:focus-visible,
.btn-hero-ghost:hover,.btn-hero-ghost:focus-visible{
  background:#fff!important;
  color:#08101d!important;
  border-color:#fff!important;
}

/* Ensure meaningful inner-page copy stays comfortably readable without changing the homepage. */
main{font-size:12px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
main p{line-height:1.65}
main button,main input,main select,main textarea{font-family:inherit}

/* Popup forms must sit above the fixed global header and fit smaller laptop heights. */
:where(.consult-modal,.seo-modal,.smm-modal,.ppc-modal,.pm-modal,.lg-modal,.ls-modal,.ec-modal,
       .aeo-modal,.aa-modal,.n8n-modal,.maint-modal,.cm-modal,.aiapp-modal,.wd-modal,.ecdev-modal,
       .geo-modal,.llmo-modal,.cloud-modal,.work-modal,.case-modal){
  z-index:30000!important;
  padding:24px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
:where(.consult-modal-dialog,.seo-modal-dialog,.smm-modal-dialog,.ppc-modal-dialog,.pm-modal-dialog,
       .lg-modal-dialog,.ls-modal-dialog,.ec-modal-dialog,.aeo-modal-dialog,.aa-modal-dialog,
       .n8n-modal-dialog,.maint-modal-dialog,.cm-modal-dialog,.aiapp-modal-card,.wd-modal-card,
       .ecdev-modal-card,.geo-modal-card,.llmo-modal-card,.cloud-modal-card,.work-modal-card,.case-modal-card){
  max-height:calc(100dvh - 48px)!important;
  margin:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
:where(.consult-modal,.seo-modal,.smm-modal,.ppc-modal,.pm-modal,.lg-modal,.ls-modal,.ec-modal,
       .aeo-modal,.aa-modal,.n8n-modal,.maint-modal,.cm-modal,.aiapp-modal,.wd-modal,.ecdev-modal,
       .geo-modal,.llmo-modal,.cloud-modal,.work-modal,.case-modal) input,
:where(.consult-modal,.seo-modal,.smm-modal,.ppc-modal,.pm-modal,.lg-modal,.ls-modal,.ec-modal,
       .aeo-modal,.aa-modal,.n8n-modal,.maint-modal,.cm-modal,.aiapp-modal,.wd-modal,.ecdev-modal,
       .geo-modal,.llmo-modal,.cloud-modal,.work-modal,.case-modal) select,
:where(.consult-modal,.seo-modal,.smm-modal,.ppc-modal,.pm-modal,.lg-modal,.ls-modal,.ec-modal,
       .aeo-modal,.aa-modal,.n8n-modal,.maint-modal,.cm-modal,.aiapp-modal,.wd-modal,.ecdev-modal,
       .geo-modal,.llmo-modal,.cloud-modal,.work-modal,.case-modal) textarea{
  font-size:14px!important;
}
:where(.consult-modal,.seo-modal,.smm-modal,.ppc-modal,.pm-modal,.lg-modal,.ls-modal,.ec-modal,
       .aeo-modal,.aa-modal,.n8n-modal,.maint-modal,.cm-modal,.aiapp-modal,.wd-modal,.ecdev-modal,
       .geo-modal,.llmo-modal,.cloud-modal,.work-modal,.case-modal) label{
  font-size:12px!important;
}

@media (max-width:700px){
  :where(.consult-modal,.seo-modal,.smm-modal,.ppc-modal,.pm-modal,.lg-modal,.ls-modal,.ec-modal,
         .aeo-modal,.aa-modal,.n8n-modal,.maint-modal,.cm-modal,.aiapp-modal,.wd-modal,.ecdev-modal,
         .geo-modal,.llmo-modal,.cloud-modal,.work-modal,.case-modal){
    padding:12px!important;
    align-items:start!important;
  }
  :where(.consult-modal-dialog,.seo-modal-dialog,.smm-modal-dialog,.ppc-modal-dialog,.pm-modal-dialog,
         .lg-modal-dialog,.ls-modal-dialog,.ec-modal-dialog,.aeo-modal-dialog,.aa-modal-dialog,
         .n8n-modal-dialog,.maint-modal-dialog,.cm-modal-dialog,.aiapp-modal-card,.wd-modal-card,
         .ecdev-modal-card,.geo-modal-card,.llmo-modal-card,.cloud-modal-card,.work-modal-card,.case-modal-card){
    max-height:calc(100dvh - 24px)!important;
    width:100%!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .btn-ghost-light,.btn-hero-ghost{transition:none!important}
}

/* Fixed 82px global header: a few older page heroes were authored with less top clearance. */
.consult-hero,.maint-hero{padding-top:118px!important}
.aa-hero{padding-top:82px!important}
@media (max-width:700px){
  .consult-hero,.maint-hero{padding-top:104px!important}
  .aa-hero{padding-top:72px!important}
}

/* =========================================================
   v3 — SECONDARY NAV CONSISTENCY FIXES
   Specific fixes for older service-page nav implementations.
   Desktop/laptop: keep the section links visually right-aligned.
   Mobile/tablet: preserve horizontal left-to-right scrolling.
   ========================================================= */
@media (min-width:901px){
  /* Force the first link to consume the free space before the menu.
     This is more reliable than justify-content on horizontally-scrollable flex rows. */
  .smm-section-nav-inner > a:first-of-type,
  .seo-section-nav-inner > a:first-of-type,
  .cloud-section-nav .container > a:first-of-type,
  .ecdev-section-nav .container > a:first-of-type{
    margin-left:auto!important;
  }

  /* Older SMM/SEO CTA rules used margin-left:auto, which kept the links on the left. */
  .smm-nav-cta,
  .seo-nav-cta{
    margin-left:4px!important;
  }

  /* Local SEO has its links inside a nested wrapper. */
  .ls-section-nav-inner > div{
    margin-left:auto!important;
  }

  /* Keep these section menus below the fixed 82px global header. */
  .smm-section-nav,
  .seo-section-nav,
  .cloud-section-nav,
  .ls-section-nav,
  .ecdev-section-nav{
    position:sticky!important;
    top:82px!important;
    z-index:900!important;
  }

  /* The ecommerce page previously used overflow:hidden on <main>, which
     creates a non-scrolling containing block and prevents position:sticky. */
  .ecdev-page main{
    overflow-x:clip!important;
    overflow-y:visible!important;
  }
}

@media (max-width:900px){
  .smm-section-nav-inner > a:first-of-type,
  .seo-section-nav-inner > a:first-of-type,
  .cloud-section-nav .container > a:first-of-type,
  .ecdev-section-nav .container > a:first-of-type{
    margin-left:0!important;
  }
  .ls-section-nav-inner > div{margin-left:0!important}
  .smm-section-nav,
  .seo-section-nav,
  .cloud-section-nav,
  .ls-section-nav,
  .ecdev-section-nav{
    top:72px!important;
  }
  .ecdev-page main{
    overflow-x:clip!important;
    overflow-y:visible!important;
  }
}

/* v3.1 — header offset is 82px until the global header itself switches to 72px at 680px. */
@media (min-width:681px){
  .smm-section-nav,
  .seo-section-nav,
  .cloud-section-nav,
  .ls-section-nav,
  .ecdev-section-nav{
    top:82px!important;
  }
}
@media (max-width:680px){
  .smm-section-nav,
  .seo-section-nav,
  .cloud-section-nav,
  .ls-section-nav,
  .ecdev-section-nav{
    top:72px!important;
  }
}