/* ==========================================================================
   Health Wealth Theme - style.css
   Hand-ported (SCSS -> flat CSS, nesting/variables resolved) from the
   reference Symfony/Twig site thehealthiswealth.co:
     assets/css/base/_healthWealth.scss  (site-specific design, ~1800 lines)
     assets/css/settings/_colors.scss    (brand token reference only - this
                                          site's real design uses its own
                                          hardcoded green palette below, the
                                          _colors.scss tokens were never
                                          actually referenced by _healthWealth.scss)
   Green palette confirmed from the source SCSS:
     primary  #3bab53   dark #136d30   accent #60f480
   No Sass build step exists in this Flask app, so every nested selector and
   every @media block below is written out flat/plain instead of relying on
   a preprocessor.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Reset (ported verbatim from _healthWealth.scss's own reset block)
   ------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
html {
    font-size: 16px;
    scroll-behavior: smooth;
    font-weight: 400;
}
body {
    line-height: 1;
    overflow-x: hidden;
    font-family: "Poppins", sans-serif;
    background: #fff;
    color: #000;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    color: black;
    text-decoration: none;
    display: block;
}
img {
    max-width: 100%;
}

:root {
    --hw-primary: #3bab53;
    --hw-dark: #136d30;
    --hw-accent: #60f480;
}

/* -------------------------------------------------------------------------
   Layout containers
   ------------------------------------------------------------------------- */
.content-wrapper {
    max-width: 1376px;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
}
@media (max-width: 1535px) {
    .content-wrapper { max-width: 1076px; }
}
@media (max-width: 836px) {
    .content-wrapper { width: 100%; }
}
@media (max-width: 765px) {
    .content-wrapper { width: 100%; }
}

.content-wrapper-1 {
    max-width: 1140px;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
}
@media (max-width: 1112px) {
    .content-wrapper-1 { width: 90%; }
}
@media (max-width: 765px) {
    .content-wrapper-1 { width: 95%; }
}

/* Generic max-width wrapper used by the category grid/sidebar blocks below -
   not present in _healthWealth.scss itself (this site's SCSS only ever uses
   .content-wrapper/.content-wrapper-1), ported in from the shared
   settings/_typography.scss .wrapper convention since the reference Twig
   partials (home-two-categories, sidebar-articles) use class="wrapper". */
.wrapper {
    width: 100%;
    max-width: 1076px;
    padding: 0px;
    margin: 0 auto;
    box-sizing: border-box;
}
@media (max-width: 1115px) {
    .wrapper { padding: 0px 15px; }
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.header {
    position: relative;
    border-bottom: 1px solid #b3b3b3;
    margin: auto;
    padding: 20px 0;
    width: 90%;
}
@media (max-width: 1535px) {
    .header { width: 95%; }
}
.header img { width: 100%; }
.header .header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.header .header-logo {
    width: 277px;
    margin: auto;
}
@media (max-width: 1535px) {
    .header .header-logo { width: 200px; }
}
@media (max-width: 765px) {
    .header .header-logo { margin: 0; }
}
.header .header-logo-left { margin: 0; }
.header .search-icon { width: 33px; }
@media (max-width: 1535px) {
    .header .search-icon { width: 25px; }
}

.header-1 {
    position: relative;
    width: 100%;
    padding: 15px 0;
    background-color: #136d30;
    border-bottom: 6px solid #60f480;
}
.header-1 img { width: 100%; }
.header-1 .header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.header-1 .header-logo {
    width: 231px;
    margin: auto;
}
@media (max-width: 765px) {
    .header-1 .header-logo { width: 193px; }
}
.header-1 .header-logo-left { margin: 0; }
.header-1 .search-icon { width: 23px; }
@media (max-width: 765px) {
    .header-1 .search-icon { width: 33px; }
}

/* Hamburger + inline header search form - the reference site's header is
   icon/menu-driven with no visible text input on the page chrome itself
   (search happens through a different flow in the Symfony app). This app's
   Yahoo ad feed is reached through a real keyword search box in the header
   (see base-theme's header_home.html/header_inner.html), so a functional
   search form had to be added here - styled to match the green branding
   rather than lifted from the reference, since the reference has no
   equivalent visible header search box to port. */
.hamburger {
    display: none;
    width: 46px;
    height: 20px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background: #136d30;
    border-radius: 2px;
}
.header-1 .hamburger span { background: #fff; }
@media (max-width: 900px) {
    .hamburger { display: flex; }
}

.hw-search-form {
    display: flex;
    align-items: center;
    border: 2px solid #3bab53;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    max-width: 420px;
    width: 100%;
}
.hw-search-form input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 18px;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    color: #333;
}
.hw-search-form button {
    border: none;
    background: #3bab53;
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hw-search-form button img { width: 18px; height: 18px; }
.hw-search-form button i { color: #fff; }
.hw-search-form--inner {
    border-color: #60f480;
    max-width: 320px;
}
.hw-search-form--inner button { background: #136d30; }
@media (max-width: 700px) {
    .hw-search-form { max-width: 220px; }
}

/* -------------------------------------------------------------------------
   Mobile menu - reference's real markup/behavior (mobile-menu /
   mobile-menu-wrapper / mobile-menu-close / mobile-menu-items, toggled via
   .active), but its CSS lives in the generic settings/_header.scss which
   this site's build (themes/default.scss) never actually imports - so it
   had no shipped styling to port. Restyled fresh here in the green palette.
   ------------------------------------------------------------------------- */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(19, 109, 48, 0.7);
    z-index: 999;
}
.mobile-menu.active { display: block; }
.mobile-menu-wrapper {
    background: #fff;
    width: 100%;
    max-width: 320px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 60px 25px 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
}
.mobile-menu-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 22px;
    color: #136d30;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-menu-items {
    display: flex;
    flex-direction: column;
}
.mobile-menu-items a {
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #ebebeb;
    padding: 14px 0;
    display: block;
}
.mobile-menu-items a:hover { color: #3bab53; }

/* -------------------------------------------------------------------------
   Shared decorative bar
   ------------------------------------------------------------------------- */
.line-bar {
    width: 194px;
    background: linear-gradient(to right, #136d30 70%, #60f480 30%);
    height: 6px;
    margin: 15px 0;
}
@media (max-width: 1535px) {
    .line-bar { width: 145px; }
}
@media (max-width: 765px) {
    .line-bar { height: 3.3px; }
}

/* -------------------------------------------------------------------------
   Hero (home-hero-post)
   ------------------------------------------------------------------------- */
.hero-sec {
    margin-top: 30px;
    position: relative;
}
@media (max-width: 765px) {
    .hero-sec { background: linear-gradient(to right, #3bab53, #438b52); }
}
.hero-sec .content-wrapper { position: relative; padding: 30px; }
@media (max-width: 1535px) {
    .hero-sec .content-wrapper { padding: 20px; }
}
@media (max-width: 765px) {
    .hero-sec .content-wrapper { width: 100%; }
}
.hero-sec .content-wrapper::after {
    position: absolute;
    content: "";
    left: 0;
    width: 100%;
    height: 91%;
    border: 3px solid #60f480;
    top: 60px;
    z-index: -10;
}
@media (max-width: 1535px) {
    .hero-sec .content-wrapper::after { height: 90%; top: 45px; }
}
@media (max-width: 765px) {
    .hero-sec .content-wrapper::after { top: 13px; width: 85%; left: 45px !important; height: 101%; z-index: 1; }
}
.hero-sec .content-container { margin: 0 auto; overflow: hidden; position: relative; border-radius: 4px; height: 649px; line-height: 0; }
@media (max-width: 1535px) {
    .hero-sec .content-container { height: 480px; }
}
@media (max-width: 765px) {
    .hero-sec .content-container { overflow: unset; }
}
.hero-sec .slideDiv { width: 100%; height: 100%; position: relative; }
.hero-sec .slide { width: 100%; height: 100%; }

.hero-sec .controls {
    position: absolute;
    top: 40%;
    right: 0;
    padding: 0 0.63rem;
    z-index: 5;
    text-align: center;
    left: 20px;
    width: fit-content;
    height: 20%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}
@media (max-width: 1532px) {
    .hero-sec .controls { height: 25%; }
}
@media (max-width: 765px) {
    .hero-sec .controls { bottom: 0; flex-direction: row; top: 112%; z-index: 999999; left: 30%; height: fit-content; }
}
.hero-sec .button {
    border: none;
    background: none;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 765px) {
    .hero-sec .button { margin: 0 2px; }
}
.hero-sec .button .inside {
    width: 10px;
    height: 10px;
    display: block;
    cursor: pointer;
    border-radius: 50%;
    transition: all ease 0.2s;
    opacity: 0.6;
    outline: none;
    background-color: #60f480;
    padding: 0.5px;
}
.hero-sec .button .inside.selected { background-color: #60f480; opacity: 1; }
.hero-sec .button .inside:hover { opacity: 1; transform: scale(1.2); transition: 0.2s ease; }
.hero-sec .selected-btn { border: 1px solid #60f480 !important; border-radius: 50%; }

.hero-sec .slide {
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #3bab53, #438b52);
    transition: 0.2s ease;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
.hero-sec .slide.active { display: flex; position: relative; }
.hero-sec .slide-content {
    display: flex;
    align-items: center;
    width: 80%;
    height: 100%;
    justify-content: right;
    position: absolute;
    right: 0;
    top: 0;
    margin-bottom: 40px;
    transition: 0.2s ease;
}
@media (max-width: 765px) {
    .hero-sec .slide-content { width: 100%; display: block; }
}
.hero-sec .slide-content .content {
    transition: all 0.3s ease-in-out;
    background-color: white;
    color: black;
    position: absolute;
    z-index: 99;
    line-height: 1;
    left: 0;
    margin-left: -100px;
    width: 50%;
    margin-right: -100px;
    padding: 70px;
}
@media (max-width: 865px) {
    .hero-sec .slide-content .content { margin-left: -50px; padding: 20px; width: 70%; }
}
@media (max-width: 765px) {
    .hero-sec .slide-content .content { margin-left: -20px; bottom: 0; padding: 20px 30px; }
}
.hero-sec .slide-content .content h4 {
    font-size: 35px;
    line-height: 44px;
    font-weight: 700;
    font-family: "Poppins", sans-serif;
}
@media (max-width: 1532px) {
    .hero-sec .slide-content .content h4 { font-size: 28px; }
}
@media (max-width: 765px) {
    .hero-sec .slide-content .content h4 { font-size: 20px; line-height: 28px; }
}
.hero-sec .slide-content .content p {
    margin-top: 10px;
    line-height: 1.5;
    font-size: 21px;
    font-family: "Open Sans", sans-serif;
}
@media (max-width: 1532px) {
    .hero-sec .slide-content .content p { font-size: 18px; }
}
@media (max-width: 765px) {
    .hero-sec .slide-content .content p { font-size: 14px; line-height: 1.2; }
}
.hero-sec .slide-content figure {
    height: 100%;
    width: 80%;
    position: relative;
    z-index: 9;
    overflow: hidden;
}
@media (max-width: 765px) {
    .hero-sec .slide-content figure { width: 97%; left: -20px !important; top: 15px; }
}
.hero-sec .slide-content figure img {
    width: 100%;
    height: 97%;
    object-position: top;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}
.hero-sec .slide-content figure img:hover { transform: scale(1.1); }

/* -------------------------------------------------------------------------
   Reader's Favourite / Popular Posts (radders-favorites-sec)
   ------------------------------------------------------------------------- */
.radders-favorites-sec { margin-top: 70px; }
@media (max-width: 1532px) {
    .radders-favorites-sec { margin-top: 50px; }
}
@media (max-width: 765px) {
    .radders-favorites-sec { margin-top: 90px; }
}
@media (max-width: 765px) {
    .radders-favorites-sec .content-wrapper { width: 100%; }
}
.radders-favorites-sec .main-content {
    display: flex;
    justify-content: space-between;
    border-left: 3px solid #60f480;
    border-bottom: 3px solid #60f480;
}
@media (max-width: 765px) {
    .radders-favorites-sec .main-content { flex-direction: column; border: none; }
}
.radders-favorites-sec .top-heading { margin-bottom: 30px; }
@media (max-width: 765px) {
    .radders-favorites-sec .top-heading { width: 90%; margin: auto; }
}
.radders-favorites-sec .top-heading h3 {
    font-size: 35px;
    line-height: 44px;
    font-weight: 700;
    font-family: "Poppins", sans-serif;
}
.radders-favorites-sec .top-heading h3 span { color: #3bab53; }
@media (max-width: 1535px) {
    .radders-favorites-sec .top-heading h3 { font-size: 30px; }
}
@media (max-width: 765px) {
    .radders-favorites-sec .top-heading h3 { font-size: 35px; }
}

.radders-favorites-sec .content-left { flex: 0 0 60%; padding-left: 30px; }
@media (max-width: 865px) {
    .radders-favorites-sec .content-left { padding-left: 20px; flex: 0 0 50%; }
}
@media (max-width: 765px) {
    .radders-favorites-sec .content-left { padding: 0; }
}

.radders-favorites-sec .articles-list .big-article {
    min-height: 786px;
    display: flex;
    justify-content: start;
    align-items: end;
}
@media (max-width: 1535px) {
    .radders-favorites-sec .articles-list .big-article { min-height: 580px; }
}
@media (max-width: 765px) {
    .radders-favorites-sec .articles-list .big-article { min-height: 588px; width: 93%; margin: auto; }
}
.radders-favorites-sec .articles-list .big-article .content {
    width: 60%;
    padding: 60px 80px;
    margin-bottom: 40px;
    background-color: white;
}
@media (max-width: 1535px) {
    .radders-favorites-sec .articles-list .big-article .content { padding: 25px 30px; width: 65%; }
}
@media (max-width: 765px) {
    .radders-favorites-sec .articles-list .big-article .content { padding: 25px 15px; width: 85%; }
}
.radders-favorites-sec .articles-list .big-article .content h4 {
    font-size: 31px;
    width: 80%;
    font-weight: 700;
    line-height: 32px;
    font-family: "Poppins", sans-serif;
}
@media (max-width: 765px) {
    .radders-favorites-sec .articles-list .big-article .content h4 { font-size: 20px; line-height: 25px; width: 100%; }
}
.radders-favorites-sec .articles-list .big-article .content .line-bar { margin: 30px 0; }
@media (max-width: 1535px) {
    .radders-favorites-sec .articles-list .big-article .content .line-bar { margin: 20px 0; }
}
.radders-favorites-sec .articles-list .big-article .content p {
    font-size: 19px;
    line-height: 24px;
    font-family: "Open Sans", sans-serif;
}
@media (max-width: 765px) {
    .radders-favorites-sec .articles-list .big-article .content p { font-size: 17px; line-height: 20px; }
}

.radders-favorites-sec .two-way-line-articles {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
    flex-wrap: wrap;
}
@media (max-width: 765px) {
    .radders-favorites-sec .two-way-line-articles { display: none; margin-top: 20px; }
}
.radders-favorites-sec .two-way-line-articles article { flex: 0 0 48%; margin-bottom: 30px; }
.radders-favorites-sec .two-way-line-articles article figure { width: 100%; height: 279px; margin-bottom: 15px; overflow: hidden; }
@media (max-width: 1535px) {
    .radders-favorites-sec .two-way-line-articles article figure { height: 240px; }
}
.radders-favorites-sec .two-way-line-articles article figure img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out; }
.radders-favorites-sec .two-way-line-articles article figure img:hover { transform: scale(1.1); }
.radders-favorites-sec .two-way-line-articles article h4 {
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: "Poppins", sans-serif;
}
@media (max-width: 1535px) {
    .radders-favorites-sec .two-way-line-articles article h4 { font-size: 24px !important; }
}
.radders-favorites-sec .two-way-line-articles article p {
    font-size: 19px;
    line-height: 1.3;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-family: "Open Sans", sans-serif;
}
@media (max-width: 1535px) {
    .radders-favorites-sec .two-way-line-articles article p { font-size: 16px; }
}

.radders-favorites-sec .content-right {
    flex: 0 0 35%;
    border: 3px solid #60f480;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
@media (max-width: 765px) {
    .radders-favorites-sec .content-right { border: none; width: 93%; margin: auto; }
}
.radders-favorites-sec .content-right .article-list {
    padding: 30px;
    border-left: 3px solid #60f480;
    border-right: 3px solid #60f480;
    border-bottom: 3px solid #60f480;
}
@media (max-width: 765px) {
    .radders-favorites-sec .content-right .article-list { border-top: 3px solid #60f480; padding: 15px; }
}
.radders-favorites-sec .content-right article {
    border-bottom: 1px solid #8e8e8e;
    padding-bottom: 35px;
    margin-bottom: 35px;
}
@media (max-width: 765px) {
    .radders-favorites-sec .content-right article { padding-bottom: 25px; margin-bottom: 25px; }
}
.radders-favorites-sec .content-right article:last-child { border: none; padding-bottom: 20px; margin-bottom: 0; }
.radders-favorites-sec .content-right article a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.radders-favorites-sec .content-right article figure { height: 160px; flex: 0 0 43%; overflow: hidden; }
@media (max-width: 1535px) {
    .radders-favorites-sec .content-right article figure { flex: 0 0 45%; height: 128px; }
}
.radders-favorites-sec .content-right article figure img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out; }
.radders-favorites-sec .content-right article figure img:hover { transform: scale(1.1); }
.radders-favorites-sec .content-right article h5 {
    flex: 0 0 52%;
    font-size: 23px;
    line-height: 30px;
    font-weight: 700;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
@media (max-width: 1535px) {
    .radders-favorites-sec .content-right article h5 { font-size: 20px; }
}
@media (max-width: 765px) {
    .radders-favorites-sec .content-right article h5 { font-size: 17px; line-height: 22px; }
}

/* -------------------------------------------------------------------------
   Home category grid + category-by-category blocks (home-two-categories,
   home-categorized-posts) - not present in _healthWealth.scss at all (the
   real site's shipped CSS only covers hero-sec / radders-favorites-sec /
   three-articles-big-sizes / three-small-articles / home-form-sec; these two
   Twig partials exist in the reference templates but this SCSS file never
   styles their classes). Designed fresh here in the same green brand system
   since there was no clean equivalent to port.
   ------------------------------------------------------------------------- */
.home-two-categories { margin-top: 70px; }
.home-two-categories .htc-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
@media (max-width: 765px) {
    .home-two-categories .htc-items { grid-template-columns: 1fr; }
}
.home-two-categories .htc-item {
    border: 3px solid #60f480;
    padding: 20px;
    display: block;
}
.home-two-categories .htc-item h2 {
    font-size: 22px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 15px;
    color: #136d30;
}
.home-two-categories .htc-image {
    height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin-bottom: 15px;
}
.home-two-categories .htc-category {
    font-size: 13px;
    text-transform: uppercase;
    color: #3bab53;
    font-weight: 600;
    margin-bottom: 5px;
}
.home-two-categories .htc-name { font-size: 19px; font-weight: 600; }

.home-categorized-posts { margin-top: 60px; }
.home-categorized-posts h2 {
    font-size: 30px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 25px;
    color: #136d30;
}
.home-categorized-posts .hcp-wrapper {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
}
@media (max-width: 765px) {
    .home-categorized-posts .hcp-wrapper { grid-template-columns: 1fr; }
}
.home-categorized-posts .hcp-image {
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin-bottom: 15px;
}
.home-categorized-posts .hcp-category {
    font-size: 13px;
    text-transform: uppercase;
    color: #3bab53;
    font-weight: 600;
    margin-bottom: 8px;
}
.home-categorized-posts .hcp-name { font-size: 24px; font-weight: 700; line-height: 1.3; }
.home-categorized-posts .hcp-descr { font-size: 15px; line-height: 1.5; margin-top: 10px; color: #444; }
.home-categorized-posts .hcp-narrow { display: flex; flex-direction: column; gap: 18px; }
.home-categorized-posts .hcpn-item { display: flex; gap: 15px; align-items: center; }
.home-categorized-posts .hcpn-image { flex: 0 0 100px; height: 90px; background-size: cover; background-position: center; border-radius: 4px; }
.home-categorized-posts .hcpn-category { font-size: 11px; text-transform: uppercase; color: #3bab53; font-weight: 600; }
.home-categorized-posts .hcpn-name { font-size: 15px; font-weight: 600; line-height: 1.3; }

/* -------------------------------------------------------------------------
   Article grids (three-articles-big-sizes, three-small-articles) - reused
   for the "All Articles" listing page (articles_list.html)
   ------------------------------------------------------------------------- */
.three-articles-big-sizes { margin-top: 40px; }
.three-articles-big-sizes .list {
    border: 3px solid #60f480;
    padding: 30px;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
}
@media (max-width: 765px) {
    .three-articles-big-sizes .list { grid-template-columns: repeat(1, 1fr); padding: 15px; }
}
.three-articles-big-sizes .list article { min-height: 633px; display: flex; align-items: end; }
@media (max-width: 1535px) {
    .three-articles-big-sizes .list article { min-height: 480px; }
}
@media (max-width: 865px) {
    .three-articles-big-sizes .list article { min-height: 400px; }
}
.three-articles-big-sizes .list article .content {
    width: 80%;
    margin: auto;
    padding: 30px;
    background: #ebebeb;
    margin-bottom: -25px;
    border-bottom: 8px solid #3bab53;
    min-height: 200px;
}
@media (max-width: 1535px) {
    .three-articles-big-sizes .list article .content { min-height: 180px; border-bottom: 5px solid #3bab53; width: 72%; }
}
.three-articles-big-sizes .list article .content h5 {
    font-size: 23px;
    line-height: 32px;
    font-weight: 700;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media (max-width: 1535px) {
    .three-articles-big-sizes .list article .content h5 { font-size: 19px; line-height: 1.2; }
}
@media (max-width: 1535px) {
    .three-articles-big-sizes .list article .content .line-bar { width: 50%; height: 4px; }
}
.three-articles-big-sizes .list article .content p {
    font-size: 15px;
    line-height: 1.3;
    font-family: "Open Sans", sans-serif;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
@media (max-width: 1535px) {
    .three-articles-big-sizes .list article .content p { font-size: 13px; line-height: 1.2; }
}

.three-small-articles { margin-top: 40px; }
.three-small-articles .list {
    border: 3px solid #60f480;
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
}
@media (max-width: 865px) {
    .three-small-articles .list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 765px) {
    .three-small-articles .list { grid-template-columns: repeat(1, 1fr); padding: 15px; border-width: 1px; }
}
.three-small-articles .list article a { display: flex; justify-content: space-between; }
.three-small-articles .list article figure { width: 136px; height: 136px; flex: 0 0 136px; overflow: hidden; }
@media (max-width: 1535px) {
    .three-small-articles .list article figure { flex: 30%; height: 110px; }
}
.three-small-articles .list article figure img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out; }
.three-small-articles .list article figure img:hover { transform: scale(1.1); }
.three-small-articles .list article .content { flex: 0 0 65%; }
@media (max-width: 1535px) {
    .three-small-articles .list article .content { margin-left: 10px; }
}
.three-small-articles .list article .content .line-bar { width: 40%; height: 4px; }
@media (max-width: 1535px) {
    .three-small-articles .list article .content .line-bar { margin: 8px 0; }
}
.three-small-articles .list article .content h6 {
    font-size: 19px;
    line-height: 23px;
    font-weight: 700;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media (max-width: 1535px) {
    .three-small-articles .list article .content h6 { font-size: 16px; }
}
.three-small-articles .list article .content p {
    font-size: 12px;
    line-height: 1.3;
    height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-family: "Open Sans", sans-serif;
}
@media (max-width: 1535px) {
    .three-small-articles .list article .content p { font-size: 11px; height: 45px; }
}
@media (max-width: 765px) {
    .three-small-articles .list article .content p { height: 50px; font-size: 13px; }
}

.hw-listing-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #136d30;
}
.hw-empty { padding: 30px 0; font-size: 16px; color: #666; }

/* -------------------------------------------------------------------------
   Pagination - articles-pagination.html.twig uses class="pagination-articles"
   but ships with no CSS in _healthWealth.scss (it's Prev/Next-link-only on
   the real site, no numbered pages); this app's routes expose numbered
   pages too, so a "current page" style (.pagination-page.active) was added
   fresh, matching the brand colors.
   ------------------------------------------------------------------------- */
.pagination-articles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.pagination-articles a {
    display: inline-block;
    padding: 8px 16px;
    border: 2px solid #60f480;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #136d30;
}
.pagination-articles a:hover { background: #3bab53; color: #fff; border-color: #3bab53; }
.pagination-articles a.pagination-page.active { background: #136d30; color: #fff; border-color: #136d30; }

/* -------------------------------------------------------------------------
   "Didn't find what you're looking for" CTA (home-form-sec)
   ------------------------------------------------------------------------- */
.home-form-sec { margin-top: 100px; }
.home-form-sec h2 {
    text-align: center;
    font-size: 31px;
    color: #3bab53;
    font-family: "Poppins", sans-serif;
}
@media (max-width: 1535px) {
    .home-form-sec h2 { font-size: 28px; }
}
@media (max-width: 765px) {
    .home-form-sec h2 { font-size: 19px; }
}
.home-form-sec form {
    width: 60%;
    margin: auto;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: 10px;
    margin-top: 20px;
}
@media (max-width: 1535px) {
    .home-form-sec form { padding: 6px 12px; }
}
@media (max-width: 765px) {
    .home-form-sec form { width: 90%; }
}
.home-form-sec form input { display: block; width: 95%; outline: none; border: none; }
.home-form-sec form button { background: none; outline: none; border: none; display: block; }
.home-form-sec form button img { width: 32px; }
@media (max-width: 1535px) {
    .home-form-sec form button img { width: 24px; }
}
.home-form-sec span {
    display: block;
    width: 65%;
    margin: auto;
    margin-top: 80px;
    text-align: center;
    font-size: 21px;
    line-height: 1.3;
}
@media (max-width: 1535px) {
    .home-form-sec span { font-size: 18px; width: 80%; }
}
@media (max-width: 765px) {
    .home-form-sec span { font-size: 15px; width: 70%; }
}
.home-form-sec span a { display: inline-block; font-weight: 700; }
.home-form-sec .line { width: 48%; margin: auto; border-bottom: 2px solid black; margin-top: 30px; }
.home-form-sec small { display: block; text-align: center; margin-top: 40px; }

/* -------------------------------------------------------------------------
   Single article (article-sec-content)
   ------------------------------------------------------------------------- */
.article-sec-content { margin-top: 30px; }
.article-sec-content .content-wrapper { width: 60%; margin: auto; }
@media (max-width: 765px) {
    .article-sec-content .content-wrapper { width: 100%; }
}
.article-sec-content .title-heading {
    font-size: 55px;
    margin: auto;
    font-weight: 700;
    width: 90%;
    text-align: center;
    line-height: 64px;
    color: #00b3e6;
}
@media (max-width: 1535px) {
    .article-sec-content .title-heading { font-size: 42px; line-height: 48px; }
}
@media (max-width: 765px) {
    .article-sec-content .title-heading { font-size: 41px; width: 100%; }
}
.article-sec-content figure { margin: auto; margin-top: 30px; }
@media (max-width: 765px) {
    .article-sec-content figure { height: 422px; width: 100%; }
}
.article-sec-content figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 765px) {
    .article-sec-content figure img { border-radius: 20px; }
}
.article-sec-content p {
    font-size: 23px;
    line-height: 40px;
    margin-top: 40px;
}
@media (max-width: 1535px) {
    .article-sec-content p { font-size: 19px; margin-top: 35px; line-height: 32px; }
}
.article-sec-content h2, .article-sec-content h3, .article-sec-content h4 {
    font-size: 30px;
    line-height: 40px;
    margin-top: 40px;
    font-weight: 400;
    color: #000;
}
@media (max-width: 1535px) {
    .article-sec-content h2, .article-sec-content h3, .article-sec-content h4 { font-size: 28px; margin-top: 25px; }
}
.article-sec-content h3 { font-size: 24px; }
.article-sec-content h4 { font-size: 20px; }
.article-sec-content ul { list-style: disc; list-style-position: inside; margin: 10px 0; }
.article-sec-content ul li, .article-sec-content li { margin: 10px 0 10px 20px; line-height: 1.3; list-style: disc; list-style-position: inside; }
.article-sec-content ol { list-style-type: decimal; }
.article-sec-content strong { display: inline !important; }
.article-sec-content a { display: inline !important; text-decoration: underline; }

/* article-content.html.twig's category tag / byline - no CSS in
   _healthWealth.scss for either (article-sec-content only styles the
   title/body, not a category badge or author line); added fresh. */
.article-category {
    display: inline-block;
    background: #3bab53;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-top: 20px;
}
.article-author { text-align: center; color: #666; font-size: 14px; margin-top: 10px; }
.article-author span { font-weight: 700; color: #136d30; }

.next-articles-read h2 {
    font-size: 55px;
    line-height: 1.3;
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #1c592d;
    border-bottom: 1px solid #1c592d;
    margin-top: 100px;
}
@media (max-width: 1535px) {
    .next-articles-read h2 { font-size: 38px; }
}
@media (max-width: 765px) {
    .next-articles-read h2 { width: 100%; }
}
.next-articles-read .list-articles {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}
@media (max-width: 765px) {
    .next-articles-read .list-articles { grid-template-columns: repeat(1, 1fr); }
}
.next-articles-read .list-articles article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.next-articles-read .list-articles article figure { flex: 0 0 30%; height: 184px; }
@media (max-width: 1535px) {
    .next-articles-read .list-articles article figure { height: 145px; }
}
@media (max-width: 765px) {
    .next-articles-read .list-articles article figure { height: 120px; }
}
.next-articles-read .list-articles article figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.next-articles-read .list-articles article .content { flex: 0 0 65%; }
.next-articles-read .list-articles article .content h5 { font-size: 28px; line-height: 1.3; }
@media (max-width: 1535px) {
    .next-articles-read .list-articles article .content h5 { font-size: 22px; }
}
@media (max-width: 765px) {
    .next-articles-read .list-articles article .content h5 { font-size: 16px; }
}
.next-articles-read .list-articles article .content .btn {
    color: white;
    width: fit-content;
    margin-top: 20px;
    padding: 15px 35px;
    border-radius: 7px;
    font-size: 14px;
    background: linear-gradient(to right, #67de81, #136d30);
    display: inline-block;
}
@media (max-width: 1535px) {
    .next-articles-read .list-articles article .content .btn { margin-top: 10px; }
}
@media (max-width: 765px) {
    .next-articles-read .list-articles article .content .btn { padding: 12px 25px; }
}
.next-articles-read .list-articles .left-zone,
.next-articles-read .list-articles .right-zone {
    border: 1px solid rgba(128, 128, 128, 0.067);
    padding: 20px;
    border-radius: 15px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
@media (max-width: 765px) {
    .next-articles-read .list-articles .right-zone { display: none; }
}

/* -------------------------------------------------------------------------
   "More Categories" sidebar (sidebar-articles.html.twig) - no styling in
   _healthWealth.scss (this site's article page has no sidebar in the
   reference build); added fresh, reusing the same card language as the
   home category blocks above.
   ------------------------------------------------------------------------- */
.hw-more-categories { margin-top: 60px; }
.hw-more-categories h2 {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 25px;
    color: #136d30;
}
.sidebar-articles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .sidebar-articles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 765px) {
    .sidebar-articles { grid-template-columns: 1fr; }
}
.sidebar-articles .sa-item { border: 1px solid #eee; border-radius: 6px; overflow: hidden; }
.sidebar-articles .sai-image { height: 130px; background-size: cover; background-position: center; }
.sidebar-articles .sai-info { padding: 12px; }
.sidebar-articles .sai-category { font-size: 11px; text-transform: uppercase; color: #3bab53; font-weight: 600; margin-bottom: 4px; }
.sidebar-articles .sai-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.sidebar-articles .all-articles {
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 700;
    color: #136d30;
    text-decoration: underline;
    padding: 10px 0;
}

/* -------------------------------------------------------------------------
   Search (stub page) - the reference search.html.twig is entirely driven by
   the live Yahoo-organic feed/algo results (no static markup to port); this
   app's /search route is a documented stub (always-empty results), so a
   clean minimal branded empty-state was designed fresh instead.
   ------------------------------------------------------------------------- */
.hw-search-page { margin-top: 40px; min-height: 50vh; }
.hw-search-results { display: flex; flex-direction: column; gap: 25px; }
.hw-search-result { padding-bottom: 20px; border-bottom: 1px solid #eee; }
.hw-search-result__title { font-size: 19px; font-weight: 700; color: #136d30; display: inline-block; }
.hw-search-result__descr { font-size: 14px; color: #444; margin: 8px 0; }
.hw-search-result__url { font-size: 13px; color: #3bab53; display: inline-block; }
.hw-search-empty { padding: 60px 0; text-align: center; font-size: 17px; color: #666; }

/* -------------------------------------------------------------------------
   Yahoo ad feed (top5.html / partials/top5_feed.html) - ported directly from
   search-top5.html.twig's real "hotspots-ads" styling; the ad-serving/
   click-tracking logic itself lives in shared theme_template()/JS
   infrastructure and was left untouched, only this visual chrome is ported.
   ------------------------------------------------------------------------- */
.hotspots-ads { margin-top: 30px; min-height: 78vh; }
.hotspots-ads .title { font-size: 35px; font-weight: 700; color: #666; }
@media (max-width: 765px) {
    .hotspots-ads .title { font-size: 28px; line-height: 37px; }
}
.hotspots-ads .sponsored { font-size: 15px; margin-top: 25px; display: block; }
@media (max-width: 765px) {
    .hotspots-ads .sponsored { margin-top: 10px; }
}
.hotspots-ads .list-ads { margin-top: 20px; }
@media (max-width: 765px) {
    .hotspots-ads .list-ads { margin-top: 10px; }
}
.hotspots-ads .list-ads article {
    position: relative;
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 23px 45px 20px 23px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 765px) {
    .hotspots-ads .list-ads article {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
        border: 1px solid #ececec;
    }
}
/* Decorative "sponsored" ribbon tab on the card's left edge - theme's own
   --color-primary, not a fixed color, so it stays on-brand per site. */
.hotspots-ads .list-ads .ad-ribbon {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 84px;
    background: var(--color-primary, #3bab53);
    clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%);
    border-radius: 8px 0 0 8px;
}
@media (max-width: 765px) {
    .hotspots-ads .list-ads .ad-ribbon { left: -8px; width: 18px; height: 56px; }
}
.hotspots-ads .list-ads .left-content { width: 85%; }
@media (max-width: 765px) {
    .hotspots-ads .list-ads .left-content { width: 100%; }
}
/* Ad links only as wide as their own text - a full-width block <a> makes the
   white space beside it clickable, which Yahoo flags as a policy violation. */
.hotspots-ads .list-ads .left-content h3 a {
    display: inline;
    font-size: 20px;
    color: #010101;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
    line-height: 1.3;
}
.hotspots-ads .list-ads .left-content > a {
    margin: 8px 0;
    color: #3bab53;
    font-weight: 400;
    font-size: 13px;
    font-family: "Merriweather", serif;
    display: block;
    width: fit-content;
    max-width: 100%;
}
.hotspots-ads .list-ads .left-content p a {
    display: inline;
    color: #999;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    font-family: "Merriweather", serif;
}
.hotspots-ads .list-ads .right-content { flex-shrink: 0; }
@media (max-width: 765px) {
    .hotspots-ads .list-ads .right-content { width: 100%; }
}
.hotspots-ads .list-ads .right-content a {
    background-color: #136d30;
    width: 110px;
    padding: 10px 0;
    border-radius: 5px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border: 1px solid #136d30;
    font-weight: 600;
}
@media (max-width: 765px) {
    .hotspots-ads .list-ads .right-content a { width: 100%; height: 46px; justify-content: center; gap: 10px; }
}
.hotspots-ads .list-ads .right-content span { font-size: 18px; color: white; display: block; }
@media (max-width: 765px) {
    .hotspots-ads .list-ads .right-content span { text-align: center; margin: 0; }
}
.hotspots-ads .list-ads .right-content .nav-right { width: 6px; height: 11px; display: block; }
.hotspots-ads .list-ads .right-content .nav-green-right { width: 6px; height: 11px; display: none; }
/* No card-level :hover effect - the card itself isn't a link, so it mustn't
   look interactive (Yahoo: no clickable-looking white space). Only the CTA
   button reacts, and only when it's hovered itself. */
.hotspots-ads .list-ads .right-content a:hover { background: none; }
.hotspots-ads .list-ads .right-content a:hover span { color: #136d30; }
.hotspots-ads .list-ads .right-content a:hover .nav-right { display: none; }
.hotspots-ads .list-ads .right-content a:hover .nav-green-right { display: block; }
.hotspots-ads .hw-ad-callouts,
.hotspots-ads .hw-ad-annotations { font-size: 13px; color: #999; margin-top: 6px; }
.hotspots-ads .hw-ad-sitelinks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.hotspots-ads .hw-ad-sitelinks a { display: inline; color: #136d30; font-size: 13px; text-decoration: underline; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
footer {
    background-color: #136d30;
    padding: 20px 0;
    margin-top: 50px;
}
@media (max-width: 675px) {
    footer { display: flex; align-items: center; padding: 20px; }
}
footer ul {
    width: 55%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
@media (max-width: 675px) {
    footer ul { width: 60%; flex-direction: column; align-items: start; }
}
footer ul li a { color: white; white-space: nowrap; }
@media (max-width: 1535px) {
    footer ul li a { font-size: 14px; }
}
@media (max-width: 675px) {
    footer ul li { width: 45%; margin-top: 20px; }
}
footer .footer-logo { display: none; }
@media (max-width: 675px) {
    footer .footer-logo { display: block; width: 193px; height: 50px; }
}

/* -------------------------------------------------------------------------
   Static pages (about / contact / terms / privacy / cookie)
   ------------------------------------------------------------------------- */
.about-wrapper, .contact-wrapper { min-height: 75vh; margin-top: 20px; }
.about-wrapper .about-subheader, .contact-wrapper .about-subheader { font-size: 42px; font-weight: 700; }
.about-wrapper h1 { font-size: 32px; margin: 20px 0; }
.about-wrapper h3 { font-size: 20px; font-weight: 600; }
.about-wrapper a, .contact-wrapper a { margin: 20px 0; text-decoration: underline; display: inline; }
.about-wrapper p, .contact-wrapper p { font-size: 16px; margin: 20px 0; line-height: 1.7; }
.about-wrapper strong, .contact-wrapper strong { font-weight: 600; }
.about-wrapper .orderlist ol { list-style: decimal !important; list-style-position: inside !important; }
.about-wrapper .orderlist p { margin-top: 0; }
.about-wrapper .orderlist li { margin: 15px 0; line-height: 25px; margin-left: 10px; }
.about-wrapper .contact { margin-top: 20px; display: block; width: fit-content; }

.contact-wrapper h1 { font-size: 35px; margin: 20px 0; }
.contact-wrapper h2 { font-size: 25px; margin-top: 25px; margin-bottom: 5px; }
.contact-wrapper .contact-subheader { line-height: 1.4; }

.terms, .privacy, .cookie { min-height: 75vh; margin-top: 20px; }
.terms h1, .privacy h1, .cookie h1 { font-size: 35px; margin: 20px 0; }
.terms h2 { font-size: 35px; margin-top: 15px; margin-bottom: 5px; }
.privacy h2, .cookie h2 { font-size: 24px; margin-top: 15px; margin-bottom: 5px; }
.terms h3, .privacy h3, .cookie h3 { font-size: 25px; margin-bottom: 15px; margin-top: 30px; }
.cookie u { font-size: 23px; font-weight: 600; }
.terms a, .privacy a, .cookie a { margin: 20px 0; text-decoration: underline; display: inline; }
.terms p, .privacy p, .cookie p { font-size: 16px; margin-bottom: 20px; line-height: 1.7; margin-top: 5px; }
.terms ul, .privacy ul, .cookie ul { line-height: 1.5; margin: 20px 0 20px 20px; }
.terms ul li, .privacy ul li, .cookie ul li { list-style-type: disc; list-style-position: inside; }
.privacy ul li, .cookie ul li { margin-top: 10px; }
.terms strong, .privacy strong, .cookie strong { font-weight: 600; }

/* Article byline: bold "Author:" label - this theme's reset sets <strong>
   back to normal weight, so it needs restating here. */
.article-author strong { font-weight: 700; }