/*
Theme Name: EnglishSpeak Home
Theme URI: https://sieuthitienganh.com/
Author: Sieu Thi Tieng Anh
Description: Lightweight landing page theme for EnglishSpeak.
Version: 1.8.0
Text Domain: englishspeak-home
*/

:root{
  --blue:#0b56b7;
  --blue-dark:#063f8f;
  --orange:#f59e0b;
  --orange-deep:#f97316;
  --ink:#10233f;
  --muted:#5f6f86;
  --card:#ffffff;
  --bg1:#f4f9ff;
  --bg2:#fffaf0;
  --line:#dfeaf7;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 15%, rgba(11,86,183,.10), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(245,158,11,.10), transparent 26%),
    linear-gradient(180deg,#f7fbff 0%,#ffffff 52%,#fffaf2 100%);
  min-height:100vh;
}

a{color:inherit}
.es-wrap{
  width:min(1160px,calc(100% - 32px));
  margin:0 auto;
  padding:28px 0 40px;
}
.es-card{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(11,86,183,.14);
  border-radius:28px;
  box-shadow:0 24px 70px rgba(31,55,86,.13);
  overflow:hidden;
}
.es-hero{
  display:grid;
  grid-template-columns:minmax(250px, .85fr) minmax(0, 1.6fr);
  gap:42px;
  align-items:center;
  padding:42px 48px 32px;
}
.es-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:360px;
  border-radius:24px;
  background:linear-gradient(145deg,#eef6ff 0%,#ffffff 58%,#fff7e6 100%);
  border:1px solid var(--line);
}
.es-logo{
  width:min(230px,72%);
  height:auto;
  display:block;
  object-fit:contain;
  margin-bottom:10px;
}
.es-logo-fallback{
  width:180px;height:180px;border-radius:36px;
  display:grid;place-items:center;
  font-size:78px;background:#fff;
  border:3px solid #dcecff;
  box-shadow:0 16px 38px rgba(11,99,206,.12);
}
.es-brand-name{
  margin-top:10px;
  font-size:24px;
  font-weight:900;
  color:var(--blue);
  letter-spacing:.2px;
}
.es-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border-radius:999px;
  background:#edf5ff;
  color:var(--blue-dark);
  font-weight:800;
  font-size:14px;
}
.es-title{
  margin:14px 0 10px;
  font-size:clamp(32px,3.6vw,52px);
  line-height:1.02;
  letter-spacing:-1.8px;
  color:var(--blue);
}
.es-subtitle{
  margin:0 0 24px;
  font-size:clamp(18px,2vw,24px);
  line-height:1.5;
  font-weight:800;
  color:#26364c;
}
.es-features{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0 0 25px;
}
.es-feature{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:13px 14px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 7px 18px rgba(28,52,82,.05);
  font-size:16px;
  line-height:1.4;
  font-weight:750;
}
.es-icon{
  flex:0 0 auto;
  font-size:22px;
  line-height:1.2;
}
.es-punchline{
  margin:0 0 8px;
  font-size:clamp(18px,1.65vw,23px);
  line-height:1.35;
  color:var(--blue-dark);
  font-weight:900;
}
.es-slogan{
  margin:0 0 24px;
  font-size:16px;
  color:var(--muted);
  font-weight:700;
}
.es-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.es-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 28px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg,var(--blue-dark),var(--blue));
  font-size:18px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(11,99,206,.27);
  transition:transform .18s ease,box-shadow .18s ease;
}
.es-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(11,99,206,.34);
}
.es-note{
  font-size:14px;
  color:var(--muted);
  font-weight:650;
}
.es-bottom{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  padding:18px 24px 22px;
  border-top:1px solid var(--line);
  color:#536177;
  font-size:14px;
  font-weight:700;
  text-align:center;
}
.es-bottom span{white-space:nowrap}

@media (max-width:820px){
  .es-wrap{width:min(100% - 20px,700px);padding:12px 0 24px}
  .es-card{border-radius:22px}
  .es-hero{grid-template-columns:1fr;gap:20px;padding:22px 18px 24px}
  .es-brand{min-height:auto;padding:22px 12px 18px}
  .es-logo{width:min(170px,58vw)}
  .es-logo-fallback{width:140px;height:140px;font-size:60px}
  .es-brand-name{font-size:21px}
  .es-title{text-align:center;font-size:clamp(32px,10vw,46px);letter-spacing:-1px}
  .es-subtitle{text-align:center;font-size:18px}
  .es-kicker{display:flex;width:max-content;margin:0 auto}
  .es-features{grid-template-columns:1fr}
  .es-feature{font-size:15.5px}
  .es-punchline{text-align:center}
  .es-slogan{text-align:center}
  .es-actions{justify-content:center}
  .es-cta{width:100%;max-width:330px}
  .es-note{width:100%;text-align:center}
}


/* V2 refinements */
@media (min-width:821px){
  .es-punchline{
    white-space:nowrap;
    font-size:22px;
    letter-spacing:-.2px;
  }
  .es-brand{
    min-height:330px;
  }
  .es-logo{
    width:min(220px,76%);
    filter:drop-shadow(0 10px 22px rgba(11,99,206,.08));
  }
  .es-hero{
    padding-top:34px;
  }
}


/* V4 - palette aligned to EnglishSpeak logo */
.es-card{position:relative}
.es-card::before{
  content:"";
  display:block;
  height:5px;
  background:linear-gradient(90deg,var(--blue-dark) 0%,var(--blue) 55%,var(--orange) 100%);
}
.es-brand-name{color:var(--blue-dark)}
.es-title,.es-punchline{color:var(--blue)}
.es-kicker{border:1px solid #d7e8fb}
.es-feature{border-color:#dfeaf7}
.es-feature:hover{border-color:#c8dcf5}
.es-cta{border:2px solid rgba(255,255,255,.35)}


/* V5 - smaller EnglishSpeak logo */
.es-logo{
  width:150px;
  height:150px;
}
@media (max-width:760px){
  .es-logo{
    width:120px;
    height:120px;
  }
}


/* V6 - unified background tone with EnglishSpeak logo */
body{
  background:#f4f8fb;
}
.es-card{
  background:#f4f8fb;
  border-color:#dce7f2;
}
.es-brand{
  background:#f4f8fb;
  border-color:#dce7f2;
}
.es-content{
  background:#f4f8fb;
}
.es-feature{
  background:#ffffff;
}
.es-bottom{
  background:#f4f8fb;
}

/* Better spacing after removing subtitle/note */
.es-title{
  margin-bottom:22px;
}
.es-actions{
  justify-content:flex-start;
}
@media (max-width:820px){
  .es-actions{
    justify-content:center;
  }
}


/* V7 - clickable EnglishSpeak logo */
.es-logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:24px;
}
.es-logo-link .es-logo{
  transition:transform .18s ease, filter .18s ease;
}
.es-logo-link:hover .es-logo,
.es-logo-link:focus-visible .es-logo{
  transform:translateY(-2px) scale(1.025);
  filter:drop-shadow(0 12px 24px rgba(11,86,183,.14));
}
.es-logo-link:focus-visible{
  outline:3px solid rgba(11,86,183,.28);
  outline-offset:5px;
}


/* V8 - smaller main headline */
.es-title{
  font-size:clamp(28px,3vw,42px);
  line-height:1.08;
}
@media (max-width:760px){
  .es-title{
    font-size:clamp(25px,7vw,32px);
    line-height:1.12;
  }
}


/* V9 - white content/logo area so PNG logo background blends perfectly */
body{
  background:
    radial-gradient(circle at 12% 14%, rgba(11,86,183,.08), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(245,158,11,.08), transparent 24%),
    #f5f9fd;
}

.es-card{
  background:#ffffff;
  border-color:#dfe8f2;
}

.es-brand{
  background:#ffffff;
  border-color:#e5edf5;
}

.es-content{
  background:#ffffff;
}

.es-bottom{
  background:#ffffff;
}

.es-logo-link{
  background:#ffffff;
}

.es-feature{
  background:#ffffff;
}

/* Keep the colored accent without putting color behind the logo */
.es-card::before{
  background:linear-gradient(90deg,var(--blue-dark) 0%,var(--blue) 58%,var(--orange) 100%);
}

/* V10 - desktop headline on one line */
@media (min-width:761px){
  .es-title{
    font-size:clamp(25px,2.45vw,34px);
    line-height:1.12;
    letter-spacing:-1px;
    white-space:nowrap;
  }
}


/* V11 - desktop headline on one line + tighter logo frame */
@media (min-width: 821px){

  /* Keep headline on one line */
  .es-title{
    font-size: 30px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.6px !important;
    white-space: nowrap !important;
    margin-bottom: 20px !important;
  }

  /* Make left logo frame tighter WITHOUT shrinking the logo itself */
  .es-brand{
    min-height: 0 !important;
    padding: 24px 18px 22px !important;
    align-self: center !important;
  }

  /* Preserve current logo size */
  .es-logo{
    width: 150px !important;
    height: 150px !important;
    max-width: none !important;
  }

  .es-brand-name{
    margin-top: 8px !important;
  }

  /* Give the content side a little more room */
  .es-hero{
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 34px !important;
  }
}

/* Mobile stays responsive */
@media (max-width: 820px){
  .es-title{
    white-space: normal !important;
  }
}