/* ==================================================
   MY CARE WIZARD - BLOG POST PAGE
================================================== */

:root {
    --post-bg: #f4ead6;
    --post-bg-soft: #fbf5e9;
    --post-card: #fffaf0;
    --post-card-soft: #f8efdf;

    --post-green: #2d563b;
    --post-green-dark: #1f3f2c;
    --post-green-deep: #173524;
    --post-green-soft: #6f8f77;

    --post-tan: #d8c7a8;
    --post-tan-soft: #e8dcc6;

    --post-text: #21382a;
    --post-text-soft: #5d6d62;
    --post-muted: #7d897f;

    --post-border: rgba(45, 86, 59, 0.14);

    --post-shadow:
        0 18px 45px rgba(44, 68, 50, 0.10);

    --post-radius: 18px;
}


/* ==================================================
   PAGE BACKGROUND
================================================== */

body {
    background:
        linear-gradient(
            180deg,
            #fbf5e9 0%,
            #f4ead6 100%
        );

    color:
        var(--post-text);
}


/* ==================================================
   MAIN ARTICLE SECTION
================================================== */

.section.about {
    padding:
        120px 20px 100px;

    background:
        transparent;
}

.section.about .container {
    width: min(1200px, 94%);
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    grid-template-columns: none;
}


/* ==================================================
   ARTICLE CARD
================================================== */

.about-content {
    position: relative;
    width: 100%;
    max-width: none;
    padding: 60px 64px;
    border: 1px solid var(--post-border);
    border-radius: 24px;
    background: var(--post-card);
    box-shadow: var(--post-shadow);
}

.about-content::before {
    content:
        "MY CARE WIZARD HEALTH RESOURCE";

    display:
        block;

    margin-bottom:
        18px;

    color:
        var(--post-green);

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


/* ==================================================
   BLOG TITLE
================================================== */

.about-content .section-title {
    max-width: 850px;
    margin: 0 0 36px;
    color: var(--post-green-dark);
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-align: left;
}


/* ==================================================
   ARTICLE PARAGRAPHS
================================================== */

.about-content .section-text {
    max-width: 100%;
    margin: 0 0 30px;
    color: var(--post-text-soft);
    font-size: 1.3rem;
    line-height: 1.85;
    text-align: left;
}

.about-content .section-text:last-child {
    margin-bottom:
        0;
}


/* ==================================================
   FIRST PARAGRAPH EMPHASIS
================================================== */

.about-content .section-text:first-of-type {
    color: var(--post-text);
    font-size: 1.38rem;
    line-height: 1.85;
}


/* ==================================================
   TEXT SELECTION
================================================== */

.about-content ::selection {
    background:
        rgba(45, 86, 59, 0.18);

    color:
        var(--post-green-dark);
}


/* ==================================================
   OPTIONAL ARTICLE DIVIDERS
================================================== */

.about-content hr {
    height:
        1px;

    margin:
        42px 0;

    border:
        none;

    background:
        var(--post-tan-soft);
}


/* ==================================================
   ARTICLE LINKS
================================================== */

.about-content a {
    color:
        var(--post-green);

    font-weight:
        700;

    text-decoration:
        underline;

    text-decoration-color:
        rgba(45, 86, 59, 0.35);

    text-underline-offset:
        3px;
}

.about-content a:hover {
    color:
        var(--post-green-dark);

    text-decoration-color:
        var(--post-green-dark);
}


/* ==================================================
   ARTICLE LISTS
================================================== */

.about-content ul,
.about-content ol {
    max-width:
        800px;

    margin:
        26px 0;

    padding-left:
        24px;
}

.about-content li {
    margin-bottom: 12px;
    color: var(--post-text-soft);
    font-size: 1.2rem;
    line-height: 1.75;
}

.about-content ul li::marker {
    color:
        var(--post-green);
}

.about-content ol li::marker {
    color:
        var(--post-green);

    font-weight:
        700;
}


/* ==================================================
   ARTICLE SUBHEADINGS
================================================== */

.about-content h3 {
    margin:
        42px 0 15px;

    color:
        var(--post-green-dark);

    font-size:
        1.65rem;

    line-height:
        1.25;
}

.about-content h4 {
    margin:
        32px 0 12px;

    color:
        var(--post-green);

    font-size:
        1.25rem;
}


/* ==================================================
   ARTICLE CALLOUT BOX
   Can be used later with:
   <div class="article-callout">...</div>
================================================== */

.article-callout {
    margin:
        36px 0;

    padding:
        24px 26px;

    border-left:
        5px solid var(--post-green);

    border-radius:
        10px;

    background:
        var(--post-bg-soft);

    color:
        var(--post-text);

    line-height:
        1.75;
}

.article-callout strong {
    color:
        var(--post-green-dark);
}


/* ==================================================
   HEALTH DISCLAIMER BOX
   Can be added later if needed
================================================== */

.article-disclaimer {
    margin-top:
        42px;

    padding:
        24px;

    border:
        1px solid var(--post-tan);

    border-radius:
        12px;

    background:
        #f8eedc;
}

.article-disclaimer h3 {
    margin:
        0 0 10px;

    color:
        var(--post-green-dark);

    font-size:
        1.2rem;
}

.article-disclaimer p {
    margin:
        0;

    color:
        var(--post-text-soft);

    font-size:
        0.95rem;

    line-height:
        1.7;
}


/* ==================================================
   AFFILIATE PRODUCTS SECTION
================================================== */

.affiliate-products {
    padding:
        100px 20px 120px;

    background:
        linear-gradient(
            180deg,
            #f4ead6,
            #eee0c7
        );
}


/* ==================================================
   AFFILIATE HEADING
================================================== */

.affiliate-products > h2 {
    margin:
        0 auto 12px;

    color:
        var(--post-green-dark);

    font-size:
        clamp(2rem, 4vw, 3.3rem);

    line-height:
        1.1;

    text-align:
        center;
}

.affiliate-products .subtitle {
    max-width:
        650px;

    margin:
        0 auto 45px;

    color:
        var(--post-text-soft);

    font-size:
        1.05rem;

    line-height:
        1.7;

    text-align:
        center;
}


/* ==================================================
   PRODUCT GRID
================================================== */

.naval-grid {
    width:
        min(1180px, 92%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        24px;
}


/* ==================================================
   PRODUCT CARDS
================================================== */

.naval {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        100%;

    padding:
        30px;

    border:
        1px solid var(--post-border);

    border-radius:
        var(--post-radius);

    background:
        var(--post-card);

    box-shadow:
        0 10px 28px rgba(44, 68, 50, 0.07);

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.naval:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(45, 86, 59, 0.30);

    box-shadow:
        var(--post-shadow);
}


/* ==================================================
   AFFILIATE LABEL
================================================== */

.naval::before {
    content:
        "Recommended";

    display:
        inline-block;

    width:
        max-content;

    margin-bottom:
        20px;

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        rgba(45, 86, 59, 0.09);

    color:
        var(--post-green);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ==================================================
   PRODUCT IMAGES
================================================== */

.naval img {
    width:
        100%;

    height:
        210px;

    margin:
        0 auto 24px;

    padding:
        12px;

    border-radius:
        14px;

    background:
        var(--post-bg-soft);

    object-fit:
        contain;
}


/* ==================================================
   PRODUCT TITLES
================================================== */

.naval h3 {
    margin:
        0 0 12px;

    color:
        var(--post-green-dark);

    font-size:
        1.45rem;

    line-height:
        1.25;
}


/* ==================================================
   PRODUCT TEXT
================================================== */

.naval p {
    display: none;
}


/* ==================================================
   AMAZON BUTTON
================================================== */

.buy-btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    margin-top:
        auto;

    padding:
        12px 20px;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            var(--post-green),
            var(--post-green-dark)
        );

    color:
        #fffaf0;

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 8px 20px rgba(45, 86, 59, 0.16);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.buy-btn:hover {
    background:
        linear-gradient(
            135deg,
            var(--post-green-dark),
            var(--post-green)
        );

    color:
        #fffaf0;

    transform:
        translateY(-2px);

    box-shadow:
        0 11px 24px rgba(45, 86, 59, 0.22);
}


/* ==================================================
   AFFILIATE DISCLOSURE
   Optional element you can add later
================================================== */

.affiliate-disclosure {
    width:
        min(900px, 92%);

    margin:
        36px auto 0;

    padding:
        18px 20px;

    border:
        1px solid var(--post-tan);

    border-radius:
        10px;

    background:
        rgba(255, 250, 240, 0.70);

    color:
        var(--post-text-soft);

    font-size:
        0.9rem;

    line-height:
        1.6;

    text-align:
        center;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 950px) {

    .about-content {
        padding:
            48px 42px;
    }

    .naval-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

    .section.about {
        padding:
            80px 12px 70px;
    }

    .section.about .container {
        width:
            100%;
    }

    .about-content {
        padding:
            34px 24px;

        border-radius:
            16px;
    }

    .about-content .section-title {
        font-size:
            clamp(2.3rem, 11vw, 3.4rem);
    }

.about-content .section-text {
    font-size: 1.16rem;
    line-height: 1.8;
}

.about-content .section-text:first-of-type {
    font-size: 1.22rem;
}

    .affiliate-products {
        padding:
            75px 12px 90px;
    }

    .naval {
    padding: 14px;
}

.naval img {
    height: 130px;
}

.naval h3 {
    font-size: 1rem;
}

.naval p {
    margin: 0 0 24px;
    color: var(--post-text-soft);
    line-height: 1.7;
}

.buy-btn {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 0.85rem;
}

    .naval-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .naval {
        padding:
            24px;
    }

    .naval img {
        height:
            190px;
    }
}


/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 430px) {

    .about-content {
        padding:
            28px 19px;
    }

    .about-content::before {
        font-size:
            0.68rem;

        letter-spacing:
            0.12em;
    }

.about-content .section-title {
    font-size: 2.4rem;
}

    .affiliate-products > h2 {
        font-size:
            2rem;
    }
}