/* ============================ */
/*  "EVERY PAGE" STYLE DEFAULTS */
/* ============================ */

/*  ---------- GLOBAL BOX-SIZING FOR !ALL! ELEMENTS ---------- */
*, *::before, *::after
{
  box-sizing: border-box; /* Makes width/height include padding & borders so elements never unexpectedly grow beyond their declared size. */
}

/*  ---------- OTHER "BASE ELEMENT" DEFAULTS ---------- */
p, .paragraph
{
  font-family: var(--font-base);
  color: var(--font-color);
  font-size: var(--font-size-paragraph);
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
  margin-top: var(--space-none);
  margin-bottom: var(--space-s);
}

ol, ul
{
  margin-top: var(--space-none);
  margin-bottom: var(--space-s);
}

li
{
  font-family: var(--font-base); /* Should be the same as <p> or .paragraph styling (excluding margins, which were narrowed for "compact, simple" lists). */
  color: var(--font-color);
  font-size: var(--font-size-paragraph);
  font-weight: normal;
  text-decoration: none;
  font-style: normal;

  margin-top: var(--space-none); /* No top/bottom margin for this "compact style" list. */
  margin-bottom: var(--space-none);
}

hr 
{
  border: none;
  border-top: 1px solid var(--color-black);
  width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
}

a
{
  color: var(--color-accent-orange);
  font-weight: bold;
  text-decoration: underline;
}

button, .button-link /* Button-Link class is an external link styled to look like default button. */
{
  font-family: var(--font-base);
  font-size: var(--font-size-paragraph);
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-accent-orange);
  border: 1px solid var(--color-black); /* 1px black border. */
  padding: var(--space-xs) var(--space-xs); /* Fixed internal padding (vertical | horizontal). */
  margin-top: var(--space-s);
  margin-bottom: var(--space-s); 
  cursor: pointer; /* Show the "clickable hand" cursor on hover, signaling interactivity. */
  text-decoration: none; /* Remove the link underline default. */
  display: inline-block; /* Lets an <a> honor the padding/margin like a button. */
  line-height: 1.5; /* Matches the 1.5 in LAYOUT CSS. Force normalize height so <button> and <a class="button-link"> render identically (they compute text line-box height differently by default, making the <a> a couple px taller). */
}

button:hover, button:focus, .button-link:hover, .button-link:focus
{
  background-color: var(--color-accent-orange-light);
}

/*  ---------- HEADER & FOOTER NAV HIGHLIGHTING DEFAULTS ---------- */
body.page-home nav a[href="index.html"],  /* Used on the navigation bars (top & bottom): active page link text will be accented. */
body.page-tutoring nav a[href="tutoring.html"],
body.page-classes nav a[href="classes.html"],
body.page-testimonials nav a[href="testimonials.html"],
body.page-about nav a[href="about.html"],
body.page-curiosities nav a[href="curiosities.html"] 
{
  color: var(--color-accent-orange-light); /* Current page link will be accented. */
}