/* CSS BY Andres Galindo */
/* all my notes are so i can come back to remember why i did something*/

/* IMPORTED FONTS */
/* pulling Kavoon (headings) + Inter (everything else) from Google 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 RESET */
/* wiping browser default styles so my design is consistent everywhere */
* { box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ROOT VARIABLES */
/* all my brand colors + sizes live here so I can tweak once and they update everywhere */
:root{
  --teal: #4CA7C0;       /* accent color for pills/buttons */
  --purple: #484FB7;     /* main background for the page body */
  --lavender: #6B8FE7;   /* page backdrop behind the centered card */
  --yellow: #E9BB57;     /* nav bar + table headers */
  --pink: #D9526F;       /* CTA section background */
  --dark-gray: #1E1E1E;  /* default text color */
  --white: #ffffff;      /* obvious */

  --radius: 16px;                      /* rounded corners vibe */
  --shadow: 0 6px 18px rgba(0,0,0,.12);/* soft shadow so cards feel lifted */
  --ring: 0 0 0 3px rgba(255,255,255,.65); /* focus ring for keyboard nav */

  /* type scale — matching the assignment specs */
  --h1: 3em;     /* H1 */
  --h2: 2em;     /* H2 */
  --h3: 1.5em;   /* H3 (and NAV H2) */
  --h4: 1.15em;  /* H4 */
}

/* GLOBAL STYLES (mobile first/small) */
/* starting small screens first, then patching bigger screens at the bottom */
html, body { height: 100%; }
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* default body font */
  color: var(--dark-gray);            /* readable text */
  background: var(--lavender);        /* light purple behind the main card */
  line-height: 1.55;                  /* comfy reading line height */
}

.page-wrap{
  max-width: 820px;                   /* keeps content narrow so it looks clean */
  margin: 0 auto;                     /* centers the page */
  min-height: 100%;                   /* lets footer sit at the bottom */
  background: var(--purple);          /* main card background */
  box-shadow: var(--shadow);          /* makes the card pop off the lavender */
}

/* accessibility helper: only visible when focused with keyboard */
.skip-link{
  position: absolute; left: -9999px; top: -9999px;
}
.skip-link:focus{
  left: 16px; top: 16px; z-index: 9999;
  background: var(--white); padding: .5rem .75rem; border-radius: 8px;
  outline: 3px solid var(--yellow);   /* high-contrast so I can see it */
}

/* Header */
/* big welcoming section w/ site name and sub text */
.site-header{
  text-align: center; color: var(--white);
  padding: 36px 20px 16px;            /* extra top padding to breathe */
}
.site-header h1{
  font-family: "Kavoon", cursive;     /* playful headline font */
  font-size: var(--h1);               /* 3em per spec */
  margin: 0 0 6px 0;
}
.site-header .tagline{ opacity: .95; }/* slightly softer so H1 stands out */

/* Nav */
/* yellow bar w/ buttons — simple grid so it stacks nicely on mobile */
.site-nav{ background: var(--yellow); padding: 12px 16px 20px; }
.site-nav h2{
  font-family: "Kavoon", cursive;
  font-size: var(--h3);               /* 1.5em per “NAV H2” requirement */
  color: var(--dark-gray);
  margin-bottom: 10px;
}
.menu{
  display: grid; gap: 10px;           /* vertical buttons on mobile */
}
.menu a{
  display: block; text-decoration: none; text-align: center;
  background: var(--white); color: var(--purple); /* white chips w/ purple text */
  padding: 12px 14px; border-radius: 8px; font-weight: 700;
  border: 2px solid rgba(0,0,0,.06);  /* tiny border so they feel tappable */
}
.menu a:focus-visible{ outline: none; box-shadow: var(--ring); } /* keyboard-friendly */

/* Sections */
/* shared spacing for each content section */
.section{ padding: 20px 16px 8px; }
.section-header h2{
  font-family: "Kavoon", cursive;
  font-size: var(--h2);               /* 2em per spec */
  color: var(--white);
  margin: 8px 0 2px;
}
.eyebrow{
  font-family: "Kavoon", cursive;
  font-size: var(--h3);               /* 1.5em subhead to break up groups */
  color: var(--yellow);
  margin: 0 0 10px 0;
}

/* Cards */
/* two-column card: icon on left, text on right */
.card{
  display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start;
  background: var(--white); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); margin: 12px 0;
}
.card-icon{ width: 56px; height: 56px; object-fit: contain; border-radius: 8px; } /* icons look crisp and same size */
.card-body h4{
  font-size: var(--h4); margin: 2px 0 6px; color: var(--purple); font-weight: 800; /* punchy mini headlines */
}
.card-body p{ margin: 0; } /* keep cards tight so the list doesn’t get super long */

/* Why Choose Us pills */
#why-us{
    background: var(--pink);
}
/* grid of little “badges” so the benefits are scannable */
.pill-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px;
}
.pill{
  background: var(--white); color: var(--dark-gray);
  border-radius: 14px; padding: 14px 12px; text-align: center;
  box-shadow: var(--shadow); font-weight: 800;
}
/* color variants for the pills — quick way to make them feel alive */
.pill-teal{ background: var(--teal); color: var(--white); }
.pill-lavender{ background: var(--lavender); color: var(--white); }
.pill-yellow{ background: var(--yellow); color: var(--dark-gray); }
.pill-white{ background: var(--white); color: var(--purple); }

/* Pricing tables */
/* wrapping the table so I can give it a white background + rounded corners */
.table-wrap{
  background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.table-wrap + .table-wrap{ margin-top: 8px; } /* space between stacked tables */
table{ width: 100%; font-size: 1rem; }        /* default table text size */
thead th{
  background: var(--yellow); color: var(--dark-gray); text-align: left; padding: 10px 12px;
}
tbody td{ padding: 12px; border-top: 1px solid rgba(0,0,0,.08); } /* light row dividers */
tbody tr:nth-child(even){ background: rgba(0,0,0,.03); }          /* zebra stripes for readability */
.mt{ margin-top: 14px; }                                          /* quick top margin helper */

/* CTA */
/* big pink section to grab attention and push booking */
.cta{ background: var(--pink); color: var(--white); padding: 18px 16px 28px; }
.cta-inner{ background: rgba(255,255,255,.08); border-radius: var(--radius); padding: 18px 16px; }
.cta h2{
  font-family: "Kavoon", cursive; font-size: var(--h2); margin: 0 0 8px 0;
}
.cta p{ margin: 0 0 14px 0; }
.btn-cta{
  display: inline-block; background: var(--white); color: var(--pink);
  font-weight: 900; text-decoration: none; padding: 12px 18px;
  border-radius: 10px; border: 2px solid rgba(0,0,0,.06);
}
.btn-cta:focus-visible{ outline: none; box-shadow: var(--ring); } /* same keyboard focus look as nav */

/* Footer */
/* simple footer — spaced left/right so it doesn’t feel cramped */
.site-footer{
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 16px 26px; color: var(--white);
}
.site-footer a{ color: var(--white); text-decoration: underline; }

/* Responsive tweaks */
/* once the screen is at least 640px wide, bump some sizes/layout */
@media (min-width: 640px){
  .card{ grid-template-columns: 84px 1fr; padding: 18px; } /* bigger icon column on desktop */
  .card-icon{ width: 64px; height: 64px; }                /* scale icons to match */
  .pill-grid{ grid-template-columns: repeat(4, 1fr); }     /* pills in one row when there’s space */
}