/* =========================================
   RESPONSIVE STYLES
   =========================================
   This CSS file contains all media queries 
   and responsive adjustments for the website.
   
   Purpose:
   - Ensure the site layout adapts to different 
     screen sizes: desktop, tablet, and mobile.
   - Make text, images, headers, navigation, 
     and article boxes readable and visually balanced
     on smaller screens.
   - Improve user experience on devices ranging 
     from large monitors to small smartphones.

   Features:
   - Adjusts logos, header titles, and navigation links
     for tablets and mobile screens.
   - Stacks content like story rows and image/quote sections
     vertically on narrow screens.
   - Provides general responsiveness for all main and
     article elements, including padding, width, and
     max-width adjustments.
   - Tweaks article titles and paragraph spacing for 
     readability on smaller devices.
   - Handles responsive video embeds for proper scaling.
   
   Notes:
   - Media query breakpoints: 768px (tablet), 600px (phones),
     and 480px (small phones).
   - Changes apply to all pages and all articles, including
     specialized sections like Byrne articles.
   - No site-specific or page-specific selectors are used
     for general responsiveness, ensuring consistency. */


/* =========================================
   TABLET AND BELOW (768px)
   ========================================= */

/* Carousel dots positioning for smaller screens */
@media (max-width: 768px) {
    .carousel-dots {
        bottom: 10px;
    }
}

/* Story row - stack vertically on mobile */
@media (max-width: 768px) {
    .story-row,
    .story-row.reverse {
        flex-direction: column;
    }
}

/* General responsive adjustments for tablets */
@media (max-width: 768px) {
    header {
        padding-top: 86px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .logo {
        width: 80px;
        height: 80px;
        top: 15px;
        left: 15px;
    }

    /* ========================================= 
       HAMBURGER MENU - MOBILE RESPONSIVE
       Display hamburger button at 768px breakpoint and below
       ========================================= */
    
    /* Show hamburger menu button on tablets and mobile */
    .hamburger-menu {
        display: flex;
        top: 16px;
        right: 15px;
        transform: none;
    }

    header h1 {
        font-size: 1.8rem;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        text-align: center;
        text-wrap: balance;
    }

    /* Hide nav by default on mobile, shown when .active class is applied via JavaScript */
    nav#main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.9);
        padding: 15px 0;
        border-radius: 0;
        width: 100%;
        text-align: center;
        z-index: 2000;
    }

    /* Show nav when active */
    nav#main-nav.active {
        display: flex;
    }

    nav a {
        padding: 12px 20px;
        font-size: 0.95rem;
        display: block;
        color: white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Hide pipe separators on mobile */
    nav a::after {
        content: none;
    }

    main {
        margin: 20px;
        padding: 15px;
    }
}

/* Image and quotes section - stack on tablets */
@media (max-width: 768px) {
    .image-and-quotes {
        flex-direction: column;  
        align-items: center;     
        gap: 1rem;               
    }

    .image-and-quotes img {
        width: 80%;  
        max-width: 300px; 
        margin-left: 0; 
    }

    .quotes {
        text-align: center;
    }
}

/* =========================================
   GENERAL ARTICLE RESPONSIVENESS
   Applies to all main and article elements
   ========================================= */

@media (max-width: 768px) {
    .hero-banner {
        margin: 0 auto;
    }

    .home-main {
        margin: 0 auto 15px auto;
    }

    main, article {
        max-width: 95%;      
        width: 100%;         
        margin: 15px auto;   
        padding: 15px 20px;  
    }

    .article-title {
        font-size: 2rem;       
        margin-top: 10px;
        margin-bottom: 0.8rem;
        line-height: 1.25;     
    }

    article p {
        margin-bottom: 1rem;
    }
}


/* =========================================
   PHONES (600px and below)
   ========================================= */
@media (max-width: 600px) {
    header {
        padding-top: 82px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero-banner {
        margin: 0 auto;
    }

    .home-main {
        margin: 0 18px 18px 18px;
    }

    /* shrink the round logo */
    .logo {
        width: 80px;
        height: 80px;
        top: 15px;
        left: 15px;
    }

    .hamburger-menu {
        top: 14px;
        right: 12px;
        transform: none;
    }

    header h1 {
        font-size: 1.75rem;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        text-wrap: balance;
    }

    body.P_Byrne header h1 {
        font-size: 1.55rem;
    }

    /* MOBILE HAMBURGER MENU: Stack nav vertically with proper touch targets */
    
    /* Organize nav menu for mobile - dropdown from header when active */
    nav#main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }

    /* Larger touch targets for mobile nav links (48px min recommended) */
    nav a {
        padding: 12px 20px;
        font-size: 0.9rem;
        display: block;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Dropdown styling on mobile - ALWAYS VISIBLE (not hover-dependent) */
    nav .has-dropdown .dropdown {
        position: static;
        display: block;  /* Always show dropdown items on mobile */
        background-color: rgba(0, 0, 0, 0.8);
    }

    /* Indent dropdown items to show hierarchy */
    nav .has-dropdown .dropdown a {
        padding-left: 40px;
        font-size: 0.85rem;
    }

    /* Disable hover dropdown on mobile (touchscreens don't have hover) */
    nav .has-dropdown:hover .dropdown {
        display: block;  /* Always visible, not collapsed on hover */
    }

    main {
        margin: 18px;
        padding: 12px;
    }
}


/* =========================================
   MOBILE PHONES (480px and below)
   ========================================= */
@media (max-width: 480px) {
    header {
        padding-top: 76px;
        padding-left: 8px;
        padding-right: 8px;
    }


    .hero-banner {
        margin: 0 auto;
    }

    .home-main {
        margin: 0 auto 10px auto;
    }

    /* shrink logo even more */
    .logo {
        width: 70px;
        height: 70px;
        top: 10px;
        left: 10px;
    }

    .hamburger-menu {
        top: 10px;
        right: 10px;
        transform: none;
    }

    header h1 {
        font-size: 1.75em;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        text-wrap: balance;
    }

    body.P_Byrne header h1 {
        font-size: 1.45rem;
    }

    /* MOBILE HAMBURGER MENU: Further optimization for very small screens */
    
    /* Navigation links - ensure good touch targets on small phones */
    nav a {
        padding: 12px 20px;
        font-size: 0.85rem;
        margin: 0;
        display: block;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Dropdown items for small screens */
    nav .has-dropdown .dropdown a {
        padding-left: 40px;
        font-size: 0.8rem;
    }

    /* Main content */
    main {
        margin: 15px;
        padding: 10px;
    }

    /* Article content adjustments for mobile */
    main, article {
        max-width: 98%;      
        width: 100%;
        margin: 10px auto;
        padding: 10px 15px;  
    }

    /* Article title adjustments for small mobile */
    .article-title {
        font-size: 1.8rem;
        margin-top: 8px;
        margin-bottom: 0.7rem;
        line-height: 1.2;
    }

    /* Paragraph spacing */
    article p {
        margin-bottom: 0.9rem;
    }
}

/* Responsive video embeds */
.video-container {
    margin: 2rem 0;
    max-width: 100%;
}

.video-container iframe {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* =========================================
   P-BYRNE ARTICLES – FULL RESPONSIVE FIX
   ========================================= */

/* ----- Tablet: ≤768px ----- */
@media (max-width: 768px) {

    /* Articles grid becomes single column */
    body.P_Byrne .articles-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* Each article card stacks vertically */
    body.P_Byrne .article-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Article images take full width */
    body.P_Byrne .article-image {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    body.P_Byrne .article-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        object-position: 50% 20% !important;
    }

    /* Text adjustments */
    body.P_Byrne .article-info h3 {
        font-size: 1.3rem !important;
        margin-bottom: 6px !important;
    }

    body.P_Byrne .article-info p {
        font-size: 0.9rem !important;
        margin: 3px 0 !important;
    }
}

/* ----- Phones: ≤600px ----- */
@media (max-width: 600px) {
    body.P_Byrne .article-card {
        padding: 8px !important;
    }

    body.P_Byrne .article-info h3 {
        font-size: 1.25rem !important;
    }

    body.P_Byrne .article-info p {
        font-size: 0.88rem !important;
    }

    body.P_Byrne .article-image img {
        object-position: 50% 25% !important;
    }

    /* Make article cards horizontal: image and info side-by-side */
    body.P_Byrne .article-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 8px !important;
    }
    body.P_Byrne .article-card-image {
        margin-right: 12px !important;
    }
    body.P_Byrne .article-info {
        flex: 1 !important;
    }
    body.P_Byrne .article-info h3 {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
        font-size: 1.1rem !important;
    }
}

/* ----- Small phones: ≤480px ----- */
@media (max-width: 480px) {
    body.P_Byrne .article-card {
        padding: 6px !important;
    }

    body.P_Byrne .article-info h3 {
        font-size: 1.15rem !important;
    }

    body.P_Byrne .article-info p {
        font-size: 0.85rem !important;
    }

    body.P_Byrne .article-image img {
        object-position: 50% 30% !important;
    }
}