/* ===================================
   Shelter Unity - Responsive Stylesheet
   =================================== */

/* Large Devices (Desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* Medium Devices (Tablets, 992px to 1199px) */
@media (max-width: 1199px) {
    .tp-caption .title h1 {
        font-size: 48px !important;
    }
    
    .tp-caption .title p {
        font-size: 20px !important;
    }
    
    .sec-title h2 {
        font-size: 32px;
    }
    
    .feature-left-column {
        padding-right: 0;
    }
    
    .call-back-content {
        margin: 0 15px;
    }
}

/* Small Devices (Tablets, 768px to 991px) */
@media (max-width: 991px) {
    .header-upper .contact-info {
        display: none;
    }
    
    .header-upper .donate-button {
        float: none;
        text-align: center;
    }
    
    .logo {
        text-align: center;
        margin-bottom: 15px;
    }
    
    .main-menu .navbar-collapse {
        background: #34495e;
        max-height: 400px;
        overflow-y: auto;
    }
    
    .navigation {
        flex-direction: column;
    }
    
    .navigation li a {
        padding: 12px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .tp-caption .title h1 {
        font-size: 36px !important;
    }
    
    .tp-caption .title p {
        font-size: 16px !important;
    }
    
    .sec-pad {
        padding: 60px 0;
    }
    
    .sec-title h2 {
        font-size: 28px;
    }
    
    .intro-column {
        margin-bottom: 30px;
    }
    
    .single-counter-content {
        margin-bottom: 30px;
    }
    
    .feature-column {
        margin-bottom: 30px;
    }
    
    .service-column {
        margin-bottom: 30px;
    }
    
    .pricing-column {
        margin-bottom: 30px;
    }
    
    .about-tab-title ul {
        flex-direction: column;
    }
    
    .about-tab-title ul li {
        margin-bottom: 10px;
    }
    
    .feature-right-colum {
        margin-top: 30px;
    }
    
    .call-back-content {
        padding: 30px;
    }
    
    .footer-top [class*="col-"] {
        margin-bottom: 30px;
    }
}

/* Extra Small Devices (Phones, less than 768px) */
@media (max-width: 767px) {
    body {
        font-size: 14px;
    }
    
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 22px; }
    h4 { font-size: 18px; }
    
    .sec-pad {
        padding: 40px 0;
    }
    
    .header-upper {
        padding: 15px 0;
    }
    
    .logo-text {
        font-size: 22px;
    }
    
    .btn-donate {
        padding: 10px 20px;
        font-size: 12px;
    }
    
    .tp-caption .title h1 {
        font-size: 28px !important;
    }
    
    .tp-caption .title p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .tp-btn a {
        padding: 10px 25px;
        font-size: 14px;
    }
    
    .sec-title h2 {
        font-size: 24px;
    }
    
    .title-top {
        font-size: 12px;
    }
    
    .intro-content {
        padding: 30px 0;
    }
    
    .intro-content .title h2 {
        font-size: 26px;
    }
    
    .intro-content .list li {
        font-size: 14px;
    }
    
    .intro-img-content .img-box img {
        max-width: 200px;
    }

    /* GDPR banner mobile */
    .gdpr-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
    .gdpr-banner__actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .count-outer {
        font-size: 36px;
    }
    
    .single-counter-content .text {
        font-size: 12px;
    }
    
    .hexagon {
        width: 80px;
        height: 80px;
    }
    
    .hexagon .icon-box {
        font-size: 28px;
    }
    
    .feature-content-two {
        flex-direction: column;
        text-align: center;
    }
    
    .feature-content-two .icon-box {
        margin: 0 auto 15px;
    }
    
    .feature-right-colum .lower-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .single-work-content {
        padding: 40px 20px;
        min-height: auto;
    }
    
    .single-work-content .title-text {
        font-size: 22px;
    }
    
    .single-pricing-content .price {
        font-size: 32px;
    }

    /* Home: work section & call-us tweaks for mobile */
    .single-work-content .title-text {
        font-size: 24px !important; /* inline style is 36px */
        margin-bottom: 15px;
        line-height: 1.3;
    }

    .call-us {
        padding: 20px 15px;
    }

    .call-us h4 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .call-us .text {
        font-size: 14px;
        line-height: 1.4;
    }

    .call-us span {
        display: block;
        margin-top: 5px;
        font-size: 16px;
    }
    
    .call-back-content {
        padding: 25px;
    }
    
    .call-back-form .default-form input,
    .call-back-form .default-form select,
    .call-back-form .default-form textarea {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .single-testimonial-content {
        padding: 20px;
        margin: 10px;
    }
    
    .single-testimonial-content .author-img {
        width: 60px;
        height: 60px;
    }
    
    .footer-top {
        padding: 50px 0 30px;
    }
    
    .scroll-to-top {
        width: 40px;
        height: 40px;
        font-size: 16px;
        bottom: 20px;
        right: 20px;
    }

    /* Hide phone/email in header on mobile, keep donate button */
    .header-meta .meta-item {
        display: none;
    }
    .header-flex {
        justify-content: space-between;
    }
}

/* Very Small Devices (Phones, less than 480px) */
@media (max-width: 480px) {
    .tp-caption .title h1 {
        font-size: 22px !important;
    }
    
    .tp-caption .title p {
        font-size: 12px !important;
    }
    
    .sec-title h2 {
        font-size: 20px;
    }
    
    .intro-content .title h2 {
        font-size: 22px;
    }
    
    .count-outer {
        font-size: 28px;
    }
    
    .single-pricing-content {
        padding: 30px 20px;
    }
    
    .single-pricing-content .price {
        font-size: 28px;
    }
    
    .btn-one {
        padding: 12px 25px;
        font-size: 12px;
    }
    
    .call-back-content {
        padding: 20px;
    }
    
    .call-back-btn button {
        padding: 12px;
    }

    /* Hero text box smaller on mobile */
    .hero-text-box {
        padding: 16px 16px;
        margin: 0 auto 16px;
        max-width: 95%;
    }
    .page-title .hero-title {
        font-size: 34px;
    }
    .page-title .hero-lead {
        font-size: 20px;
    }
    .page-title .hero-sub {
        font-size: 16px;
        line-height: 1.6;
    }
    /* Zorg dat hero-afbeeldingen zichtbaar blijven op mobiel */
    .page-title {
        min-height: 60vh;
        padding: 80px 0;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
    }
}

/* Services grid helpers */
@media (max-width: 991px) {
    .services-grid .service-column {
        width: 100%;
        max-width: none;
    }
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Testimonials: 2 kolommen op tablet */
    .three-column-carousel .single-testimonial-content {
        flex: 0 0 48%;
        max-width: 48%;
    }
}

@media (max-width: 767px) {
    .services-grid .service-column {
        width: 100%;
        max-width: none;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    /* Testimonials: 1 kolom op mobiel */
    .three-column-carousel .single-testimonial-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Print Styles */
@media print {
    .main-header,
    .scroll-to-top,
    .video-gallery,
    .tp-bannertimer {
        display: none !important;
    }
    
    .sec-pad {
        padding: 30px 0;
    }
    
    body {
        font-size: 12pt;
        color: #000;
    }
    
    a {
        text-decoration: underline;
        color: #000;
    }
}