:root {
  --green:#51AA7C;
  --green-dk:#3E8C63;
  --leaf:#65A262;
  --lime:#90DB42;
  --orange:#C0602A;
  --gold:#D29F37;
  --red:#EB3317;
  --lavender:#C6C6D2;
  --lav-soft:#E4E4EC;
  --page:#F6F6F6;
  --grey:#777777;
  --black:#171717;
  --ink:#2A2A2E;
  --muted:#5C5C66;
  --line:#DCDCE3;

  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Global typography */
html {
  -webkit-text-size-adjust:100%;
  font-family:var(--sans) !important;
}

body {
  font-family:var(--sans) !important;
  color:var(--ink) !important;
  background:var(--page) !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  letter-spacing:normal !important;
  margin:0 !important;
  padding:0 !important;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:var(--serif) !important;
}

button,
input,
textarea,
select {
  font-family:var(--sans) !important;
}

img {
  display:block;
  max-width:100%;
}

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

a:hover,
a:focus {
  text-decoration:none;
}

:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:2px;
  border-radius:4px;
}



/* =========================================================
   HEALTHPREZ DESIGN VARIABLES
   ========================================================= */

:root {

  --green:#51AA7C;
  --green-dk:#3E8C63;

  --leaf:#65A262;
  --lime:#90DB42;

  --orange:#C0602A;
  --gold:#D29F37;
  --red:#EB3317;

  --lavender:#C6C6D2;
  --lav-soft:#E4E4EC;

  --page:#F6F6F6;

  --grey:#777777;
  --black:#171717;

  --ink:#2A2A2E;
  --muted:#5C5C66;

  --line:#DCDCE3;

  --serif:'Source Serif 4',
          Georgia,
          serif;

  --sans:'Figtree',
         system-ui,
         -apple-system,
         'Segoe UI',
         sans-serif;
}


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

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

html {
    -webkit-text-size-adjust:100%;
    font-family:var(--sans) !important;
}

body {

    font-family:var(--sans) !important;

    color:var(--ink) !important;

    background:var(--page) !important;

    font-size:16px !important;

    font-weight:400 !important;

    line-height:1.55 !important;

    letter-spacing:normal !important;

    margin:0 !important;

    padding:0 !important;
}


/*
 * Prevent WordPress/Twenty Twenty-Five global typography
 * from changing normal text inside this page.
 */
body,
body * {

    font-family:inherit;
}


/*
 * Headings intentionally use Source Serif 4.
 */
h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:var(--serif) !important;
}


/*
 * Form elements inherit the HealthPrez font.
 */
button,
input,
textarea,
select {

    font-family:var(--sans) !important;
}


/*
 * Images.
 */
img {

    display:block;

    max-width:100%;
}


/*
 * Links.
 */
a {

    color:inherit;
}


/*
 * Remove WordPress link styling.
 */
a,
a:hover,
a:focus {

    text-decoration:none;
}


/*
 * Focus accessibility.
 */
:focus-visible {

    outline:3px solid var(--orange);

    outline-offset:2px;

    border-radius:4px;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.wrap {

    width:100%;

    max-width:1160px;

    margin:0 auto;

    padding:0 20px;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

    background:#fff;

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

    position:sticky;

    top:0;

    z-index:100;
}

.bar {

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:68px;
}

.logo img {

    height:34px;

    width:auto;
}

.nav {

    display:flex;

    align-items:center;

    gap:28px;

    font-weight:500;

    font-size:15px;
}

.nav a {

    text-decoration:none;

    color:var(--ink);
}

.nav a:hover {

    color:var(--orange);
}

.nav .btn-outline {

    border:1.5px solid var(--green);

    color:var(--green-dk);

    padding:8px 16px;

    border-radius:8px;
}

.nav .btn-outline:hover {

    background:var(--green);

    color:#fff;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.menu {

    display:none;
}

.menu summary {

    list-style:none;

    cursor:pointer;

    width:44px;

    height:44px;

    display:grid;

    place-items:center;

    border-radius:8px;
}

.menu summary::-webkit-details-marker {

    display:none;
}

.menu summary span,
.menu summary span::before,
.menu summary span::after {

    display:block;

    width:24px;

    height:2.5px;

    background:var(--lime);

    border-radius:2px;

    position:relative;
}

.menu summary span::before,
.menu summary span::after {

    content:'';

    position:absolute;

    left:0;
}

.menu summary span::before {

    top:-7px;
}

.menu summary span::after {

    top:7px;
}

.menu[open] summary span {

    background:transparent;
}

.menu[open] summary span::before {

    top:0;

    transform:rotate(45deg);
}

.menu[open] summary span::after {

    top:0;

    transform:rotate(-45deg);
}

.menu nav {

    position:absolute;

    left:0;

    right:0;

    top:68px;

    background:#fff;

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

    padding:8px 20px 16px;
}

.menu nav a {

    display:block;

    padding:12px 0;

    text-decoration:none;

    font-weight:500;

    border-bottom:1px solid var(--page);
}


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

.hero {

    background:
        linear-gradient(
            180deg,
            var(--lavender) 0%,
            var(--lav-soft) 100%
        );

    padding:64px 0 72px;
}

.hero-grid {

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:56px;

    align-items:center;
}

.hero h1 {

    font-family:var(--serif) !important;

    font-weight:600;

    font-size:clamp(34px,4.6vw,52px);

    line-height:1.1;

    letter-spacing:-.5px;

    color:var(--ink);

    max-width:16ch;
}

.hero .sub {

    font-size:19px;

    color:#3E3E48;

    margin-top:18px;

    max-width:34ch;
}

.manage {

    margin-top:28px;

    background:#fff;

    border-left:4px solid var(--red);

    border-radius:0 10px 10px 0;

    padding:16px 20px;

    max-width:440px;
}

.manage strong {

    display:block;

    font-weight:600;
}

.manage p {

    color:var(--muted);

    font-size:15px;

    margin-top:2px;
}

.facts {

    display:flex;

    flex-wrap:wrap;

    gap:10px 22px;

    margin-top:26px;

    list-style:none;

    font-weight:500;

    font-size:15px;
}

.facts li {

    display:flex;

    align-items:center;

    gap:8px;
}

.facts svg {

    flex:none;
}


/* =========================================================
   LOGIN CARD
   ========================================================= */

.login {

    background:#fff;

    border-radius:16px;

    padding:32px;

    box-shadow:
        0 18px 40px -20px
        rgba(60,60,90,.45);
}

.login h2 {

    font-family:var(--serif) !important;

    font-weight:600;

    font-size:26px;
}

.login .hint {

    color:var(--muted);

    font-size:15px;

    margin:4px 0 22px;
}

.field {

    margin-bottom:16px;
}

.field label {

    display:block;

    font-weight:500;

    font-size:14px;

    margin-bottom:6px;
}

.field input {

    width:100%;

    height:48px;

    border:1.5px solid var(--line);

    border-radius:10px;

    padding:0 14px;

    font-family:var(--sans) !important;

    font-size:16px;

    font-weight:400;

    background:#FBFBFD;
}

.field input:focus {

    outline:none;

    border-color:var(--green);

    background:#fff;

    box-shadow:
        0 0 0 3px
        rgba(81,170,124,.2);
}

.err-msg {

    color:var(--red);

    font-size:13px;

    margin-top:5px;

    font-weight:500;
}

.loading-status {

    display:block;

    font-size:14px;

    color:var(--muted);

    margin-top:10px;
}

.row {

    display:flex;

    justify-content:flex-end;

    margin:-4px 0 18px;
}

.row a {

    font-size:14px;

    color:var(--orange);

    font-weight:500;
}

.btn {

    display:block;

    width:100%;

    height:50px;

    border:0;

    border-radius:10px;

    background:var(--green);

    color:#fff;

    font:
        600 17px var(--sans);

    cursor:pointer;
}

.btn:hover {

    background:var(--green-dk);
}

.signup {

    text-align:center;

    margin-top:18px;

    font-size:15px;

    color:var(--muted);
}

.signup a {

    color:var(--orange);

    font-weight:600;
}

.note {

    display:flex;

    gap:10px;

    align-items:flex-start;

    margin-top:22px;

    padding-top:18px;

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

    font-size:13.5px;

    color:var(--muted);
}


/* =========================================================
   ACTIVITIES
   ========================================================= */

.activities {

    padding:72px 0;
}

.head {

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:16px;

    margin-bottom:28px;
}

.head h2 {

    font-family:var(--serif) !important;

    font-weight:600;

    font-size:clamp(28px,3.2vw,36px);

    line-height:1.15;
}

.head p {

    color:var(--muted);

    margin-top:6px;
}

.head a {

    color:var(--orange);

    font-weight:600;

    text-decoration:none;

    white-space:nowrap;
}

.head a:hover {

    text-decoration:underline;
}

.grid {

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:24px;
}

.course {

    background:#fff;

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

    border-radius:12px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    text-decoration:none;
}

.course:hover {

    border-color:var(--green);
}

.course:hover h3 {

    text-decoration:underline;
}

.thumb {

    position:relative;

    aspect-ratio:16/9;

    background:var(--lav-soft);
}

.thumb img {

    width:100%;

    height:100%;

    object-fit:cover;
}

.credit {

    position:absolute;

    left:12px;

    bottom:12px;

    background:#fff;

    color:var(--green-dk);

    font-weight:600;

    font-size:13px;

    padding:5px 10px 5px 8px;

    border-radius:999px;

    display:flex;

    align-items:center;

    gap:6px;
}

.credit i {

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--green);
}

.course .body {

    padding:18px 20px 20px;

    display:flex;

    flex-direction:column;

    gap:10px;

    flex:1;
}

.course h3 {

    font-family:var(--serif) !important;

    font-weight:600;

    font-size:19px;

    line-height:1.3;

    color:var(--orange);
}

.course .by {

    margin-top:auto;

    font-size:14px;

    color:var(--leaf);

    font-weight:500;
}


/* =========================================================
   ABOUT
   ========================================================= */

.about {

    background:#fff;

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

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

    padding:64px 0;
}

.about-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:56px;
}

.about h2 {

    font-family:var(--serif) !important;

    font-weight:600;

    font-size:clamp(26px,3vw,34px);

    line-height:1.2;
}

.about p {

    color:#44444E;

    font-size:17px;

    max-width:60ch;
}

.about ul {

    list-style:none;

    margin-top:20px;

    display:grid;

    gap:14px;
}

.about li {

    display:flex;

    gap:12px;

    align-items:flex-start;
}

.about li b {

    display:block;
}

.about li span {

    color:var(--muted);

    font-size:15px;
}

.tick {

    flex:none;

    width:26px;

    height:26px;

    border-radius:50%;

    background:
        rgba(81,170,124,.14);

    display:grid;

    place-items:center;

    margin-top:2px;
}


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

.foot-top {

    background:var(--grey);

    color:#fff;

    padding:44px 0;
}

.foot-grid {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    flex-wrap:wrap;
}

.foot-top img {

    height:32px;

    width:auto;
}

.foot-top nav {

    display:flex;

    gap:28px;

    font-weight:500;
}

.foot-top nav a {

    text-decoration:none;
}

.foot-top nav a:hover {

    text-decoration:underline;
}

.foot-top .moh {

    font-size:14px;

    opacity:.9;

    margin-top:10px;
}

.foot-bot {

    background:var(--black);

    color:#BDBDBD;

    font-size:14px;

    padding:18px 0;
}

.foot-bot .wrap {

    display:flex;

    justify-content:space-between;

    gap:12px;

    flex-wrap:wrap;
}

.foot-bot a {

    color:var(--gold);

    text-decoration:none;

    margin-left:18px;
}

.foot-bot a:first-child {

    margin-left:0;
}

.foot-bot a:hover {

    text-decoration:underline;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:960px) {

    .hero-grid {

        grid-template-columns:1fr;

        gap:36px;
    }

    .hero h1 {

        max-width:18ch;
    }

    .login {

        max-width:520px;
    }

    .grid {

        grid-template-columns:
            repeat(2,1fr);
    }

    .about-grid {

        grid-template-columns:1fr;

        gap:28px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:720px) {

    .nav {

        display:none;
    }

    .menu {

        display:block;
    }

    .logo img {

        height:28px;
    }

    .hero {

        padding:36px 0 44px;
    }

    .hero .sub {

        font-size:17px;
    }

    .login {

        padding:24px 20px;
    }

    .hero-grid {

        gap:0;
    }

    .intro {

        display:contents;
    }

    .hero h1 {

        order:1;
    }

    .hero .sub {

        order:2;

        margin-bottom:24px;
    }

    .login {

        order:3;
    }

    .manage {

        order:4;
    }

    .facts {

        order:5;
    }

    .manage {

        max-width:none;
    }

    .activities {

        padding:48px 0;
    }

    .head a.all-top {

        display:none;
    }

    .grid {

        grid-auto-flow:column;

        grid-template-columns:none;

        grid-auto-columns:82%;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        scroll-padding-left:20px;

        gap:14px;

        margin:0 -20px;

        padding:0 20px 8px;

        scrollbar-width:none;
    }

    .grid::-webkit-scrollbar {

        display:none;
    }

    .course {

        scroll-snap-align:start;
    }

    .all-bottom {

        display:block !important;
    }

    .about {

        padding:44px 0;
    }

    .foot-grid {

        flex-direction:column;

        align-items:flex-start;
    }

    .foot-top nav {

        flex-direction:column;

        gap:12px;
    }

    .foot-bot .wrap {

        flex-direction:column;
    }
}


/* =========================================================
   BOTTOM BROWSE LINK
   ========================================================= */

.all-bottom {

    display:none;

    margin-top:18px;

    text-align:center;

    color:var(--orange);

    font-weight:600;
}


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

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

    * {

        scroll-behavior:auto !important;
    }
}