/*
Theme Name: LBF Theme
Version: 1.0
*/

/* =========================================================
   0) TOKENS / GLOBAL
========================================================= */
:root{
  --blue:#2f4f6f;
  --green:#7fb24a;
  --purple:#7a6aa7;
  --pink:#e24d8c;

  --bg:#efefef;
  --card:#fff;
  --border:#e6e6e6;
  --text:#555;
  --heading:#2e2e2e;
}

/* =========================================================
   1) SMALL FIXES / OVERRIDES (твои)
========================================================= */
.services .title-bar h3 { color:#fff; }
.item h5 { color:#fff; }
label, legend { display:flex; }



.member h3 { color:#fff; }

/* =========================================================
   2) RESET / BASE
========================================================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  background-image: url("/wp-content/uploads/2025/12/main-bg.png") !important;
  background-repeat:no-repeat !important;
  background-size:cover;
  background-attachment:fixed;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.cf:after{ content:""; display:block; clear:both; }

.wrapper,
.container{
  width:min(1100px, calc(100% - 40px));
  margin:0 auto;
}

.wrapper{ background-color:#fff; }

/* =========================================================
   3) HEADER
========================================================= */
/* Top utility bar */
.top-bar{
  background:var(--blue);
  color:#fff;
  font-size:12px;
}

.utilities .nav{
  list-style:none;
  margin:0;
  padding:6px 0;
  display:flex;
  justify-content:flex-end;
  gap:18px;
}
.utilities .nav a{ color:#fff; }
.utilities .nav a:hover{ text-decoration:underline; }

/* Main header row */
#site-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0;
  background:#fff;
  position:relative;
}

/* Rainbow underline */
#site-header:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:3px;
  background:linear-gradient(90deg, var(--green), var(--purple), var(--pink));
}

/* Logo */
#branding{
  margin:10px;
  line-height:0;
}
#branding .site-logo{
  display:flex;
  align-items:center;
  height:70px;
  text-decoration:none;
}
#branding img,
#branding .custom-logo{
  display:block;
  height:40px;
  width:auto;
  max-width:320px;
}

/* =========================================================
   4) MAIN MENU (DESKTOP)
========================================================= */
.main-menu{ margin-left:auto; }

.main-menu .nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
}

/* базовый вид пунктов */
.main-menu .nav > li > a{
  display:block;
  padding:12px 12px;
  font-size:14px;
  font-weight:600;
  color:#4a8a4a;
  text-decoration:none;
}

/* ВАЖНО: у меню hover НЕ подчеркиваем (как в рефе) */
.main-menu .nav > li > a:hover{
  text-decoration:none;
}

/* =========================================================
   5) HEADER ICONS
========================================================= */
/* Search icon */
.trigger-overlay{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--pink);
  text-decoration:none;
}

/* Burger */
.menu-toggle{
  display:none;
  margin-left:8px;
  text-decoration:none;
}
.menu-toggle__htx span{
  display:block;
  width:34px;
  height:2px;
  background:#333;
  position:relative;
  text-indent:-9999px;
}
.menu-toggle__htx span:before,
.menu-toggle__htx span:after{
  content:"";
  position:absolute;
  left:0;
  width:34px;
  height:2px;
  background:#333;
}
.menu-toggle__htx span:before{ top:-9px; }
.menu-toggle__htx span:after{ top:9px; }

/* =========================================================
   6) MOBILE MENU
========================================================= */
.mobile-menu{ display:none; }
.mobile-menu.is-open{ display:block; }

.mobile-menu{
  border-top:1px solid var(--border);
  background:#fff;
}

.nav-stacked{
  list-style:none;
  margin:0;
  padding:0;
}

.nav-stacked li a{
  font-size:11px;
  display:block;
  padding:3px 12px;
  border-bottom:1px solid #eee;
  color:#2e2e2e;
}

.nav-stacked li.current-menu-item > a{
  background:var(--green);
  color:#fff;
}

/* =========================================================
   7) SEARCH OVERLAY
========================================================= */
.overlay-search{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  z-index:9999;
}
.overlay-search.is-open{ display:block; }

.overlay-search__inner{
  width:min(720px, calc(100% - 40px));
  margin:10vh auto 0;
  background:#fff;
  padding:18px;
  border-radius:8px;
  position:relative;
}
.overlay-search__close{
  position:absolute;
  right:10px;
  top:10px;
  border:0;
  background:transparent;
  font-size:26px;
  cursor:pointer;
}

/* =========================================================
   8) GLOBAL STRIPES
========================================================= */
.top-stripe{ position:relative; }
.top-stripe:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background:linear-gradient(90deg, var(--pink), var(--purple), var(--green));
}

/* =========================================================
   9) HOME LAYOUT
========================================================= */
.page-home{ padding-bottom:40px; }

/* =========================================================
   10) HERO
========================================================= */
.hero-banner{
  position:relative;
  border:1px solid var(--border);
  background:#ddd;
  overflow:hidden;
}
.hero-banner__img{
  width:100%;
  display:block;
  height:auto;
}
.hero-banner__inner{
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.hero-banner h2{
  margin:0;
  font-size:44px;
  line-height:2;
  max-width:740px;
  font-weight:800;
}
.hero-banner h2 span{
  background:rgba(122,106,167,.75);
  color:#fff;
  padding:8px 10px;
  display:inline;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.hero-banner .support{
  margin:14px 0 0;
  font-size:22px;
  font-weight:700;
  max-width:760px;
}
.hero-banner .support span{
  background:rgba(240,162,58,.9);
  color:#fff;
  padding:6px 10px;
  display:inline;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* Buttons */
.btn{
  display:inline-block;
  margin-top:16px;
  padding:10px 14px;
  border:2px solid rgba(255,255,255,.8);
  color:#fff;
  background:rgba(0,0,0,.35);
  font-weight:800;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.6px;
  width:230px;
  border-radius:5px;
}
.btn:hover{ text-decoration:none; filter:brightness(.98); }
.btn-white{ border-color:#fff; }

/* =========================================================
   11) OVERVIEW + TWITTER
========================================================= */
.overview{
  width:calc(100% - 340px);
  float:left;
  margin-top:16px;
}
.overview .top-stripe{
  background:#fff;
  border:1px solid var(--border);
  padding:18px;
}
.overview h2{
  margin:10px 0 12px;
  color:var(--purple);
  font-size:26px;
  font-weight:800;
}
.overview ul{ margin:10px 0 0; padding-left:18px; }
.overview li{ margin:8px 0; }

#twitter-feed{
  width:320px;
  float:right;
  margin-top:16px;
  background:#fff;
  border:1px solid var(--border);
}
#twitter-feed .title-bar{
  background:var(--blue);
  color:#fff;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
#twitter-feed h3{ margin:0; font-size:18px; color:#fff; }
#twitter-feed .title-bar a{ color:#fff; font-size:12px; }
#twitter-feed h5{ margin:12px; }
#twitter-feed h5 span{ color:var(--pink); }

.tweet-list{ padding:0 12px 12px; }
.tweet-list .item{
  border-top:1px solid var(--border);
  padding:12px 0;
}
.tweet-list .item:first-child{ border-top:0; }
.tweet-list .date{ color:var(--pink); margin:8px 0 0; }

/* =========================================================
   12) SERVICES
========================================================= */
.services{
  margin-top:20px;
  background:var(--blue);
  color:#fff;
  padding-bottom:16px;
}
.services .title-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
}
.services .title-bar a{ color:#fff; font-size:12px; }

.grid{
  display:grid;
  gap:14px;
  padding:0 16px;
}
.grid.four-col{ grid-template-columns:repeat(4,1fr); }

.services .item{
  text-align:center;
  padding-bottom:10px;
}
.services figure{
  margin:0;
  background:#fff;
  padding:0;
}
.services img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}
.services h5{ margin:10px 0 0; font-size:14px; }

/* =========================================================
   13) NEWS & EVENTS (TABS)
========================================================= */
.news{ margin-top:20px; }

.news .title-bar{
  background:#fff;
  border:1px solid var(--border);
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.news .title-bar h3{ margin:0; color:var(--pink); }

.tab-toggles{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
}
.tab-toggles li{ flex:1; }
.tab-toggles a{
  display:block;
  text-align:center;
  padding:14px;
  background:#e9e9e9;
  border:1px solid var(--border);
  border-top:0;
  font-weight:700;
  color:#555;
}
.tab-toggles li.active a{ background:#fff; }

.tabbed-content{
  background:#fff;
  border:1px solid var(--border);
  border-top:0;
  padding:16px;
}

.grid.three-col{ grid-template-columns:repeat(3,1fr); }

.news .item figure{ margin:0; }
.news .item img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}
.news .item h4{ margin:10px 0 6px; color:var(--heading); }
.news .item .date{
  color:var(--pink);
  font-size:12px;
  margin:0 0 10px;
}

.visuallyhidden{
  position:absolute;
  left:-9999px;
}

/* =========================================================
   14) TRAINING
========================================================= */
.training{
  background:#fff;
  border:1px solid var(--border);
  padding:16px;
  margin-top:20px;
}

/* =========================================================
   15) MEMBERSHIP
========================================================= */
.member{
  margin-top:20px;
  border:1px solid var(--border);
  padding:26px;
  text-align:center;
}

.member--bg{
  background:
    linear-gradient(90deg, rgba(226,77,140,.35), rgba(122,106,167,.35), rgba(127,178,74,.35)),
    url("/wp-content/uploads/2025/12/members.jpg") center/cover no-repeat;
}

.btn-rainbow{
  border:2px solid #fff;
  background:rgba(0,0,0,.35);
  position:relative;
}
.btn-large{ padding:14px 18px; font-size:13px; }
.btn-rainbow:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(90deg, var(--pink), var(--purple), var(--green));
  z-index:-1;
  border-radius:4px;
}

/* =========================================================
   16) MAILING
========================================================= */
.mailing{
  margin-top:20px;
  background:linear-gradient(90deg, rgba(226,77,140,.25), rgba(122,106,167,.25), rgba(127,178,74,.25));
  border:1px solid var(--border);
  padding:26px;
  text-align:center;
}
.mailing-form{ max-width:520px; margin:12px auto 0; }

/* =========================================================
   17) FOOTER
========================================================= */
#site-footer{
  background:#fff;
  border-top:1px solid #e6e6e6;
  padding:28px 0;
}

#site-footer .footer-grid{
  display:grid;
  grid-template-columns:150px 320px 1fr 220px;
  gap:24px;
  align-items:start;
}

#site-footer .footer-logo{
  width:120px;
  height:auto;
  display:block;
  margin-top:6px;
}

#site-footer .nav-wrap{
  display:flex;
  gap:42px;
}

#site-footer .nav-stacked{
  list-style:none;
  margin:0;
  padding:0;
}
#site-footer .nav-stacked li{ margin:6px 0; }

#site-footer .nav-stacked a{
  font-weight:700;
  color:#333;
  text-decoration:none;
}
#site-footer .nav-stacked a:hover{ text-decoration:underline; }

#site-footer .address{
  color:#777;
  font-size:11px;
  line-height:1.45;
}
#site-footer .address p{ margin:0 0 14px; }
#site-footer .address a{ color:#555; text-decoration:underline; }

#site-footer .tools{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:18px;
}
#site-footer .tools a{
  color:#6c6c6c;
  font-size:22px;
}
#site-footer .tools a:hover{ color:#333; }

#site-footer .dying-matters{
  width:86px;
  height:86px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
#site-footer .dying-matters a.ir{
  display:block;
  width:86px;
  height:86px;
  text-indent:-9999px;
  overflow:hidden;
  background:url("/wp-content/uploads/2025/12/dying-matters.png") center/contain no-repeat;
}

/* stripes top/bottom */
#site-footer.btm-stripe{ position:relative; }
#site-footer.btm-stripe:before,
#site-footer.btm-stripe:after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:4px;
  background:linear-gradient(90deg, var(--pink), var(--purple), var(--green));
}
#site-footer.btm-stripe:before{ top:0; }
#site-footer.btm-stripe:after{ bottom:0; }

/* =========================================================
   18) RESPONSIVE (твои + аккуратно)
========================================================= */
@media (max-width:980px){
  .overview{ width:100%; float:none; }
  #twitter-feed{ width:100%; float:none; }

	.icon-search {
display: none;
}

  .grid.four-col{ grid-template-columns:repeat(2,1fr); }
  .grid.three-col{ grid-template-columns:repeat(2,1fr); }

  .hero-banner h2{ font-size:36px; }

  #site-footer .footer-grid{
    grid-template-columns:140px 1fr;
    grid-auto-rows:auto;
  }
  #site-footer .tools{ justify-content:flex-start; }
}

@media (min-width: 1200px) {
    .ast-plain-container.ast-no-sidebar #primary {
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

.utilities .nav {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    background-color: #2f4f70;
}

@media (max-width: 720px){

  .hero-banner__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}
.menu-toggle__htx span {
    display: block;
    width: 34px;
    height: 2px;
    background: #fff;
    position: relative;
    text-indent: -9999px;
}

.menu-toggle__htx span:before {
    background: #fff;
}

.menu-toggle__htx span:after {
    background: #fff;
}


@media (max-width:900px){
  .main-menu{ display:none; }
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    cursor:pointer;
  }

	.hero-banner {
    height: 450px;
}

  #branding .site-logo{ height:60px; }
  #branding img,
  #branding .custom-logo{
    height:60px;
    max-width:260px;
  }

  /* mobile header layout */
  #site-header{
    flex-wrap:wrap;
    align-items:center;
  }
  .menu-toggle{ margin-left:auto; }

  .mobile-menu{
    flex:0 0 100%;
    width:100%;
    margin-top:10px;
  }
  .mobile-menu nav{
    background:#fff;
    border:1px solid var(--border);
  }
  .mobile-menu .nav-stacked a{
    font-size:14px;
    padding:10px 14px;
    border-bottom:1px solid #eee;
  }

  /* search in mobile menu */
  .search-form-wrap{ padding:10px 14px; }
  .search-form-wrap form{
    display:flex;
    gap:10px;
    align-items:center;
    margin:0;
  }
  .search-form-wrap input[type="search"],
  .search-form-wrap input[type="text"]{
    flex:1;
    height:38px;
    border:1px solid #ddd;
    border-radius:4px;
    padding:0 10px;
    box-shadow:none;
  }
  .search-form-wrap button,
  .search-form-wrap input[type="submit"]{
    height:38px;
    padding:0 14px;
    border:0;
    border-radius:4px;
    background:var(--pink);
    color:#fff;
    cursor:pointer;
  }
  .search-form-wrap .search-submit{
    border-radius:4px !important;
  }
}

@media (max-width:720px){
  .grid.three-col{ grid-template-columns:1fr; }
  .grid.four-col{ grid-template-columns:1fr; }

  .hero-banner__inner{ padding:18px; }
  .hero-banner h2{ font-size:28px; }
  .hero-banner .support{ font-size:16px; }
}

@media (max-width:600px){
  #site-footer .footer-grid{ grid-template-columns:1fr; }
  #site-footer .nav-wrap{ flex-direction:column; gap:18px; }
}

/* =========================================================
   19) HEADER MENU COLORS (HOVER + ACTIVE)
   ВАЖНО: порядок пунктов соответствует твоему меню
========================================================= */
.main-menu .nav > li:nth-child(1) > a:hover,
.main-menu .nav > li:nth-child(1).current-menu-item > a,
.main-menu .nav > li:nth-child(1).current_page_item > a{
  background:var(--green);
  color:#fff;
}

.main-menu .nav > li:nth-child(2) > a:hover,
.main-menu .nav > li:nth-child(2).current-menu-item > a,
.main-menu .nav > li:nth-child(2).current_page_item > a{
  background:#93c46a;
  color:#fff;
}

.main-menu .nav > li:nth-child(3) > a:hover,
.main-menu .nav > li:nth-child(3).current-menu-item > a,
.main-menu .nav > li:nth-child(3).current_page_item > a{
  background:#7aa6b3;
  color:#fff;
}

.main-menu .nav > li:nth-child(4) > a:hover,
.main-menu .nav > li:nth-child(4).current-menu-item > a,
.main-menu .nav > li:nth-child(4).current_page_item > a{
  background:#6aa7a3;
  color:#fff;
}

.main-menu .nav > li:nth-child(5) > a:hover,
.main-menu .nav > li:nth-child(5).current-menu-item > a,
.main-menu .nav > li:nth-child(5).current_page_item > a{
  background:#4b6f9b;
  color:#fff;
}

.main-menu .nav > li:nth-child(6) > a:hover,
.main-menu .nav > li:nth-child(6).current-menu-item > a,
.main-menu .nav > li:nth-child(6).current_page_item > a{
  background:var(--purple);
  color:#fff;
}

.main-menu .nav > li:nth-child(7) > a:hover,
.main-menu .nav > li:nth-child(7).current-menu-item > a,
.main-menu .nav > li:nth-child(7).current_page_item > a{
  background:#b57aa8;
  color:#fff;
}


a:hover, a:focus {
  color: #f7ab5c !important;
}

.container.cf {
  display: flex;
  width: 100% !important;
  justify-content: space-between;
}
.side-column {
  width: 32%;
  min-width: 360px;
}
.main-content {
  width: 65%;
}

.member {
  background: url(/wp-content/uploads/2025/12/members.jpg) center no-repeat #3C3C3B;
  background-size: cover;
  color: #fff;
  text-align: center;
}


.member h3 {
  color: #86C8AF;
  text-transform: uppercase
}

.member p {
  margin: 0 auto 2em;
  max-width: 640px
}

.mailing .member button,.member .btn,.member .mailing button {
  color: #fff;
  margin-bottom: 1rem
}

@media (min-width: 860px) {
  .member p {
    font-size:1.125em
  }

  .mailing .member button,.member .btn,.member .mailing button {
    font-size: 1em
  }
}

.mailing .member button:focus,.mailing .member button:hover,.member .btn:focus,.member .btn:hover,.member .mailing button:focus,.member .mailing button:hover {
  color: #F7AB5C
}

.side-column .member p {
  font-size: 1em
}

h1, .entry-content :where(h1) {
  font-size: 2rem;
}
h2, .entry-content :where(h2) {
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .side-column,
  .main-content {
    width: 100%;
  }
  .side-column {
    min-width: 100%;
  }
}