/*
Theme Name: Dog Kennel theme
Description: WordPress theme for Lago Benea
Version: 1.5
Author: Olga Fucikova / OFphoto
*/

/* =====================================================
   COLOR SYSTEM
===================================================== */

:root {

    /* Background */
    --bg: #f0e0e1;

    /* Text */
    --text: #313131;
    --text-light: #666666;
	--heading: #7b2946;

    /* Brand */
    --accent: #ae3259;
    --accent-hover: #ae3259;

    /* Borders */
    --border: rgba(174, 50, 89, .25);
    --divider: rgba(174, 50, 89, .35);

    /* Dogs */
    --dog: #0393ef;
    --bitch: #fb2ea0;

    /* Footer */
    --footer: #535555;
    --footer-link: var(--accent);

}

/* =====================================================
   BASE
===================================================== */

#main{
background:
    linear-gradient(
        rgba(255, 252, 250, 0.75), rgba(255, 252, 250, 0.75)),
    url("http://lagobenea.cz/wp-content/uploads/2026/07/footer.png") center top repeat;
position:relative;
width:100%;
min-height:100vh;
display:flex;
flex-direction:column;
overflow:hidden;
font-family:'Source Serif 4', serif;
font-size:18px;
}

html,body{
margin:0;
width:100%;
height:100%;
background:var(--bg);
}

header,
.nav{
position:relative;
z-index:1000;
}

body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

h1,h2,h3,h4,h5,h6{
padding:0;
}

ul{
list-style:none;
}

p,ul,ol {
  margin-bottom: 16px;
  text-align: justify;
  hyphens: auto;

}

img{
max-width:100%;
height:auto;
}

.postcontent img,
.content img,
.article img {
    display: block;
    margin: 15px auto;
    max-width: 100%;
    height: auto;
}

.img-row{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  margin:30px 0;
}

.img-row img{
  max-width:100%;
  height:auto;
  display:block;
}

.alignleft {
float:left;
margin:0 20px 10px 0;
}

.alignright {
float:right;
margin:0 0 10px 20px;
}

.aligncenter {
display:block;
margin:20px auto;
}

.alignnone {
margin:20px 0;
}

/* =====================================================
   TYPOGRAPHY
===================================================== */

.postcontent{
    font-size:21px;
    line-height:1.7;
    font-weight:400;
    letter-spacing:0.02em;
    color:var(--text);
	text-align:left;
}

.postcontent p{
  text-align:justify;
}

.blockcontent{
    font-size:18px;
    line-height:1.7;
    color:var(--text);
}

.blockcontent li{
    line-height:1.7;
}

.postcontent ul,
.blockcontent ul{
  list-style:none;
  padding-left:0;
}

.postcontent ul li,
.blockcontent ul li{
  position:relative;
  padding-left:22px;
  margin-bottom:10px;
}

.postcontent ul li::before,
.blockcontent ul li::before{
  content:"◆";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-size:12px;
}

hr{
border:none;
height:1px;
background:var(--border)
}

/* links */

.postcontent a,
.blockcontent a{
text-decoration:none;
color:var(--accent);
}

.postcontent a:visited,
.blockcontent a:visited{
color:var(--accent);
}

.postcontent li,
.post li{
color:var(--text);
margin:5px 0;
padding-left:12px;
}

.postcontent strong,
.postcontent b,
.blockcontent strong,
.blockcontent b{
color:var(--text-light);
}

/* =====================================================
   HEADINGS
===================================================== */
.postcontent h1,
.blockcontent h1{
font-size:28px;
color:var(--heading);
text-transform: uppercase;
text-align:center;
font-weight: normal;
letter-spacing: .3em;	
}

.postcontent h2,
.blockcontent h2{
font-size:24px;
color:var(--heading);
text-transform: uppercase;
  text-align:left;
  margin-top:40px;	
}

.postcontent h3,
.blockcontent h3{
font-size:22px;
color:var(--accent);
text-transform: uppercase;
  text-align:left;
  margin-top:25px;
  opacity:0.9;
}

.postcontent h4,
.blockcontent h4{
font-size:22px;
color:var(--accent-hover);
text-transform: uppercase;
}

/* pes */

.postcontent h5,
.blockcontent h5{
font-size:20px;
color:var(--dog);
text-transform: uppercase;
}

/* fena */

.postcontent h6,
.blockcontent h6{
font-size:20px;
color:var(--bitch);
text-transform: uppercase;
}

.postcontent h1,
.postcontent h2,
.postcontent h3,
.blockcontent h1,
.blockcontent h2,
.blockcontent h3,
.postcontent h4,
.postcontent h5,
.postcontent h6,
.blockcontent h4,
.blockcontent h5,
.blockcontent h6{
font-weight: normal;
word-wrap:break-word;
font-family:'Marcellus', serif;
letter-spacing:0.15em;
}

/* =====================================================
   UTILITIES
===================================================== */

/* ALIGN */

.aligncenter,
img.aligncenter,
.wp-block-image.aligncenter img,
.wp-caption.aligncenter img{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-justify {
    text-align: justify;
	hyphens:auto;
}

/* SPACING */
.mb-20 {
    margin-bottom: 20px;
}

.mt-20 {
    margin-top: 20px;
}

/* WIDTH */
.w-100 {
    width: 100%;
}

/* FLEX */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =====================================================
   LAYOUT
===================================================== */
.container{
    width: 100%;
    flex:1;
    height:auto;
    padding-bottom:clamp(120px, 25vw, 500px);
    padding-top: 0px;
	}	

.container::after {
    content:"";
    display:table;
    clear:both;
}

/* hlavní wrapper = JEDINÝ centrovací prvek */
.layout-wrapper{
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding: 0px 7%;
	}

/* hlavní layout */
.content-layout{
  display: flex;
  align-items: flex-start;
background:
    linear-gradient(
        rgba(255, 252, 250, 0.3), rgba(255, 252, 250, 0.3));
backdrop-filter: blur(3px);
    border-radius: 16px;
    padding: 30px 40px;
    border: 1px solid rgba(255,255,255,.5);
}

/* content */
.layout-cell.content{
  flex: 1;
  min-width: 0;
padding: 0;
}

/* články */
.layout-cell.post{
  margin-bottom: 0;
}

/* =====================================================
   SECTIONS 
===================================================== */

.section{
  width: 100%;
}

.section-inner{
  width: min(1600px, 100%);
  margin-inline: auto;
}

.layout-cell.post:last-child{
margin-bottom:0;
}

.content-layout-row.postcontent:last-child{
margin-bottom:0;
}

@media (max-width:768px){

.content-layout{
flex-direction:column;
}

.layout-cell{
width:100%;
}

}

/* =====================================================
   GRIDS 
===================================================== */

/* recenze */
.home-testimonials{
  margin: 3rem 0;
  padding: 3rem 0;
  background: rgba(255,255,255,0.025);
  border-top: 1px solid rgba(235,182,164,0.18);
  border-bottom: 1px solid rgba(235,182,164,0.18);
}

.testimonials-inner{
  width: min(1600px, 100% - 60px);
  margin-inline: auto;
}

.testimonial-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media(max-width:768px){

.testimonial-grid{
    grid-template-columns:1fr;
}
}

/* FLEX LAYOUT */

.flex-container{
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
}

.flex-items{
flex:1 1 calc(30% - 7px);
padding:15px;
text-align:center;
}

.flex-items:not(:last-child){
border-right:1px solid var(--border);
}
      

@media(max-width:1024px){

.flex-items{
flex:0 0 calc(50% - 5px);
}
}

@media(max-width:768px){

.flex-items{
flex:0 0 100%;
border-right:none;
}

}

/* =====================================================
   HEADER
===================================================== */
.header-home-link{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:99;
}

header .widget-area {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.header-widget img {
    display: block;
}

header .widget-title{
display:none;
}

/* =====================================================
   NAVIGATION
===================================================== */
.nav{
  margin:0px 7%;
  position:relative;
  z-index:499;
  display:flex;
  align-items:center;
  padding-bottom: 5px; 	
	}

.nav::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(190,160,90,0.6),
        transparent
    );
}

ul.hmenu{
display:flex;
justify-content:flex-end;
align-items:center;
gap:5px;
margin-left:auto;
margin-top:0;
margin-bottom:0;
padding:0;
list-style:none;
flex-wrap:wrap;
	order:2;
}

ul.hmenu li{
position:relative;
}

ul.hmenu > li:before{
content:"";
position:absolute;
top:5px;
width:0px;
height:24px;
background:#c3b6b1 center no-repeat;
}

ul.hmenu > li:first-child:before{
display:none;
}
ul.hmenu > li > a{
display:block;
padding:0 15px;
line-height:1.5;
color:var(--text-light);
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-size:20px;
font-family:'Marcellus', serif;
letter-spacing:0.04em;
}

ul.hmenu > li:hover > a{
color:var(--accent-hover);
}

ul.hmenu > li > a.active{
color:var(--accent-hover);
}

/* GTranslate */
.hmenu-extra1{
  margin-right:auto;
  order:1;
}

/* =====================================================
   MOBIL MENU
===================================================== */
.menu-toggle{
display:none;
width:32px;
height:24px;
cursor:pointer;
position:relative;
flex-direction:column;
justify-content:space-between;
}

.menu-toggle span{
display:block;
height:3px;
width:100%;
background:var(--text-light);
border-radius:2px;
transition:all .3s ease;
}

.menu-toggle:hover{
color:var(--accent);
border-color:var(--accent);
background:rgba(255,255,255,0.05);
}

@media (max-width:768px){

.menu-toggle{
display:flex;
margin-left:auto;
}

ul.hmenu{
display:none;
flex-direction:column;
width:100%;
}

.nav.active ul.hmenu{
display:flex;
}

}

/* =====================================================
   HERO
===================================================== */

.hero{
position:relative;
height:calc(100svh - 50px);
overflow:hidden;
}

.hero > img:first-child{
position:absolute;
left:50%;
width:80%;
object-fit:cover;
transform:translateX(-50%);
}

.hero-arrow{
position:absolute;
bottom:25px;
left:50%;
transform:translateX(-50%);
}


/* =====================================================
   POSTS
===================================================== */

.post{
padding:5px;
display:flex;
flex-direction:column;
}

.post a{
word-break:break-word;
line-height:1.4;
}

.postcontent img{
  border-radius:6px;
}

/* =====================================================
  BOXES
===================================================== */

.info-box{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(235,182,164,0.25);
  padding: 20px;
  margin: 25px 0;
}

.info-box h3{
  margin-top: 0;
}

.story-box{
  background: rgba(235,182,164,0.05);
  border-left: 1px solid rgba(235,182,164,0.6);
  padding: 20px;
  margin: 25px 0;
}

.note-box{
  background: transparent;
  border: 1px dashed rgba(235,182,164,0.35);
  padding: 15px 18px;
  margin: 20px 0;
  font-style: italic;
}
/* =====================================================
   PLUGINS
===================================================== */

/* FLEX POST PLUGIN */

.fpc-grid{
  display:grid;
  gap:20px;
  margin-bottom:30px;
  width:100%;
  align-items:stretch;
}

.fpc-cols-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.fpc-cols-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.fpc-cols-4{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

/* tablet = 3 */
@media (max-width: 1024px){
  .fpc-cols-4,
  .fpc-cols-3,
  .fpc-cols-2{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* mobil = 1 */
@media (max-width: 768px){
  .fpc-cols-4,
  .fpc-cols-3,
  .fpc-cols-2{
    grid-template-columns:1fr;
  }
}

.fpc-title{
line-height:1.7;
min-height:3em;
text-align:center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* nebo 3 */
overflow: hidden;
}

.fpc-excerpt{
line-height:1.4;
font-size:18px;
color:#666;
font-family: 'Source Serif 4', serif;
display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; 
  overflow: hidden;
margin-bottom:20px;
margin-top:20px;
}

.fpc-button { 
align-self: center;
margin-top: auto;
font-family: 'Source Serif 4', serif;
font-size: 18px;
padding: 6px 18px;
color:#ffffff;
text-align:center;
text-decoration:none;
background-color:var(--accent);      /* barva tlačítka */
border: 1px solid var(--accent);
border-radius: 10px;

}


.fpc-button:visited { 
background-color: var(--accent);      /* o trochu tmavší */
border-color: var(--accent);
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}

.fpc-button:hover { 
background-color: var(--heading);      /* o trochu tmavší */
border-color: var(--heading);
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}

a.fpc-button,
a.fpc-button:visited,
a.fpc-button:hover,
a.fpc-button:focus,
a.fpc-button:active {
    color: #fff !important;
    text-decoration: none;
}

.fpc-thumb img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  display:block;
  border-radius:6px;
}

/* FAQ */

.faq-section{
    padding:80px 20px;
}

.faq-container{
    max-width:900px;
    margin:0 auto;
}

.faq-item{
    border-bottom:1px solid rgba(255,255,255,0.12);
}
.faq-section h2{
    text-align:center;
    margin-bottom:40px;
    font-size:24px;
    line-height:1.2;
}

.faq-question{
    width:100%;
    background:none;
    border:none;
    padding:20px 0;
    text-align:left;
    font-size:17px;
    cursor:pointer;
    position:relative;
    color:#fff;
    transition:0.3s ease;
}

.faq-question:hover{
    opacity:0.8;
}

.faq-question::after{
    font-size:22px;
}

.faq-item.active .faq-question::after{
    transform:translateY(-50%) rotate(45deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease;
}

.faq-answer p{
    padding:0 0 24px;
    margin:0;
    line-height:1.7;
    opacity:0.85;
}

.faq-item.active .faq-answer{
    max-height:300px;
}


/* SCROLL BUTTON */

#to_top_scrollup{
background:#000;
border-radius:5%;
bottom:20px;
color:#fff;
cursor:pointer;
display:none;
font-size:32px;
height:32px;
opacity:.5;
padding:5px;
position:fixed;
right:20px;
text-align:center;
width:32px;
z-index:9999;
}

/* TO TOP BUTTON */

html {
    scroll-behavior: smooth;
}

#to_top_scrollup {
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    background: transparent;
    opacity: 0.8;
    transition: opacity 0.3s;
    display: none;
    position: fixed;
    bottom: 14px;
    right: 10px;
    z-index: 9999;
    cursor: pointer;
}

#to_top_scrollup:hover {
    opacity: 1;
}

#to_top_scrollup img {
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
    display: block;
    border: none;
    z-index: 9999;
}

/* =====================================================
   SIDEBAR
===================================================== */
.sidebar{ 
	flex: 0 0 280px; 
	border-left: 1px solid var(--border); 
	padding-left: 0px; 
	align-self: stretch;
}

.block{
margin:10px 7px 0px;
}

.blockcontent{
color:var(--text);
font-size:18px;
}

.blockcontent a{
color:var(--accent);
text-transform:uppercase;
}

.blockcontent a:hover{
color:var(--text-light);
text-decoration:underline;
}

.block li{
line-height:1.5;
color:var(--text-light);
}


.sidebar .block{
border-bottom:1px solid #C77B64;
padding-bottom:5px;
}

.sidebar .blockcontent a{
text-transform:uppercase;
letter-spacing:0.02em;
line-height:1.5;
}

@media (min-width:450px) and (max-width:768px){

.sidebar{
display:grid;
grid-template-columns:1fr 1fr;
max-width:100%;
}

.sidebar .block{
margin:0;
}

.sidebar .block:last-child{
grid-column:1 / -1;
}

}

/* =====================================================
   FOOTER
===================================================== */

.footer{
    position:relative;
    isolation:isolate;
    font-size:14px;
    text-align:center;
    margin:auto;
    display:flex;
    flex-direction:column;
}

.footer::before {
    content:"";
    position:absolute;

    top:-450px;
    left:50%;
    transform:translateX(-50%);

    width:100vw;
    height:500px;

    background:
    url("http://lagobenea.cz/wp-content/uploads/2026/07/zapati.png")
    center bottom / clamp(500px, 90vw, 1400px) auto no-repeat;

    z-index:-1;
}

.footer-inner{
margin:0 auto;
max-width:1728px;
}

.footer-text a{
color:var(--footer-link);
text-decoration:none;
}

.footer-text a:hover{
color:var(--text-light);
text-decoration:underline;
}

.page-footer{
color:var(--accent);
text-decoration:none;
} 

.footer-dogs img{
width:95%;
height:auto;
display:block;
}

.footer-dogs{
max-width:1600px;
margin:0 auto -20px;
}

.site-footer .footer-dogs img{
display:block;
margin:auto;
	}

.footer-columns{
    max-width:1600px;
    margin:0 auto;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    padding:0 7% 0px;
}

.footer-left{
    flex:1;
    text-align:center;
}

.footer-center{
    flex:2;
}

.footer-right{
    flex:1;
    text-align:center;
}

.footer-left h3{
    color:var(--accent);
    font-size:26px;
    margin-bottom:20px;
    letter-spacing:2px;
}

.footer-left p{
    margin:12px 0;
}

.footer-right img{
    max-width:240px;
    height:auto;
}

.footer-copy{
    text-align:center;
    padding:25px 0 3px;
    font-size:14px;
}

.responsive .footer-inner{
width:auto;
padding:2%;
}

.responsive .footer{
margin-top:1%;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

.responsive body{
min-width:240px;
}

/* obrázky */

.responsive img{
max-width:100%;
height:auto;
box-sizing:border-box;
}

.responsive .content-layout img,
.responsive .content-layout video{
max-width:100%;
height:auto !important;
}

/* embed video */

.responsive .responsive-embed{
height:0;
padding-bottom:56.25%;
position:relative;
}

.responsive .responsive-embed iframe,
.responsive .responsive-embed object,
.responsive .responsive-embed embed{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}


/*  HEADER                                           */

.responsive .header{
width:auto !important;
max-width:none !important;
min-width:0 !important;
text-align:center;
}

/*  TABLET                                           */

@media (max-width:1024px){

.responsive .layout-cell{
width:100%;
}

}

@media(max-width:768px){

.testimonial-grid{
    grid-template-columns:1fr;
}

}

@media (max-width:768px){

.content-layout{
flex-direction:column;
}

.layout-cell{
width:100%;
}

}

@media (max-width:768px){

.footer::before {
    top:-250px;
    width:100vw;
    height:300px;
    background-size: auto 300px;
}

}

/* WordPress post classes */

.sticky {}
.bypostauthor {}

/* Caption */

.wp-caption {
border:1px solid #ddd;
background:#f3f3f3;
padding-top:4px;
margin:10px;
text-align:center;
}

.wp-caption img {
margin:0;
border:0;
}

.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
padding:0 4px 5px;
margin:0;
}

/* Gallery */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.gallery .gallery-item {
    flex: 1 1 220px;
    padding: 0;
}

.gallery .gallery-icon {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery,
.gallery-item,
.gallery-icon,
.gallery-icon a,
.gallery-icon img {
    box-sizing: border-box;
}

.gallery-icon a {
    display: block;
    height: 100%;
}


/* obrázky sjednocené */
.gallery img {
    border: none !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* popisky */
.gallery .gallery-caption {
    color: #888;
    font-size: 12px;
    margin: 0 0 12px;
}

/* WP bordel breaků */
.gallery br + br {
    display: none;
}

/* Featured image */

img.wp-post-image {
margin:0 5px 5px 0 !important;
}

/* Utility */

.hidden {
display:none;
}

/* Content stacking */

.content {
position:relative;
z-index:1;
}

/* Footer layout fix */

.footer .content-layout {
margin:0 auto;
width:100%;
}

/* Widget title */

.widget-title {
padding-left:24px;
margin-bottom:0;
}

.footer .widget-title {
font-size:1.2em;
padding:0;
}

.footer .widget,
.footer .widget a {
text-align:left;
}

/* Screen reader accessibility */

.screen-reader-text {
clip:rect(1px,1px,1px,1px);
position:absolute;
}

.screen-reader-text:focus {
background:#f1f1f1;
border-radius:3px;
box-shadow:0 0 2px 2px rgba(0,0,0,.6);
clip:auto;
color:#21759b;
display:block;
font-size:14px;
font-weight:bold;
height:auto;
line-height:normal;
padding:15px 23px 14px;
position:absolute;
left:5px;
top:5px;
text-decoration:none;
width:auto;
z-index:100000;
}

/* Above WP toolbar */
}

/* Begin Additional CSS Styles */
blockheader .t, .vmenublockheader .t {white-space: nowrap;}
/* End Additional CSS Styles */