/* =========================================================
   myAEA LANDING PAGE
   American English Academy
   ========================================================= */


/* =========================
   COLORS
========================= */

:root {
  --aea-blue: #213256;
  --aea-blue-light: #2d416f;
  --aea-orange: #ff4e31;

  --white: #ffffff;
  --light-gray: #f4f6fa;
  --border: #e3e7ef;

  --text: #213256;
  --muted: #737d91;

  --card-shadow:
    0 18px 45px
    rgba(10, 22, 48, 0.18);

  --card-shadow-hover:
    0 26px 60px
    rgba(10, 22, 48, 0.28);
}


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

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  min-height: 100%;
}


body {
  min-height: 100vh;

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  background:
    var(--aea-blue);

  color:
    var(--white);

  -webkit-font-smoothing:
    antialiased;
}


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

.page-shell {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    42px 24px;
}


.portal {
  width:
    min(
      100%,
      1100px
    );
}


/* =========================
   LOGO
========================= */

.portal-header {
  display: flex;
  justify-content: center;

  margin-bottom:
    34px;
}


.logo-panel {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    14px 24px;

  background:
    var(--white);

  border-radius:
    18px;

  box-shadow:
    0 14px 35px
    rgba(
      5,
      15,
      35,
      0.18
    );
}


.aea-logo {
  display: block;

  width: auto;
  height: 68px;

  max-width: 260px;

  object-fit: contain;
}


/* =========================
   WELCOME
========================= */

.welcome {
  text-align: center;

  margin-bottom:
    38px;
}


.eyebrow {
  margin:
    0 0 12px;

  color:
    var(--aea-orange);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.18em;
}


h1 {
  margin: 0;

  color:
    var(--white);

  font-size:
    clamp(
      34px,
      5vw,
      48px
    );

  font-weight:
    600;

  letter-spacing:
    -0.045em;

  line-height:
    1.08;
}


.myaea-title {
  font-weight:
    700;
}


.intro {
  margin:
    15px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.68
    );

  font-size:
    15px;
}


/* =========================
   PORTAL GRID
========================= */

.portal-grid {
  display: grid;

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

  gap:
    18px;
}


/* =========================
   PORTAL CARDS
========================= */

.portal-card {
  position: relative;

  min-height:
    250px;

  display: flex;
  flex-direction: column;

  padding:
    30px;

  overflow: hidden;

  text-align: left;
  text-decoration: none;

  color:
    var(--text);

  background:
    var(--white);

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius:
    22px;

  box-shadow:
    var(--card-shadow);

  cursor:
    pointer;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}


/*
   Blue strip across the top.
*/

.portal-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height:
    5px;

  background:
    var(--aea-blue-light);
}


.portal-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    var(--card-shadow-hover);
}


.portal-card:focus-visible {
  outline:
    3px solid
    rgba(
      255,
      78,
      49,
      0.65
    );

  outline-offset:
    4px;
}


/*
   Parent is a button rather than
   an anchor, so reset browser
   button styling.
*/

.portal-card-button {
  width:
    100%;

  font:
    inherit;

  appearance:
    none;

  -webkit-appearance:
    none;
}


/* =========================
   PORTAL ICONS
========================= */

.portal-icon {
  width:
    54px;

  height:
    54px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex:
    0 0 auto;

  margin-bottom:
    28px;

  background:
    var(--aea-blue);

  border-radius:
    16px;

  transition:
    background 180ms ease,
    transform 180ms ease;
}


.portal-icon svg {
  width:
    26px;

  height:
    26px;

  fill:
    var(--white);
}


.portal-card:hover
.portal-icon {
  background:
    var(--aea-orange);

  transform:
    scale(1.03);
}


/* =========================
   CARD TEXT
========================= */

.portal-card-content {
  flex:
    1;
}


.portal-card h2 {
  margin:
    0 0 9px;

  color:
    var(--aea-blue);

  font-size:
    23px;

  font-weight:
    650;

  letter-spacing:
    -0.025em;
}


.portal-card p {
  max-width:
    245px;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.55;
}


/* =========================
   ARROW
========================= */

.arrow {
  width:
    38px;

  height:
    38px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex:
    0 0 auto;

  margin-top:
    25px;

  color:
    var(--aea-blue);

  background:
    var(--light-gray);

  border-radius:
    11px;

  font-size:
    21px;

  line-height:
    1;

  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease;
}


.portal-card:hover
.arrow {
  transform:
    translateX(4px);

  color:
    var(--white);

  background:
    var(--aea-orange);
}


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

footer {
  display: flex;
  justify-content: center;
  align-items: center;

  gap:
    8px;

  margin-top:
    34px;

  color:
    rgba(
      255,
      255,
      255,
      0.46
    );

  font-size:
    12px;
}


.footer-divider {
  color:
    var(--aea-orange);

  opacity:
    0.9;
}


/* =========================================================
   PARENT SIGN-IN MODAL
   ========================================================= */

body.modal-open {
  overflow:
    hidden;
}


.parent-login-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;

  background:
    rgba(
      12,
      22,
      44,
      0.68
    );

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);
}


.parent-login-overlay[hidden] {
  display:
    none;
}


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

.parent-login-card {
  position:
    relative;

  width:
    min(
      100%,
      430px
    );

  padding:
    42px 36px 38px;

  text-align:
    center;

  color:
    var(--aea-blue);

  background:
    var(--white);

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

  border-radius:
    24px;

  box-shadow:
    0 30px 80px
    rgba(
      5,
      15,
      35,
      0.32
    );
}


/* =========================
   LOGIN CLOSE BUTTON
========================= */

.parent-login-close {
  position:
    absolute;

  top:
    14px;

  right:
    17px;

  width:
    36px;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    transparent;

  color:
    #737d91;

  font-family:
    inherit;

  font-size:
    27px;

  font-weight:
    400;

  line-height:
    1;

  cursor:
    pointer;
}


.parent-login-close:hover {
  color:
    var(--aea-blue);

  background:
    #f3f5f8;
}


/* =========================
   LOGIN ICON
========================= */

.parent-login-icon {
  width:
    56px;

  height:
    56px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0 auto 22px;

  background:
    rgba(
      33,
      50,
      86,
      0.07
    );

  border-radius:
    17px;
}


.parent-login-icon svg {
  width:
    27px;

  height:
    27px;

  fill:
    var(--aea-blue);
}


/* =========================
   LOGIN TEXT
========================= */

.parent-login-card
.eyebrow {
  color:
    var(--aea-orange);
}


.parent-login-card h2 {
  margin:
    0;

  color:
    var(--aea-blue);

  font-size:
    29px;

  font-weight:
    600;

  letter-spacing:
    -0.03em;
}


.parent-login-description {
  max-width:
    320px;

  margin:
    13px auto 28px;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.55;
}


/* =========================
   GOOGLE BUTTON
========================= */

.google-button-container {
  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.parent-login-status {
  margin-top:
    18px;

  color:
    var(--muted);

  font-size:
    13px;
}


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

@media (
  max-width: 800px
) {

  .page-shell {
    align-items:
      flex-start;

    padding:
      32px 20px;
  }


  .portal-header {
    margin-bottom:
      28px;
  }


  .logo-panel {
    padding:
      12px 20px;

    border-radius:
      16px;
  }


  .aea-logo {
    height:
      60px;
  }


  .welcome {
    margin-bottom:
      32px;
  }


  .portal-grid {
    grid-template-columns:
      1fr;
  }


  .portal-card {
    min-height:
      auto;

    flex-direction:
      row;

    align-items:
      center;

    padding:
      24px;
  }


  /*
     Top blue strip becomes
     a left-side accent.
  */

  .portal-card::before {
    top:
      0;

    bottom:
      0;

    right:
      auto;

    width:
      5px;

    height:
      auto;
  }


  .portal-icon {
    margin:
      0 20px 0 0;
  }


  .portal-card-content {
    padding-right:
      18px;
  }


  .portal-card p {
    max-width:
      none;
  }


  .arrow {
    margin:
      0 0 0 auto;
  }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (
  max-width: 480px
) {

  .page-shell {
    padding:
      24px 16px 28px;
  }


  .portal-header {
    margin-bottom:
      25px;
  }


  .logo-panel {
    padding:
      10px 18px;

    border-radius:
      15px;
  }


  .aea-logo {
    height:
      52px;

    max-width:
      220px;
  }


  .welcome {
    margin-bottom:
      28px;
  }


  .eyebrow {
    font-size:
      10px;
  }


  h1 {
    font-size:
      31px;
  }


  .intro {
    font-size:
      14px;
  }


  .portal-grid {
    gap:
      13px;
  }


  .portal-card {
    padding:
      19px;

    border-radius:
      18px;
  }


  .portal-icon {
    width:
      47px;

    height:
      47px;

    margin-right:
      16px;

    border-radius:
      14px;
  }


  .portal-icon svg {
    width:
      23px;

    height:
      23px;
  }


  .portal-card h2 {
    font-size:
      19px;
  }


  .portal-card p {
    font-size:
      12.5px;

    line-height:
      1.45;
  }


  .arrow {
    width:
      34px;

    height:
      34px;

    border-radius:
      10px;
  }


  footer {
    margin-top:
      27px;
  }


  /* Parent login */

  .parent-login-overlay {
    padding:
      16px;
  }


  .parent-login-card {
    padding:
      38px 22px 32px;

    border-radius:
      20px;
  }


  .parent-login-card h2 {
    font-size:
      26px;
  }

}