/*
Theme Name: Anantyx
Theme URI: https://anantyx.com/
Author: Anantyx
Description: The Anantyx AI & Cloud Command website. Nineteen pages a person edits in WordPress, with the drawn pictures the design uses. Built from the approved mockup on 16 October 2026.
Version: 1.1.3
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary
Text Domain: anantyx
*/

/* The site's own design lives in assets/anantyx.css, which the theme loads first. This file
   does one job: it makes the blocks WordPress draws look like that design.

   WordPress writes its own class names, so a rule in the design file that names .nav or
   .postcard does not reach the menu or the article card WordPress builds. Each rule below
   repeats one rule from the design file against the class names WordPress actually writes.
   Nothing here is a new design decision. */

/* ---- 1. WordPress adds spacing and width of its own. The design handles both. ---- */

/* WordPress puts space between blocks. theme.json sets that space to nothing, and WordPress
   writes the rule in a form the design can overrule, so each top margin the design asks for
   still applies. An earlier reset here was stronger than the design and wiped several of
   them: the orange note under the four panels, the heading in each feature row, and the
   heading on the navy closing panel all lost their space above. */
/* Every band of color runs the full width, and only the box inside it is 1180 pixels wide.
   The templates ask WordPress for no layout of its own, so these two lines are a safety net
   in case a person adds a block that brings one. */
.ap-site main.wp-block-group.has-global-padding { padding-left: 0; padding-right: 0 }
.ap-site main .entry-content > *, .ap-site main.wp-block-group > * { max-width: none }
/* The design already styles every box with the class "wrap", and the blocks carry that same
   class, so no rule is needed here. An earlier rule set the padding with one shorthand, which
   wiped the top and bottom padding the design gives the row of three short facts. */

/* ---- 2. The top menu ---- */

.ap-site .site-header .wp-block-group.header-inner {
  max-width: 1180px; margin: 0 auto; padding: 22px 32px;
}
.ap-site .site-header .wp-block-site-logo img { height: 30px; width: auto; display: block }
.ap-site .site-header .wp-block-navigation {
  font-size: 15px; font-weight: 400;
}
.ap-site .site-header .wp-block-navigation__container {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.ap-site .site-header .wp-block-navigation-item__content,
.ap-site .site-header .wp-block-navigation-submenu__toggle {
  color: #E7ECF7; white-space: nowrap; font-size: 15px; font-weight: 400;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.ap-site .site-header .wp-block-navigation-item__content:hover,
.ap-site .site-header .wp-block-navigation-submenu__toggle:hover { color: #fff }
.ap-site .site-header .wp-block-navigation .wp-block-navigation__submenu-container {
  top: 34px; left: -18px; width: 268px; background: #fff; display: grid;
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(20, 31, 57, .18);
  padding: 10px; border-radius: 14px;
}
.ap-site .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 11px 12px; border-radius: 9px; font-size: 15px; color: var(--ink);
}
/* The dropdown opens 11 pixels below the menu item, and that gap is empty. A mouse crossing
   it touches neither, so the dropdown closed before a person could reach it. This invisible
   strip belongs to the dropdown and fills the gap, so the mouse never leaves. Measured on
   16 October 2026: the item ends at 58 pixels and the dropdown starts at 69. */
.ap-site .site-header .wp-block-navigation__submenu-container:before,
.ap-site .floatpill .wp-block-navigation__submenu-container:before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.ap-site .site-header .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover { background: var(--pale); color: var(--ink) }
.ap-site .site-header .wp-block-navigation__responsive-container-open,
.ap-site .site-header .wp-block-navigation__responsive-container-close { color: #E7ECF7 }

/* ---- 3. The footer ---- */

.ap-site .site-footer .wp-block-columns.footer-cols {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.1fr 2fr; gap: 48px;
}
.ap-site .site-footer .footlogo { height: 30px; width: auto; display: block; margin-bottom: 18px }
.ap-site .site-footer .wp-block-navigation__container {
  display: flex; flex-wrap: wrap; gap: 0;
}
.ap-site .site-footer .wp-block-navigation-item__content {
  color: #B9BDC9; font-size: 15px; display: inline-block; margin: 6px 26px 7px 0;
}
.ap-site .site-footer .wp-block-navigation-item__content:hover { color: #fff }
@media (max-width: 1000px) {
  .ap-site .site-footer .wp-block-columns.footer-cols {
    grid-template-columns: 1fr; gap: 32px;
  }
}
@media (max-width: 760px) {
  .ap-site .site-footer .wp-block-columns.footer-cols { padding: 0 22px }
}

/* ---- 4. Buttons. The design's four looks, on the button WordPress writes. ---- */

.ap-site .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 300px;
  padding: 16px 36px; font-size: 14px; font-weight: 500; border: 1px solid var(--line);
  background: #fff; color: #303139;
  transition: transform .15s ease, background .15s ease;
}
.ap-site .wp-block-button__link:hover { transform: translateY(-1px) }
.ap-site .wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.ap-site .wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--blue-dark); border-color: var(--blue-dark);
}
.ap-site .wp-block-button.is-style-white .wp-block-button__link {
  background: #fff; border-color: #fff; color: #303139;
}
.ap-site .wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45);
}
.ap-site .wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .1);
}
.ap-site .site-header .wp-block-navigation .wp-block-navigation-item.btn-contact
  .wp-block-navigation-item__content {
  background: var(--blue); border: 1px solid var(--blue); color: #fff;
  border-radius: 300px; padding: 13px 26px; font-size: 14px; font-weight: 500;
}

/* The small label above a section heading. The design writes it as a plain box, and
   WordPress writes it as a paragraph so a person can edit the words. That makes the design's
   rule for a paragraph inside a section head take over, which showed the label at 20 pixels
   in gray with a gap above it. These two lines give it back its own size, color and spacing.
   The values are the design's own, from assets/anantyx.css. */
.ap-site .section-head p.eyebrow {
  font-size: 13px; font-weight: 500; color: var(--blue); letter-spacing: .22em;
  text-transform: uppercase; margin: 0; line-height: 1.55;
}
.ap-site .hero .wrap p.eyebrow { margin: 0 }

/* ---- 5. Small pieces the design styled with an attribute ---- */

/* The small line above the heading on the navy closing panel. WordPress writes it as a
   paragraph, which the design's rule for a paragraph inside that panel then took over, so it
   showed at 20 pixels with a 32 pixel gap below. The values here are the ones the design set
   on that line directly, and the color is the panel's own white. */
.ap-site .panel-spaced { margin-top: 22px }
.ap-site .final p.final-label {
  font-weight: 800; font-size: 10px; letter-spacing: .1em; color: #fff; margin: 0;
  max-width: none;
}
.ap-site .faq-group {
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); margin: 34px 0 6px;
}
.ap-site .faq-group:first-child { margin-top: 0 }

/* ---- 6. The articles list, drawn by WordPress from the articles themselves ---- */

.ap-site .wp-block-post-template.postgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
  list-style: none; padding: 0; margin: 0;
}
.ap-site .wp-block-post-template.postgrid > li { margin: 0 }
.ap-site .wp-block-group.postcard {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px;
  height: 100%;
}
.ap-site .wp-block-group.postcard:hover { border-color: var(--blue) }
.ap-site .postcard .wp-block-post-terms.posttopic {
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); display: block;
}
.ap-site .postcard .wp-block-post-terms.posttopic a { color: var(--blue); text-decoration: none }
.ap-site .postcard .wp-block-post-date.postdate {
  font-size: 13px; color: var(--muted); display: block; margin-bottom: 12px;
}
.ap-site .postcard .wp-block-post-title {
  font-size: 21px; font-weight: 500; line-height: 1.28; margin: 0 0 10px;
}
.ap-site .postcard .wp-block-post-title a { color: var(--ink); text-decoration: none }
.ap-site .postcard .wp-block-post-title a:hover { color: var(--blue) }
.ap-site .postcard .wp-block-post-excerpt__excerpt {
  font-size: 15px; color: var(--muted); line-height: 1.5; margin: 0 0 10px;
}
.ap-site .postcard .wp-block-post-excerpt__more-link {
  font-size: 14px; font-weight: 500; color: var(--blue); text-decoration: none;
}
@media (max-width: 860px) {
  .ap-site .wp-block-post-template.postgrid { grid-template-columns: minmax(0, 1fr) }
}

/* ---- 7. One article's own page ---- */

.ap-site .post-hero .wp-block-post-terms.eyebrow { color: var(--blue) }
.ap-site .post-hero .wp-block-post-terms.eyebrow a { color: var(--blue); text-decoration: none }
/* The design sets the width of an article column, and leaves it at the left. */
/* The design styles the row of buttons at the foot of an article, with a line above it. */

/* ---- 8. The floating menu bar, built from the top menu by assets/anantyx.js ---- */

.ap-site .floatpill .wp-block-navigation__container {
  display: flex; align-items: center; gap: 24px; flex-wrap: nowrap;
}
.ap-site .floatpill .wp-block-navigation-item__content,
.ap-site .floatpill .wp-block-navigation-submenu__toggle {
  color: var(--ink); font-size: 14px; background: none; border: 0; padding: 0;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.ap-site .floatpill .wp-block-navigation-item__content:hover,
.ap-site .floatpill .wp-block-navigation-submenu__toggle:hover { color: var(--blue) }
.ap-site .floatpill .wp-block-navigation__submenu-container {
  top: 32px; left: -18px; width: 268px; background: #fff; display: grid;
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(20, 31, 57, .18);
  padding: 10px; border-radius: 14px; position: absolute; opacity: 0;
  visibility: hidden; transition: opacity .12s ease;
}
.ap-site .floatpill .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.ap-site .floatpill .wp-block-navigation-item:focus-within
  > .wp-block-navigation__submenu-container { opacity: 1; visibility: visible }
.ap-site .floatpill .wp-block-navigation-item.btn-contact
  .wp-block-navigation-item__content {
  background: var(--blue); border: 1px solid var(--blue); color: #fff;
  border-radius: 300px; padding: 13px 26px; font-size: 13px; font-weight: 500;
}
@media (max-width: 1000px) { .ap-site .floatnav { display: none } }

/* ---- 9. The two forms, drawn by inc/forms.php ---- */

.ap-site .askhp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.ap-site .asksent {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 34px;
  max-width: 720px;
}
.ap-site .asksent h3 { font-size: 24px; font-weight: 500; margin: 0 0 10px }
.ap-site .asksent p { font-size: 17px; color: var(--muted); margin: 0 }
.ap-site .askfailed {
  background: #FFF4EC; border-left: 3px solid var(--orange); padding: 14px 18px;
  font-size: 16px; color: var(--muted); margin: 0 0 24px; max-width: 720px;
}

/* ---- 10. The menu on a small screen ---- */

/* Two switch points were fighting each other. The design hides its row of links below 1080
   pixels and shows a button in its place. WordPress shows its own button only below 600
   pixels, and that number is written into the WordPress menu stylesheet
   (wp-includes/blocks/navigation/style.min.css, read 16 October 2026). Between 600 and 1080
   a reader saw the button and a stacked list of links at the same time.

   These rules move the WordPress switch point to 1080, so one menu shows at any width. */
@media (max-width: 1080px) {
  /* The design hides anything with the class "nav". The menu needs to stay, because the
     button lives inside it. */
  .ap-site .site-header .wp-block-navigation { display: block }

  /* The row of links stays away until a person opens it. */
  .ap-site .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  /* The button that opens it. */
  .ap-site .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex; background: none; border: 0; color: #E7ECF7; cursor: pointer; padding: 6px;
  }

  /* The panel a person opens on a phone. The colors are set here and not on the menu block
     itself. Setting them on the block made WordPress paint the Platform and Solutions
     dropdowns navy as well, and their words were already dark, so nobody could read them. */
  /* WordPress paints this panel white, with a rule that names five classes. The design's own
     class "nav" is added here so this rule names six and wins. */
  .ap-site .site-header .nav.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--navy); color: #fff; padding: 26px 22px; text-align: left;
  }
  .ap-site .site-header .wp-block-navigation__responsive-container-close { color: #fff }
  .ap-site .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content { align-items: flex-start }
  /* The row of links sits on the right on a wide screen. Open on a phone it reads down the
     page, so it starts at the left edge instead. */
  .ap-site .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    display: block; align-items: flex-start; text-align: left;
  }
  .ap-site .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item { align-items: flex-start }
  .ap-site .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content,
  .ap-site .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu__toggle {
    color: #fff; font-size: 18px; padding: 10px 0; display: block; text-align: left;
  }
  .ap-site .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    position: static; width: auto; background: none; border: 0; box-shadow: none;
    padding: 0 0 0 18px; opacity: 1; visibility: visible;
  }
  .ap-site .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: #C9D3E8; font-size: 16px;
  }
  .ap-site .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.btn-contact .wp-block-navigation-item__content {
    background: var(--blue); border-radius: 300px; padding: 13px 26px;
    display: inline-block; margin-top: 10px; color: #fff;
  }
}

/* ---- 11. The five articles ---- */

/* The wide picture at the top of an article. */
.ap-site .article .wp-block-image.article-picture { margin: 0 0 30px }
.ap-site .article .wp-block-image.article-picture img {
  width: 100%; height: auto; display: block; border-radius: 18px;
}

/* The hashtags at the end of an article. */
.ap-site .article p.article-tags {
  margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 15px; font-weight: 500; color: var(--blue); line-height: 1.9;
}

/* The writer's name and the date, under the title of an article. */
.ap-site .post-hero .byline-row {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-top: 14px;
}
.ap-site .post-hero .byline { color: #fff; font-size: 18px; font-weight: 500 }
.ap-site .post-hero .wp-block-post-date.lead { margin: 0 }

/* The picture on each card in the article list. The file is square, and the card shows a
   wide band cut from the middle of it, so a card stays short and the list reads as a list. */
.ap-site .postcard .wp-block-post-featured-image.postpicture {
  margin: 0 0 18px; border-radius: 14px; overflow: hidden; display: block;
}
.ap-site .postcard .wp-block-post-featured-image.postpicture img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}

/* The opening sentence of an article, where the writer repeated the title as a statement. */
.ap-site .article p.article-lead { font-size: 19px; color: var(--ink); margin: 0 0 20px }