/* ===================================================================
   mh-blog.css — blog-only overrides layered on top of the shared
   main-site design system (/css/styles.css + /css/custom.css).

   Keep this file SMALL. Anything that should look identical to the main
   site already comes from the shared assets; this file only covers the
   few things the WordPress blog needs that the main site renders a
   different way (or injects inline).
   =================================================================== */


/* -------------------------------------------------------------------
   Desktop mega-menu dropdown affordance.
   The main site prints this as an inline <style> in its master layout
   (main_layout.blade.php), so it is NOT in the shared CSS. Re-added here
   so top-level items that open a panel show the same chevron indicator.
   ------------------------------------------------------------------- */
@media (min-width: 992px) {
    #primary-menu > ul > li.mega-menu > a > div::after,
    #primary-menu > ul > li.mega-menu-small > a > div::after {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 8px;
        border-right: 1.7px solid currentColor;
        border-bottom: 1.7px solid currentColor;
        opacity: .55;
        transform: rotate(45deg);
        transform-origin: 66% 66%;
        position: relative;
        top: -2px;
        transition: transform .25s ease, opacity .25s ease;
    }

    #primary-menu > ul > li.mega-menu:hover > a > div::after,
    #primary-menu > ul > li.mega-menu-small:hover > a > div::after {
        transform: rotate(225deg);
        opacity: .9;
    }

    @media (prefers-reduced-motion: reduce) {
        #primary-menu > ul > li.mega-menu > a > div::after,
        #primary-menu > ul > li.mega-menu-small > a > div::after {
            transition: none;
        }
    }
}


/* -------------------------------------------------------------------
   Article body (single.php / page.php): comfortable long-form measure.
   ------------------------------------------------------------------- */
.single-post .the-content {
    font-size: 17px;
    line-height: 1.75;
    color: #444;
}

.single-post .the-content h2,
.single-post .the-content h3,
.single-post .the-content h4 {
    margin-top: 1.6em;
    margin-bottom: .6em;
}

.single-post .the-content img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.single-post .entry-image {
    margin-bottom: 30px;
}

.single-post .entry-image img {
    border-radius: 4px;
}


/* -------------------------------------------------------------------
   Tag cloud → pill chips consistent with the design system.
   ------------------------------------------------------------------- */
.tagcloud h3 {
    font-size: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.tagcloud a {
    display: inline-block;
    margin: 0 7px 9px 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 700;
    color: #1290BA;
    background-color: rgba(21, 169, 219, .08);
    border: 1px solid rgba(21, 169, 219, .25);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.tagcloud a:hover {
    color: #fff;
    background-color: #15A9DB;
    border-color: #15A9DB;
}


/* -------------------------------------------------------------------
   Ajax Load More: keep its wrapper from becoming a single broken flex
   column inside the flex post grid. `display: contents` lets appended
   .entry cards flow into #posts as if they were direct children.
   (The ALM *repeater template* — configured in the plugin, server-side
   — should emit the same ".entry entry-noborder" markup as index.php so
   loaded-in posts match the first page exactly.)
   ------------------------------------------------------------------- */
#posts.mh-articles .ajax-load-more-wrap {
    display: contents;
}

#posts.mh-articles .ajax-load-more-wrap .alm-listing,
#posts.mh-articles .ajax-load-more-wrap .alm-reveal {
    display: contents;
}

#posts.mh-articles .ajax-load-more-wrap .alm-btn-wrap {
    display: block;
    width: 100%;
    margin-top: 20px;
    text-align: center;
}


/* -------------------------------------------------------------------
   Comments spacing.
   ------------------------------------------------------------------- */
.commentssection {
    margin-top: 20px;
}

.commentssection .comment-form input[type="text"],
.commentssection .comment-form input[type="email"],
.commentssection .comment-form input[type="url"],
.commentssection .comment-form textarea {
    width: 100%;
}


/* -------------------------------------------------------------------
   Typography parity with the main site.
   A WP plugin injects an inline `body { font-family: "Open Sans" }`
   AFTER our stylesheets, silently replacing the site's Lato. !important
   is required to win against that later inline rule.
   ------------------------------------------------------------------- */
body {
    font-family: 'Lato', sans-serif !important;
}


/* -------------------------------------------------------------------
   Page hero (#page-title.mh-blog-hero) — centered title, kicker line,
   breadcrumbs. Overrides stock Canvas #page-title (left-aligned h1,
   absolutely-positioned right breadcrumb).
   ------------------------------------------------------------------- */
#page-title.mh-blog-hero {
    background: #f8fafc;
    border-bottom: 1px solid #edf1f5;
    padding: 48px 0 40px;
    margin-bottom: 44px;
    text-align: center;
}

#page-title.mh-blog-hero h1 {
    font-family: 'Raleway', sans-serif;
    /* 700 / -0.5px matches the main site's h1s exactly (was 800) */
    font-weight: 700;
    letter-spacing: -0.5px;
    /* Canvas uppercases #page-title h1 by default — the main site's h1s
       are natural case, so match them. */
    text-transform: none;
    font-size: clamp(28px, 4.2vw, 42px);
    line-height: 1.22;
    color: #222;
    margin: 0 auto;
    max-width: 920px;
    float: none;
    padding: 0;
}

/* Fine print by design: the date/label should whisper, not compete
   with the title. Selectors are #page-title-prefixed because stock
   Canvas ships `#page-title span { font-size:18px; ... }` which
   out-specifies a bare class. */
#page-title.mh-blog-hero .mh-hero-kicker {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #aab5c0;
    margin: 0 0 10px;
}

#page-title.mh-blog-hero .mh-hero-sub {
    font-size: 17px;
    line-height: 1.6;
    color: #6a7683;
    max-width: 660px;
    margin: 14px auto 0;
}

#page-title.mh-blog-hero .mh-hero-crumbs {
    margin-top: 18px;
    font-size: 13px;
    color: #98a3ae;
}

#page-title.mh-blog-hero .mh-hero-crumbs a {
    color: #7c8894;
}

#page-title.mh-blog-hero .mh-hero-crumbs a:hover {
    color: #15A9DB;
}

#page-title.mh-blog-hero .mh-hero-crumbs > *:not(:first-child)::before {
    content: '/';
    margin: 0 9px;
    color: #c3ccd4;
}

#page-title.mh-blog-hero .mh-hero-crumbs span {
    font-size: 13px;
    font-weight: 400;
    color: #98a3ae;
    margin: 0;
    display: inline;
}

/* Lead-gen strip under the article title: real review score (self-updating
   from the shared RaveCapture cache) + one CTA, aimed at cold organic
   visitors. Pill on desktop, stacked card on small screens. */
#page-title.mh-blog-hero .mh-hero-cta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    margin-top: 24px;
    padding: 10px 12px 10px 22px;
    background: #fff;
    border: 1px solid #e3eaf1;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .07);
}

#page-title.mh-blog-hero .mh-hero-cta-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #222;
    margin: 0;
}

#page-title.mh-blog-hero .mh-hero-cta-score svg {
    color: #F6B01E;
    flex: none;
}

#page-title.mh-blog-hero .mh-hero-cta-text {
    font-size: 14px;
    font-weight: 400;
    color: #5c6874;
    margin: 0;
}

#page-title.mh-blog-hero .mh-hero-cta .mh-btn {
    flex: none;
}

@media (max-width: 640px) {
    #page-title.mh-blog-hero .mh-hero-cta {
        flex-direction: column;
        gap: 10px;
        padding: 18px 20px;
        border-radius: 14px;
        max-width: 420px;
    }
}


/* -------------------------------------------------------------------
   Table of contents (Easy TOC plugin) — card treatment to match the
   main site's panel styling instead of the plugin's default grey box.
   !important needed against the plugin's own stylesheet.
   ------------------------------------------------------------------- */
#ez-toc-container {
    border: 1px solid #e3eaf1 !important;
    border-radius: 10px !important;
    background: #fbfdfe !important;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .06);
    padding: 22px 28px !important;
    margin: 10px 0 30px;
}

#ez-toc-container .ez-toc-title {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #222 !important;
}

#ez-toc-container ul li a {
    color: #1290BA !important;
    font-size: 15px !important;
    line-height: 1.9;
}

#ez-toc-container ul li a:hover {
    color: #15A9DB !important;
    text-decoration: none !important;
}


/* -------------------------------------------------------------------
   Related posts (Custom Related Posts plugin, .crp-list) — card grid.
   ------------------------------------------------------------------- */
.related-posts {
    max-width: 960px;
    margin: 0 auto;
}

.related-posts .crp-list-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #222;
    text-align: center;
    margin-bottom: 26px;
}

.related-posts ul.crp-list {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.related-posts .crp-list-item {
    flex: 1 1 300px;
    max-width: 440px;
    margin: 0;
    padding: 0;
}

.related-posts .crp-list-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 14px;
    transition: opacity .25s ease;
}

.related-posts .crp-list-item a {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.45;
    color: #333;
}

.related-posts .crp-list-item a:hover {
    color: #15A9DB;
}

.related-posts .crp-list-item a:hover img {
    opacity: .88;
}


/* -------------------------------------------------------------------
   Post-footer product CTA (.mh-post-cta) — centered section replacing
   the old content-inside-a-.line-divider structure.
   ------------------------------------------------------------------- */
.mh-post-cta {
    border-top: 1px solid #edf1f5;
    margin: 44px auto 6px;
    padding-top: 40px;
    text-align: center;
}

.mh-post-cta-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #222;
    margin-bottom: 6px;
}

.mh-post-cta-sub {
    font-size: 17px;
    font-weight: 300;
    color: #6a7683;
    margin-bottom: 30px;
}


/* -------------------------------------------------------------------
   Ajax Load More appended cards: the plugin's repeater template (set in
   WP admin) may still emit the theme's OLD card markup. Normalize it to
   the new design until the repeater is updated:
   - hide its <hr> divider and the whole meta row (cards mirror the main
     site's featured articles: image, title, excerpt, button — no meta)
   - dress its plain "Read More" text link as the outline button
   ------------------------------------------------------------------- */
#posts .entry hr {
    display: none;
}

#posts .entry .entry-meta {
    display: none !important;
}

/* Old-markup ALM cards' plain "Read More" link, dressed as the primary
   button (same gradient/radius as the shared .mh-btn-primary). */
#posts .entry-content .more-link {
    display: inline-block;
    margin: 4px auto 0;
    padding: 12px 24px;
    border: 0;
    border-radius: 10px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, #15A9DB, #0E7AD3);
    transition: background .25s ease, transform .25s ease;
}

#posts .entry-content .more-link:hover {
    background: linear-gradient(135deg, #2CB8E4, #1183DD);
    color: #fff;
    transform: translateY(-2px);
}


/* -------------------------------------------------------------------
   Legacy in-article CTAs — old Canvas components (.promo / .button)
   authored inside post content back when the theme shipped its own
   styleCanvas.css. Modernize them to the current design language so
   every legacy article matches, without editing each post.
   ------------------------------------------------------------------- */

/* Old Canvas buttons embedded in article content -> new primary button */
.the-content a.button {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 14px 30px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #15A9DB, #0E7AD3) !important;
    color: #fff !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
                0 1px 2px rgba(5, 20, 60, .16),
                0 6px 16px rgba(21, 169, 219, .28) !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.the-content a.button:hover {
    background: linear-gradient(135deg, #2CB8E4, #1183DD) !important;
    transform: translateY(-2px);
    color: #fff !important;
}

/* Old Canvas ".promo" call-to-action box -> clean modern section card */
.the-content .promo {
    position: relative;
    background: #f8fafc !important;
    border: 1px solid #e3eaf1 !important;
    border-radius: 14px !important;
    padding: 34px !important;                 /* drop the 200px right padding reserved for the old abs button */
    box-shadow: 0 1px 3px rgba(16, 42, 67, .05) !important;
    text-align: center;
}

/* Kill .promo-uppercase everywhere inside the box */
.the-content .promo,
.the-content .promo h1,
.the-content .promo h2,
.the-content .promo h3,
.the-content .promo h4,
.the-content .promo h5,
.the-content .promo p,
.the-content .promo a,
.the-content .promo span,
.the-content .promo li {
    text-transform: none !important;
}

.the-content .promo h2,
.the-content .promo h3,
.the-content .promo h4 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    color: #222;
    margin: 0 0 10px;
}

.the-content .promo p {
    color: #5c6874;
    margin: 0 0 4px;
}

/* The promo's old absolutely-positioned button -> normal-flow, centered */
.the-content .promo a.button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    margin: 20px auto 0 !important;
}

.the-content .promo a.button:hover {
    -webkit-transform: translateY(-2px) !important;
    transform: translateY(-2px) !important;
}

/* When Easy TOC auto-inserted itself INSIDE such a promo (it inserts before
   the article's first heading, which here is the promo's <h3>), keep the TOC
   reading as its own left-aligned block and divide it from the CTA below. */
.the-content .promo #ez-toc-container {
    text-align: left;
    margin: 0 0 24px;
}

.the-content .promo #ez-toc-container ~ h3 {
    padding-top: 24px;
    border-top: 1px solid #e6edf3;
}


/* -------------------------------------------------------------------
   Ported from the Customizer "Additional CSS" — the still-useful
   content-authoring rules, moved here (verbatim where possible) so the
   Customizer box can be emptied entirely and everything lives in git.
   ------------------------------------------------------------------- */
body {
    font-size: 16px;
}

.d-block {
    display: block !important;
}

span.cptch_span {
    font-size: 14px;
}

/* In-article links: brand blue, medium weight */
.entry .the-content a:not(.button):not(.btn) {
    font-weight: 600;
    color: #15a9db !important;
}

.entry .the-content a:hover:not(.button):not(.btn) {
    color: #15a9db !important;
    opacity: .85;
}

.entry .the-content .color-danger {
    color: #cc3300 !important;
    font-weight: 600;
}

ul.spaced-out-list li {
    margin-bottom: 10px;
}

ol {
    padding-left: 30px;
}

.the-content ul {
    margin-left: 25px;
}

#content blockquote p {
    line-height: 30px;
}

#respond #commentform iframe {
    height: auto !important;
}

.more-link {
    border-bottom: 0 !important;
}

/* Legacy in-content buttons some older articles embed */
.button-3d {
    box-shadow: 0px 3px 7px 3px rgba(17, 31, 56, 0.15);
    -webkit-box-shadow: 0px 3px 7px 3px rgba(17, 31, 56, 0.15);
}


/* -------------------------------------------------------------------
   Overrides for the legacy Customizer "Additional CSS" (style#wp-custom-css).
   That 5KB block was written for the OLD theme and loads AFTER this file,
   so each rule here must out-specify (or out-!important) its counterpart.
   Once the Customizer CSS is cleaned up in WP admin these become inert
   safety nets.
   ------------------------------------------------------------------- */

/* vs `.entry-image img { width: 75%; }` — images are full-width 2:1 */
#posts .entry .entry-image img,
.single-post .entry .entry-image img {
    width: 100% !important;
}

/* vs `#posts .entry-title { height: 50px; }` — a fixed height clipped
   2-3 line titles and pushed them through the layout (the "line through
   the title" artifact). Let titles size naturally; min-height keeps
   one-line titles from misaligning card rows. */
#posts .entry .entry-title {
    height: auto !important;
    min-height: 0 !important;
}

/* vs `#content p { line-height: 22px; }` — cramped long-form reading.
   16px/1.75 for article body, consistent with modern readability. */
#content .the-content p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
}

/* vs `.related-posts .crp-list a { opacity: .85 !important; }` — cards
   render at full strength; hover dims the image slightly instead. */
.related-posts ul.crp-list a {
    opacity: 1 !important;
}

/* vs `.related-posts .crp-list .crp-list-item { margin: 20px; }` — the
   grid gap owns spacing. */
.related-posts ul.crp-list .crp-list-item {
    margin: 0 !important;
}

.related-posts ul.crp-list .crp-list-item-title {
    display: block;
    margin-top: 14px;
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}


/* -------------------------------------------------------------------
   Typography parity, part 2. A Google-Fonts plugin injects an inline
   stylesheet targeting `body, #content, .entry-content, .post-content,
   .page-content, .post-excerpt, .entry-summary` (and buttons/inputs)
   with "Open Sans" — the class selectors out-specify a bare `body`
   rule, which is why the first fix only partly took. Mirror its
   selector list with a body prefix (higher specificity) so Lato wins
   everywhere, exactly like the main site.
   ------------------------------------------------------------------- */
body #content,
body .entry-content,
body .post-content,
body .page-content,
body .post-excerpt,
body .entry-summary,
body .the-content,
body .entry-content p {
    font-family: 'Lato', sans-serif !important;
}

body button,
body input,
body select,
body textarea {
    font-family: 'Lato', sans-serif !important;
}


/* -------------------------------------------------------------------
   Blog imagery: every featured image is authored at 1024x512 (2:1).
   Lock that ratio everywhere so cards align perfectly, odd crops can't
   break the grid, and lazy-loading never causes layout shift.
   ------------------------------------------------------------------- */
#posts .entry-image img,
.single-post .entry-image img,
.related-posts .crp-list-item img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}


/* -------------------------------------------------------------------
   Crisp logo: Canvas only swaps in the 2x logo at devicePixelRatio 2,
   so on 1.25x/1.5x displays (Windows scaling) the 250px PNG upscales
   and blurs. Serve the 500x200 retina logo at all densities — it
   downscales to the same 250px box and stays sharp everywhere.
   ------------------------------------------------------------------- */
#logo a.standard-logo {
    display: none !important;
}

#logo a.retina-logo {
    display: inline-block !important;
}


/* -------------------------------------------------------------------
   Post-footer CTA cards (.mh-cta-grid) — the "pick your server type"
   section, rebuilt in the design language of the mega-menu cards:
   gradient SVG icon, Raleway title, muted copy, mh-btn action.
   Whole card is clickable; hovering the card lights its button.
   ------------------------------------------------------------------- */
.mh-cta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    max-width: 1080px;
    margin: 0 auto;
}

.mh-cta-card {
    flex: 1 1 290px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #e3eaf1;
    border-radius: 12px;
    padding: 30px 26px 28px;
    box-shadow: 0 1px 3px rgba(16, 42, 67, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mh-cta-card,
.mh-cta-card:hover {
    text-decoration: none;
}

.mh-cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(14, 122, 211, .13);
    border-color: rgba(21, 169, 219, .45);
}

.mh-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(21, 169, 219, .08);
    border: 1px solid rgba(21, 169, 219, .18);
    margin-bottom: 16px;
}

.mh-cta-title {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
    color: #222;
    margin-bottom: 8px;
}

.mh-cta-desc {
    display: block;
    font-size: 14.5px;
    line-height: 1.6;
    color: #6a7683;
    margin-bottom: 20px;
}

.mh-cta-card .mh-btn {
    margin-top: auto;
}

/* Card hover triggers the button's own hover look (same gradient the main
   site's .mh-btn-primary:hover uses), signalling the whole card acts */
.mh-cta-card:hover .mh-btn-primary {
    background: linear-gradient(135deg, #2CB8E4, #1183DD);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .mh-cta-card,
    .mh-cta-card:hover {
        transform: none;
        transition: none;
    }
}