/* CSS BY NAME */
/* Andrew's Path to Success Stylesheet */

/* IMPORTED FONTS */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kavoon&display=swap");

/* CSS REST */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  display: block;
}
table {
  border-collapse: collapse;
  width: 100%;
}

/* ROOT VARIABLES */
:root {
  --clr-teal: #4ca7c0;
  --clr-purple: #484fb7;
  --clr-lavender: #6b8fe7;
  --clr-yellow: #e9bb57;
  --clr-pink: #d9526f;
  --clr-dark: #1e1e1e;
  --clr-white: #ffffff;

  --radius-lg: 16px;
  --radius-sm: 8px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;

  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.15);

  --ff-display: "Kavoon", cursive;
  --ff-body: "Inter", sans-serif;

  --fw-extra-bold: 900;
  --fw-bold: 700;
  --fw-reg: 400;
}

/* GLOBAL STYLES (mobile first/small) */
html {
  display: flex;
  justify-content: center;
  background: var(--clr-white);
}

body {
  font-family: var(--ff-body);
  font-size: var(--space-sm);
  line-height: 1.4;
  background: var(--clr-purple);
  color: var(--clr-white);
  max-width: 450px;
  min-height: 100%;
  margin: 0;
}

/* Visually Hide Captions */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
}

/* Header */
header {
  text-align: center;
  color: var(--clr-white);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: var(--clr-purple);
}
header h1 {
  font-family: var(--ff-display);
  font-size: 3em;
  line-height: 1.1;
}
header p {
  font-size: 1rem;
  font-style: italic;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
}

/* Nav */
nav {
  background: var(--clr-yellow);
  text-align: center;
  padding: var(--space-sm);
}
nav h2 {
  color: var(--clr-dark);
  font-style: italic;
  text-transform: uppercase;
}
nav ul {
  list-style: none;
  display: grid;
  gap: var(--space-xs);
}
nav a {
  display: block;
  padding: 0.75rem 1rem;
  background: var(--clr-white);
  color: var(--clr-purple);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: var(--fw-extra-bold);
  font-size: 0.9rem;
}
nav a:hover,
nav a:focus {
  background: var(--clr-purple);
  color: var(--clr-white);
}

main > section > h2 {
  font-family: var(--ff-display);
  font-size: 2rem;
  margin: var(--space-lg) var(--space-sm) var(--space-xs);
}
main section h3 {
  font-size: 1.5rem;
  color: var(--clr-yellow);
  margin: var(--space-md) var(--space-sm) var(--space-xs);
}

/* Services */
#services article {
  background: var(--clr-white);
  color: var(--clr-dark);
  border-radius: var(--radius-lg);
  margin: 0 var(--space-sm) var(--space-sm);
  padding: var(--space-sm);
  box-shadow: var(--shadow-card);
}
#services article img {
  margin-bottom: var(--space-xs);
}
#services article h4 {
  color: var(--clr-purple);
  font-size: 1.15rem;
  margin-bottom: var(--space-xs);
}
#services article p {
  font-size: 0.95rem;
}

/* Why Choose Us */
#why {
  background: var(--clr-pink);
  padding-bottom: var(--space-lg);
}
#why ul.why-list {
  list-style: none;
  margin: 0 var(--space-sm);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-sm);
}
#why li h3 {
color: var(--clr-dark);
}
#why li {
  background: var(--clr-teal);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#why li:nth-child(2) {
  background: var(--clr-lavender);
  align-items: flex-start;
}
#why li:nth-child(3) {
  background: var(--clr-yellow);
}
#why li:nth-child(4) {
  background: var(--clr-white);
  align-items: flex-start;
}
#why li h3 {
  font-size: 1.15rem;
}

/* Pricing */

#pricing section {
  margin: var(--space-lg) auto;
  width: fit-content;
  text-align: center;
}
#pricing table {
  border: 3px solid var(--clr-yellow);
  background: var(--clr-white);
  color: var(--clr-dark);
}
#pricing caption {
  display: none;
}
#pricing th,
#pricing td {
  border: 1px solid var(--clr-yellow);
  padding: var(--space-xs) var(--space-sm);
}
#pricing thead th {
  background: var(--clr-yellow);
  color: var(--clr-dark);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}
#pricing tbody th {
  font-weight: var(--fw-bold);
}

/* CTA */
.cta {
  background: var(--clr-pink);
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
}
.cta p {
  margin-bottom: var(--space-sm);
  font-size: 1rem;
}
.btn-cta {
  display: inline-block;
  width: 75%;
  max-width: 320px;
  padding: 0.75rem 2rem;
  background: var(--clr-white);
  color: var(--clr-dark);
  border-radius: var(--radius-sm);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.7);
}
.btn-cta:hover,
.btn-cta:focus {
  background: var(--clr-purple);
  color: var(--clr-white);
}

/* Footer */
.site-footer {
  background: var(--clr-purple);
  text-align: center;
  padding: var(--space-md);
}
.site-footer small {
  display: inline-flex;
  gap: var(--space-md);
  font-size: 0.875rem;
}
.site-footer a {
  color: var(--clr-white);
  text-decoration: underline;
  font-weight: var(--fw-bold);
}
.site-footer a:hover,
.site-footer a:focus {
  color: var(--clr-yellow);
}