/*
Theme Name: Twardosz24
Theme URI: https://twardosz24.pl/
Author: Twardosz24
Description: Lekki motyw firmowy dla usług ubezpieczeniowych i motoryzacyjnych.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: twardosz24
*/

:root { --navy:#102a43; --blue:#1677c8; --sky:#eaf5fc; --ink:#1f2933; --muted:#627d98; --line:#d9e2ec; --white:#fff; --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.65; }
a { color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--navy); }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.screen-reader-text:focus { clip:auto; height:auto; width:auto; z-index:100000; padding:1rem; background:#fff; }
.container { width:min(1120px, calc(100% - 40px)); margin:auto; }
.site-header { background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.header-row { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-branding a { color:var(--navy); text-decoration:none; font-weight:800; font-size:1.25rem; letter-spacing:-.02em; }
.brand-logo { display:block; width:250px; max-width:100%; }
.brand-logo img { display:block; width:100%; height:auto; }
.site-branding small { display:block; color:var(--muted); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
.primary-menu { display:flex; gap:8px; margin:0; padding:0; list-style:none; }
.primary-menu a, .header-price-link { display:inline-flex; align-items:center; min-height:36px; padding:7px 11px; border:1px solid #9fb3c8; border-radius:7px; color:var(--navy); font-size:1rem; font-weight:800; line-height:1.1; text-decoration:none; transition:background .2s ease, border-color .2s ease; }
.primary-menu a:hover, .primary-menu a:focus, .header-price-link:hover, .header-price-link:focus { border-color:var(--blue); background:#eef8ff; color:var(--navy); }
.primary-menu .current-menu-item > a, .primary-menu .current_page_item > a, .primary-menu .current-menu-ancestor > a, .header-price-link.is-current { border-color:var(--blue); background:#d9efff; color:var(--navy); }
.phone-link { white-space:nowrap; color:var(--navy); font-size:.92rem; font-weight:800; text-decoration:none; }
.header-quick-links { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; white-space:nowrap; }
.hero { padding:88px 0 72px; background:linear-gradient(120deg, #eef8ff 0%, #fff 65%); }
.eyebrow { color:var(--blue); font-weight:800; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.hero h1 { max-width:800px; margin:.35rem 0 1rem; color:var(--navy); font-size:clamp(2.35rem, 6vw, 4.5rem); line-height:1.06; letter-spacing:-.05em; }
.hero p { max-width:680px; color:#486581; font-size:1.13rem; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-block; padding:12px 20px; border:2px solid var(--blue); border-radius:999px; background:var(--blue); color:#fff; font-weight:800; text-decoration:none; }
.button:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
.button--secondary { background:transparent; color:var(--blue); }
.section { padding:76px 0; }
.section--tint { background:var(--sky); }
.section-heading { max-width:730px; margin-bottom:34px; }
.section-heading h2 { margin:.2rem 0 .6rem; color:var(--navy); font-size:clamp(1.8rem, 4vw, 2.8rem); line-height:1.14; letter-spacing:-.035em; }
.section-heading p { color:var(--muted); }
.service-grid, .location-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.service-card, .location-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:0 8px 24px rgba(16,42,67,.05); }
.service-card { position:relative; padding-right:116px; }
.service-card__thumb { position:absolute; top:24px; right:24px; width:72px; height:72px; border:1px solid #dbe8f1; border-radius:50%; background:#fff; object-fit:cover; box-shadow:0 5px 13px rgba(16,42,67,.12); }
.service-card h3, .location-card h3 { margin:0 0 10px; color:var(--navy); font-size:1.35rem; line-height:1.2; }
.service-card p { margin:0; color:#486581; }
.service-card .button { margin-top:22px; padding:9px 15px; font-size:.9rem; }
.vehicle-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.vehicle-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(16,42,67,.05); }
.vehicle-card img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.vehicle-card__body { padding:24px; }
.vehicle-card h2 { margin:0 0 8px; color:var(--navy); font-size:1.3rem; line-height:1.2; }
.vehicle-card p { margin:0; color:#486581; font-size:.96rem; }
.rental-intro { max-width:800px; margin:0 0 36px; color:#486581; font-size:1.08rem; }
.feature-list { columns:2; padding-left:22px; color:#486581; }
.rental-hero { position:relative; overflow:hidden; padding:116px 0 98px; color:#fff; background:linear-gradient(90deg,rgba(7,20,35,.92) 0%,rgba(7,20,35,.68) 51%,rgba(7,20,35,.18) 100%),var(--rental-hero) center/cover no-repeat; }
.rental-hero::after { content:""; position:absolute; inset:auto -70px -100px auto; width:310px; height:310px; border:1px solid rgba(255,255,255,.25); border-radius:50%; }
.rental-hero .container { position:relative; z-index:1; }
.rental-hero h1 { max-width:690px; margin:.3rem 0 1.1rem; color:#fff; font-size:clamp(2.7rem,6vw,5rem); line-height:1; letter-spacing:-.055em; }
.rental-hero p { max-width:580px; margin:0; color:#edf6fd; font-size:1.15rem; }
.rental-hero .eyebrow { color:#8bd2ff; }
.rental-hero .button--secondary { border-color:#fff; color:#fff; }
.rental-hero .button--secondary:hover { background:#fff; color:var(--navy); }
.rental-strip { position:relative; z-index:2; margin-top:-31px; }
.rental-strip__inner { display:grid; grid-template-columns:repeat(3,1fr); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 16px 36px rgba(16,42,67,.17); }
.rental-stat { padding:20px 26px; border-right:1px solid var(--line); }
.rental-stat:last-child { border:0; }
.rental-stat strong { display:block; color:var(--navy); font-size:1.05rem; }
.rental-stat span { color:var(--muted); font-size:.88rem; }
.rental-vehicle-section { padding-top:72px; background:linear-gradient(180deg,#f7fbfe 0,#fff 54%); }
.vehicle-card { transition:transform .2s ease, box-shadow .2s ease; }
.vehicle-card:hover { transform:translateY(-5px); box-shadow:0 15px 32px rgba(16,42,67,.13); }
.vehicle-card__number { color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.vehicle-card .button { margin-top:17px; padding:8px 14px; font-size:.85rem; }
.vehicle-card .actions { gap:8px; margin-top:17px; }
.vehicle-card .actions .button { margin-top:0; }
.vehicle-card .actions .button--secondary { background:transparent; }
.rental-benefits { background:var(--navy); color:#fff; }
.rental-benefits .section-heading h2 { color:#fff; }
.rental-benefits .section-heading p { color:#c6d9ea; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.benefit { padding:24px; border:1px solid rgba(255,255,255,.2); border-radius:14px; }
.benefit__icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:18px; border-radius:50%; background:#1677c8; color:#fff; font-weight:900; }
.benefit h3 { margin:0 0 7px; color:#fff; font-size:1.08rem; }
.benefit p { margin:0; color:#c6d9ea; font-size:.94rem; }
.rental-cta { padding:82px 0; text-align:center; background:var(--sky); }
.rental-cta h2 { margin:0 0 10px; color:var(--navy); font-size:clamp(2rem,4vw,3rem); letter-spacing:-.04em; }
.rental-cta p { max-width:620px; margin:0 auto; color:#486581; }
.rental-cta .actions { justify-content:center; }
.pricing-hero { padding:78px 0 66px; background:linear-gradient(120deg,#102a43,#1d5d91); color:#fff; }
.pricing-hero h1 { max-width:720px; margin:.3rem 0 .8rem; color:#fff; font-size:clamp(2.5rem,5vw,4rem); line-height:1.05; letter-spacing:-.05em; }
.pricing-hero p { max-width:650px; margin:0; color:#d9eefa; font-size:1.08rem; }
.pricing-hero .eyebrow { color:#8bd2ff; }
.price-notice { margin:0 0 30px; padding:16px 18px; border-left:4px solid var(--blue); border-radius:0 10px 10px 0; background:var(--sky); color:#334e68; }
.pricing-table-wrap { overflow-x:auto; margin:24px 0 42px; border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(16,42,67,.05); }
.pricing-table { width:100%; min-width:760px; border-collapse:collapse; background:#fff; text-align:center; font-size:.88rem; }
.pricing-table th { padding:15px 12px; background:var(--navy); color:#fff; font-size:.78rem; letter-spacing:.03em; }
.pricing-table th:first-child,.pricing-table td:first-child { width:26%; text-align:left; }
.pricing-table td { padding:15px 12px; border-top:1px solid var(--line); color:#334e68; }
.pricing-table tr:nth-child(even) td { background:#f8fbfd; }
.pricing-table td:first-child strong { display:block; color:var(--navy); }
.pricing-table small { color:var(--muted); }
.pricing-tag { display:inline-block; margin-bottom:7px; padding:5px 9px; border-radius:999px; background:var(--sky); color:var(--blue); font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.insurance-hero { padding:88px 0 76px; background:linear-gradient(120deg,#0e3558,#1677c8); color:#fff; }
.insurance-hero h1 { max-width:740px; margin:.35rem 0 1rem; color:#fff; font-size:clamp(2.6rem,5vw,4.3rem); line-height:1.03; letter-spacing:-.05em; }
.insurance-hero p { max-width:670px; margin:0; color:#e5f3fd; font-size:1.1rem; }
.insurance-hero .eyebrow { color:#b7e6ff; }
.insurance-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.insurance-card { display:block; min-height:190px; padding:23px; border:1px solid var(--line); border-radius:15px; background:#fff; color:inherit; text-decoration:none; box-shadow:0 8px 20px rgba(16,42,67,.05); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.insurance-card:hover,.insurance-card:focus { transform:translateY(-4px); border-color:#8bc8ef; box-shadow:0 15px 28px rgba(16,42,67,.13); }
.insurance-card__icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:22px; border-radius:12px; background:var(--sky); color:var(--blue); font-size:1.25rem; font-weight:800; }
.insurance-card h2 { margin:0 0 7px; color:var(--navy); font-size:1.12rem; line-height:1.2; }
.insurance-card p { margin:0; color:#627d98; font-size:.9rem; line-height:1.5; }
.insurance-card__more { display:block; margin-top:15px; color:var(--blue); font-size:.82rem; font-weight:800; }
.insurance-detail { display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start; }
.insurance-detail h2 { margin:.2rem 0 1rem; color:var(--navy); font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.12; letter-spacing:-.04em; }
.insurance-detail__list { margin:24px 0 0; padding:0; list-style:none; }
.insurance-detail__list li { position:relative; margin:0 0 12px; padding-left:27px; color:#40566d; }
.insurance-detail__list li::before { content:'✓'; position:absolute; left:0; color:var(--blue); font-weight:800; }
.back-link { color:var(--blue); font-weight:800; text-decoration:none; }
.insurance-detail-media { padding-top:28px; padding-bottom:0; }
.insurance-detail__image { overflow:hidden; max-width:1040px; margin:0 auto; border-radius:18px; box-shadow:0 16px 36px rgba(16,42,67,.16); }
.insurance-detail__image img { display:block; width:100%; aspect-ratio:16 / 7; object-fit:cover; }
.insurance-info { display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start; }
.insurance-info h2 { margin:.2rem 0 1rem; color:var(--navy); font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.12; letter-spacing:-.04em; }
.insurance-info p { color:#486581; }
.insurance-panel { padding:28px; border-radius:16px; background:var(--sky); }
.insurance-panel strong { color:var(--navy); }
.docs-hero { padding:86px 0 74px; background:linear-gradient(120deg,#12344d,#277da1); color:#fff; }
.docs-hero h1 { max-width:760px; margin:.35rem 0 1rem; color:#fff; font-size:clamp(2.6rem,5vw,4.3rem); line-height:1.03; letter-spacing:-.05em; }
.docs-hero p { max-width:650px; margin:0; color:#e5f3fd; font-size:1.1rem; }
.docs-hero .eyebrow { color:#b7e6ff; }
.document-list { display:grid; gap:14px; margin:28px 0 0; padding:0; list-style:none; counter-reset:documents; }
.document-list li { position:relative; min-height:74px; padding:20px 22px 20px 76px; border:1px solid var(--line); border-radius:14px; background:#fff; color:#334e68; box-shadow:0 7px 18px rgba(16,42,67,.04); }
.document-list li::before { counter-increment:documents; content:counter(documents); position:absolute; top:17px; left:19px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--sky); color:var(--blue); font-weight:800; }
.document-card { padding:31px; border-radius:16px; background:var(--sky); }
.document-card h2 { margin:0 0 10px; color:var(--navy); font-size:1.55rem; }
.document-card p { color:#486581; }
.contact-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:32px; align-items:start; }
.contact-details { padding:28px; border-radius:16px; background:var(--sky); }
.contact-details h2 { margin:0 0 16px; color:var(--navy); }
.contact-details p { color:#486581; }
.opening-hours { line-height:1.7; }
.contact-form { padding:30px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 9px 24px rgba(16,42,67,.06); }
.home-contact-form { max-width:760px; margin:34px auto 0; }
.contact-form label { display:block; margin:0 0 6px; color:var(--navy); font-size:.92rem; font-weight:800; }
.contact-form input,.contact-form textarea { width:100%; margin:0 0 17px; padding:12px 13px; border:1px solid #bcccdc; border-radius:9px; color:var(--ink); font:inherit; }
.contact-form textarea { min-height:150px; resize:vertical; }
.captcha-row { display:flex; align-items:center; gap:12px; }
.captcha-question { min-width:120px; margin-bottom:17px; color:var(--navy); font-weight:800; }
.captcha-row input { max-width:100px; }
.google-recaptcha { margin:0 0 18px; }
.form-message { margin:0 0 18px; padding:12px 15px; border-radius:9px; background:#e5f7ed; color:#1f6b45; }
.form-message--error { background:#fff0f0; color:#9b1c1c; }
.honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.content-area { padding:64px 0; }
.entry-title { color:var(--navy); line-height:1.15; }
.entry-content { max-width:780px; }
.site-footer { padding:36px 0; background:var(--navy); color:#d9e2ec; }
.footer-row { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.site-footer a { color:#fff; }
.footer-hours { line-height:1.55; }
@media (max-width:820px) { .primary-menu { display:none; } .header-quick-links { gap:10px; } .hero { padding:64px 0 56px; } }
@media (max-width:900px) { .vehicle-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } .benefit-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .header-row { min-height:70px; gap:10px; flex-wrap:wrap; padding:9px 0; } .brand-logo { width:210px; } .phone-link { font-size:.82rem; } .header-quick-links { order:3; width:100%; justify-content:flex-start; gap:7px; overflow-x:auto; padding-bottom:3px; } .header-price-link { min-height:32px; padding:6px 9px; font-size:.78rem; } .service-grid,.location-grid,.vehicle-grid { grid-template-columns:1fr; } .service-card { padding-right:106px; } .service-card__thumb { width:64px; height:64px; right:20px; top:20px; } .feature-list { columns:1; } .rental-hero { padding:84px 0 74px; } .rental-strip__inner { grid-template-columns:1fr; } .rental-stat { border-right:0; border-bottom:1px solid var(--line); } .rental-stat:last-child { border-bottom:0; } .section { padding:54px 0; } .footer-row { display:block; } }
@media (max-width:900px) { .insurance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .insurance-info,.insurance-detail { grid-template-columns:1fr; } }
@media (max-width:620px) { .insurance-grid { grid-template-columns:1fr; } }
@media (max-width:900px) { .contact-layout { grid-template-columns:1fr; } }