/*
Theme Name: Advanced News Portal (Bootstrap)
Theme URI: https://yourdomain.com
Author: Your Name
Description: An advanced, iOS-native feeling WordPress news portal powered by Bootstrap 5.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
Text Domain: my-news-theme
*/

/* ==========================================================================
   1. GLOBAL NATIVE APP BEHAVIORS
   ========================================================================== */

html {
    scroll-behavior: smooth;
    /* Prevent the blue flash when tapping links on mobile */
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #f8f9fa; /* Bootstrap's bg-light */
    color: #212529; /* Bootstrap's text-dark */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. IOS HARDWARE SAFE AREAS (Notch & Home Indicator)
   ========================================================================== */

.pt-safe { padding-top: env(safe-area-inset-top); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.pl-safe { padding-left: env(safe-area-inset-left); }
.pr-safe { padding-right: env(safe-area-inset-right); }

/* ==========================================================================
   3. ADVANCED NATIVE COMPONENTS (To use alongside Bootstrap classes)
   ========================================================================== */

/* iOS frosted glass effect (Great for fixed navbars: `<nav class="navbar fixed-top glass-nav">`) */
.glass-nav {
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Apple-style squircle cards for news articles */
.native-card {
    border-radius: 24px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.native-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Make Bootstrap card images match the native border radius */
.native-card .card-img-top {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

/* Horizontal scrolling areas (Hide scrollbar for mobile swipe rows) */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Dark Mode Overrides (Triggered by OS preferences) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000000;
        color: #f8f9fa;
    }
    .glass-nav {
        background-color: rgba(0, 0, 0, 0.7) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .native-card {
        background-color: #121212;
        border: 1px solid rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }
}