/* 
 * Paradigm Pet Professionals - Responsive Styles
 * This file contains styles for responsive design across different device sizes,
 * ensuring the UI is modern and fluid while adhering to brand specifications.
 */

/* ====================
   Breakpoints:
   - Extra Small: max-width 575px (phones)
   - Small: min-width 576px - max-width 767px (landscape phones)
   - Medium: min-width 768px - max-width 991px (tablets)
   - Large: min-width 992px - max-width 1199px (desktops)
   - Extra Large: min-width 1200px (large desktops)
   ==================== */

/* Base responsive adjustments for all screen sizes */
html {
    font-size: 16px; /* Base font size */
}

/* Common adjustments for smaller screens */
@media only screen and (max-width: 991px) {
    html {
        font-size: 15px;
    }
    
    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    /* Adjust card grid for better fit */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

/* Extra Small devices (phones, 575px and down) */
@media only screen and (max-width: 575px) {
    html {
        font-size: 14px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    .hero-content {
        padding: var(--spacing-md);
    }
    
    /* Adjust spacing */
    section {
        padding: var(--spacing-md) 0;
    }
    
    .content-section {
        padding: var(--spacing-md);
    }

    .hero {
        padding: var(--spacing-lg) 0;
    }
    
    /* Stack form elements */
    .form-row {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .form-row .form-group {
        flex: 1 0 100%;
    }
    
    /* Adjust buttons for smaller screens */
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions button {
        width: 100%;
    }
    
    /* Full-width cards on mobile */
    .card-grid {
        grid-template-columns: 1fr;
    }
    
    /* Adjust hero text */
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    /* Make footer columns stack */
    .footer-column {
        flex: 1 0 100%;
        margin-bottom: var(--spacing-lg);
    }
    
    /* Adjust age selector */
    .age-selector {
        flex-direction: column;
        width: 100%;
    }
    
    .age-btn {
        width: 100%;
    }
    
    /* Adjust feature boxes */
    .feature-box {
        flex-direction: column;
        text-align: center;
    }
    
    .feature-icon {
        margin: 0 auto var(--spacing-sm);
    }
}

/* Small devices (landscape phones, 576px to 767px) */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    /* Two-Column Layout stacks on small devices */
    .two-column {
        flex-direction: column;
    }
    
    .column + .column {
        margin-top: var(--spacing-lg);
    }
    
    /* Keep footer columns stacked */
    .footer-column {
        flex: 1 0 100%;
        margin-bottom: var(--spacing-md);
    }
    
    /* Single column cards */
    .card-grid {
        grid-template-columns: 1fr;
    }
}

/* Medium devices (tablets, 768px to 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    /* Adjust card grid for better fit */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Footer adjustments */
    .footer-container {
        flex-wrap: wrap;
    }
    
    .footer-column {
        flex: 1 0 45%;
        margin-bottom: var(--spacing-lg);
    }
}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /* Enhanced desktop experience */
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Improved hover effects only for devices that support hover */
    @media (hover: hover) {
        .card:hover {
            transform: translateY(-10px);
        }
        
        .btn:hover {
            transform: translateY(-3px);
        }
    }
}

/* Header/Navigation Responsiveness */
@media only screen and (max-width: 991px) {
    /* Show mobile menu button */
    .mobile-menu-btn {
        display: block;
    }
    
    /* Hide main navigation by default */
    .main-nav {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: var(--midnight-blue);
        padding: var(--spacing-md);
        box-shadow: var(--shadow-md);
        z-index: 100;
    }
    
    /* Display when active */
    .main-nav.active {
        display: block;
        animation: fadeInDown 0.3s ease forwards;
    }
    
    /* Stack nav items */
    .main-nav ul {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .main-nav li {
        width: 100%;
        margin: 0;
    }
    
    .main-nav a {
        display: block;
        padding: var(--spacing-md);
        border-radius: var(--border-radius-sm);
    }
    
    .main-nav a:not(.btn)::after {
        display: none;
    }
    
    .main-nav a.btn {
        margin-top: var(--spacing-sm);
        text-align: center;
    }
    
    /* Footer layout adjustments */
    .footer-container {
        flex-direction: column;
    }
    
    .social-links {
        justify-content: center;
    }
}

/* Landscape orientation adjustments for mobile */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: var(--spacing-md) 0;
    }
    
    .hero-content {
        padding: var(--spacing-sm);
    }
    
    .hero h1 {
        font-size: 1.8rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .hero p {
        margin-bottom: var(--spacing-md);
    }
}

/* Print styles - for accessibility and usability */
@media print {
    /* Hide navigation, forms, and interactive elements */
    header, 
    footer, 
    .mobile-menu-btn,
    .scroll-to-top,
    .cta-section,
    form,
    .btn,
    .no-print {
        display: none !important;
    }
    
    /* Reset main padding */
    main {
        padding-top: 0;
    }
    
    /* Basic typography adjustments */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    /* Link handling */
    a {
        color: #000;
        text-decoration: underline;
    }
    
    a::after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
    }
    
    /* Optimize headings */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
        color: #000;
    }
    
    /* Prevent orphan or widow lines */
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    
    /* Ensure images print properly */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    /* Ensure proper display of content */
    .container {
        max-width: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    .content-section {
        box-shadow: none;
        padding: 0;
        margin: 1em 0;
        page-break-inside: avoid;
    }
    
    .two-column {
        display: block;
    }
    
    .column {
        width: 100%;
        margin-bottom: 1em;
    }
}

/* Specific high-DPI device adjustments for crisper text and elements */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Dark mode support (if user has dark mode enabled) */
@media (prefers-color-scheme: dark) {
    /* We're not changing the entire site to dark mode since designs are specified,
       but we can make sure elements that appear in system UI (like scroll bars) respect user preferences */
    
    /* Add a very subtle indicator that dark mode is detected */
    .scroll-to-top {
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
}

/* Motion reduction for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    
    .hero-image {
        transition: none;
    }
    
    .scroll-behavior {
        scroll-behavior: auto;
    }
    
    .card:hover, 
    .btn:hover,
    .scroll-to-top:hover,
    .feature-box:hover,
    .content-section:hover {
        transform: none !important;
    }
}

/* Height-based media queries for very short screens */
@media (max-height: 600px) {
    .hero {
        min-height: auto;
    }
    
    .hero-content {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
}

/* Specific adjustment for medium-sized phones */
@media only screen and (min-width: 400px) and (max-width: 575px) {
    .form-actions {
        flex-direction: row;
    }
}

/* Specific adjustments for the Bird Owner page (catering to desktop users as per specs) */
@media only screen and (min-width: 992px) {
    .birds-content .feature-box {
        transition: transform 0.5s ease;
    }
    
    .birds-content .feature-box:hover {
        transform: translateY(-8px) scale(1.02);
    }
    
    /* Enhanced accordion effects */
    .birds-content .accordion-header:hover {
        background-color: rgba(102, 153, 204, 0.1);
    }
}

/* Specific adjustments for the Dog Owner page (catering to mobile users as per specs) */
@media only screen and (max-width: 767px) {
    .dogs-content .card {
        margin-bottom: var(--spacing-md);
    }
    
    .dogs-content .two-column {
        gap: var(--spacing-md);
    }
}

/* Specific adjustments for the Cat Owner page (catering to desktop users as per specs) */
@media only screen and (min-width: 992px) {
    .cat-content .feeding-table {
        box-shadow: var(--shadow-md);
    }
    
    .cat-content .section-title {
        position: relative;
    }
}

/* Helper classes for responsive elements */
.hide-on-mobile {
    display: block;
}

.show-on-mobile {
    display: none;
}

@media only screen and (max-width: 767px) {
    .hide-on-mobile {
        display: none;
    }
    
    .show-on-mobile {
        display: block;
    }
}

/* Add this animation to modal elements on small screens to improve UX */
@media only screen and (max-width: 575px) {
    .modal-content {
        animation: slideInUp 0.3s ease forwards;
    }
    
    @keyframes slideInUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}