/**
 * Health Federation - Mobile Responsive Stylesheet
 * Optimized for iPhone, iPad, Android phones and tablets
 */

/* ===== CRITICAL: PREVENT ALL HORIZONTAL SCROLL ===== */
html {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Lock the wrapper */
#wrapper,
.wrapper,
.page-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== BASE MOBILE SETTINGS ===== */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    box-sizing: border-box;
}

/* Prevent ALL horizontal overflow on all elements */
.container, 
.container-fluid, 
.row, 
section, 
header, 
footer, 
main,
article,
aside,
nav,
div {
    max-width: 100%;
}

/* Fix Bootstrap row negative margins causing overflow */
.row {
    margin-left: 0;
    margin-right: 0;
}

.row > * {
    padding-left: 15px;
    padding-right: 15px;
}

/* Container fix */
.container {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Fix d-flex containers that might cause overflow */
.d-flex {
    max-width: 100%;
}

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Hero background shapes overflow fix - hide on mobile */
.hero-bg-shapes,
.hero-shape {
    max-width: 100%;
    overflow: hidden;
}

/* Absolute positioned elements fix */
[style*="position: absolute"],
.position-absolute {
    max-width: 100%;
}

/* Touch-friendly tap targets (min 44px for iOS) */
.btn, input, select, textarea {
    min-height: 44px;
}

/* Fix navbar toggler */
.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px !important;
    border: 2px solid rgba(0, 102, 204, 0.5) !important;
    background: transparent !important;
    z-index: 1000;
}

.navbar-toggler:focus {
    box-shadow: none !important;
    outline: none !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 102, 204, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ===== MOBILE NAVIGATION ===== */
@media (max-width: 991.98px) {
    .header .container {
        position: relative;
    }
    
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 1rem;
        right: 1rem;
        background: white;
        padding: 1rem;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        max-height: 80vh;
        overflow-y: auto;
        z-index: 9999;
        margin-top: 0.5rem;
    }
    
    .navbar {
        position: static;
    }
    
    .navbar-nav {
        padding: 0;
        width: 100%;
    }
    
    .navbar-nav .nav-item {
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
    }
    
    .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }
    
    .navbar-nav .nav-link {
        padding: 1rem !important;
        font-size: 1rem;
        font-weight: 500;
        display: block;
        color: #1a365d !important;
        width: 100%;
    }
    
    .navbar-nav .nav-link:hover {
        background: #f8f9fa;
        border-radius: 8px;
    }
    
    .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: 1rem;
        background: #f8f9fa;
        border-radius: 8px;
        margin-top: 0.5rem;
        position: static !important;
        transform: none !important;
        width: 100%;
    }
    
    .dropdown-item {
        padding: 0.75rem 1rem;
        border-radius: 6px;
    }
}

/* ===== TOP BAR MOBILE ===== */
@media (max-width: 767.98px) {
    .top-bar {
        padding: 0.5rem 0 !important;
        font-size: 0.85rem;
    }
    
    .top-bar .social-links a {
        padding: 0.5rem;
        font-size: 1.1rem;
    }
    
    .top-bar .dropdown-toggle {
        font-size: 0.9rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ===== HEADER MOBILE ===== */
@media (max-width: 991.98px) {
    .header {
        padding: 0.75rem 0 !important;
        background-color: #ffffff !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1050 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    .header .container {
        padding: 0 1rem;
        position: relative;
    }
    
    .header .d-flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .header-logo {
        flex: 0 0 auto;
    }
    
    .header-nav {
        flex: 0 0 auto;
    }
    
    .header .logo img {
        max-height: 40px;
        width: auto;
    }
    
    .header .navbar {
        padding: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .header .logo img {
        max-height: 35px;
    }
}

/* ===== HERO / SLIDER MOBILE ===== */
@media (max-width: 991.98px) {
    .hero-section {
        padding-top: 60px !important;
        min-height: auto !important;
    }
    
    .hero-section .container {
        padding: 0 15px;
    }
    
    .hero-section .row {
        margin: 0;
    }
    
    .hero-content {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        text-align: center;
    }
    
    .hero-visual {
        display: none !important;
    }
    
    /* Hide background shapes on mobile for performance */
    .hero-bg-shapes {
        display: none;
    }
    
    .carousel-caption {
        padding: 1.5rem;
        left: 5%;
        right: 5%;
        bottom: 15%;
    }
    
    .carousel-caption h2 {
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-caption p {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 767.98px) {
    .carousel-caption {
        padding: 1rem;
        bottom: 10%;
    }
    
    .carousel-caption h2 {
        font-size: 1.5rem;
    }
    
    .carousel-caption p {
        font-size: 0.9rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .carousel-caption .btn {
        padding: 0.5rem 1.25rem;
        font-size: 0.9rem;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 10%;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .carousel-caption h2 {
        font-size: 1.25rem;
    }
    
    .carousel-caption p {
        font-size: 0.85rem;
        -webkit-line-clamp: 1;
    }
    
    .carousel-indicators {
        bottom: 5px;
    }
    
    .carousel-indicators button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin: 0 4px;
    }
}

/* ===== SECTIONS MOBILE ===== */
@media (max-width: 991.98px) {
    section {
        padding: 3rem 0 !important;
    }
    
    .section-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    /* Fix d-flex + col combination issues */
    .d-flex > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    /* Convert d-flex to column on mobile */
    section .d-flex.align-items-center.justify-content-between {
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    section {
        padding: 2.5rem 0 !important;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ensure all row-like d-flex stack on mobile */
    .container > .d-flex,
    section .d-flex {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    section {
        padding: 2rem 0 !important;
    }
    
    .section-title {
        font-size: 1.35rem;
    }
}

/* ===== CARDS MOBILE ===== */
@media (max-width: 767.98px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-text {
        font-size: 0.9rem;
    }
}

/* ===== FEATURES / SERVICES MOBILE ===== */
@media (max-width: 767.98px) {
    .feature-card,
    .service-card {
        text-align: center;
        padding: 1.5rem;
    }
    
    .feature-icon,
    .service-icon {
        margin: 0 auto 1rem;
    }
    
    .feature-card h3,
    .service-card h3 {
        font-size: 1.1rem;
    }
    
    .feature-card p,
    .service-card p {
        font-size: 0.9rem;
    }
}

/* ===== STATS MOBILE ===== */
@media (max-width: 767.98px) {
    .stat-card {
        padding: 1.25rem !important;
        margin-bottom: 1rem;
    }
    
    .stat-number {
        font-size: 1.75rem !important;
    }
    
    .stat-label {
        font-size: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .stat-number {
        font-size: 1.5rem !important;
    }
}

/* ===== RESEARCH AREAS MOBILE ===== */
@media (max-width: 767.98px) {
    .research-card {
        margin-bottom: 1rem;
    }
    
    .research-card .card-body {
        padding: 1.25rem;
    }
    
    .research-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.25rem;
    }
    
    .research-card h4 {
        font-size: 1rem;
    }
    
    .research-card p {
        font-size: 0.85rem;
    }
}

/* ===== PRESS & NEWS MOBILE ===== */
@media (max-width: 991.98px) {
    .press-news .news-card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 767.98px) {
    .news-card .card-body {
        padding: 1rem;
    }
    
    .news-icon {
        width: 45px !important;
        height: 45px !important;
        padding: 0.5rem !important;
    }
    
    .news-icon i {
        font-size: 1rem !important;
    }
    
    .news-card .card-title {
        font-size: 0.95rem;
        line-height: 1.3;
    }
    
    .news-card .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    .press-stat h3 {
        font-size: 1.25rem !important;
    }
    
    .press-stat p {
        font-size: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .news-card .d-flex {
        flex-direction: column;
        text-align: center;
    }
    
    .news-icon {
        margin: 0 auto 1rem !important;
    }
    
    .news-card .card-title {
        font-size: 0.9rem;
    }
}

/* ===== MEMBERSHIP SECTION MOBILE ===== */
@media (max-width: 767.98px) {
    .membership-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
        text-align: center;
    }
    
    .membership-icon {
        margin: 0 auto 1rem;
    }
    
    .membership-title {
        font-size: 1.1rem;
    }
    
    .membership-text {
        font-size: 0.9rem;
    }
}

/* ===== WHO PRINCIPLES MOBILE ===== */
@media (max-width: 767.98px) {
    .who-definition {
        padding: 1.5rem;
    }
    
    .who-definition blockquote {
        font-size: 1rem;
    }
    
    .principle-card {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .principle-card h5 {
        font-size: 1rem;
    }
    
    .principle-card p {
        font-size: 0.85rem;
    }
}

/* ===== SDG TARGETS MOBILE ===== */
@media (max-width: 767.98px) {
    .sdg-card {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .sdg-card h6 {
        font-size: 0.9rem;
    }
    
    .sdg-card p {
        font-size: 0.8rem;
    }
    
    .sdg-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ===== NEWSLETTER MOBILE ===== */
@media (max-width: 767.98px) {
    .newsletter {
        padding: 2rem 0 !important;
    }
    
    .newsletter h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .newsletter .input-group {
        flex-direction: column;
    }
    
    .newsletter .form-control {
        border-radius: 8px !important;
        margin-bottom: 0.75rem;
        padding: 0.75rem 1rem;
    }
    
    .newsletter .btn {
        border-radius: 8px !important;
        width: 100%;
        padding: 0.75rem;
    }
}

/* ===== FOOTER MOBILE ===== */
@media (max-width: 767.98px) {
    .footer {
        padding: 2.5rem 0 !important;
        text-align: center;
    }
    
    .footer h5 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .footer p {
        font-size: 0.9rem;
    }
    
    .footer .social-icons {
        justify-content: center;
        margin-bottom: 1.5rem;
    }
    
    .footer .social-icons a {
        font-size: 1.25rem;
        padding: 0.5rem;
        margin: 0 0.5rem;
    }
    
    .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .footer-links li {
        margin-bottom: 0.5rem;
    }
    
    .footer-links a {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
    }
}

/* ===== COPYRIGHT MOBILE ===== */
@media (max-width: 767.98px) {
    .copyright {
        text-align: center;
        padding: 1rem 0 !important;
    }
    
    .copyright .row > div {
        margin-bottom: 0.5rem;
    }
    
    .copyright .row > div:last-child {
        margin-bottom: 0;
    }
    
    .copyright .list-inline {
        justify-content: center;
    }
    
    .copyright .list-inline-item {
        margin: 0.25rem 0.5rem;
    }
}

/* ===== PAGE HEADER MOBILE ===== */
@media (max-width: 767.98px) {
    .page-header {
        padding: 2rem 0 !important;
        text-align: center;
    }
    
    .page-header h1 {
        font-size: 1.75rem;
    }
    
    .breadcrumb {
        justify-content: center;
        font-size: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .page-header h1 {
        font-size: 1.5rem;
    }
}

/* ===== FORMS MOBILE ===== */
@media (max-width: 767.98px) {
    .form-control {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 0.75rem 1rem;
        border-radius: 8px;
    }
    
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .form-select {
        font-size: 16px;
        padding: 0.75rem 1rem;
        border-radius: 8px;
    }
    
    textarea.form-control {
        min-height: 120px;
    }
}

/* ===== BUTTONS MOBILE ===== */
@media (max-width: 767.98px) {
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        border-radius: 8px;
    }
    
    .btn-lg {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }
    
    .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    
    /* Full-width buttons on mobile */
    .btn-mobile-full {
        width: 100%;
        display: block;
        margin-bottom: 0.5rem;
    }
}

/* ===== ABOUT PAGE MOBILE ===== */
@media (max-width: 767.98px) {
    .president-message {
        text-align: center;
    }
    
    .president-message img {
        max-width: 150px;
        margin: 0 auto 1.5rem;
    }
    
    .history-timeline {
        padding-left: 1rem;
    }
    
    .principle-grid {
        gap: 1rem;
    }
}

/* ===== RESEARCH PAGE MOBILE ===== */
@media (max-width: 767.98px) {
    .publication-card {
        padding: 1rem;
    }
    
    .publication-card .row {
        flex-direction: column;
    }
    
    .publication-card .col-md-3 {
        text-align: center;
        margin-top: 1rem;
    }
    
    .publication-title {
        font-size: 0.95rem;
    }
    
    .category-filter .form-select {
        margin-bottom: 0.75rem;
    }
    
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    
    .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* ===== MEMBERSHIP PAGE MOBILE ===== */
@media (max-width: 767.98px) {
    .membership-benefits .card {
        margin-bottom: 1rem;
    }
    
    .membership-criteria .list-group-item {
        padding: 1rem;
    }
    
    .application-steps {
        text-align: center;
    }
    
    .step-number {
        margin: 0 auto 0.75rem;
    }
    
    .accordion-button {
        padding: 1rem;
        font-size: 0.95rem;
    }
    
    .accordion-body {
        padding: 1rem;
        font-size: 0.9rem;
    }
}

/* ===== CONTACT PAGE MOBILE ===== */
@media (max-width: 767.98px) {
    .contact-form {
        padding: 1.5rem;
    }
    
    .contact-info .card {
        margin-bottom: 1rem;
        text-align: center;
    }
    
    .contact-icon {
        margin: 0 auto 0.75rem;
    }
}

/* ===== MODALS MOBILE ===== */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-content {
        border-radius: 12px;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-title {
        font-size: 1.1rem;
    }
    
    .modal-body {
        padding: 1rem;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .modal-footer .btn {
        flex: 1;
        min-width: 120px;
    }
}

/* ===== BACK TO TOP BUTTON MOBILE ===== */
@media (max-width: 767.98px) {
    .back-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 15px;
        font-size: 1rem;
    }
}

/* ===== TABLES MOBILE ===== */
@media (max-width: 767.98px) {
    .table-responsive {
        font-size: 0.85rem;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
    }
}

/* ===== ALERTS MOBILE ===== */
@media (max-width: 767.98px) {
    .alert {
        padding: 1rem;
        font-size: 0.9rem;
        border-radius: 8px;
    }
}

/* ===== BADGES MOBILE ===== */
@media (max-width: 767.98px) {
    .badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }
}

/* ===== UTILITIES MOBILE ===== */
@media (max-width: 767.98px) {
    .text-center-mobile {
        text-align: center !important;
    }
    
    .d-mobile-block {
        display: block !important;
    }
    
    .d-mobile-none {
        display: none !important;
    }
    
    .mb-mobile-3 {
        margin-bottom: 1rem !important;
    }
    
    .px-mobile-2 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ===== SAFE AREA INSETS (iPhone X and later) ===== */
@supports (padding: max(0px)) {
    .footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
    
    .copyright {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
    }
    
    .navbar-collapse {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .carousel-caption {
        bottom: 5%;
        padding: 0.75rem;
    }
    
    .carousel-caption h2 {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }
    
    .carousel-caption p {
        display: none;
    }
    
    section {
        padding: 1.5rem 0 !important;
    }
    
    .navbar-collapse {
        max-height: 60vh;
    }
}

/* ===== TABLET SPECIFIC (iPad) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        max-width: 95%;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .card-body {
        padding: 1.5rem;
    }
    
    .news-card .card-title {
        font-size: 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

/* ===== HOVER STATES - REMOVE ON TOUCH DEVICES ===== */
@media (hover: none) {
    .card:hover,
    .news-card:hover,
    .btn:hover {
        transform: none;
    }
    
    .hover-lift:hover {
        transform: none;
    }
}

/* ===== SMOOTH SCROLLING FOR ANCHOR LINKS ===== */
html {
    scroll-padding-top: 80px;
}

@media (max-width: 991.98px) {
    html {
        scroll-padding-top: 70px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .top-bar,
    .navbar-toggler,
    .back-to-top,
    .newsletter,
    .social-icons {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
}