/* =========================================================================
   ARKAS DIGITAL - HEADER, NAVIGATION, MEGA MENU, FOOTER
   ========================================================================= */

/* --------------------------------------------------------------- HEADER */

.ark-site-header {
  background-color: var(--ark-bone);
  border-bottom: var(--ark-border);
  position: sticky;
  top: 0;
  z-index: 200;
}

.ark-site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--ark-space-5);
  min-height: var(--ark-header-height);
}

/* ----------------------------------------------------------------- LOGO */

.ark-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
.ark-logo__img {
  height: var(--ark-logo-height);
  width: auto;
  max-width: 220px;
  display: block;
}
/* Text fallback, used until the SVG logo is uploaded (2.4). */
.ark-logo--text {
  font-family: var(--ark-font-heading);
  font-size: 1.5rem;
  font-weight: var(--ark-weight-heading-strong);
  letter-spacing: -0.015em;
  color: var(--ark-ink);
  line-height: var(--ark-logo-height);
  font-variation-settings: var(--ark-opsz-text);
}
.ark-logo--text:hover { color: var(--ark-ink); }

/* ----------------------------------------------------------- NAVIGATION */

.ark-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--ark-space-6);
}

.ark-menu li { position: relative; margin: 0; }

.ark-menu a {
  display: inline-block;
  font-size: var(--ark-size-small);
  font-weight: var(--ark-weight-medium);
  color: var(--ark-ink);
  text-decoration: none;
  padding: var(--ark-space-2) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--ark-duration) var(--ark-ease);
}
.ark-menu a:hover { border-bottom-color: var(--ark-yellow); }
.ark-menu .current-menu-item > a,
.ark-menu .current-menu-ancestor > a,
.ark-menu .current_page_item > a,
.ark-menu .current_page_ancestor > a { border-bottom-color: var(--ark-yellow); }

/* Contact rendered as a button, per the navigation spec in 3. Add the class
   ark-nav-cta to a menu item under Appearance > Menus to get this treatment. */
.ark-menu .ark-nav-cta > a,
#mega-menu-wrap-primary #mega-menu-primary > li.ark-nav-cta > a.mega-menu-link {
  background-color: var(--ark-yellow);
  color: var(--ark-ink);
  padding: 11px 20px;
  border-radius: var(--ark-radius);
  border-bottom: 0;
}
.ark-menu .ark-nav-cta > a:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.ark-nav-cta > a.mega-menu-link:hover {
  background-color: var(--ark-yellow-deep);
  border-bottom: 0;
  color: var(--ark-ink);
}
.ark-menu .ark-nav-cta.current-menu-item > a { border-bottom: 0; }

/* Plain dropdown, used only if Max Mega Menu is ever switched off. */
.ark-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: var(--ark-space-3) 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--ark-white);
  border: var(--ark-border);
  border-radius: var(--ark-radius);
  display: none;
  z-index: 210;
}
.ark-menu li:hover > .sub-menu,
.ark-menu li:focus-within > .sub-menu { display: block; }
.ark-menu .sub-menu a { display: block; padding: var(--ark-space-3) var(--ark-space-5); border-bottom: 0; }
.ark-menu .sub-menu a:hover { background: var(--ark-yellow-pale); border-bottom: 0; }

/* ----------------------------------------------------- MOBILE NAV TOGGLE */

.ark-nav-toggle {
  display: none;
  align-items: center;
  gap: var(--ark-space-3);
  background: none;
  border: var(--ark-border);
  border-radius: var(--ark-radius);
  padding: 9px 14px;
  font-family: var(--ark-font-body);
  font-size: var(--ark-size-small);
  font-weight: var(--ark-weight-medium);
  color: var(--ark-ink);
  cursor: pointer;
}
.ark-nav-toggle__bars,
.ark-nav-toggle__bars::before,
.ark-nav-toggle__bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--ark-ink);
  position: relative;
}
.ark-nav-toggle__bars::before,
.ark-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.ark-nav-toggle__bars::before { top: -5px; }
.ark-nav-toggle__bars::after  { top: 5px; }

@media (max-width: 1024px) {
  /* Fallback mobile navigation, used only when Max Mega Menu is switched
     off. While the mega menu is active it supplies its own toggle and panel,
     so body.ark-has-megamenu opts out of every rule here.

     The toggle carries the `hidden` attribute in the markup and only
     JavaScript removes it, so :not([hidden]) prevents a dead button from
     appearing when scripts do not run. The menu itself stays visible and
     usable without JavaScript, which is what crawlers see (5.9). */

  body:not(.ark-has-megamenu) .ark-nav-toggle:not([hidden]) { display: inline-flex; }

  .ark-js body:not(.ark-has-megamenu) .ark-primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ark-bone);
    border-bottom: var(--ark-border);
    padding: var(--ark-space-5) var(--ark-gutter) var(--ark-space-6);
    max-height: calc(100vh - var(--ark-header-height));
    overflow-y: auto;
  }
  .ark-js body.ark-nav-open:not(.ark-has-megamenu) .ark-primary-nav { display: block; }

  body:not(.ark-has-megamenu) .ark-menu { flex-direction: column; align-items: stretch; gap: 0; }
  body:not(.ark-has-megamenu) .ark-menu > li { border-bottom: var(--ark-border); }
  body:not(.ark-has-megamenu) .ark-menu > li:last-child { border-bottom: 0; }
  body:not(.ark-has-megamenu) .ark-menu a { display: block; padding: var(--ark-space-4) 0; border-bottom: 0; }
  body:not(.ark-has-megamenu) .ark-menu .ark-nav-cta > a { margin-top: var(--ark-space-4); text-align: center; }
  body:not(.ark-has-megamenu) .ark-menu .sub-menu {
    position: static; display: block; border: 0;
    padding: 0 0 var(--ark-space-3) var(--ark-space-4);
    background: none; min-width: 0;
  }

  .ark-site-header { position: relative; }
  .ark-site-header__inner { position: relative; }
}

/* --------------------------------------------------------- MAX MEGA MENU */

/* Max Mega Menu ships its own theme styling. These rules pull it back to the
   Arkas tokens so the mega panel matches the rest of the site. The plugin's
   Google Fonts loading is disabled in its own settings, not here (8.2). */

#mega-menu-wrap-primary,
#mega-menu-wrap-primary #mega-menu-primary {
  background: transparent;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  font-family: var(--ark-font-body);
  font-size: var(--ark-size-small);
  font-weight: var(--ark-weight-medium);
  color: var(--ark-ink);
  background: transparent;
  height: auto;
  line-height: 1.4;
  padding: var(--ark-space-2) 0;
  border-bottom: 2px solid transparent;
  text-transform: none;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
  color: var(--ark-ink);
  background: transparent;
  border-bottom-color: var(--ark-yellow);
}

/* The mega panel */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
  background: var(--ark-white);
  border: var(--ark-border);
  border-top: 2px solid var(--ark-yellow);
  border-radius: 0 0 var(--ark-radius) var(--ark-radius);
  padding: var(--ark-space-7) var(--ark-space-6);
  box-shadow: none;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  font-family: var(--ark-font-heading);
  font-size: 1.0625rem;
  font-weight: var(--ark-weight-heading-strong);
  color: var(--ark-ink);
  text-transform: none;
  margin-bottom: var(--ark-space-2);
  padding: 0 0 var(--ark-space-2);
  border-bottom: 0;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
  color: var(--ark-ink);
  text-decoration: underline;
  text-decoration-color: var(--ark-yellow-deep);
  background: transparent;
}

/* One-line description under each mega menu link, edited in Appearance > Menus. */
#mega-menu-wrap-primary .mega-menu-description,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item .mega-menu-description {
  font-family: var(--ark-font-body);
  font-size: var(--ark-size-small);
  line-height: 1.5;
  color: var(--ark-slate);
  margin: 0;
  text-transform: none;
  font-style: normal;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column {
  padding-right: var(--ark-space-6);
}

/* Mobile toggle supplied by the plugin */
#mega-menu-wrap-primary .mega-menu-toggle { background: transparent; height: auto; }
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::before,
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::after {
  background-color: var(--ark-ink);
}
@media (max-width: 1024px) {
  #mega-menu-wrap-primary #mega-menu-primary {
    background: var(--ark-bone);
    border-top: var(--ark-border);
    padding: var(--ark-space-4) 0;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { padding: var(--ark-space-3) 0; }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    padding: var(--ark-space-4) 0 var(--ark-space-4) var(--ark-space-4);
    border: 0;
  }
}

/* ---------------------------------------------------------------- FOOTER */

.ark-site-footer {
  background-color: var(--ark-ink);
  color: var(--ark-bone);
  margin-top: 0;
}

.ark-site-footer__main {
  padding-top: var(--ark-section-y-sm);
  padding-bottom: var(--ark-space-7);
}
@media (min-width: 769px) {
  .ark-site-footer__main { padding-top: var(--ark-space-9); padding-bottom: var(--ark-space-8); }
}

.ark-site-footer__grid { display: grid; gap: var(--ark-space-7); }
@media (min-width: 700px) {
  .ark-site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .ark-site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--ark-space-6); }
}

.ark-site-footer__name {
  font-family: var(--ark-font-heading);
  font-size: 1.375rem;
  font-weight: var(--ark-weight-heading-strong);
  color: var(--ark-bone);
  margin-bottom: var(--ark-space-1);
  font-variation-settings: var(--ark-opsz-text);
}
.ark-site-footer__tagline {
  color: var(--ark-slate-light);
  font-size: var(--ark-size-small);
  margin-bottom: var(--ark-space-5);
}

.ark-site-footer__heading {
  font-family: var(--ark-font-body);
  font-size: var(--ark-size-label);
  font-weight: var(--ark-weight-medium);
  letter-spacing: var(--ark-ls-label);
  text-transform: uppercase;
  color: var(--ark-slate-light);
  margin-bottom: var(--ark-space-4);
}

.ark-footer-menu { list-style: none; margin: 0; padding: 0; }
.ark-footer-menu li { margin-bottom: var(--ark-space-3); }
.ark-footer-menu a {
  color: var(--ark-bone);
  font-size: var(--ark-size-small);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ark-footer-menu a:hover { border-bottom-color: var(--ark-yellow); }
.ark-footer-menu--inline { display: flex; flex-wrap: wrap; gap: var(--ark-space-5); }
.ark-footer-menu--inline li { margin-bottom: 0; }

/* NAP block. Same wording and order wherever it appears (4.10). */
.ark-nap p { margin: 0 0 var(--ark-space-1); font-size: var(--ark-size-small); }
.ark-nap__name { font-weight: var(--ark-weight-medium); }
.ark-site-footer__nap { margin-bottom: var(--ark-space-5); }
.ark-site-footer__nap p { color: var(--ark-slate-light); }
.ark-site-footer__nap a { color: var(--ark-bone); text-decoration: none; border-bottom: 1px solid var(--ark-line-dark); }
.ark-site-footer__nap a:hover { border-bottom-color: var(--ark-yellow); }

.ark-socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ark-space-4); }
.ark-socials a { color: var(--ark-slate-light); font-size: var(--ark-size-small); text-decoration: none; border-bottom: 1px solid transparent; }
.ark-socials a:hover { color: var(--ark-bone); border-bottom-color: var(--ark-yellow); }

.ark-site-footer__cta .ark-btn { margin-top: var(--ark-space-4); }

.ark-site-footer__bar {
  border-top: var(--ark-border-dark);
  padding-block: var(--ark-space-5);
}
.ark-site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ark-space-4);
  align-items: center;
  justify-content: space-between;
}
.ark-site-footer__copy {
  margin: 0;
  font-size: var(--ark-size-small);
  color: var(--ark-slate-light);
}

/* GeneratePress wrappers this theme does not use */
.site-footer .footer-widgets,
.site-info { display: none; }

/* ------------------------------------------------------------ MAIN AREA */

/* Sections run full-bleed, so the GeneratePress content container must not
   add its own width limit or padding on pages. */
.arkas-page .site-content,
.arkas-page .content-area,
.arkas-page .site-main,
.arkas-page .entry-content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.arkas-page .entry-content > * { margin-top: 0; margin-bottom: 0; }
.arkas-page .inside-article { padding: 0; }
.arkas-page .entry-content::after { content: none; }

/* Posts and other single templates keep a comfortable reading column. */
.single-post .entry-content,
.single-case_study .entry-content,
.blog .entry-content,
.archive .entry-content {
  max-width: var(--ark-max-width);
  margin-inline: auto;
  padding-inline: var(--ark-gutter);
}

/* ------------------------------------------- MAX MEGA MENU: BAR LAYOUT */

/* Max Mega Menu lays the top level out as a plain block list with no spacing
   between items. Laying the bar out as a flex row restores the gaps and
   vertically centres the Contact button against the text links. */

@media (min-width: 1025px) {
  #mega-menu-wrap-primary #mega-menu-primary {
    display: flex;
    align-items: center;
    gap: var(--ark-space-6);
    flex-wrap: nowrap;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    float: none;
    margin: 0;
    display: flex;
    align-items: center;
  }

  /* The mega panel is positioned against the navigation bar rather than the
     Services item alone, so it spans a comfortable width. */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    width: min(1120px, calc(100vw - (var(--ark-gutter-lg) * 2)));
    left: auto;
    right: 0;
  }
}

/* Dropdown arrow on the Services item: quieter than the plugin default. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link::after {
  color: var(--ark-slate);
  font-size: 0.7em;
  margin-left: var(--ark-space-2);
  vertical-align: middle;
}

/* The Contact call to action. Max Mega Menu prefixes custom menu classes with
   "mega-", so both forms are matched. */
#mega-menu-wrap-primary #mega-menu-primary > li.ark-nav-cta > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-ark-nav-cta > a.mega-menu-link {
  background-color: var(--ark-yellow);
  color: var(--ark-ink);
  padding: 11px 20px;
  border-radius: var(--ark-radius);
  border-bottom: 0;
  line-height: 1.2;
}
#mega-menu-wrap-primary #mega-menu-primary > li.ark-nav-cta > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-ark-nav-cta > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-ark-nav-cta.mega-current-menu-item > a.mega-menu-link {
  background-color: var(--ark-yellow-deep);
  border-bottom: 0;
  color: var(--ark-ink);
}

@media (max-width: 1024px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.ark-nav-cta > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-ark-nav-cta > a.mega-menu-link {
    display: inline-block;
    margin: var(--ark-space-4) 0;
  }
}

/* --------------------------------- MAX MEGA MENU: PANEL POSITION + COLUMNS */

/* The panel is absolutely positioned against the menu list, so its vertical
   offset has to be pinned explicitly - without this it can be laid out
   against the flex line box and end up above the header. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
  top: 100%;
  bottom: auto;
}

/* Column headings.
   These service items have no children of their own, so Max Mega Menu renders
   each column as a single link with a description rather than as a nested
   list. Both shapes are styled so the panel survives an editor later adding
   sub-items in Appearance > Menus. */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column-standard > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  font-family: var(--ark-font-heading);
  font-size: 1.0625rem;
  font-weight: var(--ark-weight-heading-strong);
  line-height: 1.3;
  color: var(--ark-ink);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--ark-space-2);
  padding: 0 0 var(--ark-space-2);
  border-bottom: 0;
  display: block;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column-standard > a.mega-menu-link:hover {
  color: var(--ark-ink);
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--ark-yellow-deep);
  text-underline-offset: 0.2em;
}

/* Each column gets breathing room and a hairline between them. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {
  padding-right: var(--ark-space-6);
}
@media (min-width: 1025px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item + li.mega-menu-item {
    border-left: var(--ark-border);
    padding-left: var(--ark-space-6);
  }
}

/* Max Mega Menu generates its own stylesheet with deep selectors. These match
   its selector depth so the column headings pick up the heading serif and
   sentence case rather than the plugin's uppercase sans default. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
  font-family: var(--ark-font-heading) !important;
  font-size: 1.0625rem !important;
  font-weight: var(--ark-weight-heading-strong) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ark-ink) !important;
  line-height: 1.3 !important;
  font-variation-settings: var(--ark-opsz-text);
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item .mega-menu-description {
  font-family: var(--ark-font-body) !important;
  font-size: var(--ark-size-small) !important;
  text-transform: none !important;
  color: var(--ark-slate) !important;
  line-height: 1.55 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}