/* ============================
   HEADINGS
   ============================ */
h1 {
    margin-top: 0;
    font-size: 32px;
    font-family: ff-meta-web-pro;
    line-height: 122%;
}

h2 {
    font-size: 26px;
    margin-bottom: 18px;
}

h3 {
    font-size: 22px;
    line-height: 130%;
}

h4 {
    font-size: 20px;
}

@media (min-width: 768px) {
    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 22px;
    }
}

/* ============================
   IMAGE STYLING
   ============================ */
img {
    max-width: 100%;
    height: auto;
}

/* ============================
   TEXT UTILITIES
   ============================ */
.text--bold {
    font-weight: bold; /* Bold text utility */
}

.no-text-decor {
    text-decoration: none; /* Remove underline */
    color: black; /* Default color */
}

.no-break {
    white-space: nowrap; /* Prevent text wrapping */
}

/* ============================
   LINE ELEMENTS
   ============================ */
.line {
    border-top: 1px solid black; /* Line styling */
    margin-top: 13px;
    margin-bottom: 13px;
    display: block;
}

.line.mobile--only {
    margin-top: 13px;
    margin-bottom: 13px;
}

@media (min-width: 768px) {
    .line {
        border-top: 1px solid black;
        margin-top: 41px;
        margin-bottom: 41px;
        display: block;
    }
}

/* ============================
   SOCIAL LINKS
   ============================ */
.social__link {
    display: flex; /* Flex container for social links */
}

.social__text {
    margin: 1.5px 0; /* Vertical spacing */
    padding-left: 16px; /* Spacing between icon and text */
}

/* ============================
   RESPONSIVE VISIBILITY
   ============================ */
@media (max-width: 1122px) {
    .desktop--only {
        display: none !important; /* Hide on mobile */
    }

    .mobile--only {
        display: block; /* Show on mobile */
    }
}

@media (min-width: 1122px) {
    .mobile--only {
        display: none !important; /* Hide on desktop */
    }

    .desktop--only {
        display: block; /* Show on desktop */
    }
}