/*
Theme Name: SHOUT Media - PacTechno
Theme URI: https://pactechno.nl
Author: SHOUT Media
Author URI: https://shoutmedia.nl
Description: Custom GeneratePress child theme for PacTechno - Grafische Machineleverancier
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pactechno
*/

/* Base styles - Tailwind handles most styling via CDN */
:root {
    --color-blue: #B8D4E8;
    --color-coral: #C13A3A;
    --color-coral-dark: #A52E2E;
    --color-light: #F2F6F9;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure Tailwind classes work properly */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
}

/* Hide scrollbar for slider */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-coral) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animation for reveal elements */
.reveal-element {
    opacity: 0;
    transform: translateY(30px);
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* WordPress specific overrides */
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* Admin bar spacing fix */
body.admin-bar .fixed {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .fixed {
        top: 46px;
    }
}

/* ── Hero CTA knoppen ─────────────────────────── */
.elementor-element-5b59e43e .elementor-button,
.elementor-element-9e199f35 .elementor-button {
    background: #C13A3A !important;
    color: #fff !important;
    border-radius: 9999px !important;
    padding: 10px 24px 10px 10px !important;
    font-family: Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 24px rgba(193,58,58,0.32) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
}
.elementor-element-5b59e43e .elementor-button .elementor-button-icon,
.elementor-element-9e199f35 .elementor-button .elementor-button-icon {
    background: #fff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
}
.elementor-element-5b59e43e .elementor-button .elementor-button-icon svg,
.elementor-element-9e199f35 .elementor-button .elementor-button-icon svg {
    fill: #C13A3A !important;
}
.elementor-element-e201a44c .elementor-button,
.elementor-element-c0feaef2 .elementor-button {
    background: #fff !important;
    color: #334155 !important;
    border-radius: 9999px !important;
    padding: 11px 22px !important;
    border: 2px solid #e2e8f0 !important;
    font-family: Inter, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ── Hero knoppen tekst centreren ── */
.elementor-element-5b59e43e .elementor-button-content-wrapper,
.elementor-element-9e199f35 .elementor-button-content-wrapper,
.elementor-element-e201a44c .elementor-button-content-wrapper,
.elementor-element-c0feaef2 .elementor-button-content-wrapper {
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
.elementor-element-5b59e43e .elementor-button-text,
.elementor-element-9e199f35 .elementor-button-text,
.elementor-element-e201a44c .elementor-button-text,
.elementor-element-c0feaef2 .elementor-button-text {
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* ── pt-btn-coral / pt-btn-phone — class-based, werkt na kopieren ── */
.pt-btn-coral .elementor-button {
    background: #C13A3A !important; color: #fff !important;
    border-radius: 9999px !important; padding: 10px 24px 10px 10px !important;
    font-family: Inter, sans-serif !important; font-size: 14px !important;
    font-weight: 700 !important; box-shadow: 0 8px 24px rgba(193,58,58,0.32) !important;
    border: none !important; display: inline-flex !important; align-items: center !important;
}
.pt-btn-coral .elementor-button:hover { background: #A52E2E !important; }
.pt-btn-coral .elementor-button-content-wrapper,
.pt-btn-coral .elementor-button-text { display: flex !important; align-items: center !important; line-height: 1 !important; }
.pt-btn-coral .elementor-button .elementor-button-icon {
    background: #fff !important; border-radius: 50% !important;
    width: 40px !important; height: 40px !important; min-width: 40px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin-right: 12px !important;
}
.pt-btn-coral .elementor-button .elementor-button-icon svg { fill: #C13A3A !important; }

.pt-btn-phone .elementor-button {
    background: #fff !important; color: #334155 !important;
    border-radius: 9999px !important; padding: 11px 22px !important;
    border: 2px solid #e2e8f0 !important; font-family: Inter, sans-serif !important;
    font-size: 14px !important; font-weight: 700 !important;
    display: inline-flex !important; align-items: center !important;
}
.pt-btn-phone .elementor-button:hover { border-color: #2B5F8A !important; color: #2B5F8A !important; }
.pt-btn-phone .elementor-button-content-wrapper,
.pt-btn-phone .elementor-button-text { display: flex !important; align-items: center !important; line-height: 1 !important; }

/* ── pt-btn-blue ── */
.pt-btn-blue .elementor-button {
    background: #2B5F8A !important; color: #fff !important;
    border-radius: 9999px !important; padding: 10px 24px 10px 10px !important;
    font-family: Inter, sans-serif !important; font-size: 14px !important;
    font-weight: 700 !important; box-shadow: 0 8px 24px rgba(43,95,138,0.32) !important;
    border: none !important; display: inline-flex !important; align-items: center !important;
}
.pt-btn-blue .elementor-button:hover { background: #3578b5 !important; }
.pt-btn-blue .elementor-button-content-wrapper,
.pt-btn-blue .elementor-button-text { display: flex !important; align-items: center !important; line-height: 1 !important; }
.pt-btn-blue .elementor-button .elementor-button-icon {
    background: #fff !important; border-radius: 50% !important;
    width: 40px !important; height: 40px !important; min-width: 40px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin-right: 12px !important;
}
.pt-btn-blue .elementor-button .elementor-button-icon svg { fill: #2B5F8A !important; }

/* responsive 10-10: tabknoppen mogen krimpen, lange woorden breken */
.tab-btn{min-width:0}.tab-btn>div:last-child{min-width:0}.tab-title,.tab-desc{overflow-wrap:anywhere}

.elementor-upload-field{max-width:100%}

/* Elementor-formulier: bestandsveld, knop concentrisch in het veld (veld radius 12, knop 8, 4px ruimte) */
.elementor-field-type-upload input[type=file]{font-family:inherit;font-size:15px;color:#64748B;line-height:1.3;padding:4px!important;border-radius:12px}
.elementor-field-type-upload input[type=file]::file-selector-button{font-family:inherit;font-size:14px;font-weight:600;color:#2B5F8A;background:#EAF0F6;border:0;border-radius:8px;padding:8px 16px;margin:0 12px 0 0;cursor:pointer;transition:background .2s}
.elementor-field-type-upload input[type=file]::file-selector-button:hover{background:#DCE6F0}