/*
Theme Name:     Neve
Theme URI:      https://themeisle.com/themes/neve/
Author:         ThemeIsle
Author URI:     https://themeisle.com
Tested up to:   6.2
Requires PHP:   7.0
Requires at least: 5.5
Description:    Neve is a next-generation, ultra-fast WordPress theme designed for top performance, SEO, and Core Web Vitals. Its lightweight codebase and small size ensure minimal overhead and lightning-fast load times. Fully compatible with the block editor, popular page builders (Elementor, Bricks, Oxygen etc), and WooCommerce, it’s perfect for blogs, small businesses, agencies, portfolios, and online stores. With responsive design, multilingual translations, and easy customization options, Neve empowers you to create a future-proof, high-ranking online presence. Discover everything Neve has to offer and explore our powerful premium version at https://themeisle.com/themes/neve/.
Version:        4.2.11
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    neve
Pro Slug:  			neve-pro-addon
AMP: 						true
WordPress Available:  yes
Requires License:     no
Tags: blog, custom-logo, e-commerce, rtl-language-support, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, wide-blocks, block-styles, footer-widgets, portfolio, left-sidebar, right-sidebar
*//*
Theme Name: ADOH Child
Theme URI: https://www.adawnofheroes.org
Description: Child theme of Neve for A Dawn of Heroes customisations.
Author: A Dawn of Heroes
Template: neve
Version: 1.10.2
*/

/* ============================================================================
   Aurora, applied to the site chrome and the ordinary pages.

   The values are mirrored from .claude/memory/design_system.md - change them
   there first, then here and in the armory copy. Nothing generates one from
   another.

   Two things about Neve decide the shape of this file:

   1. Neve exposes its palette as `--nv-*` custom properties and then builds
      DERIVED properties from them ON :root - `--primarybtnbg: var(--nv-primary-accent)`,
      `--wp--preset--color--nv-c-2: var(--nv-c-2)` and so on. A custom property is
      substituted where it is DECLARED, so those derived values were already
      computed against the Neve blue by the time they reach us: overriding
      `--nv-primary-accent` further down does not move them. Every derived
      property we care about is therefore re-declared here by name, next to the
      `--nv-*` one it came from.
   2. Neve prints its own rules as an inline <style> in wp_head, and this
      stylesheet is enqueued after it. So a same-specificity rule here wins on
      order - which is why the row-level `--bgcolor` overrides below are enough
      and none of this needs !important.

   SCOPE. Chrome and typography are dark everywhere. The dark GROUND follows
   `adoh-dark` on the body, which functions.php now withholds from one place
   only: the BetterDocs knowledge base, which is being retired rather than
   restyled. `body.adoh-dark` is the only switch; widen it in functions.php,
   never by loosening a selector here.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------ */

:root {
    --adoh-ground:      #12100D;
    --adoh-surface:     #1A1713;
    --adoh-surface-2:   #221E18;
    --adoh-line:        #332D24;
    --adoh-line-strong: #463D30;
    --adoh-hover:       #262119;

    --adoh-ink:   #EFE7D6;   /* 15.4:1 */
    --adoh-ink-2: #A79C88;   /*  7.0:1 */
    --adoh-ink-3: #756B5B;   /*  3.6:1 - labels only, below the text threshold */

    /* the single accent: it marks what can be interacted with */
    --adoh-gold:     #C9A464; /*  8.1:1 */
    --adoh-gold-hi:  #E3C48A; /* 11.3:1 */
    --adoh-gold-dim: #8A6F3E; /*  4.0:1 - borders and data marks only */

    /* semantic set - the roles inc_color.nss already declares */
    --adoh-success: #58B368;
    --adoh-danger:  #D4635E;
    --adoh-warning: #E0A83C;
    --adoh-info:    #7FB2D4;
    --adoh-magic:   #B368E0;
    --adoh-divine:  #F3E6CC;

    --adoh-ff-display: "Cinzel", "Trajan Pro", Georgia, serif;
    --adoh-ff-prose:   "Spectral", Georgia, "Times New Roman", serif;
    --adoh-ff-ui:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ---------------------------------------------------------------------------
   2. Typography - site wide, including the two surfaces still on the light skin

   Faces are not a palette decision: a store page in Arial next to a header in
   IBM Plex reads as a broken page, not as a transitional one. Only the colour
   waits for the second pass.
   ------------------------------------------------------------------------ */

:root {
    --bodyfontfamily: "IBM Plex Sans";
    --nv-fallback-ff: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Cinzel is a caps face and unusable for text: h1 and h2 only, plus the
   wordmark. h3 and below stay on the UI face, which is what they are. */
h1, h2,
.site-title,
.nv-page-title,
.entry-title {
    font-family: var(--adoh-ff-display);
    font-weight: 500;
    letter-spacing: .03em;
    line-height: 1.15;
}

h3, h4, h5, h6 {
    font-family: var(--adoh-ff-ui);
    font-weight: 600;
    letter-spacing: .01em;
}

/* Digits that appear in a column line up. */
table, .price, .woocommerce-Price-amount, time {
    font-variant-numeric: tabular-nums;
}

/* Arial Black for the menu was the Neve factory value, not a choice. */
.builder-item--primary-menu {
    --fontfamily: var(--adoh-ff-ui);
    --fontweight: 600;
    --fontsize: .95em;
    --letterspacing: .02em;
    --texttransform: none;
}
.hfg-is-group.has-primary-menu .inherit-ff {
    --inheritedff: var(--adoh-ff-ui);
    --inheritedfw: 600;
}


/* ---------------------------------------------------------------------------
   3. Chrome - header, menu and footer, dark on every page

   The row-level properties are the ones the Neve components read. Setting them
   here repaints the whole header without having to chase each component.
   ------------------------------------------------------------------------ */

.header-top,
.header-main,
.header-bottom {
    --bgcolor:  var(--adoh-surface);
    --color:    var(--adoh-ink);
    --rowbcolor: var(--adoh-line);
}

/* the slide-in panel behind the mobile menu */
.header-menu-sidebar-bg,
.header-menu-sidebar {
    --bgcolor: var(--adoh-surface);
    --color:   var(--adoh-ink);
}

.footer-top,
.footer-main {
    --bgcolor:  var(--adoh-surface);
    --color:    var(--adoh-ink-2);
    --rowbcolor: var(--adoh-line);
}
.footer-bottom {
    --bgcolor:  var(--adoh-ground);
    --color:    var(--adoh-ink-2);
    --rowbcolor: var(--adoh-line);
}

/* a hairline under the header so it separates from the page without a shadow */
#header-grid.site-header {
    border-bottom: 1px solid var(--adoh-line);
}

.site-title {
    color: var(--adoh-ink);
}
.site-logo .brand small,
.nv-title-tagline-wrap small {
    color: var(--adoh-ink-3);
    letter-spacing: .04em;
}

/* --- the menu ----------------------------------------------------------- */

/* Neve marks the hovered and the current item with a 2px bar that grows out of
   `.wrap::after`. Gold alone says the same thing, and rule 1 of the system is
   that the accent is what marks interaction - so the bar goes and the colour
   stays. `content: none` rather than `display: none`: the pseudo-element is
   never generated, so nothing is left to animate.
   Four classes deep on purpose. Neve declares the bar at (0,2,2) but widens it
   on hover at (0,3,2), and a rule that only clears the declaration it can see
   is one Neve release away from losing - so this sits above both. */
.hfg_header .nav-menu-primary .nav-ul .wrap::after,
.header-menu-sidebar .nav-menu-primary .nav-ul .wrap::after {
    content: none;
}

.builder-item--primary-menu {
    --color:       var(--adoh-ink);
    --hovercolor:  var(--adoh-gold);
    --activecolor: var(--adoh-gold);
    --hovertextcolor: var(--adoh-gold);
}

/* Belt and braces on the decoration itself: the bar above is the Neve one, but
   a plugin or a future core default can still underline a nav link, and a menu
   is the one place where that must not happen. Content links get theirs back in
   section 4.

   Every state, and `--linkdeco` alongside `text-decoration`, because Neve does
   not underline links directly: it declares `a { text-decoration: var(--linkdeco) }`
   once and then sets the property elsewhere - `.entry-content a:not([class])`,
   `.widget_text a:not([class])` and friends all reach the underline that way, at
   (0,2,1). Clearing only `text-decoration` at (0,1,1) would lose to any of them
   the day one starts matching inside the header. */
.site-header a,
.site-header a:hover,
.site-header a:focus,
.site-header a:active,
.header-menu-sidebar a,
.header-menu-sidebar a:hover,
.header-menu-sidebar a:focus,
.site-footer a,
.site-footer a:hover,
.site-footer a:focus {
    --linkdeco: none;
    text-decoration: none;
}
.site-footer a {
    color: var(--adoh-ink-2);
}
.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--adoh-gold);
}

/* Neve's footer credit ("Neve | Powered by WordPress").

   Removed, not restyled. Both WordPress and Neve are GPLv2+, which grants the
   right to modify and to run the modified version; the credit line is output,
   not a licence condition, and the theme directory requires such a link to be
   removable. What must survive is the copyright and licence header inside
   Neve's own source files, and nothing here touches those.

   Done in CSS because the free Neve does not let the Copyright component be
   edited or taken out of the footer builder, and the alternative - editing the
   parent theme - is undone by its next update.

   `.cr` is the builder id of that one component, scoped to the footer so it
   cannot ever match in the header. BOTH footer rows carry a copy of it - the
   desktop one is marked hide-on-mobile, so a selector aimed at a single row
   would leave the credit showing on phones only. !important because the item
   is laid out by Neve's own rules, printed inline in wp_head and therefore
   after this file.

   The footer still says who this belongs to: the left widget carries the
   copyright line. */
.site-footer .builder-item.cr {
    display: none !important;
}

.nav-ul .sub-menu {
    --bgcolor: var(--adoh-surface-2);
    border: 1px solid var(--adoh-line);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* the cart bubble */
.header-cart-icon .cart-count,
.responsive-nav-cart .cart-count {
    background: var(--adoh-gold);
    color: var(--adoh-ground);
}

.site-header :focus-visible,
.site-footer :focus-visible {
    outline: 2px solid var(--adoh-gold);
    outline-offset: 2px;
}


/* ---------------------------------------------------------------------------
   4. The dark surface

   Everything below applies only where functions.php put `adoh-dark` on the
   body: the ordinary pages and posts, not the store and not the docs.
   ------------------------------------------------------------------------ */

body.adoh-dark {
    background-color: var(--adoh-ground);
    color: var(--adoh-ink);
    /* form controls, scrollbars and the UA widgets follow */
    color-scheme: dark;

    /* --- the Neve palette ----------------------------------------------- */
    --nv-site-bg:          var(--adoh-ground);
    --nv-light-bg:         var(--adoh-surface);
    --nv-dark-bg:          var(--adoh-surface-2);
    --nv-text-color:       var(--adoh-ink);
    --nv-text-dark-bg:     var(--adoh-ink);
    --nv-primary-accent:   var(--adoh-gold);
    --nv-secondary-accent: var(--adoh-gold-hi);
    --nv-c-1:              var(--adoh-magic);
    --nv-c-2:              var(--adoh-danger);

    /* --- and the values Neve already derived from it on :root ------------ */
    --wp--preset--color--nv-site-bg:      var(--adoh-ground);
    --wp--preset--color--nv-light-bg:     var(--adoh-surface);
    --wp--preset--color--nv-dark-bg:      var(--adoh-surface-2);
    --wp--preset--color--nv-text-dark-bg: var(--adoh-ink);
    --wp--preset--color--nv-c-1:          var(--adoh-magic);
    /* the homepage sets this one on "THIS IS NOT THE ROBLOX GAME": the Neve
       #be574b reads 3.3:1 on the dark ground, the semantic danger reads 5.2:1 */
    --wp--preset--color--nv-c-2:               var(--adoh-danger);
    --wp--preset--color--neve-text-color:      var(--adoh-ink);
    --wp--preset--color--neve-link-color:      var(--adoh-gold);
    --wp--preset--color--neve-link-hover-color: var(--adoh-gold-hi);

    --primarybtnbg:         var(--adoh-gold);
    --primarybtnhoverbg:    var(--adoh-gold-hi);
    --primarybtncolor:      var(--adoh-ground);
    --primarybtnhovercolor: var(--adoh-ground);
    --secondarybtncolor:      var(--adoh-gold);
    --secondarybtnhovercolor: var(--adoh-gold-hi);
    --primarybtnborderradius:   4px;
    --secondarybtnborderradius: 4px;

    --formfieldbgcolor:     var(--adoh-surface-2);
    --formfieldbordercolor: var(--adoh-line);
    --formfieldcolor:       var(--adoh-ink);
}

/* --- the backdrop, home page only --------------------------------------- *
 *
 * Two fixed layers of gradients, no image and no script. They are the body own
 * pseudo-elements, which works because a background set on <body> is propagated
 * to the canvas and painted behind everything - so the layers at z-index 0 sit
 * above the ground and below the page, with nothing added to the markup.
 *
 * `.wrapper` is the single Neve child of <body> and is lifted to z-index 1 to
 * be that page. Anything a plugin appends to <body> later still paints above
 * the backdrop on document order alone.
 *
 * ONLY ON THE HOME PAGE. Everywhere else the ground is flat, which is the right
 * answer for a wiki article or a checkout: the backdrop is atmosphere, and the
 * home page is the only one with enough uncovered ground to show any.
 *
 * THE NUMBERS, because they are not readable off the values. The layers are
 * 150vh tall and start 25vh above the viewport, so the strip you can actually
 * see is 16.7% to 83.3% OF THE ELEMENT, and every stop below is placed inside
 * that band. The first version of this was invisible for exactly that reason:
 * its warm glow died at 21vh from the top of the screen, which is behind the
 * header, and at mid-screen its ramp resolved to the page ground exactly - so
 * the whole thing contributed nothing where the page actually shows ground.
 *
 * The parallax is the scroll-driven-animation form: the far field drifts a
 * little, the near field a little less. Where `animation-timeline` is
 * unsupported the layers simply stay put, which is the old
 * background-attachment: fixed effect and perfectly presentable - so there is
 * no fallback to write.
 */

body.adoh-dark.adoh-front-page > .wrapper {
    position: relative;
    z-index: 1;
}

body.adoh-dark.adoh-front-page::before,
body.adoh-dark.adoh-front-page::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    /* the bleed has to cover the largest drift below, or the edge of the layer
       scrolls into view at the bottom of a long page */
    top: -25vh;
    bottom: -25vh;
    z-index: 0;
    pointer-events: none;
}

/* Far field: the dawn. The warm centre now sits at 30% of the element, which is
   20vh down the screen, and reaches to 88vh - so it crosses the whole viewport
   instead of hiding under the header. */
body.adoh-dark.adoh-front-page::before {
    background:
        radial-gradient(140% 70% at 50% 30%, rgba(201, 164, 100, .095), transparent 65%),
        radial-gradient( 90% 52% at 12% 38%, rgba(138, 111, 62, .07),   transparent 70%),
        radial-gradient(100% 55% at 88% 62%, rgba(127, 178, 212, .035), transparent 72%),
        linear-gradient(180deg,
            #1A1510  0%,
            #1E1913 17%,   /* the top of the viewport */
            #15120E 45%,
            #0E0C09 83%,   /* the bottom of it */
            #0C0A08 100%);
}

/* Near field: a little tooth, then the vignette. The vignette is sized to the
   VIEWPORT and not to the element - at 95% of a 150vh box its edge never
   reached the screen at all, which is why the old one did nothing. */
body.adoh-dark.adoh-front-page::after {
    background:
        repeating-linear-gradient( 43deg, rgba(239, 231, 214, .015) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(-37deg, rgba(0, 0, 0, .045)       0 1px, transparent 1px 4px),
        radial-gradient(78% 62% at 50% 50%, transparent 38%, rgba(0, 0, 0, .42) 100%);
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        body.adoh-dark.adoh-front-page::before,
        body.adoh-dark.adoh-front-page::after {
            will-change: transform;
            animation-timing-function: linear;
            animation-timeline: scroll(root block);
        }
        body.adoh-dark.adoh-front-page::before { animation-name: adoh-drift-far; }
        body.adoh-dark.adoh-front-page::after  { animation-name: adoh-drift-near; }
    }
}

/* The near layer used to drift 18vh. That was harmless while it was invisible;
   now that the vignette can be seen, moving it that far slides the dark frame
   up the screen as you scroll, which reads as the window moving rather than the
   page. The number was only ever right for a layer nobody could see. */
@keyframes adoh-drift-far  { to { transform: translate3d(0, -7vh, 0) scale(1.03); } }
@keyframes adoh-drift-near { to { transform: translate3d(0, -4vh, 0); } }

/* --- content ------------------------------------------------------------ */

/* Long-form text takes the prose face; the interface around it does not. */
body.adoh-dark .nv-content-wrap p,
body.adoh-dark .nv-content-wrap li,
body.adoh-dark .nv-content-wrap blockquote {
    font-family: var(--adoh-ff-prose);
    font-size: 1.05em;
    line-height: 1.7;
}

/* Hierarchy comes from the typeface, not from colour: headings are ink, and the
   accent is left to mean "you can click this". */
body.adoh-dark h1,
body.adoh-dark h2,
body.adoh-dark h3,
body.adoh-dark h4,
body.adoh-dark h5,
body.adoh-dark h6 {
    color: var(--adoh-ink);
}

/* The underline the menu gave up. In running text a link has to be findable
   without relying on colour alone, which is rule 2 of the system; in a menu,
   position already says it. Buttons are links too and are excluded. */
body.adoh-dark .nv-content-wrap a:not(.wp-element-button):not(.wp-block-button__link),
body.adoh-dark .entry-content a:not(.wp-element-button):not(.wp-block-button__link) {
    color: var(--adoh-gold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--adoh-gold-dim);
    text-underline-offset: .18em;
}
body.adoh-dark .nv-content-wrap a:not(.wp-element-button):not(.wp-block-button__link):hover,
body.adoh-dark .entry-content a:not(.wp-element-button):not(.wp-block-button__link):hover {
    color: var(--adoh-gold-hi);
    text-decoration-color: var(--adoh-gold-hi);
}
/* a link that wraps nothing but an image is a thumbnail, not a phrase */
body.adoh-dark .nv-content-wrap figure a,
body.adoh-dark .entry-content figure a {
    text-decoration: none;
}

/* A button block with no colour of its own falls to the WordPress core default,
   a grey that belongs to no palette here - core declares it as
   `:root :where(.wp-element-button, .wp-block-button__link)`, so any real class
   chain outranks it. A button the editor HAS coloured is content and is left
   alone, which is what `.has-background` and `.has-text-color` mark. */
body.adoh-dark .wp-block-button__link:not(.has-background) {
    background-color: var(--adoh-gold);
}
body.adoh-dark .wp-block-button__link:not(.has-text-color) {
    color: var(--adoh-ground);
}
body.adoh-dark .wp-block-button__link:not(.has-background):hover {
    background-color: var(--adoh-gold-hi);
}
body.adoh-dark .is-style-outline .wp-block-button__link:not(.has-background) {
    background-color: transparent;
    border-color: var(--adoh-gold);
    color: var(--adoh-gold);
}

/* Editor content that was coloured back when the page was light.

   The donations page has three columns carrying `color:#000000` as an INLINE
   style. The block around them takes its background from a Neve property, so it
   followed the ground into the dark and left black text sitting on it.

   An inline style can only be answered with !important, so this is scoped as
   tightly as it goes: a literal black, on an element that declares a text
   colour. Everything the editor coloured on purpose - the golds and the oranges
   on that same page - is left alone, because none of it is black.

   The real fix is clearing the colour in the editor so it inherits like the
   rest of the page. This only makes it readable in the meantime, and it is
   deliberately narrow so it does not quietly become a licence to keep setting
   black text.

   The second rule is the catch: those columns hold headings that paint their
   own light background - an orange, a blue, a red - and black was right on
   those. Flipping the column alone would have put pale text on them. Only
   elements with a background, and only inside a column this rule just changed. */
body.adoh-dark .has-text-color[style*="color:#000000"],
body.adoh-dark .has-text-color[style*="color:#000;"],
body.adoh-dark .has-text-color[style*="color: #000000"] {
    color: var(--adoh-ink) !important;
}
body.adoh-dark .has-text-color[style*="color:#000000"] .has-background,
body.adoh-dark .has-text-color[style*="color:#000;"] .has-background,
body.adoh-dark .has-text-color[style*="color: #000000"] .has-background {
    color: var(--adoh-ground);
}

body.adoh-dark :focus-visible {
    outline: 2px solid var(--adoh-gold);
    outline-offset: 2px;
}

body.adoh-dark ::selection {
    background: var(--adoh-gold-dim);
    color: var(--adoh-ink);
}

body.adoh-dark hr,
body.adoh-dark .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--adoh-line);
    color: var(--adoh-line);
}

body.adoh-dark blockquote {
    border-left: 2px solid var(--adoh-gold-dim);
    background: var(--adoh-surface);
    color: var(--adoh-ink-2);
    padding: 12px 16px;
    border-radius: 4px;
}

body.adoh-dark code,
body.adoh-dark pre,
body.adoh-dark kbd {
    background: var(--adoh-surface-2);
    border: 1px solid var(--adoh-line);
    border-radius: 4px;
    color: var(--adoh-ink);
}

body.adoh-dark table,
body.adoh-dark th,
body.adoh-dark td {
    border-color: var(--adoh-line);
}
body.adoh-dark th {
    color: var(--adoh-ink-3);
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .06em;
}

body.adoh-dark input,
body.adoh-dark textarea,
body.adoh-dark select {
    background: var(--adoh-surface-2);
    border-color: var(--adoh-line);
    color: var(--adoh-ink);
}
/* A select with a background of its own stops looking like a select: the native
   arrow is drawn by the platform and gets no say in our colours, and on this
   ground it disappears. So the appearance is dropped and the chevron is ours -
   an inline SVG, because an external one is another request that can fail and
   leave the control mute again. `background-image` alone, declared after the
   shorthand above, which would otherwise have cleared it. */
body.adoh-dark select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23C9A464' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: .7rem;
    padding-right: 2.25rem;
}
body.adoh-dark ::placeholder {
    color: var(--adoh-ink-3);
    opacity: 1;
}

/* Cards and boxed areas Neve paints with its light background. */
body.adoh-dark .nv-is-boxed,
body.adoh-dark .widget,
body.adoh-dark .nv-comments-wrap,
body.adoh-dark .comment-respond {
    background: var(--adoh-surface);
    border: 1px solid var(--adoh-line);
    border-radius: 8px;
}
/* Only the widgets: the others already carry a --padding from Neve, and adding
   to it would double the inset. Without this a widget had a border and nothing
   between it and its contents - which also threw a bulleted list clean outside
   the card, since markers sit outside the content box. */
body.adoh-dark .widget {
    padding: 1.1rem 1.25rem;
}
/* Widgets in the chrome are chrome, not cards: they sit on the header or footer
   ground. The header cart dropdown is a widget inside a widget, so leaving this
   out gives it a border around a border. */
body.adoh-dark .site-header .widget,
body.adoh-dark .site-footer .widget {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

body.adoh-dark .scroll-to-top {
    --bgcolor: var(--adoh-surface-2);
    --hoverbgcolor: var(--adoh-surface);
    --color: var(--adoh-gold);
    --hovercolor: var(--adoh-gold-hi);
    border: 1px solid var(--adoh-line);
}


/* ---------------------------------------------------------------------------
   5. The front page (template-adoh-front.php / inc/front-page.php)

   Mobile first, and it does not use Neve's .container: the sections run
   edge to edge and each one holds its own .adoh-wrap, which is what lets the
   hero bleed while the prose stays at a readable measure.
   ------------------------------------------------------------------------ */

.adoh-front {
    --adoh-measure: 70rem;
    --adoh-gutter: clamp(1rem, 5vw, 2rem);
}

.adoh-wrap {
    max-width: var(--adoh-measure);
    margin-inline: auto;
    padding-inline: var(--adoh-gutter);
}
/* Edge to edge, keeping only the side gutter - the picture strip and the three
   blocks both want the whole width. Nothing inside them is a long line of prose,
   and what could become one is given a measure of its own where it lives. */
.adoh-wrap-wide {
    max-width: none;
    padding-inline: var(--adoh-gutter);
}

.adoh-section {
    padding-block: clamp(2.5rem, 7vw, 4rem);
}

.adoh-front h2 {
    margin: 0 0 .35rem;
    font-size: clamp(1.5rem, 4.5vw, 2rem);
}
.adoh-front h3 {
    margin: 0 0 .4rem;
    font-size: 1.05rem;
}
.adoh-section-lead {
    margin: 0 0 1.6rem;
    color: var(--adoh-ink-2);
    max-width: 46rem;
}
/* Text for screen readers only. Not display:none, which would take it out of
   the accessibility tree as well and defeat the point. */
.adoh-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- buttons ------------------------------------------------------------ */

.adoh-btn {
    display: inline-block;
    padding: .7rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.adoh-btn-primary {
    background: var(--adoh-gold);
    color: var(--adoh-ground);
}
.adoh-btn-primary:hover,
.adoh-btn-primary:focus-visible {
    background: var(--adoh-gold-hi);
    color: var(--adoh-ground);
}
/* gold-dim is a border colour in the system, which is exactly what it is doing
   here - the text on a ghost button is the full-strength accent */
.adoh-btn-ghost {
    border-color: var(--adoh-gold-dim);
    color: var(--adoh-gold);
}
.adoh-btn-ghost:hover,
.adoh-btn-ghost:focus-visible {
    border-color: var(--adoh-gold);
    background: var(--adoh-hover);
    color: var(--adoh-gold-hi);
}
.adoh-cta-row,
.adoh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.4rem 0 0;
}

/* --- hero --------------------------------------------------------------- */

/* The art is 2912x1664 (1.75:1) and `cover` has to fill the width, so on any
   normal monitor showing the whole frame would need a hero taller than the
   screen. Height is the only lever there is, and this is the compromise: 68vh
   was showing roughly two thirds of the frame on a 1080px screen, 94vh shows
   most of it and still leaves the next section peeking. The cap stops it
   running away on a very tall window. */
.adoh-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: clamp(34rem, 94vh, 64rem);
    overflow: hidden;
}
.adoh-hero-art {
    position: absolute;
    inset: 0;
}
.adoh-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 49% 19%;
}
/* The scrim does two jobs: it holds the text contrast, and it lands the bottom
   of the image on the page ground so the hero ends without an edge.
   One vertical gradient and nothing else. What read as dusk rather than dawn
   was partly the second gradient this used to carry - a heavy wash coming in
   from the left, which is late-day side light - and partly that the picture was
   veiled evenly from top to bottom. Now the darkness is a band at the top,
   where the text needs it, the middle is left nearly clear, and only the last
   stretch closes onto the page ground. */
.adoh-hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(18, 16, 13, .82)  0%,
        rgba(18, 16, 13, .70) 14%,
        rgba(18, 16, 13, .52) 28%,
        rgba(18, 16, 13, .34) 42%,
        rgba(18, 16, 13, .20) 56%,
        rgba(18, 16, 13, .24) 66%,
        rgba(18, 16, 13, .38) 76%,
        rgba(18, 16, 13, .58) 85%,
        rgba(18, 16, 13, .80) 93%,
        rgba(18, 16, 13, .94) 97%,
        var(--adoh-ground)   100%);
}

/* The dawn sweep.

   The sheet is 2.2 hero-heights tall and starts at the top of the hero, painted
   solid down its first half and then fading out over the whole second half. It
   slides up by its own height, so what crosses the picture is that long fade -
   a full hero height of it - and the image clears from the bottom.

   The first version had the fade at the TOP of the sheet, which meant the edge
   actually travelling across the hero was the sheet's own bottom edge, where
   the element simply stops. That is a hard line, and no amount of duration
   hides it.

   The stops between 50% and 100% are an eased ramp rather than an even one: a
   straight alpha line leaves a visible kink at each end, where the rate of
   change jumps. The opacity fade on the last stretch is belt and braces - by
   the time the sheet leaves, it is already transparent.

   The end state is the resting state, so with motion turned off, or before the
   animation has run, the hero is simply the finished picture. */
.adoh-hero-dawn {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 220%;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(18, 16, 13, 1)    0%,
        rgba(18, 16, 13, 1)   50%,
        rgba(18, 16, 13, .97) 56%,
        rgba(18, 16, 13, .92) 61%,
        rgba(18, 16, 13, .84) 66%,
        rgba(18, 16, 13, .72) 71%,
        rgba(18, 16, 13, .58) 76%,
        rgba(18, 16, 13, .43) 81%,
        rgba(18, 16, 13, .28) 86%,
        rgba(18, 16, 13, .15) 91%,
        rgba(18, 16, 13, .05) 96%,
        rgba(18, 16, 13, 0)  100%);
    transform: translateY(-100%);
    opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .adoh-hero-dawn {
        animation: adoh-dawn 3.9s cubic-bezier(.25, .55, .25, 1) both;
    }
}
@keyframes adoh-dawn {
    0%   { transform: translateY(0);     opacity: 1; }
    70%  {                               opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
}

/* Centred and high: the picture is landscape, so its subject is in the middle
   band, and text sitting across the bottom was covering it. */
.adoh-hero-body {
    position: relative;
    max-width: var(--adoh-measure);
    margin-inline: auto;
    padding-inline: var(--adoh-gutter);
    /* The top figure was 2.5/9vh/5.5rem before the status badge existed. The badge adds a row at
       the bottom of this block, so the block starts higher instead of growing downwards - which
       keeps the group where it was against the picture, and keeps it inside the top band of the
       scrim, the only part dark enough to carry text. */
    padding-block: clamp(1.5rem, 6vh, 3.5rem) clamp(2rem, 6vw, 3.5rem);
    width: 100%;
    text-align: center;
}
/* The lead is the first thing in the hero now that the name and the strapline
   have gone back to being the header's alone, so it carries the weight the
   title used to - a size up, and a measure that still breaks into three or four
   lines rather than one long one. */
.adoh-hero-lead {
    margin: 0 auto;
    max-width: 34rem;
    font-family: var(--adoh-ff-prose);
    font-size: clamp(1.15rem, 3vw, 1.6rem);
    line-height: 1.5;
    color: var(--adoh-ink);
}
.adoh-hero-actions {
    justify-content: center;
}

/* The live server badge, under the buttons. The pill brings its own surface,
   border and colours from the plugin's stylesheet; all this does is centre it
   and give it air.

   The age of the reading is hidden WHILE THE STATE IS ONLINE and shown in every
   other state, which is not an inconsistency: "Checked just now" next to a
   confident green line is noise, while "Checked 40 min ago" is the entire
   explanation of a line that says offline or unknown. The plugin always prints
   it; the decision to hide it belongs to this page, not to the badge. */
.adoh-hero-status {
    display: flex;
    justify-content: center;
    /* Deliberately more than the 1.4rem between the lead and the buttons: this is a different
       register - a reading, not a thing to press - and at an equal gap it read as a third button
       that had lost its box. */
    margin-top: 2rem;
}
.adoh-hero-status .adoh-status--online .adoh-status__age {
    display: none;
}

/* --- gallery and presentation ------------------------------------------- */

.adoh-gallery {
    padding-block: clamp(2rem, 6vw, 3rem);
}

/* The one place on the page where more than two sentences are read in a row, so
   it keeps a narrow measure however wide the two sections around it become, and
   sits in the middle of its own band. */
.adoh-intro-text {
    max-width: 44rem;
    margin-inline: auto;
    padding-inline: var(--adoh-gutter);
    text-align: center;
}

/* The carousel is a scroll-snap strip. No slideshow, no timer, no library: a
   swipe, a trackpad or the scrollbar all work with the script switched off, and
   the two buttons are the enhancement it adds - which is why they arrive
   `hidden` and the [hidden] rule outranks the display below. */
.adoh-carousel {
    position: relative;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.adoh-carousel-track {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0 0 .75rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--adoh-line-strong) transparent;
}
.adoh-slide {
    flex: 0 0 min(100%, 40rem);
    scroll-snap-align: center;
}
/* a fixed box with object-fit, so twelve pictures of unknown proportions cannot
   make the strip jump as they load */
.adoh-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--adoh-line);
    border-radius: 8px;
}

.adoh-carousel-btn {
    position: absolute;
    top: calc(50% - 1.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--adoh-gold-dim);
    border-radius: 999px;
    background: color-mix(in srgb, var(--adoh-ground) 82%, transparent);
    color: var(--adoh-gold);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.adoh-carousel-btn:hover:not(:disabled) {
    border-color: var(--adoh-gold);
    background: var(--adoh-surface);
    color: var(--adoh-gold-hi);
}
.adoh-carousel-btn:disabled {
    opacity: .3;
    cursor: default;
}
.adoh-carousel-prev { left: .5rem; }
.adoh-carousel-next { right: .5rem; }
/* (0,2,0), so it beats the display above whichever order they end up in */
.adoh-carousel-btn[hidden] {
    display: none;
}
/* a thumb-width screen scrolls by swiping; the buttons would only sit on top of
   the picture */
@media (max-width: 40rem) {
    .adoh-carousel-btn { display: none; }
}

.adoh-shot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--adoh-line);
    border-radius: 8px;
}
.adoh-figure {
    margin: 0;
}

.adoh-intro-text p {
    font-family: var(--adoh-ff-prose);
    line-height: 1.7;
}
/* the section opens straight on the notice now that the heading is gone */
.adoh-intro-text > :first-child {
    margin-top: 0;
}
/* running prose, so a link carries an underline as well as the colour - the
   same reason the page content does in section 4 */
.adoh-intro-text a {
    color: var(--adoh-gold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--adoh-gold-dim);
    text-underline-offset: .18em;
}
.adoh-intro-text a:hover {
    color: var(--adoh-gold-hi);
    text-decoration-color: var(--adoh-gold-hi);
}

/* The one thing on this page people get wrong before they read anything else,
   so it is a notice and not a sentence in a paragraph. Danger is the semantic
   role, and the words carry the meaning too - colour is never the only signal. */
.adoh-front .adoh-notice {
    border: 1px solid color-mix(in srgb, var(--adoh-danger) 45%, transparent);
    background: var(--adoh-surface);
    border-radius: 8px;
    padding: .85rem 1.1rem;
    margin-bottom: 1.6rem;
    /* the UI face, not the prose one the paragraphs around it take */
    font-family: var(--adoh-ff-ui);
}
.adoh-front .adoh-notice strong {
    color: var(--adoh-danger);
}

/* --- start here: three blocks ------------------------------------------- */

/* Three across when there is room, stacked on a phone. `stretch` is what keeps
   them the same height when one has three steps in it and another has a
   picture - otherwise the row reads as three unrelated boxes. */
.adoh-quick-grid {
    display: grid;
    gap: 1rem;
    align-items: stretch;
}
@media (min-width: 60rem) {
    .adoh-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.adoh-block {
    display: flex;
    flex-direction: column;
    background: var(--adoh-surface);
    border: 1px solid var(--adoh-line);
    border-radius: 8px;
    padding: clamp(1.1rem, 3vw, 1.6rem);
}
.adoh-block > p {
    max-width: 40rem;
    color: var(--adoh-ink-2);
    line-height: 1.6;
}
.adoh-step p {
    max-width: 40rem;
}
.adoh-block .adoh-figure {
    margin: 0 0 1rem;
}
/* the call to action sits on the floor of the block whatever is above it, so
   the three buttons line up across the row */
.adoh-block-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: auto 0 0;
    padding-top: 1.1rem;
}

/* The steps are a list inside one block now, not a row of cards of their own -
   so no card chrome, just a rule between them. */
.adoh-steps {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.adoh-step + .adoh-step {
    border-top: 1px solid var(--adoh-line);
    padding-top: 1rem;
}
.adoh-step h4 {
    margin: 0 0 .35rem;
    font-family: var(--adoh-ff-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--adoh-ink);
}
.adoh-step-n {
    float: left;
    margin-right: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--adoh-gold-dim);
    border-radius: 999px;
    color: var(--adoh-gold);
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.adoh-step p {
    margin: 0 0 .6rem;
    color: var(--adoh-ink-2);
    font-size: .94rem;
    line-height: 1.55;
}
.adoh-step-links {
    margin: 0;
}
.adoh-step-links a {
    color: var(--adoh-gold);
    text-decoration: none;
}
.adoh-step-links a:hover {
    color: var(--adoh-gold-hi);
    text-decoration: underline;
    text-underline-offset: .18em;
}
/* the separator belongs to the list, not to the markup - so adding a link never
   means remembering to type a middot */
.adoh-step-links a + a::before {
    content: " \00b7 ";
    color: var(--adoh-ink-3);
}

/* --- patch notes -------------------------------------------------------- */

.adoh-notes {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--adoh-line);
}
.adoh-note {
    border-bottom: 1px solid var(--adoh-line);
    padding: .9rem .75rem;
    border-radius: 4px;
}
.adoh-note:hover {
    background: var(--adoh-hover);
}
.adoh-note-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .9rem;
    color: inherit;
    text-decoration: none;
}
.adoh-note-date {
    flex: 0 0 8.5rem;
    color: var(--adoh-ink-3);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.adoh-note-title {
    font-weight: 600;
    color: var(--adoh-ink);
}
.adoh-note-link:hover .adoh-note-title {
    color: var(--adoh-gold);
}
.adoh-note-topics {
    margin: .15rem 0 0;
    color: var(--adoh-ink-2);
    font-size: .88rem;
}
@media (min-width: 40rem) {
    .adoh-note-topics { margin-left: 9.4rem; }
}
.adoh-note-more {
    color: var(--adoh-ink-3);
}

/* --- community ---------------------------------------------------------- */

.adoh-discord iframe {
    display: block;
    width: 100%;
    /* it needs about 300px to lay itself out, and a third of a wide page is
       roughly 350 - below that the column stacks and there is room again */
    min-width: 0;
    height: 26rem;
    border: 1px solid var(--adoh-line);
    border-radius: 8px;
}


/* ---------------------------------------------------------------------------
   6. WooCommerce

   Most of the shop needs nothing here. Neve already re-points the Woo chrome at
   its own `--nv-*` properties - product titles, prices, the tabs, the checkout
   payment box, the cart totals - and section 4 remaps those, so they follow the
   ground by themselves.

   What is left is the places Woo writes a colour literally, where no variable
   can reach it. Those are enumerated below, each with the value being replaced,
   because the list is only auditable if it says what it is fixing. Same trap as
   Neve's: Woo declares `--wc-*` ON :root, so anything it derived there is
   already computed - but every one of these is read at the element, which is
   why overriding the properties works at all.
   ------------------------------------------------------------------------ */

body.adoh-dark {
    --woocommerce:        var(--adoh-gold);
    --wc-primary:         var(--adoh-gold);
    --wc-primary-text:    var(--adoh-ground);
    --wc-secondary:       var(--adoh-surface-2);
    --wc-secondary-text:  var(--adoh-ink);
    --wc-highlight:       var(--adoh-gold);
    /* Woo's own spelling, typo included - renaming it here would just miss */
    --wc-highligh-text:   var(--adoh-ground);
    --wc-content-bg:      var(--adoh-surface);
    --wc-subtext:         var(--adoh-ink-2);
    --wc-form-border-color: var(--adoh-line);
    --wc-green:           var(--adoh-success);
    --wc-red:             var(--adoh-danger);
    --wc-orange:          var(--adoh-warning);
    --wc-blue:            var(--adoh-info);
    --wc-destructive:     var(--adoh-danger);
}

/* The three notices: #f6f5f8 on #515151 with a #720eec rule on top, none of it
   through a variable. They also carried no meaning in the colour beyond the
   purple, so each takes its own semantic one - and every one of them still
   says in words which it is. */
body.adoh-dark .woocommerce-error,
body.adoh-dark .woocommerce-info,
body.adoh-dark .woocommerce-message {
    background-color: var(--adoh-surface);
    color: var(--adoh-ink);
    border-top: 3px solid var(--adoh-info);
    border-radius: 0 0 8px 8px;
}
body.adoh-dark .woocommerce-message { border-top-color: var(--adoh-success); }
body.adoh-dark .woocommerce-error   { border-top-color: var(--adoh-danger); }

/* The block-editor notice banners are Neve's, and it hands them --nv-c-1 for
   success and the accent for info with `color: #fff` on top. Gold under white
   is 1.9:1, and a purple success banner means nothing - so both the fill and
   the text on it are set here. */
body.adoh-dark .neve-main .wc-block-components-notice-banner.is-success {
    background-color: var(--adoh-success);
    color: var(--adoh-ground);
}
body.adoh-dark .neve-main .wc-block-components-notice-banner.is-error {
    background-color: var(--adoh-danger);
    color: var(--adoh-ground);
}
body.adoh-dark .neve-main .wc-block-components-notice-banner.is-info {
    background-color: var(--adoh-info);
    color: var(--adoh-ground);
}
body.adoh-dark .neve-main .wc-block-components-notice-banner svg {
    background-color: var(--adoh-ground);
}
body.adoh-dark .neve-main .wc-block-components-notice-banner.is-success svg { fill: var(--adoh-success); }
body.adoh-dark .neve-main .wc-block-components-notice-banner.is-error   svg { fill: var(--adoh-danger); }
body.adoh-dark .neve-main .wc-block-components-notice-banner.is-info    svg { fill: var(--adoh-info); }

/* login, register and the coupon form: a #cfc8d8 box */
body.adoh-dark .woocommerce form.login,
body.adoh-dark .woocommerce form.register,
body.adoh-dark .woocommerce form.checkout_coupon {
    background: var(--adoh-surface);
    border: 1px solid var(--adoh-line);
    border-radius: 8px;
}
body.adoh-dark .woocommerce form .form-row label,
body.adoh-dark .woocommerce-form__label {
    color: var(--adoh-ink-2);
}
/* the coupon field on the cart carries its own #cfc8d8 border */
body.adoh-dark .woocommerce-cart table.cart td.actions .coupon .input-text {
    border-color: var(--adoh-line);
}

/* the empty stars, #cfc8d8 */
body.adoh-dark .woocommerce .star-rating::before {
    color: var(--adoh-line-strong);
}

/* The tab strip: Neve flattens the tabs themselves but leaves Woo's two corner
   pieces and the rule under them, which are #cfc8d8 squares with an #e9e6ed
   shadow - two pale dots hanging off each tab. They are drawn for a tab that
   has a background; this one has none, so they are not generated at all. */
body.adoh-dark .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.adoh-dark .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    content: none;
}
body.adoh-dark .woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-bottom-color: var(--adoh-line);
}

/* the dashed separators between order details, #cfc8d8 */
body.adoh-dark .woocommerce ul.order_details li {
    border-right-color: var(--adoh-line);
}

/* the price filter slider, #7f54b3 on a #35224c track */
body.adoh-dark .woocommerce .widget_price_filter .ui-slider .ui-slider-range,
body.adoh-dark .woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    background-color: var(--adoh-gold);
}
body.adoh-dark .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
    background-color: var(--adoh-surface-2);
}

/* The payment box keeps a #dcd7e2 triangle pointing at the chosen method, drawn
   as a border on a pseudo-element - Neve recolours the box and not the arrow,
   so on a dark panel it is a pale wedge hanging off the top. */
body.adoh-dark #add_payment_method #payment div.payment_box::before,
body.adoh-dark .woocommerce-cart #payment div.payment_box::before,
body.adoh-dark .woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--adoh-surface-2);
}
body.adoh-dark .woocommerce-checkout #payment div.payment_box {
    background: var(--adoh-surface-2);
    color: var(--adoh-ink);
}

/* A sale badge is an attention mark, not something to click, so it does not get
   the accent - Neve gives it --nv-c-1, which on this palette is the colour that
   means magic. */
body.adoh-dark .woocommerce span.onsale {
    background-color: var(--adoh-warning);
    color: var(--adoh-ground);
}

/* --- the shop sidebar --------------------------------------------------- *
 *
 * Two block widgets, and both arrived with WordPress defaults that were drawn
 * for a wide light column rather than a narrow dark one.
 */

/* The search widget: a label, then a field and a button that were each sized by
   their own defaults and ended up at different heights, in a box with no room.
   One padding and one font size for both, so the row reads as one control. */
body.adoh-dark .widget .wp-block-search__label {
    display: block;
    margin-bottom: .45rem;
    color: var(--adoh-ink-3);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
body.adoh-dark .widget .wp-block-search__inside-wrapper {
    gap: .5rem;
}
body.adoh-dark .widget .wp-block-search__input,
body.adoh-dark .widget .wp-block-search__button {
    padding: .55rem .85rem;
    font-size: .95rem;
    line-height: 1.3;
    border-radius: 4px;
}
body.adoh-dark .widget .wp-block-search__button {
    flex: 0 0 auto;
    padding-inline: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The category list: discs sitting outside the card, and the count floating
   after the name. The markup already separates the name from its count, so the
   list can be a row each - name on the left, count on the right - which is what
   the numbers are for. */
body.adoh-dark .wc-block-product-categories-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.adoh-dark .wc-block-product-categories-list-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem 0;
}
body.adoh-dark .wc-block-product-categories-list-item + .wc-block-product-categories-list-item {
    border-top: 1px solid var(--adoh-line);
}
body.adoh-dark .wc-block-product-categories-list-item-count {
    color: var(--adoh-ink-3);
    font-size: .85em;
    font-variant-numeric: tabular-nums;
}
/* a nested depth keeps its indent, and only there */
body.adoh-dark .wc-block-product-categories-list--depth-0 .wc-block-product-categories-list {
    margin-left: 1rem;
}

/* The sorting form sits above the grid on its own; left as a select rather than
   made to look like a button, because that is what it is. */
body.adoh-dark .woocommerce .woocommerce-ordering select {
    max-width: 100%;
}

/* Woo draws its own table borders from `color-mix(currentColor 20%)`, which
   follows the ink and needs nothing - but the cart totals are Neve's, and it
   rules them with a 2px line of the full text colour. */
body.adoh-dark .woocommerce .cart_totals td,
body.adoh-dark .woocommerce .cart_totals th {
    border-bottom-color: var(--adoh-line-strong);
}

/* ---------------------------------------------------------------------------
   7. Print

   Rule 4 of the system: the dark ground is a screen decision, and what prints
   flips through the tokens rather than through a second stylesheet. The
   backdrop is dropped outright - it is atmosphere, and atmosphere costs toner.
   ------------------------------------------------------------------------ */

@media print {
    body.adoh-dark {
        background: #FFFFFF;
        color: #2A2118;
        color-scheme: light;

        --adoh-ground:      #FFFFFF;
        --adoh-surface:     #F7F3EA;
        --adoh-surface-2:   #EFE9DC;
        --adoh-line:        #CFC6B4;
        --adoh-line-strong: #B3A794;
        --adoh-ink:         #2A2118;
        --adoh-ink-2:       #554B3C;
        --adoh-ink-3:       #6E6454;
        --adoh-gold:        #7A5F2C;
        --adoh-gold-hi:     #5E4920;
        --adoh-gold-dim:    #9A8455;
    }
    body.adoh-dark::before,
    body.adoh-dark::after {
        content: none;
    }
    .site-header,
    .site-footer,
    .scroll-to-top {
        display: none;
    }
}/* betterdocs-searchbox-w3v9npy Starts */ .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper { margin-top: 28px; margin-right: 0px; margin-left: 0px; margin-bottom: 28px; background-image: url(https://www.adawnofheroes.org/wp-content/uploads/2025/04/5.png); background-size: cover; background-position: 0px 337px; background-repeat: repeat; background-color: #f7f7f7; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search { padding: 25px; transition: background 0.5s; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search:hover { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform { background: #ffffff; color:#595959; transition: border 0.5s, border-radius 0.5s, box-shadow 0.5s ; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform:hover{ } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform .betterdocs-search-field::placeholder, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform .betterdocs-search-field::placeholder { color:#595959; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-searchform, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform{ padding-top: 22px; padding-right: 15px; padding-left: 15px; padding-bottom: 22px; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-searchform .betterdocs-search-field, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform .betterdocs-search-field{ font-size: 14px; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-searchform svg.docs-search-icon, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform svg.docs-search-icon { width:30px; height: auto; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-icon path, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg path, .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-searchform svg.docs-search-icon path, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform svg.docs-search-icon path { fill: #444b54; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .docs-search-close .close-line, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .docs-search-close .close-line { fill: #ff697b; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .docs-search-loader, .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .docs-search-close .close-border, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .docs-search-loader, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .docs-search-close .close-border { fill: #444b54; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result { width:100%; max-width:100%; background-color: #ffffff; transition: border 0.5s, border-radius 0.5s, box-shadow 0.5s , background 0.5s; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result:hover{ } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li { transition: border 0.5s, border-radius 0.5s, box-shadow 0.5s ; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li:hover { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li:hover a span, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li:hover a span{ } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li a span, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li a span { padding: 10px; color: #444b54; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 { background-image: url(https://www.adawnofheroes.org/wp-content/uploads/2025/04/5.png); background-size: cover; background-position: 0px 337px; background-repeat: repeat; background-color: #f7f7f7; padding: 25px; margin-top: 28px; margin-right: 0px; margin-left: 0px; margin-bottom: 28px; transition: background 0.5s; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-sidebar .betterdocs-live-search { background-image: url(https://www.adawnofheroes.org/wp-content/uploads/2025/04/5.png); background-size: cover; background-position: 0px 337px; background-repeat: repeat; background-color: #f7f7f7; transition: background 0.5s; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1:hover, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search:hover, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-sidebar .betterdocs-live-search:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform { background-color:#FFFFFF; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-input, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .search-input-wrapper .search-input{ color:#667085; font-size: 14px; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform { padding-top: 22px; padding-right: 15px; padding-left: 15px; padding-bottom: 22px; transition: border 0.5s, border-radius 0.5s, box-shadow 0.5s ; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar:hover, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform:hover { } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header svg g path{ fill:rgb(152, 162, 179); } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field { color:#200505; font-size: 16px; ; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field::placeholder { color:#475479; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .betterdocs-form-select .css-1jqq78o-placeholder{ color:rgb(128, 128, 128); font-size: 15px; ; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main h4{ color:#1D2939; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub h5{ color:#475467; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header { background-color: #F9FAFB; transition:background 0.5s; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header:hover { } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span:not(.tab-icon){ font-size: 14px; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span svg{ width:21px; height:auto; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items{ transition: border 0.5s, border-radius 0.5s, box-shadow 0.5s ; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main h4{ font-size: 16px; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .search-button { color:#fff; font-size: 16px; background-color: #667085; transition:background 0.5s; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button:hover, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .search-button:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-icon, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg { width:auto; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg path { fill: #444b54; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main svg{ width:21px; height:auto; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .css-19bb58m{ font-size: 14px; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub svg{ width:17px; height:auto; } /* AI Search Suggestions Styles */ /* SearchModal Layout 2 & 3 Width and Position */ .betterdocs-searchbox-w3v9npy { text-align: left; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-sidebar { width: 100%; max-width: 100%; display: inline-block; text-align: left; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform select{ font-size: 14px; ; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform .betterdocs-search-category{ color:#595959; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform .search-submit { font-size: 18px; color:#ffffff; background-color:#24cc8f; padding-top: 15px; padding-right: 25px; padding-left: 25px; padding-bottom: 15px; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform .search-submit:hover { background-color:#24cc8f; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-popular-search-keyword{ margin-top: 24px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-popular-search-keyword .popular-keyword{ color:#99a3ca; padding-top: 8px; padding-right: 25px; padding-left: 25px; padding-bottom: 8px; font-size: 14px; background-color:#fff; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-popular-search-keyword .popular-search-title { color:#8588a6; font-size: 14px; }  @media(max-width: 1024px){ .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper { background-attachment: scroll; } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search:hover{ } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-searchform, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform{ } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-searchform .betterdocs-search-field, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform .betterdocs-search-field{ } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform:hover { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-searchform svg.docs-search-icon, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform svg.docs-search-icon{ } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result:hover { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li:hover { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li a, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li a{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1{ background-attachment: scroll; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-input{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar { } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar:hover { } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header { } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header:hover { } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field { ; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .betterdocs-form-select .css-1jqq78o-placeholder{ ; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span:not(.tab-icon){ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span svg{ height:auto; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main h4{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main svg{ height:auto; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .css-19bb58m{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub svg{ height:auto; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-icon, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg { width:auto; } /* SearchModal Layout 2 & 3 Width and Position - Tablet */ .betterdocs-searchbox-w3v9npy { text-align: left; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-sidebar { width: 100%; display: inline-block; text-align: left; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform select{ ; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform .search-submit { } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-popular-search-keyword{ } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-popular-search-keyword .popular-keyword{ } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-popular-search-keyword .popular-search-title { } } @media(max-width: 767px){ .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search:hover { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-searchform, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-searchform .betterdocs-search-field, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform .betterdocs-search-field{ } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .betterdocs-searchform:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform:hover { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-searchform svg.docs-search-icon, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform svg.docs-search-icon, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result:hover { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li:hover, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li:hover { } .betterdocs-searchbox-w3v9npy.betterdocs-searchbox-wrapper .betterdocs-live-search .docs-search-result li a, .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .docs-search-result li a { } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-input{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar { } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar:hover { } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header { } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header:hover { } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field { ; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .betterdocs-form-select .css-1jqq78o-placeholder{ ; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span:not(.tab-icon){ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span svg{ height:auto; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main h4{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main svg{ height:auto; } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .css-19bb58m{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub svg{ height:auto; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-button:hover{ } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-layout-1 .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-icon { width:auto; } /* SearchModal Layout 2 & 3 Width and Position - Mobile */ .betterdocs-searchbox-w3v9npy { text-align: left; } .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-archive, .betterdocs-searchbox-w3v9npy .betterdocs-search-modal-sidebar { width: 100%; display: inline-block; text-align: left; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-live-search .betterdocs-searchform select{ ; } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-searchform .search-submit { } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-popular-search-keyword{ } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-popular-search-keyword .popular-keyword{ } .betterdocs-searchbox-w3v9npy.betterdocs-search-form-wrapper .betterdocs-popular-search-keyword .popular-search-title { } }/* =betterdocs-searchbox-w3v9npy= Ends *//* betterdocs-categorygrid-bbwbqi3 Starts */.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper{ background-color: rgba(255, 255, 255, 0); }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper{ --column: 1; margin-top: 28px; margin-right: 0px; margin-left: 0px; margin-bottom: 28px; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.masonry > .betterdocs-single-category-wrapper{ margin-bottom:10px; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner{ background-color: #ffffff; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-title, .betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-title a{ color: #528ffe; font-size: 18px; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-header .betterdocs-category-header-inner{ padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 20px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; border-bottom-width: 2px; border-color: #528ffe; border-style: solid; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-header{ background-color: #ffffff; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.default .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-items-counts span, .betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.layout-1 .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-items-counts span{ font-size: 15px; min-height:28px;min-width:28px;color: #ffffff; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-items-counts{ background-color: rgba(108,156,244,1); }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper.layout-2 .betterdocs-category-items-counts:after{ border-top-color: rgb(173, 94, 98); }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-footer a.betterdocs-category-link-btn{ color: #528ffe; font-size: 14px; background-color: #ffffff; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-footer{ text-align: left; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper) a{ font-size: 15px; color: #566e8b; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-body{ background-color: #ffffff; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-body .betterdocs-articles-list li i, .betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-body .betterdocs-articles-list .betterdocs-nested-category-wrapper i{ font-size:15px; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-body .betterdocs-articles-list li img, .betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-body .betterdocs-articles-list .betterdocs-nested-category-wrapper img{ height:15px;width:15px; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner:hover{ background-image: linear-gradient(45deg, rgba(0,0,0,0.8) 0% , rgba(0,0,0,0.4) 100%); }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-items-counts:hover span{ color: #ffffff; }.betterdocs-categorygrid-bbwbqi3.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper.layout-2 .betterdocs-category-items-counts:after:hover{ border-top-color: rgb(173, 94, 98); } @media(max-width: 1024px){} @media(max-width: 767px){}/* =betterdocs-categorygrid-bbwbqi3= Ends */