/*
Theme Name: Talmer PPC Landing
Author: AI Generator
Version: 1.0
Description: Minimalistická konverzní WP šablona pro PPC služby

Zlatá #ffbc00
Modrá #0066bb
Navy #002244
*/

* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #002244; line-height: 1.5; background: #fff; overflow-x: hidden;}
a {color: #0066bb; text-decoration: none; border: none;}
h1 {font-size: 250%; text-align: center; padding: 40px 0 20px 0;}
h2 {font-size: 180%; text-align: center; padding: 40px 0 20px 0;}
h3 {font-size: 115%; text-align: center; padding: 15px 0 15px 0;}
p {padding: 1em 0; line-height: 160%;}
ul, ol {line-height: 160%; margin-left: 20px; margin-right: 20px;}
ul {list-style-type: square;}
img {max-width: 100%; height: auto; display: block;}
iframe {border: none; max-width: 100%;}
form {border: 5px solid #002d4c;}
header {padding: 10px 0;}
header .content {display: flex; justify-content: space-between;}

header .tel span {font-size: 140%; font-weight: 700; padding-left: 10px;}
nav {text-transform: uppercase;}
nav ul li {list-style: none; display: inline-block; padding: 0;}    
nav a {text-decoration: none; padding: 0 20px; display: block;}
section {padding: 20px 0;}
footer {padding: 40px 0; text-align: center; background-color: #e5eff8;}

.cta {padding: 15px 30px; border-radius: 10px; border: 1px solid rgb(255, 170, 34); background: linear-gradient(rgb(255, 220, 130) 0%, rgb(255, 187, 0) 100%); color: #000; display: inline-block; font-weight: 700; cursor: pointer; font-size: 140%; margin: 20px 0;}
.cta:hover { background: linear-gradient(rgb(255, 187, 0) 0%, rgb(255, 220, 130) 100%);}

#ppc {background-color: #0066bb; height: 640px; padding-bottom: 20px; background-image: image-set(url('img/bg.avif') type('image/avif'), url('img/bg.png') type('image/png')); background-size: cover; background-repeat: no-repeat; background-position: center center;}
#ppc h2 {color: #fff; font-size: 420%; text-align: left; padding: 40px 0 20px 0;}
#ppc p {color: #002244; font-size: 160%; font-weight: 500;}


#pro h1 {position: relative; max-width: 1260px; margin: 0 auto; text-align: center; overflow: hidden;}
#pro h1 span {position: relative; z-index: 2; padding: 0 20px; background-color: #ffffff;}
#pro h1::before {content: ''; position: absolute; top: 60%; left: 0; width: 100%; height: 1px; background-color: #0066bb; z-index: 1;}
#pro h2 {text-align: left;}
#pro ol {list-style-type: none; counter-reset: custom-counter; padding-left: 0; margin-left: 0;}
#pro ol li {counter-increment: custom-counter; position: relative; padding-left: 2rem; padding-bottom: 0.75rem;}
#pro ol li:not(:last-child)::after {content: ''; position: absolute; left: 10px; top: 25px; bottom: 0; width: 1px; background-color: rgba(0, 102, 187, 0.2);}
#pro ol li::before {content: counter(custom-counter, decimal-leading-zero); position: absolute; left: 0; top: 0; font-weight: 600; font-size: 1rem; color: #0066bb;}


#cenik {background-color: #0066bb; padding-bottom: 50px; color: #fff; text-align: center;}
#cenik span {font-size: 120%; color: #888; display: block; text-align: center; padding-top: 15px;}
#cenik span small {font-size: 60%;}
#cenik .columns > div {background-color: #fff; color: #000; border: 1px solid #003355; box-shadow: 10px 10px 5px rgba(0,0,0,0.25);}
#cenik .columns > div > div {background-color: #003355; color: #fff; padding: 20px 0;}
#cenik del {color: #888; text-decoration: none; margin-top: 20px; background-image: linear-gradient(transparent 50%,#888 50%,#888 55%,transparent 55%); display: inline;}
#cenik span {text-align: center; color: #ffbc00; font-weight: bold; font-size: 170%; padding: 5px 5px;}
#cenik h3 {margin: 0;}
#cenik p {line-height: 180%;}

#services .columns {align-items: stretch;}
#services .columns > div {display: flex; flex-direction: column; justify-content: center; align-items: center;}
#services svg {max-height: 75px; max-width: 150px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 15px 0;}
#services h3 {font-weight: 500;}

#vyhody {background-color: #f2f7fb;}
#vyhody .columns {align-items: flex-start;}
#vyhody .columns > div {display: flex; flex-direction: column; align-items: center; justify-content: center;}
#vyhody span {font-size: 115%; font-weight: 500; padding-top: 10px;}
#vyhody p {text-align: center; padding: 20px 20px;}
#vyhody svg {max-width: 48px; max-height: 48px; fill: #0066bb;}

#certifikace {text-align: center;}

#kontakt {padding: 10px; color: #fff; background-color: #0066bb; text-align: center;}
#kontakt h2 {margin-bottom: 30px;}
#kontakt p {font-size: 140%; display: inline-flex; padding: 40px 0;}
#kontakt form {max-width: 600px; margin: 0 auto; background-color: #003355; padding: 50px;}
#kontakt form input { display: block; width: 100%; margin-bottom: 18px; padding: 14px 16px; font-size: 16px; font-family: inherit; color: #2d3748; background-color: #f7fafc; border: 1px solid #e2e8f0; border-radius: 6px; box-sizing: border-box; transition: all 0.2s ease-in-out; }
#kontakt form input:focus {outline: none; background-color: #fff; border-color: #3182ce; box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);}
#kontakt form input[type="checkbox"] {position: absolute; opacity: 0; height: 0; width: 0;}
#kontakt form label {cursor: pointer; user-select: none;}
#kontakt form label::before {content: ""; display: inline-block; margin-bottom: -3px; width: 20px; height: 20px; min-width: 20px; margin-right: 10px; background-color: #f5f5f5; border: 1px solid #e2e8f0; border-radius: 4px; transition: all 0.2s ease-in-out; box-sizing: border-box; }
#kontakt form input[type="checkbox"]:focus + label::before {border-color: #3182ce; box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15); }
#kontakt form input[type="checkbox"]:checked + label::before {background-color: #3182ce; border-color: #3182ce; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-size: 18px; background-repeat: no-repeat; background-position: center;}
#kontakt #form-result {display: none; margin-top: 10px; font-weight: 700; font-size: 120%; border: 1px solid #0066bb; padding: 10px;}
#kontakt #capacity {font-size: 160%; font-weight: 500; padding-left: 10px; animation: pulseGlow 1.5s ease-in-out infinite; color: #ffcc00;}
@keyframes pulseGlow {
  0%, 100% {transform: scale(1); text-shadow: 0 0 0px rgba(255, 204, 0, 0);}
  50% {transform: scale(1.2); text-shadow: 0 0 8px rgba(0, 51, 85, 0.6);}
}

#end {background-color: #003355; color: #fff; border-top: 5px solid #002d4c; border-bottom: 5px solid #002d4c;}
#end h2 {font-size: 306%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #4c7088;}
#end p {text-align: center;}
#end .columns {justify-content: space-between;}
#end a {font-size: 120%; width: 280px; display: flex; justify-content: center; align-self: center; color: #ffbc00; padding: 0 3px;}
#end #tel {font-size: 250%; font-weight: 700; display: flex; align-items: center;}
#end #tel span {padding-left: 10px; margin-top: -5px;}
#end a:hover {color: #fff;}

#identification {position: relative; padding-top: 0; overflow: clip;}
#identification .columns {align-items: center;}
#identification .columns .columns {display: flex; flex-wrap: nowrap;}
#identification img {max-height: 300px; margin-top: -5px; opacity: 100%; transition: opacity 0.5s ease;}
#identification img:hover {opacity: 80%;}
#identification h3 {text-align: left;}
#identification h2 {color: #fff; position: relative; padding: 50px 0;}
#identification h2::before {content: ""; position: absolute; top: 0; bottom: 0; left: calc(-50vw + 50%); right: calc(-50vw + 50%); background-color: #0066bb; z-index: -1;}

#lb {display:none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); align-items: center; justify-content: center; cursor: pointer;}
#lb-img {max-width: 90%; max-height: 90%; border-radius: 4px;}

#cookie-consent {background-color: #003355; color: #ccc; padding: 2em 2em 1em 2em; position: fixed; max-width: 100%; bottom: 0; z-index: 9999; display: none; box-shadow: 10px 10px 5px rgba(0,0,0,0.25); overflow: hidden; max-height: 1000px;}
#cookie-consent h2 {color: #ffbc00;}
#cookie-consent h2, #cookie-consent h3 {padding-top: 5px; text-align: left;}
#cookie-consent p {font-size: 80%; text-align: left;}
#cookie-consent #cookie-choices {display: none;}
#cookie-consent #cookie-choices > div {display: inline-block; text-align: left;}
#cookie-consent #cookie-choices label {margin-right: 6px; cursor: pointer; margin-left: 3px;}
#cookie-consent span {cursor: pointer; color: #0066bb;}
#cookie-consent button, #show-cookie-consent {padding: 0.75em 1.5em; border-radius: 6px; border: 1px solid rgb(255, 170, 34); background: linear-gradient(rgb(255, 220, 130) 0%, rgb(255, 187, 0) 100%); color: #000; display: inline-block; font-weight: 700; margin: 10px; cursor: pointer; font-size: 100%; font-family: inherit;}
#cookie-consent button:hover, #show-cookie-consent:hover {background: linear-gradient(rgb(255, 187, 0) 0%, rgb(255, 220, 130) 100%);}
#cookie-consent #save-cookie-choices {background: none; color: #ffbc00;}


@media (max-width: 767px) {
    .content {padding-left: 10px; padding-right: 10px;}
    
    #ppc {background-size: cover; height: auto;}
    #ppc h2 {font-size: 220%;}
    #ppc p {font-size: 130%;}
    .cta {font-size: 100%;}
    
    #cenik .columns {padding-left: 10px; padding-right: 10px;}

    #kontakt form {padding: 40px 20px;}
    #kontakt #capacity {font-size: 300%; line-height: 1; padding-right: 20px;}
    
    #end h2 {font-size: 210%;}
    #end .columns {display: flex; flex-direction: column;}
    #end #tel {order: -1;}
    
    #identification img {max-width: 100px;}
    
    h1 {font-size: 180%;}
    h1:before {display: none;}
    
    
    .columns {box-sizing: border-box; padding: 20px 0;}
    .columns > * {margin-bottom: 20px;}
}

@media (max-width: 1279px) {
    header .content {display: flex; justify-content: space-between; align-items: center; gap: 20px;}
    header .content > * {flex: 1;}
    header .content > div {display: flex; flex-direction: column; gap: 15px; align-items: end;}
    header .tel {display: flex; align-items: center;}
    
    nav {display: none; transition: max-height 0.5s ease-in-out; position: absolute; top: 112px; right: 10px; background-color: #fff;}
    nav.open {max-height: 500px; display: block;}
    nav ul {margin: 0; padding: 10px; display: flex; flex-direction: column;}
    nav a {padding: 10px 4px;}
    #mobilemenu {background-color: #003355; border: none; padding: 5px 10px; box-sizing: border-box; color: #fff; font-size: 130%; font-weight: 100;}
    #mobilemenu span {border-bottom: 9px double #fff; border-top: 3px solid #fff; height: 15px; width: 20px; display: inline-block; margin-right: 5px;}
    
    #certifikace .columns a {display: flex; justify-content: center;}
    #identification .content > .columns {flex-direction: column;}
    
}

@media (max-width: 1279px) and (min-width: 768px) {
    .content {padding-left: 20px; padding-right: 20px;}
    
    header #logo img {height: 80px;}
    nav {top: 120px; right: 20px;}
    
    
    .columns {display: flex; flex-wrap: wrap; width: 100%; justify-content: center; align-items: flex-start; box-sizing: border-box; padding: 20px 0; gap: 40px;}
    .columns > div {flex: 1;}
    .columns > div:first-child:nth-last-child(4), .columns > div:first-child:nth-last-child(4) ~ div {flex: none; width: calc(50% - 20px);}
    .columns > div:first-child:nth-last-child(6), .columns > div:first-child:nth-last-child(6) ~ div {flex: none; width: calc(33.333% - 26.66px);}
    .columns > div:first-child:nth-last-child(8), .columns > div:first-child:nth-last-child(8) ~ div {flex: none; width: calc(50% - 20px);}
}


@media (min-width: 1280px) {
    #mobilemenu {display: none;}
    .content {width: 1260px; margin: 0 auto;}
    header .content > * {height: 80px; display: flex; align-items: center;}
    header #logo img {height: 80px;}
    nav ul {margin: 0 10px; padding: 0; display: flex; align-items: center;}
    
    #certifikace img {max-width: 280px;}
    
    #end #whatsapp {justify-content: left;}
    #end #mail {justify-content: right;}

    #cookie-consent {width: 800px; left: calc(50% - 400px);}
    
    .columns {display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; align-items: flex-start; box-sizing: border-box; padding: 20px 0; gap: 40px;}
    .columns > div {flex: 1;}
    .columns > div:first-child:nth-last-child(n+7), .columns > div:first-child:nth-last-child(n+7) ~ div {flex: none; width: calc(25% - 30px);}
}