/**
 * 10-responsive.css - ITCSS Responsive Layer
 * 
 * ITCSS Layer: Responsive
 * Load Order: 10 of 12
 * Consolidation: 1 file → 1 file (responsive.css)
 * Dependencies: All previous layers (01-09)
 * 
 * Consolidated Files:
 * └── responsive.css → Desktop-First Responsive Styles
 * 
 * System Features:
 * • Desktop-first responsive design approach
 * • Breakpoint-specific layout adjustments
 * • Fixed header positioning and admin bar compensation
 * • Typography scaling across screen sizes
 * • Component responsive behavior optimization
 * • WordPress admin bar integration
 * • High DPI display support
 */

/* ========================================================================
   PLUGIN COMPATIBILITY FIXES
   ======================================================================== */

/* ============================
   Google Reviews Widget Fixes
   ============================ */

.wp-gr .grw-review .wp-google-feedback {
    height: auto !important;
}

/* ========================================================================
   LARGE DESKTOP (MIN-WIDTH: 1200PX)
   ======================================================================== */

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    /* Footer CTA Adjustments */
    .foot-cta .cta-wrapper {
        padding: var(--space-3xl) var(--space-md);
    }
    
    .foot-cta .btn.btn-primary {
        padding: var(--btn-padding-lg);
        min-width: 183px;
        font-size: var(--font-size-md);
    }
    
    /* Navigation Spacing */
    .main-nav .navbar .navbar-nav .nav-item {
        margin-left: 25px;
    }
    
    header .main-nav .navbar .navbar-nav > .nav-item > .nav-link {
        font-size: var(--font-size-lg);
    }
    
    /* Section Overflow Management */
    .get-to-know {
        overflow: hidden;
    }
    
    /* Blog Layout Adjustments */
    .blogdetals .col-lg-5 {
        width: 60.666667%;
    }
    
    .blogimg {
        border-radius: var(--radius-xl);
        width: 58.33333333%;
        max-width: 65rem;
        height: 100%;
        margin-right: -18.75rem;
        overflow: hidden;
    }
}

/* ========================================================================
   MEDIUM DESKTOP (MIN-WIDTH: 992PX - MAX-WIDTH: 1199PX)
   ======================================================================== */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    /* Navigation Compact */
    .main-nav .navbar .navbar-nav .nav-item .nav-link {
        font-size: var(--font-size-sm);
    }
    
    .main-nav .navbar .navbar-nav .nav-item {
        margin-left: 13px;
    }
    
    .main-nav .navbar .navbar-nav .nav-item.menu-item-has-children > a:before {
        top: 9px;
    }
    
    /* Typography Scaling */
    .informed-consumers.ask-pete .ins h2 {
        font-size: var(--heading-size-h2);
    }
    
    /* Sticky Positioning */
    .community-cols.pdetails .sticky-col {
        top: calc(var(--space-header-height, 80px) + 15px);
    }
    
    /* Card Padding Adjustments */
    .community-cols.pdetails .card.card-info {
        padding: var(--space-2xl) var(--space-md) 50px;
    }
    
    .community-cols .card.card-info {
        padding: 38px var(--space-md) 30px;
    }
    
    .intro {
        padding-top: 0;
    }
    
    /* Form Responsive Behavior */
    .formstyle {
        width: 90%;
        right: 5%;
        padding: var(--space-xl) var(--space-md);
        border-radius: var(--radius-lg);
        top: var(--space-header-height, 80px);
    }
    
    .formstyle.active {
        display: flex;
    }
    
    /* FAQ Compact Layout */
    .faq .accordion .accordion-item {
        padding: 40px var(--space-lg) 40px var(--space-lg);
    }
    
    .faq .accordion .accordion-item h3 {
        font-size: 22px;
    }
    
    /* Footer CTA Compact */
    .foot-cta .btn.btn-primary {
        padding: var(--btn-padding-md);
        font-weight: var(--font-weight-semibold);
        min-width: 183px;
        text-align: center;
        font-size: var(--font-size-sm);
    }
    
    /* Banner Layout */
    .banner-new .banner-imgs {
        margin-right: -45px;
    }
    
    .banner-new h2 {
        font-size: 40px;
    }
    
    /* Contact Info Adjustments */
    .contact-info .bg {
        padding: 60px 30px;
    }
    
    /* Blog Layout */
    .blogdetals .col-lg-5 {
        width: 50%;
    }
    
    .blogimg {
        width: 50%;
        margin-right: -18.75rem;
    }
}

/* ========================================================================
   DESKTOP BASELINE (MIN-WIDTH: 992PX)
   ======================================================================== */

@media only screen and (min-width: 992px) {
    /* Enhanced fixed header body padding for desktop with fallbacks */
    body {
        padding-top: var(--space-header-height, 80px) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        min-height: 100vh !important;
    }
    
    /* Enhanced scroll positioning for desktop */
    html {
        scroll-padding-top: var(--space-header-height, 80px) !important;
        scroll-behavior: smooth !important;
        margin: 0 !important;
    }
    
    /* Desktop admin bar compensation */
    body.admin-bar {
        padding-top: calc(var(--space-header-height, 80px) + var(--space-admin-bar-desktop, 32px)) !important;
    }
    
    html.admin-bar {
        scroll-padding-top: calc(var(--space-header-height, 80px) + var(--space-admin-bar-desktop, 32px)) !important;
    }
    
    /* Desktop header positioning reinforcement */
    body.theme-pt .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: var(--z-index-header, 99) !important;
        height: var(--space-header-height, 80px) !important;
        min-height: var(--space-header-height, 80px) !important;
        max-height: var(--space-header-height, 80px) !important;
    }
    
    /* High DPI display support */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        body.theme-pt .header {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }
}

/* ========================================================================
   LARGE TABLET (MIN-WIDTH: 768PX)
   ======================================================================== */

@media (min-width: 768px) {
    /* Hero Content Alignment */
    body.theme-pt .hero-content {
        text-align: left;
    }
    
    body.theme-pt .hero-section h1,
    body.theme-pt .hero-section h2,
    body.theme-pt .hero-section p {
        text-align: left;
    }
}

/* ========================================================================
   TABLET RANGE (MIN-WIDTH: 768PX - MAX-WIDTH: 991PX)
   ======================================================================== */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    /* Reviews Typography */
    .reviews .card.card-review h2 {
        font-size: 22px !important;
    }
    
    .reviews.newpage .card.card-review {
        padding: 40px var(--space-lg) 0;
    }
    
    /* Global Typography Scaling */
    h2 {
        font-size: 30px !important;
    }
    
    .home-quote p {
        font-size: 19px;
    }
    
    /* Footer CTA Layout */
    .foot-cta .cta-wrapper {
        padding: var(--space-3xl) var(--space-xl);
    }
    
    .foot-cta .d-flex {
        display: block !important;
    }
    
    .foot-cta .d-flex .btn.btn-primary {
        margin-top: var(--btn-margin);
    }
    
    .foot-cta {
        text-align: center;
    }
    
    .foot-cta .btn.btn-primary {
        padding: var(--btn-padding-lg);
        margin: 0 var(--space-md);
    }
    
    .foot-cta .cta-wrapper h2 {
        font-size: var(--heading-size-h2) !important;
    }
    
    .footer-logo {
        width: 100%;
        max-width: 15.625rem;
        margin-bottom: var(--space-xl);
        display: inline-block;
        margin-top: 60px;
    }
    
    /* About Sections Typography */
    .aboutlook h3 {
        color: var(--color-accent);
        font-size: 63px;
        line-height: .825em;
        font-weight: var(--font-weight-normal);
        margin-bottom: 30px;
    }
    
    .aboutlook p {
        color: var(--color-text-secondary);
        margin-bottom: 11px;
        font-size: 22px;
        font-weight: var(--font-weight-bold);
        line-height: 1.364em;
    }
    
    /* Blog Layout Tablet */
    .blogdetals .blogimg {
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin-right: 0;
    }
    
    .blogdetals {
        padding-left: 0;
        padding-right: 0;
        padding-top: 9rem;
        overflow: hidden;
    }
    
    .blogdetals h6 {
        margin-top: 30px;
    }
    
    /* Property Sections */
    .buysell-info h3 {
        font-size: 26px;
    }
    
    .community-cols.pdetails .sticky-col {
        margin-top: var(--space-lg);
        z-index: 2;
        top: 0;
    }
    
    .textinfo {
        padding-top: 12.75rem;
        padding-bottom: 4.5rem;
    }
    
    .textinfo.terms h2 {
        font-size: var(--font-size-xl) !important;
    }
    
    /* Utility Classes */
    .sticky-col {
        top: 0;
        height: auto;
        position: relative;
    }
    
    .text-md-center {
        text-align: center;
    }
    
    /* Header Logo Scaling */
    .header.fixed .navbar-brand img,
    .header .navbar-brand img {
        max-height: 66px;
    }
    
    /* Button Margins */
    .get-to-know .btn.btn-primary {
        margin-bottom: var(--btn-margin);
    }
    
    /* Image Layout */
    .aboutimgs .image-wrapper {
        margin-bottom: 30px;
        height: auto;
    }
    
    section.aboutlook .points {
        margin-bottom: 70px;
    }
    
    /* Section Typography */
    .properties-section h2 {
        font-size: var(--font-size-3xl) !important;
    }
    
    /* Marketing Sections */
    .marketing-sells .text-center.text-lg-start {
        text-align: left !important;
    }
    
    .community-cols p img {
        margin-bottom: 40px;
    }
    
    .community-cols h2 {
        font-size: var(--font-size-3xl) !important;
    }
    
    /* Banner Responsive */
    .banner-new h2 {
        font-size: 35px;
    }
    
    .banner-new p {
        max-width: 100%;
    }
    
    .banner-new .banner-imgs {
        padding-left: 28px;
        margin-right: -36px;
    }
    
    .banner-new .banner-imgs img {
        min-height: 300px;
    }
    
    .banner-new .single-banner-image {
        min-height: 400px;
        max-height: 500px;
    }
    
    /* Section Titles */
    .section-title h2 {
        font-size: 26px;
    }
    
    /* Dreams Section Tablet */
    .finding-dreams .dream-card .img {
        min-width: 125px;
        padding-bottom: 10px;
    }
    
    .finding-dreams .dream-card {
        display: block;
    }
    
    /* Contact Info Tablet */
    .contact-info .section-title {
        padding-right: 0;
        padding-bottom: 26px;
    }
    
    .contact-info .bg {
        padding: 60px var(--space-lg);
    }
    
    .contact-info .bg-white {
        padding: 40px 25px;
    }
    
    .contact-info .btn.btn-primary {
        margin-bottom: var(--btn-margin);
        min-width: 180px;
    }
    
    .contact-info .form-submit-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .contact-info .social-links {
        margin-top: 0;
    }

    .contact-info .social-links li {
        margin: 0 10px 0 0;
    }
    
    /* About John Section */
    .about-john .section-title {
        padding-top: var(--space-lg);
        padding-left: 0;
    }
    
    /* FAQ Tablet */
    .faq .accordion .accordion-item {
        padding: 30px var(--space-lg) 30px 30px;
    }
    
    .faq .accordion-body {
        padding: var(--space-md) var(--space-lg) 0 25px;
    }
    
    /* Small Card Info Tablet */
    .small-card-info .small-card {
        padding: 60px 25px;
    }
    
    .small-card-info {
        padding: 90px 0 110px 0;
    }

    /* Statistics Section Tablet */
    .statistics .small-card {
        padding: 60px 25px;
    }
    
    .statistics {
        padding: 90px 0 110px 0;
    }
    
    /* Layout Adjustments */
    figure.fig-background::after {
        display: none;
    }
}

/* ========================================================================
   MOBILE & SMALL TABLET NOTICE
   ======================================================================== */

/* === MOBILE & TABLET STYLES MOVED === */
/* Mobile and small tablet styles (max-width: 991px) moved to 11-mobile.css */
/* This maintains the ITCSS separation and allows for better mobile-specific optimization */

/* ========================================================================
   RESPONSIVE NOTES
   ======================================================================== */

/*
 * Desktop-First Approach:
 * - Base styles assume desktop viewport
 * - Media queries scale down for smaller screens
 * - Mobile styles consolidated in separate file for better organization
 * 
 * Breakpoint Strategy:
 * - Extra Large Desktop: 1400px+
 * - Large Desktop: 1200px - 1399px
 * - Medium Desktop: 992px - 1199px
 * - Tablet: 768px - 991px
 * - Mobile: <768px (handled in mobile.css)
 * 
 * WordPress Integration:
 * - Admin bar compensation built-in
 * - Fixed header positioning optimized
 * - Theme scoping maintained throughout
 */