/* =========================================================
   Austin Pulmonary — Global Styles
   Cleaned & Responsive Version
   ========================================================= */


/* =========================================================
   1. GLOBAL VARIABLES
   ========================================================= */

:root {
    --navy: #062033;
    --navy-2: #0a344f;
    --blue: #0078a8;
    --cyan: #16a3d1;
    --sky: #dff5ff;
    --soft: #f3fbff;
    --ink: #10202b;
    --muted: #5d7180;
    --line: #dbe9ef;
    --white: #ffffff;
    --gold: #c99a42;

    --radius: 12px;

    --page-gradient:
        linear-gradient(
            to top,
            #ffffff 0%,
            #f8fbfd 30%,
            #edf6fb 55%,
            #d8edf8 75%,
            #c3dfef 100%
        );

    --page-radial:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f8fbfd 30%,
            #edf6fb 55%,
            #d8edf8 75%,
            #c3dfef 100%
        );
}


/* =========================================================
   2. RESET / BASE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    color: var(--ink);
    background: var(--white);
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   3. GLOBAL CONTAINER / UTILITIES
   ========================================================= */

.apc-wrap {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.apc-kicker {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--cyan);
}


/* =========================================================
   4. BUTTONS
   ========================================================= */

.apc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 45px;
    padding: 0 28px;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.apc-btn-primary,
.apc-btn-outline-white {
    background: linear-gradient(
        135deg,
        var(--blue),
        var(--cyan)
    );
    color: var(--white);
    box-shadow: 0 10px 20px rgba(0, 120, 168, 0.18);
}

.apc-btn-primary:hover,
.apc-btn-outline-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(0, 120, 168, 0.25);
}


/* Top-bar button */
.top-bar .apc-btn {
    min-width: auto;
    height: 30px;
    min-height: 30px;
    padding: 0 18px;
    font-size: 12px;
    box-shadow: none;
}


/* =========================================================
   5. SECTIONS
   ========================================================= */

.apc-section {
    padding: 80px 0;
}

.apc-section-dark {
    background: var(--navy);
    color: var(--white);
}

.apc-section-soft {
    background: var(--soft);
}

.apc-section-sky {
    background: var(--sky);
}


/* =========================================================
   6. TYPOGRAPHY
   ========================================================= */

.apc-h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--navy);
}

.apc-h2-white {
    color: var(--white);
}

.apc-lede {
    max-width: 580px;
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--muted);
}

.apc-lede-white {
    color: rgba(255, 255, 255, 0.75);
}

.apc-divider {
    width: 48px;
    height: 3px;
    margin: 16px 0 24px;
    border-radius: 2px;
    background: var(--cyan);
}


/* =========================================================
   7. RESPONSIVE GRIDS
   ========================================================= */

.apc-grid-2,
.apc-grid-3,
.apc-grid-4 {
    display: grid;
}

.apc-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.apc-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.apc-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}


/* =========================================================
   8. TOP BAR
   ========================================================= */

.top-bar {
    background: #01243d;
    color: var(--white);
    font-size: 14px;
}

.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 60px;
    padding: 0 40px;
}

.top-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-item a {
    color: var(--white);
    font-family: Arial Black, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
}

.top-item a:hover {
    opacity: 0.8;
}


/* Existing top-bar hero action positioning */
.top-bar .apc-hero-actions {
    margin-top: 25px;
    margin-right: 40px;
    margin-left: auto;
}


/* =========================================================
   9. SITE HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--white);
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   10. MAIN NAVIGATION
   ========================================================= */

nav,
.main-navigation {
    background: var(--white) !important;
}

nav a,
.main-navigation a {
    color: #123a57 !important;

}


/* =========================================================
   11. DROPDOWN / SUB-MENU
   ========================================================= */

.menu li,
.menu li a {
    width: auto !important;
	
}

.sub-menu,
.sub-menu ul {
    min-width: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0b3b68 !important;
}

.sub-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0b3b68 !important;
    line-height: 1 !important;
}

.sub-menu li + li {
    margin-top: 0 !important;
}

.sub-menu li a {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    background: #0b3b68 !important;
    color: var(--navy) !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.sub-menu li a:hover,
.sub-menu li.current-menu-item > a:hover,
.sub-menu li.current-menu-ancestor > a:hover {
    background: #1c5c92 !important;
    color: var(--white) !important;
}


/* =========================================================
   12. HERO
   ========================================================= */

@media (max-width: 1024px) {

    .apc-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .apc-hero-panel {
        width: 100%;
        max-width: 100%;
    }
}


/* =========================================================
   13. TABLET
   ========================================================= */

@media (max-width: 900px) {

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


@media (max-width: 768px) {

    .top-bar-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 15px;
        min-height: 60px;
        padding: 10px 20px;
        text-align: center;
    }

    .top-bar .apc-hero-actions {
        margin: 10px 0 0;
    }

    .apc-hero {
        padding: 60px 20px;
        text-align: center;
    }

    .apc-hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .apc-hero-metrics {
        justify-content: center;
        gap: 20px;
    }

    .apc-hero-panel {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 24px;
    }

    .apc-section {
        padding: 56px 0;
    }

    .apc-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* =========================================================
   14. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .apc-grid-2,
    .apc-grid-3,
    .apc-grid-4 {
        grid-template-columns: 1fr;
    }

    .apc-hero-actions {
        width: 100%;
    }

    .apc-hero-actions a,
    .apc-hero-actions .apc-btn {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .top-item a {
        font-size: 16px;
    }
}


/* =========================================================
   15. SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .apc-hero h1 {
        font-size: 32px;
        line-height: 1.15;
    }

    .apc-hero-lede {
        font-size: 15px;
    }

    .apc-btn {
        min-width: 0;
        width: 100%;
    }

    .top-bar-inner {
        padding-left: 15px;
        padding-right: 15px;
    }
}


/* =========================================================
   16. FLOATING CTA
   ========================================================= */

.floating-cta {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;

    padding: 14px 22px;
    border-radius: 50px;

    background: var(--cyan);
    color: var(--white) !important;

    font-weight: 700;
    text-align: center;
    text-decoration: none;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

.floating-cta.show {
    opacity: 1;
    visibility: visible;
}

.floating-cta:hover {
    transform: translateY(-2px);
}


/* Mobile floating CTA */
@media (max-width: 768px) {

    .floating-cta {
        left: 15px;
        right: 15px;
        bottom: 15px;
        width: auto;
    }
}


/* =========================================================
   17. HOME SECTION TITLE
   ========================================================= */

.container-none.home-section-title {
    height: auto !important;
    min-height: 0 !important;
}

.container-none.home-section-title img {
    height: auto !important;
}


/* =========================================================
   18. PAGE BACKGROUNDS
   ========================================================= */

/* Standard light blue gradient pages */
.page-id-162 .entry-content,
.page-id-173 .entry-content,
.page-id-175 .entry-content,
.page-id-177 .entry-content,
.page-id-179 .entry-content,
.page-id-166 .entry-content,
.page-id-193 .entry-content,
.page-id-195 .entry-content,
.page-id-198 .entry-content,
.page-id-189 .entry-content,
.page-id-171 .entry-content,
.page-id-782 .entry-content {
    background: var(--page-gradient);
}


/* Radial light blue gradient pages */
.page-id-191 .entry-content,
.page-id-183 .entry-content,
.page-id-427 .entry-content,
.page-id-349 .entry-content,
.page-id-351 .entry-content,
.page-id-358 .entry-content {
    background: var(--page-radial);
}


/* Page 168 */
.page-id-168 .entry-content {
    background: linear-gradient(
        to bottom,
        #99ccff 0%,
        #ffffff 73%
    );
}


/* Page 505 — dark gradient */
.page-id-505 .entry-content {
    background: linear-gradient(
        to top,
        #ffffff 0%,
        #0083b0 50%,
        #002b49 75%,
        #071d30 100%
    );
}


/* Page 181 — slightly different gradient */
.page-id-181 .entry-content {
    background: linear-gradient(
        to top,
        #ffffff 0%,
        #f8fbfd 20%,
        #edf6fb 45%,
        #d8edf8 65%,
        #c3dfef 100%
    );
}


/* =========================================================
   19. ACCESSIBILITY / TOUCH IMPROVEMENTS
   ========================================================= */

@media (max-width: 768px) {

    .sub-menu li a {
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }

    .apc-btn,
    .floating-cta {
        -webkit-tap-highlight-color: transparent;
    }
}


/* =========================================================
   20. REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}