/*
Theme Name: CityCommunityBuilder_6241
Theme URI: https://city-community.ru
Author: Алексей Марков
Author URI: https://city-community.ru
Description: Отраслевой блог о строительном рынке России — малоэтажное строительство, ИЖС, девелопмент, технологии, материалы.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: citycommunitybuilder_6241
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* === RESET & BASE === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#F7F5F0;
  --text:#2C2A28;
  --accent1:#C84C2A;
  --accent1-hover:#A83E20;
  --accent2:#4A7A6C;
  --border:#DCD5CC;
  --card-bg:#fff;
  --soft-green:#EFF4F1;
  --btn-radius:6px;
  --pill-radius:30px;
  --font-body:'Inter',sans-serif;
  --font-heading:'Manrope',sans-serif;
  --transition:0.2s ease;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
}
@media(max-width:600px){body{font-size:16px}}

img{max-width:100%;height:auto}
a{color:var(--accent1);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--accent1-hover)}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.25;
  color:var(--text);
  margin-bottom:.6em;
}
h1{font-size:2rem}
h2{font-size:1.6rem}
h3{font-size:1.3rem}
h4{font-size:1.1rem}

p{margin:0 0 1em}
ul,ol{margin:0 0 1em 1.4em}

/* tables */
table{width:100%;border-collapse:collapse;margin-bottom:1.5em}
th,td{border:1px solid var(--border);padding:.55em .75em;text-align:left}
th{background:var(--soft-green);font-weight:600}

/* === RULER DECOR (строительный линейчатый) === */
.ruler-line{
  height:6px;
  background:repeating-linear-gradient(90deg,var(--border) 0 2px,transparent 2px 8px);
}

/* === HEADER === */
.site-header{background:#fff;border-bottom:1px solid var(--border)}
.header-inner{
  max-width:1200px;margin:0 auto;padding:1rem 1.5rem;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.8rem;flex-shrink:0}
.brand-logo{max-height:48px;width:auto}
.brand-text{display:flex;flex-direction:column}
.brand-name{font-family:var(--font-heading);font-weight:700;font-size:1.05rem;color:var(--text);line-height:1.2}
.brand-desc{font-size:.72rem;color:#7A756D;line-height:1.3;max-width:340px}

.header-nav{margin-left:auto}
.header-nav ul{list-style:none;display:flex;gap:1.4rem;margin:0;padding:0}
.header-nav a{font-size:.92rem;font-weight:500;color:var(--text);padding:.3em 0;position:relative}
.header-nav a:hover{color:var(--accent1)}

/* mobile nav toggle */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;transition:var(--transition)}
@media(max-width:768px){
  .nav-toggle{display:block;margin-left:auto}
  .header-nav{display:none;width:100%;order:10}
  .header-nav.is-open{display:block}
  .header-nav ul{flex-direction:column;gap:0}
  .header-nav li{border-top:1px solid var(--border)}
  .header-nav a{display:block;padding:.7em 0}
}

/* category ribbon */
.cat-ribbon{background:#fff;border-bottom:1px solid var(--border)}
.cat-ribbon-inner{
  max-width:1200px;margin:0 auto;padding:.45rem 1.5rem;
  display:flex;gap:0;align-items:center;flex-wrap:wrap;overflow-x:auto;
}
.cat-ribbon-item{
  font-size:.82rem;font-weight:500;color:var(--text);
  padding:.25em .9em;white-space:nowrap;
  border-right:1px solid var(--border);
}
.cat-ribbon-item:last-child{border-right:none}
.cat-ribbon-item:hover{color:var(--accent1)}
.cat-ribbon-icon{margin-right:.3em;font-size:.9em}

/* === LAYOUT === */
.site-content{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}
.layout-wide{max-width:85%;margin:0 auto}
.layout-with-sidebar{display:flex;gap:2.5rem;align-items:flex-start}
.content-main{flex:1;min-width:0}
.sidebar-area{flex:0 0 27%;min-width:220px}
@media(max-width:768px){
  .layout-with-sidebar{flex-direction:column}
  .sidebar-area{flex:none;width:100%}
  .layout-wide{max-width:100%}
}

/* === CARDS === */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.8rem;
}
.card{
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--border);
  transition:box-shadow var(--transition);
  position:relative;
}
.card:hover{box-shadow:0 6px 24px rgba(44,42,40,.1)}

/* terracotta corner */
.card::after{
  content:'';position:absolute;bottom:0;left:0;
  width:28px;height:28px;
  background:linear-gradient(135deg,var(--accent1) 50%,transparent 50%);
  border-radius:0 10px 0 0;
  opacity:.7;
  pointer-events:none;
}

.card-thumb-wrap{
  position:relative;overflow:hidden;
}
.card-thumb-wrap a{display:block}
.card-thumb-wrap img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  filter:contrast(1.02);
}
/* warm grain overlay */
.card-thumb-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(44,42,40,.25));
  pointer-events:none;
}

.card-body{
  flex:1;
  display:flex;flex-direction:column;
  padding:1.1rem 1.2rem 1.3rem;
}
.card-category{
  display:inline-block;
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--accent2);margin-bottom:.4em;
}
.card-title{font-size:1.05rem;margin-bottom:.45em;line-height:1.35}
.card-title a{color:var(--text)}
.card-title a:hover{color:var(--accent1)}
.card-excerpt{font-size:.88rem;color:#5C5852;line-height:1.6;margin-bottom:.7em;flex:1}
.card-excerpt p{margin:0 0 .5em;background:none}
.card-meta{font-size:.76rem;color:#9A9389;display:flex;gap:1rem;margin-top:auto}

.card-readmore{
  display:inline-block;margin-top:.6em;
  font-size:.85rem;font-weight:600;color:#fff;
  background:var(--accent1);padding:.5em 1.3em;border-radius:var(--btn-radius);
  transition:background var(--transition),box-shadow var(--transition);
}
.card-readmore:hover{background:var(--accent1-hover);color:#fff;box-shadow:0 3px 10px rgba(200,76,42,.3)}

/* === BUTTONS === */
.btn-primary{
  display:inline-block;
  background:var(--accent1);color:#fff;
  padding:.6em 1.6em;border:none;border-radius:var(--btn-radius);
  font-size:.92rem;font-weight:600;cursor:pointer;
  transition:background var(--transition),box-shadow var(--transition);
}
.btn-primary:hover{background:var(--accent1-hover);color:#fff;box-shadow:0 3px 12px rgba(200,76,42,.25)}

.btn-outline{
  display:inline-block;
  border:2px solid #fff;color:#fff;background:transparent;
  padding:.55em 1.5em;border-radius:var(--btn-radius);
  font-size:.9rem;font-weight:600;cursor:pointer;
  transition:background var(--transition),color var(--transition);
}
.btn-outline:hover{background:#fff;color:var(--accent1)}

/* pills */
.pill{
  display:inline-block;
  background:#E8E3DA;color:var(--text);
  padding:.3em 1em;border-radius:var(--pill-radius);
  font-size:.82rem;font-weight:500;cursor:pointer;
  transition:background var(--transition),color var(--transition);
  border:none;
}
.pill.is-active,.pill:hover{background:var(--accent2);color:#fff}

/* === PAGINATION === */
.pagination{display:flex;justify-content:center;gap:.4rem;margin:2.5rem 0 1rem;flex-wrap:wrap}
.pagination a,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 .6em;
  border:1px solid var(--border);border-radius:var(--btn-radius);
  font-size:.88rem;font-weight:500;color:var(--text);
  transition:all var(--transition);
}
.pagination a:hover{background:var(--accent1);color:#fff;border-color:var(--accent1)}
.pagination .current{background:var(--accent1);color:#fff;border-color:var(--accent1)}

/* === BREADCRUMBS === */
.breadcrumbs{font-size:.82rem;color:#9A9389;margin-bottom:1.5rem}
.breadcrumbs a{color:var(--accent2)}
.breadcrumbs a:hover{color:var(--accent1)}
.breadcrumbs .sep{margin:0 .4em;color:var(--border)}

/* === SIDEBAR === */
.widget{margin-bottom:2rem;padding:1.2rem;background:#fff;border-radius:8px;border:1px solid var(--border)}
.widget-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;margin-bottom:.8em;padding-bottom:.4em;border-bottom:2px solid var(--accent1)}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{padding:.4em 0;border-bottom:1px solid var(--border);font-size:.88rem}
.widget li:last-child{border-bottom:none}
.widget a{color:var(--text)}
.widget a:hover{color:var(--accent1)}

/* === FOOTER === */
.site-footer{background:var(--text);color:#C9C4BB;padding:0}
.footer-widgets{
  max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem 2rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
}
@media(max-width:768px){.footer-widgets{grid-template-columns:1fr}}
.footer-widgets .widget{background:transparent;border:none;padding:0}
.footer-widgets .widget-title{color:#fff;border-bottom-color:var(--accent1)}
.footer-widgets .widget a{color:#C9C4BB}
.footer-widgets .widget a:hover{color:var(--accent1)}
.footer-widgets .widget li{border-bottom-color:rgba(255,255,255,.1)}

.footer-tools{
  max-width:1200px;margin:0 auto;padding:0 1.5rem 2rem;
  display:flex;gap:1rem;flex-wrap:wrap;
}
.footer-tool-btn{
  display:inline-block;background:var(--accent1);color:#fff;
  padding:.65em 1.4em;border-radius:var(--btn-radius);
  border:2px solid rgba(255,255,255,.35);font-size:.85rem;font-weight:600;
  transition:all var(--transition);
}
.footer-tool-btn:hover{background:var(--accent1-hover);color:#fff;border-color:#fff}

.footer-copy{
  text-align:center;padding:1.2rem 1.5rem;font-size:.78rem;color:#8A857D;
  border-top:1px solid rgba(255,255,255,.08);
}

/* === FRONT PAGE SECTIONS === */
.fp-section{padding:3rem 0}
.fp-section:nth-child(even){background:#fff}
.fp-section-inner{max-width:85%;margin:0 auto}
.fp-section h2{text-align:center;margin-bottom:1.5rem}

.fp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.fp-col-item{
  background:var(--card-bg);border:1px solid var(--border);border-radius:8px;
  padding:1.5rem;text-align:center;
}
.fp-col-icon{font-size:2.2rem;margin-bottom:.6rem}

.fp-steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.fp-step{
  counter-increment:step;position:relative;
  padding:1.5rem 1.2rem 1.5rem 3.5rem;
  background:#fff;border-left:3px solid var(--accent1);border-radius:0 8px 8px 0;
}
.fp-step::before{
  content:counter(step);position:absolute;left:.8rem;top:1.3rem;
  font-family:var(--font-heading);font-size:1.5rem;font-weight:800;color:var(--accent1);
}

/* practice block */
.fp-practice{
  background:var(--soft-green);border:2px dashed var(--accent2);
  border-radius:10px;padding:2.5rem 2rem;position:relative;
}
.fp-practice::before{
  content:'\201C';position:absolute;top:.3rem;left:1rem;
  font-size:4rem;color:var(--accent2);opacity:.3;line-height:1;
}
.fp-practice p{font-size:1.05rem;line-height:1.9;margin-left:1.5rem}

/* === SINGLE POST === */
.entry-header{margin-bottom:1.5rem}
.entry-title{font-size:1.8rem}
.entry-meta{font-size:.82rem;color:#9A9389;margin-bottom:1rem;display:flex;gap:1.2rem;flex-wrap:wrap}
.entry-content{line-height:1.75}
.entry-content img{border-radius:6px;margin:1em 0}
.entry-content blockquote{
  border-left:4px solid var(--accent2);margin:1.5em 0;padding:.8em 1.5em;
  background:var(--soft-green);border-radius:0 6px 6px 0;font-style:italic;
}
.entry-tags{margin-top:2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.entry-tag{
  display:inline-block;background:#E8E3DA;padding:.25em .8em;
  border-radius:var(--pill-radius);font-size:.78rem;color:var(--text);
}

/* === COMMENTS === */
.comments-area{margin-top:3rem;padding-top:2rem;border-top:2px solid var(--border)}
.comments-title{font-size:1.3rem;margin-bottom:1.5rem}
.comment-list{list-style:none;margin:0;padding:0}
.comment-item{padding:1.2rem 0;border-bottom:1px solid var(--border)}
.comment-author-name{font-weight:700;font-size:.92rem}
.comment-date{font-size:.76rem;color:#9A9389;margin-left:.6rem}
.comment-text{margin-top:.5rem;font-size:.9rem;line-height:1.65}
.comment-reply-link{font-size:.8rem;color:var(--accent2);font-weight:600}

.comment-respond{margin-top:2rem}
.comment-form label{display:block;font-size:.88rem;font-weight:500;margin-bottom:.25em}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;border:1px solid var(--border);border-radius:var(--btn-radius);
  padding:.6em .8em;font-size:.9rem;font-family:var(--font-body);
  background:#fff;transition:border-color var(--transition);margin-bottom:1rem;
}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--accent2)}
.comment-form .submit{
  background:var(--accent1);color:#fff;border:none;border-radius:var(--btn-radius);
  padding:.6em 2em;font-size:.92rem;font-weight:600;cursor:pointer;
  transition:background var(--transition);
}
.comment-form .submit:hover{background:var(--accent1-hover)}

/* === SEARCH FORM === */
.search-form{display:flex;gap:0}
.search-form .search-field{
  flex:1;border:1px solid var(--border);border-radius:var(--btn-radius) 0 0 var(--btn-radius);
  padding:.55em .9em;font-size:.9rem;font-family:var(--font-body);
}
.search-form .search-field:focus{outline:none;border-color:var(--accent2)}
.search-form .search-submit{
  background:var(--accent1);color:#fff;border:none;
  border-radius:0 var(--btn-radius) var(--btn-radius) 0;
  padding:.55em 1em;cursor:pointer;font-size:.9rem;
  transition:background var(--transition);
}
.search-form .search-submit:hover{background:var(--accent1-hover)}

/* === COOKIE BANNER === */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:var(--text);color:#E8E3DA;
  padding:1rem 1.5rem;
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
  font-size:.85rem;
  box-shadow:0 -4px 20px rgba(0,0,0,.2);
}
.cookie-banner.is-hidden{display:none}
.cookie-accept{
  background:var(--accent1);color:#fff;border:none;border-radius:var(--btn-radius);
  padding:.45em 1.4em;font-size:.85rem;font-weight:600;cursor:pointer;
  transition:background var(--transition);white-space:nowrap;
}
.cookie-accept:hover{background:var(--accent1-hover)}
@media(max-width:600px){
  .cookie-banner{flex-direction:column;gap:.7rem;text-align:center}
}

/* === 404 === */
.page-404{text-align:center;padding:3rem 0}
.page-404 h1{font-size:4rem;color:var(--accent1)}
.page-404 p{font-size:1.1rem;margin-bottom:1.5rem}

/* === MISC === */
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute;width:1px;height:1px;overflow:hidden}