/* this css file is only for styling purposes and absulutly not for layout*/




/*................................
TYPOGRAPHY 
body, h1,2,3,4,p, li, label, input, button, a, code 
..................................*/

/* basic text setup */
html {
  font-size: 100%; /* 16px default so everything is based on this */
}

/*for all the elements in body*/
body {
  font-family: 'Nunito', sans-serif;  /*standard fonts*/
  color: #000000;  /* standard balck as fall back color */
}

/* h1 are always Archivo Black, Purple */
h1 {
  font-family: 'Archivo Black', sans-serif;   /*font*/
  color: #822C91;  /*font color purple */
  font-size: 2.5rem;   /*size of font relative to html or 16*/
}

/* h2 are always Sour Gummy, Bold, Green */
h2 {
  font-family: 'Sour Gummy';   
  color: #A6CA4E;
  font-size: 2rem;
  font-weight: 700;  /*this makes it more bold */
}

/* h3 is always Archivo Black, Dark Blue */
h3 {
  font-family: 'Archivo Black', sans-serif;
  color: #0053A3;
  font-size: 1.5rem;
}

/* h4 is always Sour Gummy, Bold, Black */
h4 {
  font-family: 'Sour Gummy';
  font-size: 1.125rem;
  font-weight: 700;
}

/* Paragraphs are always Nunito and standard black  */
p {
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
}

/* Lists are standard Nunito and black */
li {
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
}

/* inline text elements are all fullback are nunito and black*/
label,
input,
button,
a {
  font-family: "Sour Gummy", sans-serif;
}

/* code block are always nunito black like standard */
code {
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
}

.hero{
  text-align: center;
  margin-top: 5rem;
  margin-bottom: 0rem;
  font-size: 4rem;
}

.lead{
  text-align: center;
  font-size: 1rem;
  margin-top: 0;
}

.ratio{
  color:#A6CA4E;
  font-weight: 800;
}

.cost{
  color: #34C3EF;
  font-weight: 800;
}

.name-program{
  color: #FFFFFF;
}





/*................................
INTERACTIVE ELEMENTS 
..................................*/

/*In-text-----------------------------------------------------------------------------------*/
/* In-text link are blue and change to purple */
.intext-link {
  color: #0053A3;                 /* font color  */
  text-decoration: underline;      /* keep the underline as indication of the link */  
  font-weight: 700;               /* bold */
  transition: color 0.18s ease;   /* learned this last year in iat 235*/ /*makes the transition smooth*/
}

.intext-link:hover,
.intext-link:focus-visible {
  color: #822C91;                 /* purple on hover  and stays when hovered*/
}

.intext-link:active {
  color: #34C3EF;                 /* light blue when pressed */
}

/*Buttons-----------------------------------------------------------------------------------*/
/* All buttons are purple and turn to blue with slight shaddow and transisitoon  */
.nav a,
.button,
button.button,
button {   
  border-radius: 999rem;          /* pill shape by curving raduis of edges  */
  text-decoration: none;          /*removes the underline */
  font-weight: 500;               /* semi bold */
  color: #FFFFFF;               /*changes original black to white only for buttons */
  background-color: #822C91;      /* purple bakcground changes to blue  */
  padding: 0.35rem 0.75rem;    /* padding around for extra space for ease of reading */
  font-size: 0.95rem;    
  border: none;    /*to remove border off the sumbit and restart */

  transition:                      /*again transitions where leanred last year*/
    transform 0.18s ease,          /*the ease makes the change in the color and hover more pleasant */
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

/* Hover effects  */
.nav a:hover,
.button:hover,
button:hover,
.nav a:focus-visible,
.button:focus-visible,
button:focus-visible {
  background-color: #0053A3;      /* changes background to dark blue */
  transform: translateY(-0.125rem) scale(1.03); /*makes it go up a little */
  box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.18); /*applies a very slight shadow for ui effects */
}

/* when pressed */
.nav a:active,
.button:active,
button:active {
  transform: scale(0.98);  /* changes size to smaller as if pushing back */
  background-color:#34C3EF;  /*color lighter blue */
}

/*INPUTS TEXT-----------------------------------------------------------------------------------*/
/* Only text-like inputs get the big full-width styling */
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
textarea {
  width: 100%;
  max-width: 32rem;
  font-family: "Nunito", sans-serif;
  font-size: 1rem;
  color: #000000;
  padding: 0.6rem 0.8rem;
  border-radius: 0.75rem;
  border: 0.12rem solid #0053A3;
  background-color: #FFFFFF;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}


/* Input hover */
input:hover,
textarea:hover {
  border-color: #822C91;           /*changes the border to purple */
}

/* Input focus keyboard and click */
input:focus,
textarea:focus {
  border-color: #34C3EF;           /* changes the border to light blue */
  outline: none;   /*removes the black outline */
  box-shadow: 0 0 0 0.2rem rgba(52, 195, 239, 0.35);   /*applies a slight shadow for cool effects*/
}

/*LABELS-----------------------------------------------------------------------------------*/
/*labels for tbles and card info  no interactive effects */
label {
  font-weight: 600;
}


/*Radios-----------------------------------------------------------------------------------*/
/* Radios */
input[type="radio"] {
  accent-color: #822C91;           /* purple check */
  transform: scale(1.1);              /*scales up */
}

/* Radio hover feedback via label */
input[type="radio"] + label {     
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  transition: color 0.18s ease;
}

input[type="radio"] + label:hover,
input[type="radio"]:focus-visible + label {
  color: #0053A3;                  /* dark blue */
  outline: none;
}

input[type="radio"]:checked + label {
  color: #822C91;                  /* purple when selected */
  font-weight: 700;
}








/*................................
IMAGES
..................................*/

/*Standard sizing for images */
img { 
  max-width: 60%;  /*all images are big so 60% is ideal size */
  height: auto;     /*so it doesnt alter look */
  display: block;
  margin-bottom: 1rem ;
}

/* IMAGERY GALLERY */ 
/*i used this tutorial for help https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp*/
.imagery-grid {
  display: grid;    /*displays as a grid */
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); /*makes each image fit into a box */
  gap: 0.75rem; /*adds gaps betwenn images */
}

.imagery-grid img {
  width: 100%;           /*all the width and hieght auto*/
  aspect-ratio: 1 / 1;   /* square images */
  object-fit: cover;
  border-radius: 0.75rem;
}


/* CONTENT IMAGES  */
/* Rounds or curves images inside articles */
article img,
.img-link {
  border-radius: 0.75rem;
}

/* IMAGE AS LINK*/
a .img-link {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  border-radius: 0.75rem;
}

/* Hover effects */
a:hover .img-link,
a:focus-visible .img-link {
  transform: translateY(-0.15rem) scale(1.02);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
  outline-offset: 0.25rem;
}

/* Active pressed */
a:active .img-link {
  transform: scale(0.98);
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.15);
}

article img {
  width: 100%;
  border-radius: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}


/*images scroll in horizontal galeery way */
.gallery-wrap{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
}


/* Scroll container */
.gallery{
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x;
  padding: 0.5rem;
  border-radius: 1rem;
  scroll-behavior: smooth;
}

/* Each slide */
.gallery-item{
  flex: 0 0 auto;
  width: min(40rem);
  scroll-snap-align: start;
}

.gallery-item img{
  width: 100%;
  display: block;
  border-radius: 1rem;
}

.programs-img{
  display: block;      /* removes inline spacing */
  margin: 0 auto;      /* centers horizontally */
}
/*................................
PAGEs and SECTION LAYOUT
..................................*/

/*section cards */
section {
  border-radius: 1rem;
  margin-top: 1.5rem;
}

/* Card look for each .element block */
.element {
  border: 0.12rem solid #0053A3; /* subtle blue */
  border-radius: 1rem;
  padding: 1.25rem;
}

/*   CODE BLOCKS  */
code {
  display: block;
  background-color: rgba(0, 0, 0, 0.08); /* soft grey */
  border-radius: 0.75rem;
  padding: 1rem;
  margin-top: 0.5rem;
  overflow-x: auto;

  font-family: "Nunito", sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* PRODUCT / SERVICE CARDS  */
article {
  background-color: #FFFFFF;
  border: 0.12rem solid rgba(130, 44, 145, 0.18); /* subtle purple */
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/* Hover lift */
article:hover {
  transform: translateY(-0.15rem);
  box-shadow: 0 0.9rem 1.6rem rgba(0, 0, 0, 0.14);
  border-color: rgba(0, 83, 163, 0.35);
}

/* PAYMENT FORM BOX */
.payment-form {
  background-color: #FFFFFF;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08);
}

/* CHECKOUT TABLE */
table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.08);
}

th,
td {
  padding: 0.9rem;
  text-align: left;
  border-bottom: 0.08rem solid rgba(0, 0, 0, 0.12);
  font-family: "Nunito", sans-serif;
}

th {
  background-color: #0053A3; /* dark blue */
  color: #FFFFFF;
}

article h4{
    color:#0053A3;
    text-align: center;
}


.selected-program td {
  background-color: rgba(166, 202, 78, 0.25); /* green tint */
  font-weight: 700;
}

.details-card1,
.details-card3{
  background-color: #34C3EF;
  outline: none;
  border-radius: 0%;
}

.details-card2{
  background-color: #A6CA4E;
  outline: none;
  border-radius: 0%;
}

.checkout-cart{
  border: none;
}








/*...............................
BRAND COMPONENTS
.............................*/
/*brand fonts */
.font-sample.archivo {
  font-family: "Archivo Black", sans-serif;
}

.font-sample.coming-soon {
  font-family: "Coming Soon", cursive;
}

.font-sample.sour-gummy {
  font-family: "Sour Gummy", cursive;
}

.font-sample.nunito {
  font-family: "Nunito", sans-serif;
}

/*COLOUR PALETTE*/

/* Swatch base */
.swatch {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
  border: 0.12rem solid rgba(0, 0, 0, 0.15);
}

/* Individual colors */
.swatch.white { background-color: #FFFFFF; }
.swatch.purple { background-color: #822C91; }
.swatch.blue { background-color: #0053A3; }
.swatch.light-blue { background-color: #34C3EF; }
.swatch.green { background-color: #A6CA4E; }
.swatch.black { background-color: #000000; }










/*..............................
Responsiveness
................................*/

/*MOBILE*/
@media (max-width: 26.25rem) { /*420px */
  .nav a,
  .button,
  button {
    font-size: 0.78rem;
    padding: 0.28rem 0.6rem;
  }
   .navbar {
    width: 2.5rem;
  }
}


/*Tablet*/
@media (max-width: 48rem) { /*768px */
  .nav a,
  .button,
  button {
    font-size: 0.85rem;
    padding: 0.32rem 0.65rem;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/*DESKTOP*/
/* Larger blocks on desktop screens */
@media (min-width: 64rem) { /* 1024px */
  .imagery-grid {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }
}