/*
Theme Name: Profix
Theme URI: https://www.profix-it.nl
Description: Child theme van Divi voor de Profix-website. Huisstijl, typografie en responsive gedrag van de homepage-layout. Layout importeren via Divi Builder > Portability met layouts/profix-home.json.
Author: Profix
Author URI: https://www.profix-it.nl
Template: Divi
Version: 1.0.0
Text Domain: profix
*/

/* ---------------------------------------------------------------------------
   1. Merkkleuren
   ------------------------------------------------------------------------- */
:root {
    --pfx-navy: #1A2D57;
    --pfx-navy-deep: #132244;
    --pfx-oranje: #EF5C3C;
    --pfx-oranje-hover: #DC4C2D;
    --pfx-blauw: #2088CE;
    --pfx-ink: #1C2A38;
    --pfx-soft: #5A6675;
    --pfx-muted: #64748B;
    --pfx-label: #8A96A5;
    --pfx-canvas: #EDEFF2;
    --pfx-line: #E7ECF3;
    --pfx-line-soft: #EEF2F6;
}

/* ---------------------------------------------------------------------------
   2. Typografie
   ------------------------------------------------------------------------- */
body,
body .et_pb_module,
body input,
body textarea,
body select,
body button {
    font-family: 'Figtree', system-ui, -apple-system, sans-serif;
}
body {
    color: var(--pfx-ink);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
    font-family: 'Figtree', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
p { text-wrap: pretty; }

a { color: var(--pfx-navy); text-decoration: none; }
a:hover { color: var(--pfx-oranje); }

/* ---------------------------------------------------------------------------
   3. Knoppen — oranje is altijd de primaire actie
   ------------------------------------------------------------------------- */
.pfx-btn:hover,
body .et_pb_button.pfx-btn:hover {
    background: var(--pfx-oranje-hover) !important;
    color: #FFFFFF !important;
}
.pfx-btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #FFFFFF !important;
}
body .et_pb_button {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    border-radius: 12px;
    padding: 16px 30px;
    transition: background-color 0.2s ease;
}
body .et_pb_button:after { display: none; }
body .et_pb_button:hover { padding: 16px 30px; }

/* ---------------------------------------------------------------------------
   4. Secties en rijen
   ------------------------------------------------------------------------- */
.pfx-section .et_pb_row { padding-top: 0; padding-bottom: 0; }
.pfx-modules .pfx-mod:hover,
.pfx-modules .et_pb_column:hover { border-color: var(--pfx-blauw) !important; }
.pfx-modules .et_pb_column { transition: border-color 0.2s ease; }
.pfx-modules .et_pb_main_blurb_image { margin-bottom: 18px; }
.pfx-modules .et_pb_blurb_content { text-align: left; max-width: none; }

/* Achtergrond-X nooit over de tekst heen op smalle schermen */
.pfx-hero, .pfx-branches { background-position: right center; }

/* ---------------------------------------------------------------------------
   5. Formulier
   ------------------------------------------------------------------------- */
.pfx-form .et_pb_contact_field_options_title,
.pfx-form .et_pb_contact_form_label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pfx-label);
    margin-bottom: 7px;
}
.pfx-form .input,
.pfx-form textarea {
    background: #FBFCFE;
    border: 1px solid #E3E8EF;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
}
.pfx-form .input:focus,
.pfx-form textarea:focus {
    border-color: var(--pfx-blauw);
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 136, 206, 0.15);
}
.pfx-form .et_contact_bottom_container { float: none; text-align: left; }
.pfx-form .et_pb_contact_submit { width: 100%; text-align: center; }

/* ---------------------------------------------------------------------------
   6. Header (Theme Builder of Divi-standaard)
   ------------------------------------------------------------------------- */
#main-header {
    box-shadow: none;
    border-bottom: 1px solid #E3E8EF;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
}
#top-menu li a {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
}
#top-menu li a:hover { color: var(--pfx-oranje); opacity: 1; }
#top-menu li.current-menu-item > a { color: var(--pfx-navy); font-weight: 700; }
#logo { max-height: 30px; }

/* ---------------------------------------------------------------------------
   7. Responsive — de layout is op 1240px ontworpen
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .pfx-hero h1 { font-size: 58px !important; }
    .pfx-pijlers h2 { font-size: 38px !important; }
    .pfx-section h2 { font-size: 36px !important; }
    .pfx-hero, .pfx-branches, .pfx-demo-row { background-size: cover !important; }
}

@media (max-width: 980px) {
    .pfx-section { padding-top: 76px !important; padding-bottom: 76px !important; }
    .pfx-hero h1 { font-size: 46px !important; }
    .pfx-hero .pfx-lead { font-size: 19px !important; }
    .pfx-demo-row { padding: 44px !important; }
    .pfx-stap { grid-template-columns: 48px 1fr !important; gap: 18px !important; }
}

@media (max-width: 767px) {
    .pfx-section { padding-top: 60px !important; padding-bottom: 60px !important; }
    .pfx-hero { padding-top: 76px !important; background-image: none !important; }
    .pfx-hero h1 { font-size: 36px !important; letter-spacing: -0.02em !important; }
    .pfx-hero .pfx-lead { font-size: 18px !important; }
    .pfx-cta-row { gap: 10px !important; }
    .pfx-cta-row .pfx-btn,
    .pfx-cta-row .pfx-btn-ghost { width: 100%; text-align: center; }
    .pfx-cta-row span { font-size: 14px !important; }
    .pfx-chain { font-size: 14px !important; gap: 10px !important; }
    .pfx-section h2 { font-size: 30px !important; }
    .pfx-demo-row { padding: 28px !important; border-radius: 18px !important; background-image: none !important; }
    .pfx-branches { background-image: none !important; }
    .pfx-stap { grid-template-columns: 40px 1fr !important; gap: 14px !important; padding: 22px 0 !important; }
    .pfx-stap span { font-size: 26px !important; }
    .pfx-footer .et_pb_column { margin-bottom: 32px !important; }
}