/*
Theme Name: H2Hub Child
Theme URI: https://h2hubglobal.com
Version: 1.1.0
Description: Divi child theme for H2Hub Singapore. All layout and content is managed natively in the Divi Builder — this theme only loads the Inter font and a small set of global type defaults. No custom templates, no plugins.
Author: H2Hub
Template: divi
Text Domain: h2hub-child
*/

/* Inter as the site typeface (Divi Theme Options fonts still override this). */
body,
.et_pb_module,
#main-header,
#et-secondary-nav {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.02em;
}

/* Cards inside a row stretch to equal height. */
.h2hub-equal .et_pb_column {
    display: flex;
}
.h2hub-equal .et_pb_column > .et_pb_module {
    width: 100%;
}


/* ==================== MOBILE ==================== */
@media (max-width: 980px) {

    /* Paired buttons sit in half-width columns on desktop; on phone they
       stack, so let them fill the width and stay finger-sized. */
    .et_pb_column .et_pb_button {
        display: block;
        width: 100%;
        text-align: center;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Divi leaves a large gap under every stacked column. Halve it. */
    .et_pb_row .et_pb_column {
        margin-bottom: 18px;
    }
    .et_pb_row .et_pb_column:last-child {
        margin-bottom: 0;
    }

    /* Spec tables inside Text modules would otherwise overflow the screen. */
    .et_pb_text table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .et_pb_text table td {
        white-space: nowrap;
    }

    /* Long headings break awkwardly at small sizes. */
    .et_pb_text h1,
    .et_pb_text h2 {
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

@media (max-width: 767px) {

    /* The ten-benefit strip is a 5-across grid on desktop. Full-width chips
       would run very long, so show them two-up instead. */
    .et_pb_row_5col .et_pb_column {
        width: 47% !important;
        float: left;
        margin: 0 6% 12px 0 !important;
    }
    .et_pb_row_5col .et_pb_column:nth-child(2n) {
        margin-right: 0 !important;
    }

    /* Contact form fields need room to be tapped. */
    .et_pb_contact_form_container .et_pb_contact_field {
        padding: 0 0 12px 0 !important;
    }
    .et_pb_contact_form_container input,
    .et_pb_contact_form_container textarea {
        font-size: 16px !important; /* stops iOS zooming on focus */
    }

    /* Fixed header eats the top of anchored sections. */
    .et_pb_section {
        scroll-margin-top: 80px;
    }
}

/* App store buttons — full width and finger-sized on phones. */
@media (max-width: 767px) {
    .h2-store {
        display: flex !important;
        width: 100%;
        margin: 0 0 12px 0 !important;
        justify-content: center;
    }
}

/* Research-area cards: keep the illustration compact so the text sits high. */
.h2-area .et_pb_main_blurb_image {
    margin-bottom: 12px;
}
.h2-area .et_pb_main_blurb_image img {
    max-width: 116px;
}
@media (max-width: 767px) {
    .h2-area .et_pb_main_blurb_image img {
        max-width: 96px;
    }
}


/* Health check: form stays collapsed until the button is clicked.
   Pure CSS (:target) - no plugin, no JS. Always visible inside the
   Divi Visual Builder (body.et-fb) so it stays editable. */
body:not(.et-fb) .h2-reveal .h2-reveal-body {
    display: none;
}
body:not(.et-fb) .h2-reveal:target .h2-reveal-body {
    display: block;
}
body:not(.et-fb) .h2-reveal:target .h2-reveal-btn {
    display: none;
}
.h2-reveal { scroll-margin-top: 90px; }

/* Divi's smoothscroll swallows the hash, so :target alone is not reliable.
   The .is-open class (set by the small script in functions.php) is the
   primary switch; :target stays as a fallback for direct deep links. */
body:not(.et-fb) .h2-reveal.is-open .h2-reveal-body {
    display: block;
}
body:not(.et-fb) .h2-reveal.is-open .h2-reveal-btn {
    display: none;
}


/* Three things: circular icons, centred, always visible.
   Divi's scroll animation left the images near opacity 0; the Clean artwork
   is also very pale (avg luminance ~205), so it gets a hairline ring and a
   mild contrast lift to read at icon size. */
.h2-circle .et_pb_blurb_content { text-align: center; }
.h2-circle .et_pb_main_blurb_image {
    display: block;
    width: 116px;
    height: 116px;
    margin: 0 auto 24px;
    line-height: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #f2f8fc;
    box-shadow: inset 0 0 0 1px #d7e6f2;
    opacity: 1 !important;
    transform: none !important;
}
.h2-circle .et_pb_main_blurb_image .et_pb_image_wrap {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    opacity: 1 !important;
}
.h2-circle .et_pb_main_blurb_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    filter: saturate(1.18) contrast(1.1);
}
@media (max-width: 980px) {
    .h2-circle .et_pb_main_blurb_image { width: 104px; height: 104px; margin-bottom: 20px; }
}
@media (max-width: 767px) {
    .h2-circle .et_pb_main_blurb_image { width: 96px; height: 96px; margin-bottom: 18px; }
}