/*
Theme Name: ASW Theme - Responsive Styles
Version: 3.0.0 (Full Merge)
*/

/* =============================================
   === TABLET (Max Width: 1024px) ===
   ============================================= */

@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }
    
    .site-header .container {
        min-height: 56px;
    }
    
    .site-logo {
        height: 34px;
    }
    
    #site-navigation-desktop {
        display: none !important;
    }
    
    .menu-toggle {
        display: flex !important;
    }
    
    .header-controls {
        gap: 12px;
    }
    
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .layanan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-widgets {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .about-hero-section .about-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .about-hero-section .about-hero-text .hero-subtitle {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .about-hero-section .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-hero-section .hero-actions {
        justify-content: center;
    }
    
    .story-section .story-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .story-section .story-image .story-quote {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 20px;
        max-width: 100%;
    }
    
    .therapist-profile-section .profile-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .therapist-profile-section .profile-bio .profile-specialties ul {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    
    .therapist-profile-section .profile-bio .profile-actions {
        justify-content: center;
    }
    
    .layanan-detail-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .layanan-sidebar {
        position: static;
        top: auto;
    }
    
    .blog-cta-content {
        flex-direction: column;
        text-align: center;
    }
    
    .blog-cta-content .cta-form {
        min-width: 100%;
    }
    
    .blog-cta-content .cta-form .newsletter-form {
        flex-direction: column;
    }
    
    .cta-banner-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cta-banner-content .cta-actions {
        justify-content: center;
    }
    
    .single-cta-content {
        flex-direction: column;
        text-align: center;
    }
    
    .single-cta-content .cta-actions {
        justify-content: center;
    }
}

/* =============================================
   === MOBILE LANDSCAPE (Max Width: 768px) ===
   ============================================= */

@media (max-width: 768px) {
    h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
    h2 { font-size: clamp(1.6rem, 3.5vw, 2rem); }
    h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
    
    .section-header {
        margin-bottom: 40px;
    }
    
    .site-header .container {
        min-height: 56px;
        padding: 8px 15px;
    }
    
    .site-logo {
        height: 28px;
    }
    
    .dark-mode-toggle {
        font-size: 1.2rem;
        padding: 6px;
    }
    
    .menu-toggle {
        font-size: 1.3rem;
        padding: 6px;
    }
    
    .mobile-menu-overlay {
        padding: 30px 15px;
    }
    
    #site-navigation-mobile a {
        font-size: 1.3rem;
        padding: 12px 0;
    }
    
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .btn-cta {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    
    .primary-btn,
    .secondary-btn-outline {
        padding: 12px 24px;
        font-size: 0.85rem;
    }
    
    .premium-hero {
        padding: 6em 0 3em;
        min-height: auto;
    }
    
    .premium-hero h1 {
        font-size: clamp(2rem, 5vw, 2.8rem);
    }
    
    .premium-hero .hero-subtitle {
        font-size: 1rem;
    }
    
    .premium-hero .hero-stats {
        flex-direction: column;
        gap: 12px;
    }
    
    .premium-hero .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .premium-hero .hero-actions .btn-cta {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
    
    .premium-services .premium-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .clean-why-section .clean-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .premium-testi .review-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .latest-blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .about-hero-section {
        padding: 6em 0 3em;
    }
    
    .about-hero-section .about-hero-text h1 {
        font-size: clamp(2rem, 5vw, 2.6rem);
    }
    
    .about-hero-section .hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .about-hero-section .hero-stats .stat-number {
        font-size: 1.4rem;
    }
    
    .about-hero-section .about-hero-image .floating-badge {
        display: none;
    }
    
    .about-hero-section .about-hero-image .therapist-hero-img {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .story-section {
        padding: 40px 0;
    }
    
    .story-section .story-mission .mission-item {
        padding: 15px;
    }
    
    .therapist-profile-section {
        padding: 40px 0;
    }
    
    .therapist-profile-section .profile-image-wrapper img {
        max-width: 280px;
        margin: 0 auto;
    }
    
    .therapist-profile-section .profile-bio h2 {
        font-size: 1.8rem;
    }
    
    .certification-section .certification-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .about-testimonials-section .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .final-cta-content h2 {
        font-size: 1.6rem;
    }
    
    .final-cta-content .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .final-cta-content .cta-buttons .btn-cta {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
    
    .archive-hero-section {
        padding: 6em 0 3em;
    }
    
    .archive-hero-content h1 {
        font-size: clamp(1.8rem, 4vw, 2.4rem);
    }
    
    .premium-layanan-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 30px 0;
    }
    
    .filter-section .filter-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .layanan-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .posts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .single-layanan-container {
        padding: 20px 0 40px;
    }
    
    .layanan-title-single {
        font-size: 2rem;
    }
    
    .layanan-meta-bar {
        flex-direction: column;
        gap: 5px;
    }
    
    .layanan-advantages {
        padding: 20px;
    }
    
    .blog-hero-section {
        padding: 6em 0 3em;
    }
    
    .blog-hero-content h1 {
        font-size: clamp(1.8rem, 4vw, 2.4rem);
    }
    
    .blog-hero-content .hero-subtitle {
        font-size: 1rem;
    }
    
    .premium-search {
        flex-wrap: wrap;
        background: transparent;
        border: none;
    }
    
    .premium-search .search-icon {
        display: none;
    }
    
    .premium-search .search-field {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50px;
        padding: 14px 20px;
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .premium-search .search-submit {
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }
    
    .blog-main-section .premium-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .blog-filter-bar .filter-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .single-post-container {
        padding: 20px;
        margin: 20px 10px 30px;
        border-radius: 12px;
    }
    
    .entry-title-single {
        font-size: 2rem;
    }
    
    .premium-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .post-share-section {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .share-buttons {
        justify-content: center;
    }
    
    .author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    
    .author-social {
        justify-content: center;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .post-navigation {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    .table-of-contents {
        padding: 15px;
    }
    
    .error-404-wrapper {
        padding: 30px 20px;
        border-radius: 16px;
    }
    
    .error-code {
        font-size: 4rem;
    }
    
    .error-title {
        font-size: 1.8rem;
    }
    
    .suggestions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .recent-grid {
        grid-template-columns: 1fr;
    }
    
    .error-cta {
        flex-direction: column;
        align-items: center;
    }
    
    .error-cta .btn-cta {
        width: 100%;
        text-align: center;
    }
    
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .footer-social-media {
        justify-content: center;
    }
    
    .contact-details li {
        justify-content: center;
    }
    
    .footer-menu-list .menu-item a {
        padding-left: 0;
    }
    
    .footer-menu-list .menu-item a::before {
        display: none;
    }
    
    #scroll-to-top {
        bottom: 80px;
        right: 16px;
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
    
    .whatsapp-float-btn {
        bottom: 16px;
        right: 16px;
    }
    
    .whatsapp-float-inner {
        padding: 12px 16px;
        border-radius: 50%;
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }
    
    .whatsapp-float-text {
        display: none;
    }
    
    .whatsapp-float-inner i {
        font-size: 1.8rem;
        margin: 0;
    }
    
    .whatsapp-tooltip {
        right: auto;
        left: 50%;
        top: auto;
        bottom: calc(100% + 12px);
        transform: translateX(-50%) scale(0.9);
        white-space: normal;
        max-width: 180px;
        text-align: center;
    }
    
    .whatsapp-tooltip::after {
        right: auto;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        border-left-color: transparent;
        border-top-color: var(--white);
    }
    
    .whatsapp-float-btn:hover .whatsapp-tooltip {
        transform: translateX(-50%) scale(1);
    }
    
    body.dark-mode .whatsapp-tooltip::after {
        border-top-color: var(--dark-bg-light);
    }
    
    .category-filters {
        gap: 8px;
    }
    
    .filter-item {
        padding: 6px 14px;
        font-size: 0.8rem;
    }
}

/* =============================================
   === MOBILE PORTRAIT (Max Width: 480px) ===
   ============================================= */

@media (max-width: 480px) {
    h1 { font-size: clamp(1.5rem, 4vw, 1.8rem); }
    h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
    h3 { font-size: clamp(1rem, 2vw, 1.2rem); }
    
    .container {
        padding: 0 12px;
    }
    
    .site-header .container {
        min-height: 48px;
        padding: 4px 12px;
    }
    
    .site-logo {
        height: 24px;
    }
    
    .dark-mode-toggle {
        font-size: 1rem;
        padding: 4px 6px;
    }
    
    .menu-toggle {
        font-size: 1.1rem;
        padding: 4px 6px;
    }
    
    .btn-cta {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
    
    .primary-btn,
    .secondary-btn-outline {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .premium-hero h1 {
        font-size: clamp(1.6rem, 5vw, 2rem);
    }
    
    .premium-hero .hero-badge {
        font-size: 0.7rem;
        padding: 4px 14px;
    }
    
    .premium-hero .hero-stats .stat-number {
        font-size: 1.4rem;
    }
    
    .about-hero-section .hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .about-hero-section .hero-stats .stat-number {
        font-size: 1.2rem;
    }
    
    .about-hero-section .hero-stats .stat-label {
        font-size: 0.7rem;
    }
    
    .about-hero-section .about-hero-image .therapist-hero-img {
        max-width: 240px;
    }
    
    .therapist-profile-section .profile-image-wrapper img {
        max-width: 220px;
    }
    
    .therapist-profile-section .profile-bio h2 {
        font-size: 1.5rem;
    }
    
    .therapist-profile-section .profile-bio .profile-intro p {
        font-size: 0.95rem;
    }
    
    .certification-section .certification-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .layanan-title-single {
        font-size: 1.5rem;
    }
    
    .layanan-advantages {
        padding: 15px;
    }
    
    .layanan-advantages .check-list li {
        font-size: 0.95rem;
    }
    
    .blog-hero-content h1 {
        font-size: clamp(1.4rem, 4vw, 1.8rem);
    }
    
    .blog-hero-content .hero-subtitle {
        font-size: 0.95rem;
    }
    
    .single-post-container {
        padding: 15px;
        margin: 10px 5px 20px;
    }
    
    .entry-title-single {
        font-size: 1.5rem;
    }
    
    .author-box .author-avatar img {
        width: 60px;
        height: 60px;
    }
    
    .error-404-wrapper {
        padding: 20px 15px;
    }
    
    .error-code {
        font-size: 3rem;
    }
    
    .error-title {
        font-size: 1.3rem;
    }
    
    .suggestions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    
    .suggestion-item {
        padding: 10px 6px;
        font-size: 0.8rem;
    }
    
    .error-icon {
        font-size: 3rem;
    }
    
    .whatsapp-float-btn {
        bottom: 12px;
        right: 12px;
    }
    
    .whatsapp-float-inner {
        padding: 10px 14px;
    }
    
    .whatsapp-float-inner i {
        font-size: 1.5rem;
    }
    
    .whatsapp-tooltip {
        max-width: 140px;
        padding: 6px 10px;
        font-size: 0.7rem;
        bottom: calc(100% + 8px);
    }
    
    .tooltip-text {
        font-size: 0.7rem;
    }
    
    #scroll-to-top {
        bottom: 70px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* =============================================
   === DARK MODE RESPONSIVE ===
   ============================================= */

@media (max-width: 768px) {
    body.dark-mode .site-header.scrolled {
        background: rgba(18, 18, 18, 0.95);
    }
    
    body.dark-mode .mobile-menu-overlay {
        background: var(--dark-bg-light);
    }
    
    body.dark-mode .premium-404 {
        background: linear-gradient(135deg, var(--dark-bg-color) 0%, var(--dark-bg-light) 100%);
    }
}

/* =============================================
   === PRINT STYLES ===
   ============================================= */

@media print {
    .site-header,
    .site-footer,
    #scroll-to-top,
    .whatsapp-float-btn,
    .mobile-menu-overlay,
    .dark-mode-toggle,
    .menu-toggle,
    .post-share-section,
    .related-posts-section,
    .author-box,
    .comments-area,
    .breadcrumb,
    .back-to-archive,
    .single-cta-section,
    .cta-banner-section,
    .blog-cta-section {
        display: none !important;
    }
    
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }
    
    .single-post-container,
    .layanan-detail,
    .error-404-wrapper {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        page-break-after: avoid;
    }
    
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}