/*
Theme Name: IT Center
Theme URI: https://example.com/
Author: ChatGPT (customized for IT Center)
Author URI: https://example.com/
Description: Lekki, nowoczesny motyw WordPress dla firmy IT (usługi, doradztwo, wdrożenia, sprzedaż sprzętu).
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itcenter
*/

:root{
    --accent:#10498A;
    --accent-2:#FBBA00;
    --muted:#666666;
    --bg:#f7fbff;
    --text:#111111;
    --radius:12px;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    background:#ffffff;
    line-height:1.6;
}

a{
    color:var(--accent);
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

.container{
    max-width:1100px;
    margin:0 auto;
    padding:0 18px;
}

/* Header */

.site-header{
    background:linear-gradient(90deg,#f7fbff,#f0f6ff);
    padding:20px 0;
    border-bottom:1px solid #e5edf8;
}

.site-branding{
    display:flex;
    align-items:center;
    gap:12px;
}

.site-logo-box{
    width:52px;
    height:52px;
    border-radius:10px;
    background:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-weight:700;
    font-size:20px;
}

.site-title{
    margin:0;
    font-size:20px;
    font-weight:800;
}

.site-description{
    margin:0;
    font-size:13px;
    color:var(--muted);
}

.site-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.main-navigation ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    gap:14px;
    align-items:center;
}

.main-navigation a{
    font-weight:600;
    color:#08355a;
    font-size:14px;
}

.main-navigation .menu-cta a{
    background:var(--accent);
    color:#ffffff;
    padding:9px 14px;
    border-radius:10px;
    font-weight:700;
}

/* Hero & sections */

.hero{
    display:flex;
    gap:28px;
    align-items:center;
    padding:34px 0 26px;
}

.hero-left{
    flex:1 1 0;
}

.hero-title{
    font-size:28px;
    margin:0 0 10px;
}

.hero-subtitle{
    margin:0 0 18px;
    color:var(--muted);
}

.btn{
    display:inline-block;
    background:var(--accent);
    color:#ffffff;
    padding:11px 18px;
    border-radius:10px;
    font-weight:700;
    font-size:14px;
}

.btn-secondary{
    background:var(--accent-2);
    color:#111111;
}

.hero-right{
    flex:0 0 360px;
    max-width:40%;
}

.card{
    background:#ffffff;
    border-radius:var(--radius);
    padding:18px;
    box-shadow:0 6px 18px rgba(16,73,138,0.06);
}

.section{
    padding:26px 0;
}

.section h2{
    font-size:22px;
    margin:0 0 14px;
}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
}

/* Services */

.service-card h3{
    margin:0 0 8px;
    font-size:17px;
}

.service-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}

/* Partners */

.partners{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.partner{
    width:120px;
    height:56px;
    background:#f5f7fb;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    color:#666666;
}

/* Contact */

.contact-layout{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.contact-details{
    flex:1 1 260px;
    font-size:14px;
    color:var(--muted);
}

.contact-details strong{
    color:#111111;
}

.contact-extra{
    margin-top:10px;
    font-size:13px;
}

/* Footer */

.site-footer{
    border-top:1px solid #eee;
    padding:20px 0;
    font-size:13px;
    color:var(--muted);
}

.site-footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

/* Responsive */

@media (max-width:720px){
    .site-header-inner{
        flex-direction:column;
        align-items:flex-start;
    }
    .main-navigation ul{
        flex-wrap:wrap;
        gap:10px;
    }
    .hero{
        flex-direction:column;
        text-align:center;
    }
    .hero-right{
        max-width:100%;
        width:100%;
    }
    .site-branding{
        justify-content:flex-start;
    }
    .contact-layout{
        flex-direction:column;
    }
}