/*
Theme Name: JoinChatGroups WP Theme
Theme URI: https://joinchatgroups.com/
Author: OpenAI
Description: WordPress theme converted from the uploaded JoinChatGroups Next.js design.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.6
Text Domain: joinchatgroups
*/

:root{
  --primary:#2e7d32;
  --accent:#1b5e20;
  --foreground:#0f172a;
  --background:#ffffff;
  --muted:#ffffff;
  --border:#dfe5df;
  --card:#ffffff;
  --wa-green-light:#ffffff;
}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#fff;color:var(--foreground)}
.font-poppins{font-family:Poppins,Inter,system-ui,sans-serif}
.bg-primary{background:var(--primary)}
.text-primary{color:var(--primary)}
.border-primary{border-color:var(--primary)}
.bg-accent{background:var(--accent)}
.bg-card{background:var(--card)}
.bg-wa-green-light{background:var(--wa-green-light)}
.border-border{border-color:var(--border)}
.text-foreground{color:var(--foreground)}
.text-muted-foreground{color:#4b5563}
.bg-muted{background:var(--muted)}
.bg-primary\/5{background:rgba(22,163,74,.05)}
.bg-primary\/8{background:rgba(22,163,74,.08)}
.bg-primary\/10{background:rgba(22,163,74,.1)}
.border-primary\/15{border-color:rgba(22,163,74,.15)}
.border-primary\/20{border-color:rgba(22,163,74,.2)}
.border-primary\/30{border-color:rgba(22,163,74,.3)}
.hover\:bg-accent:hover{background:var(--accent)}
.hover\:text-primary:hover{color:var(--primary)}
.scrollbar-hide::-webkit-scrollbar{display:none}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.text-balance{text-wrap:balance}
.prose p{margin:1rem 0}
.prose ul{list-style:disc;padding-left:1.2rem;margin:1rem 0}
.prose ol{list-style:decimal;padding-left:1.2rem;margin:1rem 0}
.prose ul ul{list-style:circle}
.prose ol ol{list-style:lower-alpha}
.prose li{margin:.35rem 0}
.jcg-hidden{display:none!important}
input,select,textarea{outline:none}
button{cursor:pointer}


/* Privacy policy page */
.policy-content p{margin:.65rem 0;line-height:1.75}
.policy-content ul{margin:.75rem 0 0;padding-left:0;list-style:none}
.policy-content li{margin:.5rem 0;display:flex;gap:.65rem;align-items:flex-start}
.policy-content li::before{content:none !important}
.policy-content a{color:var(--primary);text-decoration:underline}

.jcg-ad-unit {
  border: 1px dashed #b8c8b3;
  border-radius: 24px;
  background: #f8fbf7;
  padding: 16px;
}

.jcg-ad-unit-inner {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  color: #355a31;
}

.jcg-ad-label {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5d7658;
}

.jcg-ad-unit-live {
  overflow: auto;
  background: transparent;
  border-style: solid;
}


.jcg-inline-ad-wrap {
  margin-top: 2px;
}

.jcg-ad-unit-inline {
  padding: 10px 12px;
  border-radius: 20px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jcg-ad-unit-inline ins,
.jcg-ad-unit-inline iframe,
.jcg-ad-unit-inline > div,
.jcg-ad-unit-inline > * {
  width: 100%;
  max-width: 100%;
}

.jcg-ad-unit-section-break {
  min-height: 110px;
}

@media (max-width: 767px) {
  .jcg-inline-ad-wrap {
    margin-top: -2px;
  }

  .jcg-ad-unit-inline {
    min-height: 74px;
    padding: 8px 10px;
    border-radius: 18px;
  }
}

@media (min-width: 1280px) {
  .jcg-ad-unit-inline {
    min-height: 116px;
    padding: 16px 18px;
    border-radius: 24px;
  }
}


/* Featured categories mobile fix */
.jcg-featured-card{min-width:0;}
.jcg-featured-label{word-break:break-word;}
@media (max-width: 639px){
  .jcg-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .jcg-featured-card{padding:12px 14px;border-radius:18px;align-items:center;}
  .jcg-featured-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:14px;flex:0 0 42px;}
  .jcg-featured-label{font-size:13px;line-height:1.2;text-align:left;}
}


/* Mobile menu compact submit button */
.mobile-menu-submit-wrap{padding:8px 6px 0;}
.mobile-menu-submit-btn{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;max-width:none;margin:0;background:#fff;color:var(--primary);font-weight:700;font-size:13px;line-height:1;padding:9px 14px;border-radius:999px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.08);border:none;white-space:nowrap;}
.mobile-menu-submit-btn:hover{background:#f7faf7;color:var(--accent);}
@media (max-width: 767px){
  .mobile-menu-submit-btn{font-size:12px;padding:8px 13px;}
}


/* Homepage hero responsive polish */
@media (max-width: 640px) {
  .font-poppins { word-break: normal; overflow-wrap: anywhere; }
}


/* Homepage hero smaller on mobile */
.jcg-hero-title .block{word-break:normal;overflow-wrap:anywhere;}
@media (max-width: 640px){
  .jcg-hero{padding-top:28px!important;padding-bottom:28px!important;}
  .jcg-hero-inner{max-width:340px;}
  .jcg-hero-badge{padding:9px 14px!important;margin-bottom:14px!important;font-size:10px!important;line-height:1.2;max-width:100%;}
  .jcg-hero-title{margin-bottom:10px!important;line-height:1.04!important;}
  .jcg-hero-title > span:first-child{font-size:22px!important;letter-spacing:-.03em;max-width:280px;margin-left:auto;margin-right:auto;}
  .jcg-hero-title > span:last-child{font-size:16px!important;line-height:1.15!important;margin-top:10px!important;max-width:240px;margin-left:auto;margin-right:auto;}
  .jcg-hero-desc{font-size:11px!important;line-height:1.5!important;max-width:300px;}
  .jcg-hero-meta{font-size:10px!important;line-height:1.45!important;max-width:250px;margin-left:auto;margin-right:auto;margin-bottom:14px!important;}
  .jcg-hero-search{margin-bottom:14px!important;}
  .jcg-hero-search input{min-height:42px;padding-top:11px!important;padding-bottom:11px!important;padding-left:42px!important;padding-right:16px!important;font-size:13px!important;}
  .jcg-hero-search .absolute.left-4{left:14px!important;width:16px!important;height:16px!important;}
  .jcg-hero-stats{max-width:300px;gap:8px!important;}
  .jcg-hero-stats > div{padding:10px 8px!important;border-radius:14px!important;}
  .jcg-hero-stats > div span.text-lg{font-size:16px!important;line-height:1.1!important;}
  .jcg-hero-stats > div span.sm\:text-2xl{font-size:16px!important;line-height:1.1!important;}
  .jcg-hero-stats > div span.text-\[10px\]{font-size:9px!important;line-height:1.25!important;}
}


/* Hero title: keep desktop same, split year only on mobile */
.jcg-hero-main-title .jcg-hero-year{
  display:inline;
  font-size:inherit;
  line-height:inherit;
}

@media (max-width: 640px){
  .jcg-hero-main-title{
    max-width:280px;
    margin-left:auto;
    margin-right:auto;
  }
  .jcg-hero-main-title .jcg-hero-year{
    display:block !important;
    width:100%;
    margin-top:6px;
    font-size:0.95em;
    line-height:1.05;
  }
}


/* Full screen mobile menu fix */
@media (max-width: 767px){
  body.jcg-mobile-menu-open{
    overflow:hidden;
  }
  .jcg-mobile-toggle{
    position:relative;
    z-index:61;
    min-width:40px;
    min-height:40px;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.06);
    box-shadow:0 3px 12px rgba(0,0,0,.18);
    font-size:24px;
    line-height:1;
  }
  .jcg-mobile-menu{
    position:fixed;
    left:0;
    right:0;
    top:65px;
    bottom:0;
    z-index:60;
    overflow-y:auto;
    padding:16px 14px 28px;
    min-height:calc(100dvh - 65px);
    background:rgba(56, 132, 49, 0.98);
    -webkit-overflow-scrolling:touch;
  }
  .jcg-mobile-menu > div{
    padding-top:2px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .jcg-mobile-menu a{
    display:flex;
    align-items:center;
    min-height:44px;
    font-size:17px;
    border-radius:12px;
  }
  .mobile-menu-submit-wrap{
    padding-top:14px;
  }
}


/* Premium mobile menu upgrade */
@media (max-width: 767px){
  .jcg-mobile-toggle{
    border-radius:14px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  }

  .jcg-mobile-toggle:active{
    transform:scale(.96);
  }

  .jcg-mobile-menu{
    background:
      linear-gradient(180deg, rgba(56,132,49,.985) 0%, rgba(49,121,43,.985) 100%);
    padding:18px 16px 34px;
    opacity:0;
    transform:translateY(-10px);
    transition:opacity .28s ease, transform .28s ease;
  }

  body.jcg-mobile-menu-open .jcg-mobile-menu{
    opacity:1;
    transform:translateY(0);
  }

  .jcg-mobile-menu > div{
    gap:12px;
    max-width:520px;
    margin:0 auto;
  }

  .jcg-mobile-menu a{
    min-height:52px;
    padding:0 14px;
    font-size:18px;
    font-weight:700;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    transition:transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
  }

  .jcg-mobile-menu a:hover,
  .jcg-mobile-menu a:focus{
    background:rgba(255,255,255,.11);
    border-color:rgba(255,255,255,.14);
    box-shadow:0 14px 28px rgba(0,0,0,.12);
    transform:translateY(-1px);
  }

  .jcg-mobile-menu a[aria-current="page"],
  .jcg-mobile-menu a.current-menu-item,
  .jcg-mobile-menu a.current_page_item{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.18);
  }

  .mobile-menu-submit-wrap{
    padding-top:18px;
    max-width:520px;
    margin:0 auto;
  }

  .mobile-menu-submit-wrap .btn,
  .mobile-menu-submit-wrap a,
  .mobile-menu-submit-wrap button{
    min-height:50px;
    width:100%;
    justify-content:center;
    border-radius:999px;
    box-shadow:0 12px 28px rgba(0,0,0,.14);
  }
}


/* Mobile menu submit button full width */
@media (max-width: 767px){
  .mobile-menu-submit-wrap a,
  .mobile-menu-submit-wrap button{
    width:100% !important;
    display:flex;
    justify-content:center;
    padding:14px 18px;
    font-size:17px;
  }
}
