/*
Theme Name: JobJoyance
Theme URI: https://jobjoyance.com
Author: JobJoyance
Description: One-page landing theme for the JobJoyance career guidance app. Upload, activate, done.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jobjoyance
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: Nunito, Arial, sans-serif;
  color: #171717;
  background: #fffdf7;
  overflow-x: hidden
}

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

.wrap {
  width: min(1180px, 92%);
  margin: auto
}

.header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20
}

.nav {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  font-size: 25px
}

.brand img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.bee {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  background: #ffc515;
  border-radius: 50%;
  font-size: 24px
}

.nav nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-weight: 800;
  font-size: 14px
}

.nav nav>a:hover {
  color: #e5a500
}

.nav-btn,
.btn.primary {
  background: #ffc515;
  border-radius: 11px;
  padding: 14px 20px
}

.hamb {
  display: none;
  background: none;
  border: 0;
  font-size: 25px
}

.hero {
  min-height: 700px;
  padding: 145px 0 70px;
  position: relative;
  background: linear-gradient(135deg, #fffdf7, #fff8df);
  overflow: hidden
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 35px
}

.eyebrow,
.pill {
  display: inline-block;
  background: #fff0b8;
  border-radius: 20px;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 900
}

.hero h1 {
  font-size: clamp(54px, 7vw, 86px);
  line-height: .95;
  letter-spacing: -3px;
  margin: 18px 0
}

.hero h1 em,
.hero-copy em,
h2 em {
  font-style: normal;
  color: #eda900
}

.hero-copy>p {
  max-width: 510px;
  color: #666;
  line-height: 1.7;
  font-size: 16px
}

.actions {
  display: flex;
  gap: 14px;
  margin-top: 28px
}

.btn {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-weight: 900;
  padding: 15px 23px;
  border-radius: 11px
}

.btn.ghost {
  background: #fff;
  border: 1px solid #e6dcae
}

.phones {
  height: 520px;
  position: relative
}

.phone {
  position: absolute;
  width: 255px;
  height: 500px;
  background: #111;
  border: 7px solid #111;
  border-radius: 40px;
  padding: 5px;
  box-shadow: 0 25px 55px #0002;
  overflow: hidden
}

.screen {
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background: #fff
}

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

.p1 {
  left: 45px;
  top: 0;
  transform: rotate(-5deg);
  z-index: 2
}

.p2 {
  right: 25px;
  top: 35px;
  transform: rotate(7deg)
}

.fbee {
  position: absolute;
  font-size: 30px
}

.b1 {
  left: 20px;
  top: 150px
}

.b2 {
  right: 0;
  bottom: 90px
}

.cloud {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 105px;
  z-index: 4;
  background:
    radial-gradient(ellipse 95px 55px at 5% 100%, #fff 0 70%, transparent 71%),
    radial-gradient(ellipse 115px 70px at 18% 100%, #fff 0 70%, transparent 71%),
    radial-gradient(ellipse 105px 60px at 32% 100%, #fff 0 70%, transparent 71%),
    radial-gradient(ellipse 125px 75px at 47% 100%, #fff 0 70%, transparent 71%),
    radial-gradient(ellipse 105px 62px at 62% 100%, #fff 0 70%, transparent 71%),
    radial-gradient(ellipse 125px 72px at 77% 100%, #fff 0 70%, transparent 71%),
    radial-gradient(ellipse 105px 62px at 92% 100%, #fff 0 70%, transparent 71%);
  filter: drop-shadow(0 -5px 8px rgba(255, 197, 21, .12));
}

.hero:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 115px;
  z-index: 3;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(255, 225, 117, .18) 52%, rgba(255, 225, 117, .32) 100%);
  clip-path: polygon(0 58%, 4% 50%, 8% 61%, 12% 48%, 17% 61%, 22% 50%, 27% 64%, 32% 52%, 37% 64%, 42% 50%, 47% 62%, 52% 48%, 57% 62%, 62% 50%, 67% 64%, 72% 49%, 77% 61%, 82% 48%, 87% 62%, 92% 50%, 97% 60%, 100% 52%, 100% 100%, 0 100%);
}

.honey {
  position: absolute;
  width: 120px;
  height: 120px;
  opacity: .22;
  background: repeating-linear-gradient(60deg, transparent 0 20px, #e8b51a 21px 23px, transparent 24px 40px);
  filter: blur(.2px)
}

.honey-a {
  left: -30px;
  top: 170px
}

.honey-b {
  right: -30px;
  top: 90px
}

.section {
  padding: 95px 0
}

.about {
  background: #fff
}

.center {
  text-align: center
}

.center h2 {
  font-size: clamp(34px, 5vw, 49px);
  margin: 15px 0 12px;
  font-weight: 900
}

.lead {
  max-width: 680px;
  margin: auto;
  color: #777;
  line-height: 1.7
}

.about-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
  align-items: center;
  margin-top: 55px
}

.mascot {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #fff1bc;
  margin: auto;
  display: grid;
  place-items: center;
  overflow: hidden
}

.mascot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px
}

.features article {
  display: flex;
  gap: 15px
}

.icon {
  min-width: 50px;
  height: 50px;
  background: #ffc515;
  border-radius: 14px;
  display: grid;
  place-items: center
}

.features h3 {
  margin-bottom: 6px
}

.features p {
  color: #777;
  font-size: 14px;
  line-height: 1.55
}

.stats {
  background: #fff;
  padding: 0 0 90px
}

.stats-box {
  background: linear-gradient(120deg, #ffc515, #ffd64b);
  border-radius: 20px;
  padding: 38px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 20px 50px #e9ac2330
}

.stats-box>div {
  text-align: center;
  border-right: 1px solid #0002
}

.stats-box>div:last-child {
  border: 0
}

.stats i {
  display: block;
  font-size: 25px;
  margin-bottom: 8px
}

.stats strong {
  display: block;
  font-size: 30px
}

.stats span {
  font-weight: 800
}

.download {
  background: #fff9e9
}

.download-box {
  background: #fff9e9;
  border-radius: 24px;
  padding: 55px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden
}

.download h2 {
  font-size: 42px;
  line-height: 1.15;
  margin: 18px 0
}

.download p {
  color: #777;
  margin-bottom: 25px
}

.stores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.store,
.foot-store {
  background: transparent;
  border-radius: 10px;
  display: block;
  padding: 0;
  box-sizing: border-box;
}
.foot-store {
  width: 225px;
  height: 68px;
}

.foot-store img,
.store img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.store {
  min-width: 175px;
  height: 68px;
}

.download-phones {
  height: 340px;
  position: relative
}

.mini {
  position: absolute;
  width: 180px;
  height: 345px;
  border: 7px solid #111;
  border-radius: 28px;
  overflow: hidden;
  right: 155px;
  transform: rotate(-7deg);
  box-shadow: 0 20px 40px #0002
}

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

.mini2 {
  right: 20px;
  transform: rotate(7deg);
  top: 25px
}

.legal {
  background: #fff
}

.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-top: 45px
}

.legal-card {
  background: #fffdf7;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 10px 35px #00000008
}

.legal-icon {
  width: 54px;
  height: 54px;
  background: #ffc515;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: 18px
}

.legal-card h3 {
  font-size: 23px;
  margin-bottom: 10px
}

.legal-card p {
  color: #777;
  line-height: 1.65;
  font-size: 14px;
  margin-bottom: 18px
}

.legal-card a {
  color: #e2a100;
  font-weight: 900;
  font-size: 14px
}

footer {
  background: linear-gradient(135deg, #ffc515, #ffca20);
  color: #171717
}

.footer-grid {
  padding: 60px 0 45px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr;
  gap: 35px
}

.footer-grid h4 {
  font-size: 16px;
  margin-bottom: 17px
}

.footer-grid>div:not(.foot-brand) a {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 11px
}

.footer-grid .foot-store {
  display: block !important;
  width: 225px;
  height: 68px;
  margin: 10px 0 0 0;
  box-sizing: border-box;
  padding: 0;
}

/* Badge image fills button */
.footer-grid .foot-store img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.foot-brand h3 {
  margin: 18px 0 8px
}

.foot-brand p,
.footer-grid>div:last-child p {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600
}

.social {
  display: flex;
  gap: 9px;
  margin-top: 20px
}

.social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff80;
  display: grid;
  place-items: center
}

.foot-store {
  width: 225px;
  margin-top: 10px
}

.copyright {
  text-align: center;
  border-top: 1px solid #0002;
  padding: 18px;
  font-size: 13px;
  font-weight: 800
}

@media(max-width:900px) {
  .nav nav {
    display: none;
    position: absolute;
    top: 75px;
    right: 4%;
    background: #fff;
    padding: 22px;
    border-radius: 15px;
    box-shadow: 0 15px 40px #0002;
    flex-direction: column;
    align-items: flex-start
  }

  .nav nav.open {
    display: flex
  }

  .hamb {
    display: block
  }

  .nav-btn {
    display: none
  }

  .hero-grid,
  .download-box {
    grid-template-columns: 1fr
  }

  .hero {
    text-align: center
  }

  .hero-copy>p {
    margin: auto
  }

  .actions {
    justify-content: center
  }

  .phones {
    margin-top: 20px
  }

  .about-grid {
    grid-template-columns: 1fr
  }

  .stats-box {
    grid-template-columns: 1fr 1fr;
    gap: 20px
  }

  .stats-box>div:nth-child(2) {
    border: 0
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {
  .brand {
    font-size: 21px
  }

  .hero {
    padding-top: 125px
  }

  .hero h1 {
    font-size: 53px
  }

  .phones {
    height: 420px
  }

  .phone {
    width: 200px;
    height: 395px
  }

  .p1 {
    left: 0
  }

  .p2 {
    right: 0
  }

  .features,
  .legal-grid {
    grid-template-columns: 1fr
  }

  .stats-box {
    grid-template-columns: 1fr
  }

  .stats-box>div {
    border: 0;
    border-bottom: 1px solid #0002;
    padding: 15px
  }

  .download-box {
    padding: 30px 22px
  }

  .download h2 {
    font-size: 34px
  }

  .download-phones {
    margin-top: 35px
  }

  .mini {
    width: 145px;
    height: 275px;
    right: 115px
  }

  .mini2 {
    right: 0
  }

  .footer-grid {
    grid-template-columns: 1fr;
    padding: 45px 0 30px
  }
}

.legal-heading {
  margin-bottom: 42px
}

.legal-grid {
  align-items: start
}

.legal-card {
  align-items: flex-start;
  padding: 28px;
  background: #fffdf7
}

.legal-content {
  min-width: 0
}

.legal-content h3 {
  font-size: 20px;
  margin-bottom: 9px
}

.legal-content h4 {
  font-size: 13px;
  margin: 16px 0 5px;
  color: #1b1b1b
}

.legal-content p {
  font-size: 12px;
  line-height: 1.65;
  color: #69707a;
  margin: 0
}

.legal-content .legal-intro {
  font-size: 13px;
  color: #4f5660
}

.legal-card .legal-icon {
  color: #171717
}

@media(max-width:560px) {
  .legal-card {
    padding: 22px 18px;
    flex-direction: column
  }

  .legal-icon {
    margin-bottom: 0
  }

  .store-row {
    gap: 9px
  }

  .store {
    min-width: 150px
  }

  .stats-card strong {
    font-size: 27px
  }

  .stats-card span {
    font-size: 13px
  }
}

/* Legal section — match the Discover/About section styling */
.legal {
  background: #fff;
  padding-top: 95px
}

.legal .section-heading {
  text-align: center;
  margin-bottom: 48px
}

.legal .section-heading .tag {
  display: inline-block
}

.legal .section-heading h2 {
  font-size: clamp(34px, 5vw, 49px);
  margin: 15px 0 12px;
  font-weight: 900;
  line-height: 1.15;
  color: #171717
}

.legal .section-heading h2 span {
  color: #eda900
}

.legal .section-heading p {
  max-width: 680px;
  margin: 0 auto;
  color: #777;
  line-height: 1.7;
  font-size: 14px
}

.legal-grid {
  align-items: stretch
}

.legal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 34px 32px;
  background: #fffdf7;
  border: 1px solid #eee;
  border-radius: 18px;
  box-shadow: 0 10px 35px #00000008
}

.legal-card .legal-icon {
  width: 58px;
  height: 58px;
  flex: none;
  margin: 0 auto 18px;
  background: #ffc515;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 23px;
  color: #171717
}

.legal-content {
  width: 100%;
  min-width: 0
}

.legal-content h3 {
  font-size: 23px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 10px;
  color: #171717
}

.legal-content h4 {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  margin: 18px 0 6px;
  color: #171717
}

.legal-content p {
  font-size: 13px;
  line-height: 1.7;
  color: #69707a;
  margin: 0
}

.legal-content .legal-intro {
  font-size: 14px;
  line-height: 1.65;
  color: #4f5660
}

@media(max-width:560px) {
  .legal .section-heading {
    margin-bottom: 34px
  }

  .legal-card {
    padding: 25px 18px;
    text-align: center
  }

  .legal-card .legal-icon {
    margin: 0 auto 16px
  }
}

/* ---- WordPress additions ---- */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
.page-main { padding-top: 130px; min-height: 60vh; }
.page-main .entry-title { font-size: 44px; margin: 0 0 24px; }
.page-main .entry-content { line-height: 1.8; color: #444; }
.page-main .entry-content > * + * { margin-top: 16px; }
.page-main .entry-content h2, .page-main .entry-content h3 { margin-top: 28px; color: #171717; }
.page-main .entry-content ul, .page-main .entry-content ol { padding-left: 24px; }


/* ---- Store badges: fixed sizing (hero/download + footer) ---- */
.stores { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px !important; }
.stores a.store,
.footer-grid a.foot-store {
  display: block !important;
  position: static !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 180px !important;
  min-width: 0 !important;
  height: auto !important;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.footer-grid a.foot-store { margin: 10px 0 0 !important; }
.stores a.store img,
.footer-grid a.foot-store img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  margin: 0 !important;
  border-radius: 0;
}