/*
Theme Name: Lovio 80 Active
Theme URI: https://lovio.top/
Author: Lovio
Description: Clean 10%-80%-10% WordPress theme with a random 4-image grid. Elementor Free friendly.
Version: 1.0.3
License: GPL-2.0-or-later
Text Domain: lovio-80-active
*/

:root{
  --lh-max-width: 80%;
  --lh-orange: #ff805d;
  --lh-dark: #0f1012;
  --lh-text: #111111;
  --lh-muted: #666666;
  --lh-border: #eeeeee;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#fff;
  color:var(--lh-text);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.6;
}
img{max-width:100%;height:auto}
a{color:inherit}
.lh-shell{
  width:var(--lh-max-width);
  margin-left:auto;
  margin-right:auto;
}

/* HEADER */
.lh-header{
  width:var(--lh-max-width);
  margin-left:auto;
  margin-right:auto;
  background:#fff;
  border-bottom:1px solid #eee;
}
.lh-header .lh-shell{width:100%;}
.lh-header-main{
  min-height:205px;
  display:flex;
  align-items:center;
  padding:24px 0 18px;
}
.lh-header-content{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
}
.lh-header-brand{
  display:flex;
  align-items:center;
  min-width:0;
  flex:1 1 auto;
}
.lh-brand{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none;
  flex:0 0 auto;
}
.lh-brand img{
  display:block;
  width:auto;
  max-width:125px;
  max-height:105px;
  object-fit:contain;
}
.lh-brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  margin-left:18px;
}
.lh-title{
  margin:0;
  font-size:36px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.8px;
}
.lh-tagline{
  margin:4px 0 0;
  font-size:14px;
  color:#444;
}
.lh-header-right{
  flex:0 0 auto;
  min-width:220px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:34px;
}
.lh-search{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--lh-orange);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:17px;
}
.lh-nav{width:100%;}
.lh-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:20px;
  margin:0;
  padding:0;
}
.lh-nav a{
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}

/* BODY */
.lh-main{min-height:300px}
.lh-content{
  padding:35px 0 55px;
}
.lh-page-content > *:first-child{margin-top:0}
.lh-page-content > *:last-child{margin-bottom:0}

.lh-random-wrap{width:100%}
.lh-random-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}
.lh-random-item[hidden]{display:none !important}
.lh-random-item{
  min-width:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--lh-border);
  border-radius:4px;
}
.lh-random-item a{
  display:block;
  text-decoration:none;
}
.lh-random-item img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.lh-random-caption{
  padding:10px 12px;
  font-size:14px;
  font-weight:700;
}

/* FOOTER */
.lh-footer{
  width:var(--lh-max-width);
  margin:0 auto;
}
.lh-footer-main{
  background:var(--lh-dark);
  color:#fff;
}
.lh-footer-main .lh-shell{
  width:100%;
  min-height:167px;
  display:flex;
  align-items:center;
  padding:25px 0;
}
.lh-footer-brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.lh-footer-brand .lh-brand{
  flex:0 0 auto;
}
.lh-footer-brand img{
  display:block;
  max-width:115px;
  max-height:80px;
  object-fit:contain;
}
.lh-footer-brand > div{
  margin-left:18px;
}
.lh-footer-title{
  margin:0;
  font-size:23px;
  line-height:1.2;
  font-weight:800;
}
.lh-footer-tagline{
  margin:6px 0 0;
  font-size:13px;
  color:#ddd;
}
.lh-footer-bar{
  background:#050505;
  color:#bbb;
}
.lh-footer-bar .lh-shell{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
  text-align:center;
}
.lh-footer-copy{
  font-size:13px;
}
.lh-footer-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  margin:0;
  padding:0;
}
.lh-footer-nav a{
  color:#bbb;
  text-decoration:none;
  font-size:13px;
}
.lh-footer-nav a:hover{color:#fff}

/* WP / Elementor */
.elementor-page .lh-content{padding-top:0}
.wp-caption{max-width:100%}


/* Fix copied Elementor multi-grid row free space:
   Let rows size to their actual content instead of stretching to fill
   the grid container height. This applies only to the manual random grid. */
.lovio-random-grid{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  grid-template-rows:none !important;
  grid-auto-rows:auto !important;
  align-content:start !important;
}

/* Manual Elementor random-grid classes. Add lovio-random-grid to the parent grid and
   lovio-random-item to every image/card inside it. The JavaScript selects the number set on data-random-show (4 by default). */
.lovio-random-grid .lovio-random-hidden {
  display: none !important;
}
.lovio-random-grid .lovio-random-item[hidden] {
  display: none !important;
}

/* Responsive */
@media (max-width:900px){
  :root{--lh-max-width:90%}
  .lh-title{font-size:30px}
  .lh-random-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lh-header-content{align-items:flex-start}
  .lh-header-right{min-width:190px}
}

@media (max-width:600px){
  :root{--lh-max-width:92%}
  .lh-header-main{min-height:auto}
  .lh-header-content{flex-direction:column;gap:24px}
  .lh-header-brand{width:100%}
  .lh-header-right{width:100%;min-width:0;align-items:flex-end;gap:22px}
  .lh-nav{width:100%}
  .lh-nav ul{gap:13px;flex-wrap:wrap;justify-content:flex-end}
  .lh-title{font-size:25px}
  .lh-random-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lh-footer-main .lh-shell{padding:13px 0;align-items:flex-start;flex-direction:column;gap:10px}
  .lh-footer-bar .lh-shell{padding:13px 0;align-items:center;flex-direction:column;gap:10px;text-align:center}
  .lh-footer-nav ul{justify-content:center}
}