/* =========================================================
   AP VILLAGES
   STYLES.CSS
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root{

  --primary:#0f8a5f;

  --primary-hover:#086d49;

  --text:#202124;

  --muted:#5f6368;

  --border:#dadce0;

  --background:#ffffff;

  --hover:#f8f9fa;

  --divider:#e8eaed;

  --shadow:
    0 1px 6px rgba(32,33,36,.18);

  --radius:32px;

  --transition:.22s ease;

  --max-width:760px;

}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{

  margin:0;

  padding:0;

  box-sizing:border-box;

}

html{

  scroll-behavior:smooth;

}

body{

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:#fff;

  color:var(--text);

  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:antialiased;

  -moz-osx-font-smoothing:grayscale;

}

/* =========================================================
   LINKS
========================================================= */

a{

  color:inherit;

  text-decoration:none;

}

/* =========================================================
   IMAGES
========================================================= */

img{

  display:block;

  max-width:100%;

}

/* =========================================================
   BUTTONS
========================================================= */

button{

  font:inherit;

  cursor:pointer;

  border:none;

  outline:none;

}

/* =========================================================
   INPUT
========================================================= */

input{

  font:inherit;

  border:none;

  outline:none;

  background:transparent;

}

/* =========================================================
   PAGE
========================================================= */

.page{

  width:min(
    100%,
    1200px
  );

  margin:auto;

  padding:

    40px
    24px
    80px;

}

/* =========================================================
   HERO
========================================================= */

.hero{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  margin-top:70px;

  text-align:center;

}

.heroLogo{

  width:120px;

  height:120px;

  object-fit:contain;

  user-select:none;

  margin-bottom:22px;

}

.heroTitle{

  font-size:64px;

  font-weight:500;

  letter-spacing:-2px;

  color:#202124;

}

.heroSubtitle{

  margin-top:16px;

  color:var(--muted);

  font-size:20px;

  line-height:1.8;

  max-width:720px;

}

/* =========================================================
   SEARCH
========================================================= */

.searchSection{

  margin-top:46px;

  display:flex;

  justify-content:center;

}

#searchForm{

  width:100%;

  max-width:var(--max-width);

}

.searchBox{

  display:flex;

  align-items:center;

  gap:18px;

  width:100%;

  min-height:68px;

  border:1px solid var(--border);

  border-radius:999px;

  background:#fff;

  padding:

    0
    26px;

  transition:
    border var(--transition),
    box-shadow var(--transition);

}

.searchBox:hover{

  box-shadow:var(--shadow);

}

.searchBox:focus-within{

  box-shadow:var(--shadow);

  border-color:#ffffff;

}

.searchIcon{

  width:24px;

  height:24px;

  color:#9aa0a6;

  flex:none;

}

#searchInput{

  flex:1;

  min-width:0;

  font-size:20px;

  color:var(--text);

}

#searchInput::placeholder{

  color:#9aa0a6;

}

#searchButton{

  margin:36px auto 0;

  display:block;

  min-width:220px;

  height:52px;

  padding:0 34px;

  border-radius:999px;

  background:var(--primary);

  color:#fff;

  font-weight:600;

  font-size:16px;

  transition:

    background var(--transition),

    transform var(--transition);

}

#searchButton:hover{

  background:var(--primary-hover);

}

#searchButton:active{

  transform:scale(.98);

}


/* =========================================================
   STATUS
========================================================= */

.statusArea{

  margin-top:28px;

  text-align:center;

  color:var(--muted);

  font-size:15px;

  line-height:1.8;

}

.statusArea strong{

  color:var(--primary);

  font-weight:700;

}


/* =========================================================
   RESULTS
========================================================= */

.results{

  width:100%;

  max-width:900px;

  margin:70px auto 0;

}

/* =========================================================
   RESULT ITEM
========================================================= */

.resultItem{

  padding:

    26px
    8px;

  border-bottom:

    1px solid
    var(--divider);

  cursor:pointer;

  transition:

    background .18s ease;

}

.resultItem:hover{

  background:#fafafa;

}

.resultItem:first-child{

  border-top:

    1px solid
    var(--divider);

}

/* =========================================================
   RESULT TITLE
========================================================= */

.resultTitle{

  color:var(--primary);

  font-size:31px;

  font-weight:500;

  line-height:1.35;

  letter-spacing:-.4px;

  transition:

    color .18s ease;

}

.resultItem:hover
.resultTitle{

  color:var(--primary-hover);

  text-decoration:underline;

}

/* =========================================================
   RESULT META
========================================================= */

.resultMeta{

  margin-top:10px;

  color:#6f7378;

  font-size:14px;

  font-weight:500;

  letter-spacing:.3px;

}

/* =========================================================
   RESULT DESCRIPTION
========================================================= */

.resultDescription{

  margin-top:14px;

  color:#4f5358;

  font-size:17px;

  line-height:1.85;

  max-width:760px;

}

/* =========================================================
   RESULT COUNT
========================================================= */

.resultCount{

  margin-bottom:34px;

  color:#70757a;

  font-size:15px;

}

/* =========================================================
   EMPTY STATE
========================================================= */

.emptyState{

  margin-top:80px;

  text-align:center;

}

.emptyState h2{

  color:#202124;

  font-size:34px;

  font-weight:600;

}

.emptyState p{

  margin-top:16px;

  color:var(--muted);

  font-size:18px;

  line-height:1.8;

}

/* =========================================================
   INFORMATION
========================================================= */

.info{

  width:100%;

  max-width:900px;

  margin:

    90px auto 0;

}

.info h2{

  color:#202124;

  font-size:34px;

  font-weight:600;

  margin-bottom:24px;

}

.info p{

  color:#4d5156;

  font-size:18px;

  line-height:2;

}

/* =========================================================
   SEARCH HIGHLIGHT
========================================================= */

mark{

  background:

    rgba(
      15,
      138,
      95,
      .14
    );

  color:inherit;

  padding:

    2px
    4px;

  border-radius:4px;

}

/* =========================================================
   FADE
========================================================= */

.fadeIn{

  animation:

    fadeIn
    .35s ease;

}

/* =========================================================
   SEARCH TIPS
========================================================= */

.tips{

  width:100%;

  max-width:900px;

  margin:80px auto 0;

}

.tips h2{

  font-size:32px;

  font-weight:600;

  color:#202124;

  margin-bottom:24px;

}

.tips ul{

  padding-left:24px;

}

.tips li{

  color:#4d5156;

  font-size:17px;

  line-height:2;

}

/* =========================================================
   FOOTER
========================================================= */

.footer{

  margin-top:120px;

  padding-top:60px;

  border-top:1px solid var(--divider);

  text-align:center;

}

.footerLogo{

  width:72px;

  height:72px;

  margin:auto;

}

.footer h2{

  margin-top:24px;

  font-size:34px;

  font-weight:600;

  color:#202124;

}

.footer>p{

  margin-top:10px;

  color:var(--muted);

  font-size:18px;

}

.footerDivider{

  width:90px;

  height:2px;

  background:var(--primary);

  margin:34px auto;

  border-radius:999px;

}

.footerDescription{

  max-width:860px;

  margin:auto;

  color:#4d5156;

  line-height:2;

  font-size:17px;

}

.footerMeta{

  display:flex;

  justify-content:center;

  align-items:center;

  flex-wrap:wrap;

  gap:14px;

  margin-top:40px;

  color:#70757a;

  font-size:15px;

}

.copyright{

  margin-top:40px;

  color:#9aa0a6;

  font-size:14px;

}

/* =========================================================
   ANIMATIONS
========================================================= */


@keyframes fadeIn{

  from{

    opacity:0;

    transform:translateY(18px);

  }

  to{

    opacity:1;

    transform:translateY(0);

  }

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:900px){

  .page{

    padding:
      30px
      20px
      70px;

  }

  .hero{

    margin-top:50px;

  }

  .heroLogo{

    width:96px;

    height:96px;

  }

  .heroTitle{

    font-size:50px;

  }

  .heroSubtitle{

    font-size:18px;

  }

  #searchInput{

    font-size:18px;

  }

  .resultTitle{

    font-size:26px;

  }

  .resultDescription{

    font-size:16px;

  }

}

@media (max-width:640px){

  .page{

    padding:
      24px
      16px
      60px;

  }

  .hero{

    margin-top:36px;

  }

  .heroLogo{

    width:84px;

    height:84px;

  }

  .heroTitle{

    font-size:40px;

    letter-spacing:-1px;

  }

  .heroSubtitle{

    font-size:16px;

  }

  .searchBox{

    min-height:60px;

    padding:
      0
      20px;

  }

  .searchIcon{

    width:20px;

    height:20px;

  }

  #searchInput{

    font-size:17px;

  }

  #searchButton{

    width:100%;

    min-width:unset;

    margin-top:22px;

  }

  .resultItem{

    padding:
      20px
      2px;

  }

  .resultTitle{

    font-size:23px;

  }

  .resultDescription{

    margin-top:10px;

    font-size:15px;

    line-height:1.8;

  }

  .info h2,

  .tips h2,

  .footer h2,

  .emptyState h2{

    font-size:28px;

  }

  .info p,

  .tips li,

  .footerDescription{

    font-size:16px;

  }

  .footerMeta{

    gap:8px;

    font-size:14px;

  }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  *{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

  }

}

/* =========================================================
   PRINT
========================================================= */

@media print{

  .searchSection,

  .tips,

  .footer{

    display:none;

  }

  body{

    background:#fff;

  }

}