/*
  File:      livnrejuvenate.css
  Author:    Arthur L. Farnsworth
  Purpose:   Cascading stylesheet for Nancy's Liv-N-Rejuvenate site
  Created:   04 Dec 2025
  Revisions: 13 Dec 2025  Get custom fonts working
             31 Dec 2025  Flesh out page title/subtitle classes, start work on ContactInfo ID
             03 Jan 2026  Nancy wants yellow, not "gold," for the border
             05 Jan 2026  Start adding A.Nav decorations
             24 Jan 2026  Try flex for NAV bar, replace rgb colors with color-safe names for clarity
             27 Jan 2026  Split resume-specific code to separate file
             22 Feb 2026  Add MAIN P left & right margin settings
             25 Feb 2026  WebAIM WAVE alerts that there is no heading structure, so replace PageTitle and PageSubtitle
                          classes with H1 and H2.
             13 Mar 2026  Add new idApptFormTitle, office photos section
             16 Apr 2026  Add clsPageIntroParagraph
             24 Apr 2026  Add idCustom404Page
             30 Apr 2026  Add style idRequestReponse
             12 May 2026  Add clsSTMC from I2CSS3 final project, material for the new Affiliates page
  Comments:  The format param on the custom font src line is optional
             CLASS selectors start with '.', can be used on multiple tags
             ID selectors start with '#', are specific to one tag in the document
*/
/*
  Make available the custom fonts
*/
@font-face {
  font-family: 'Gotham Light';
  src: url('../fonts/gotham light regular.otf') format('opentype');
}
@font-face {
  font-family: Zapfino;
  src: url('../fonts/zapfino.ttf') format('truetype');   /* TTF for Safari, Android, iOS */
}
/*
  The following class is used on all pages
*/
.clsSTMC {      /* For "Skip to main content" links only available on <TAB> hit */
  position: absolute;
  left: -500px;   /* Reduced from 1000px on 5/12/2026 to experiment */
}
/*
  HTML element type selectors
  
  First, the BODY tag, which encompasses the HEADER, MAIN, and FOOTER sections
*/
BODY {
  background-color: rgb(51,255,153);        /* The nice light green */
  color: black;                             /* Text color = black */
  font-family: 'Gotham Light', sans-serif;  /* Gotham or yuck */
  -webkit-font-smoothing: antialiased;      /* Trying on 5/20/26 for Apple-based Zapfino issue */
  -moz-osx-font-smoothing: grayscale;       /* Trying on 5/20/26 for Apple-based Zapfino issue, on W10 box "Unknown property ‘-moz-osx-font-smoothing’.  Declaration dropped." */
}
  HEADER {                                    /* This encompasses the page title/subtitle areas */
    font-family: Zapfino, sans-serif;
    text-align: center;
  }
    HEADER H1 {         /* Was .PageTitle */
      border: 15px solid yellow;
      font-size: 200%;
      font-weight: bold;
      height: 1.5em;
      margin-top: 0px;      /* Was -10px; before normalize.css */
      padding-bottom: 0em;  /* 0em is fine for Windows platform, but not for MacIntel, where it needs to be 1.5em (tested to look good in Firefox and Safari) */
      padding-top: 2em;     /* 2em is fine for Windows platform, but should be 1.5em (to match padding-bottom) on Mac OS, so added to JS code */
    }
    HEADER H2 {         /* Was .PageSubtitle  */
      font-size: 150%;
      font-weight: bold;
      height: 60px;
      margin-top: 3em;
    }
/*
  After the HEADER page title and subtitle areas, move down to the NAV bar
*/
    NAV A {                       /* Default styling for anchor links in NAV section.  Testing on 1/24/26 (code from A.Nav:link below). */
      background-color: yellow;
      border: 1px solid black;
      border-radius: 8px;
      color: black;               /* Text color */
      font-size: 100%;
      padding: 5px;
      text-align: center;         /* Horizontal alignment */
      text-decoration: none;      /* Added 1/17/26 per Chuck's class */
    }
    .NavBar {                 /* This is the parent.  Flex code added for testing on 1/24/26 */
      display: flex;
      flex-direction: row;    /* =default direction */
      flex-wrap: nowrap;      /* =squish them all together */
      justify-content: space-evenly;
      list-style-type: none;  /* Kill the LI markers */
    }
    .NavItem {
      /*display: inline-block;  /* Original NavItem code *//* Put 'em side by side.  inline-block also hides the <LI> symbols. */
      /*width: 15%;             /* Original NavItem code */
      /*border: 1px solid black;*/
  /*    border-radius: 8px;*/
    }
    .CurrentNavItem {       /* Add this for testing on 1/21/2026 based on Coursera lesson */
      /*background-color: White;/*    /* Didn't fill the button w/ curved corners, just the rectangle */
      /*border: 3px solid black;*/
      text-transform: uppercase;
      /*font-size: 150%;*/  /* Out 1/24/26 */
      font-weight: bold;
    }
     A.Nav:link {                 /* A normal, unvisited link */
/*    background-color: rgb(255,255,0); /* = #FFFF00, Yellow */
/*    border: 1px solid rgb(0,0,0);     /* black; */
/*    border-radius: 8px;
    color: black;                     /* Text color */
/*    display: inline-block;*/
/*    font-size: 100%;
    padding: 5px;
    text-align: center;               /* Horizontal alignment */
/*    text-decoration: none;            /* Added 1/17/26 per Chuck's class */
    }
    A.Nav:visited {               /* A link the user has visited */
      font-size: 100%;
      font-weight: normal;
    }
    A.Nav:hover {                 /* A link when the user mouses over it.  MUST come after a:link and a:visited. */
      font-size: 125%;
      font-weight: bold;
    }
    A.Nav:focus {                 /* A link when the user tabs to it */
      font-size: 100%;
      font-weight: bold;
    }
    A.Nav:active {                /* A link the moment it is clicked.  MUST come after a:hover. */
      background-color: white;
      font-weight: bold;
    }
  .clsPageIntroParagraph {      /* This is for the introduction (description) paragraph at the top of most pages */
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 3em;
  }
  #idCustom404Page {
    font-size: 200%;
    margin-left: 5em;
    margin-right: 5em;
    margin-top: 5em;
    text-align: center;
  }
  #idRequestResponseDiv {
    font-size: 125%;
/*    margin-left: 5em;*/
/*    margin-right: 5em;*/
    margin-top: 1em;
    padding: 2em;
  }
  #idRequestResponseTable {
    border: 3px double black;
    margin-bottom: 3em;
    margin-left: auto;      /* Was 32% */
    margin-right: auto;     /* New on 5/1 */
    margin-top: 3em;
    width: auto;
  }
  #idRequestResponseTableLeftColumn {
    border-right: 2px solid black;
    color: black;
    padding-left: 0.5em;
    padding-right: 1em;
    text-align: left;
    font-weight: bold;
  }
  #idRequestResponseTableRightColumn {
    /*border-left: 1px solid black;*/
    padding-left: 1em;
    padding-right: 0.5em;
    text-align: left;
    font-weight: normal;
  }
  #idRequestResponseReturnButton {
    display:block;
    margin: 0 auto;
    width: 18em;
    /*font-size: 125%;
    margin-left: 37%  ;
    margin-top: 1em;
    /*padding: 2em;*/
  }
  FOOTER {
    font-size: 10pt;
    margin-top: 5em;            /* Space it down from the main content */
    text-align: center;
  }
/*
  Now address page-specific items other than the major sections handled above
*/
/*
  First, the Contact Us page
*/
#idContactInfo {            /* This is the grid parent element (grid container) */
  display: grid;
  gap: 5px;                             /* Define size of gap between rows and columns.  Formerly grid-gap. */
  grid-template-columns: 10% 10% 20%;   /* 20%;  1/2/26: move map to below other content for better appearance on mobile */
  /*grid-template-columns: 1fr 1fr 2fr;   /* 1/8/26: looks nice, but takes up entire width, which is too much */
  /*grid-template-rows: 50% 25% 25%;      /* Added 1/6/26 No apparent impact */
}
#idR1C1 {                   /* Nancy photo, and it occupies three rows */
 /* align-items: center;*/      /* Vertical alignment */
  border: thin solid black; /* Set up all four borders here */
  display: grid;            /* Child element of parent grid container */
  grid-row: 1 / span 3;     /* Image starts on row 1 and spans 3 rows */
  place-items: center;      /* Horizontally center the image */
  text-align: center;       /* Horizontally center the below-image text */
  width: auto;              /* Auto is default value (browser calculates width) */
}
#idR1C2 {                   /* The e-mail button image(s) */
/*  align-items: center;*/      /* Vertical alignment */
  border: thin solid black; /* Set up all four borders here */
  display: grid;            /* Child element of parent grid container */
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  padding-top: 4px;         /* 13Mar26  For better vertical placement */
  place-items: center;      /* Horizontally center the image */
  width: auto;              /* Auto is default value (browser calculates width) */
}
#idR1C3 {                   /* The Contact via e-mail text & mailto link */
  align-items: center;      /* Vertical alignment */
  border: thin solid black; /* Set up all four borders here */
  display: grid;            /* Child element of parent grid container */
  font-weight: normal;
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
  /*justify-content: flex-start;*/
  padding-left: 5px;
}
#idR2C2 {                   /* The mailbox image */
/*  align-items: center;*/      /* Vertical alignment */
  border: thin solid black; /* Set up all four borders here */
  display: grid;            /* Child element of parent grid container */
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  /*justify-content: flex-start;*/
  /*max-width: 90px;          /* Image is 1200x1200.  Limit to 90 for scaling.*/ /* Didn't work (1/3/26) */
  place-items: center;      /* Horizontally center the image */
  width: 100%;
}
#idR2C3 {                   /* The postal address cell */
  align-items: center;
  border: thin solid black; /* Set up all four borders here */
  display: grid;            /* Child element of parent grid container */
  font-weight: normal;
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
  padding-left: 5px;
}
#idR3C2 {                   /* The telephone image */
/*  align-items: center;*/      /* Vertical alignment */
  border: thin solid black; /* Settings for the four "box" borders */
  display: grid;            /* Child element of parent grid container */
  grid-column: 2 / span 1;
  grid-row: 3 / span 1;
  height: 100%;
/*  max-height: 100%;*/
  overflow: hidden;
  place-items: center;      /* Horizontally center the image */
}
#idR3C3 {                   /* The telephone number */
  align-items: center;      /* Vertical alignment */
  border: thin solid black; /* Settings for the four "box" borders */
  display: grid;            /* Child element of parent grid container */
  grid-column: 3 / span 1;
  grid-row: 3 / span 1;
  padding-left: 5px;
}
#idR4C1 {                   /* R4C1 is map */
/*  align-items: center;*/      /* Vertical alignment */
  border: thin solid black; /* Settings for the four "box" borders */
  display: grid;            /* Child element of parent grid container */
  grid-column: 1 / span 3;
  grid-row: 4 / span 1;
}
/*
  Second, the About Us page
*/
#AboutUsContentSection {            /* This is the parent section (grid container) which encloses all the main content */
  column-gap: 1em;
  display: grid;                    /* inline-block */
  grid-template-columns: 50% 50%;
  height: 40%;                      /* Experiment with optimal height */
  margin-left: 0px;
  margin-top: 5em;                  /* Space down from the NAV section */
  width: 100%;
}
#AboutUsResumeSection {             /* Resume text child subsection */
  background-color: #F4EFEF;  /* was White; */
  border: thin solid black;         /* Set up all four borders here */
  display: grid;                    /* Child element of parent grid container */
  margin-left: 1em;
  padding: 5px;
}
#AboutUsVideoSection {              /* Video playback child subsection */
/*  border: thin solid black; /* Set up all four borders here */
  display: grid;                    /* Child element of parent grid container */
  margin-top: 1100px;               /* Force the text to be just above the VIDEO tag */
  text-align: center;
}
/*
  Third, the Appointments page
*/
.clsPageGridContainer {             /* Used on Appointments, Podcast, and Bookings pages */
  display: grid;
  grid-template-columns: 40% 40%;
  justify-content: space-evenly;
  row-gap: 1em;                     /* Space between images on the horizontal plane */
}
#idApptForm {
  background-color: #EEEEEE;
  border: thin solid black;
  margin-left: 0%;
  margin-top: 50px;
  padding: 10px;
  width: auto;      /* 40%; */
}
/*
  The following four classes are also used for the question submittal form on the podcast page and the event request form on the bookings page
*/
.clsFormTitle {                     /* I used the inspector to get all of these! */
  border: 1px solid black;
  font-size: larger;
  font-weight: bold;
  margin-bottom: 32px;
  padding: 3px 0px;                 /* T&B L&R */
  text-align: center;
}
.clsFormTextInput {                 /* For Name and E-mail TEXT fields */
  box-sizing: border-box;
  width: 80%;                       /* Leave space for LABELs and asterisks */
}
.clsFormTA {                        /* For Notes TEXTAREA field */
  box-sizing: border-box;
  width: 90%;
}
.clsFormButtons {
  margin-bottom: 1em;
  margin-top: 2em;
  text-align: center;
}
#idApptsOfficePhotos {              /* This is the encompassing pane */
  background-color: #EEEEEE;
  border: thin solid black;
  margin-top: 50px;
  padding: 10px;
  width: auto;      /* 40%; */
}
.clsApptsOfficePhotos {             /* Specifics for the photos */
  background-color: yellow;
  border: 4px solid black;          /* Create a "picture frame" */
  padding: 4px;
  width: 46%;       /* 100px; */
}
#idApptsOfficePhotosTitle {                  /* I used the inspector to get all of these! */
  border: 1px solid black;
  font-size: larger;
  font-weight: bold;
  margin-bottom: 32px;
  padding: 3px 0px;                 /* T&B L&R */
  text-align: center;
}
/*
  Fourth, the Podcast page
*/
#idPodcastQuestionForm {
  background-color: #EEEEEE;
  border: thin solid black;
  margin-left: 0%; /*10%;*/
  /*margin-right: 10%;*/
  margin-top: 50px;
  padding: 10px;
  width: auto;      /* 40%; */
}
#idPandBQuestionFormInstructions {    /* Also used on Bookings page */
  align-items: center;        /* Vertical alignment */
  font-size: larger;
  padding-top: 9em;
}
#idPodcastTitleFlexContainer {    /* The flexbox parent for just the title screen image */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;              /* =squish them all together */
  justify-content: center;        /* Horizontal axis */
  margin-bottom: 3em;
  margin-top: 5em;
}
#idPodcastTitleScreen {
  border: thin solid black;     /* Set up all four borders here */
  width: 320px;
}
#idPodcastTableFlexContainer {    /* The flexbox parent for just the title screen image */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;              /* =squish them all together */
  justify-content: center;        /* Horizontal axis */
  margin-bottom: 3em;
  margin-top: 5em;
}
#idPodcastTable {
  border: 3px double black;
  border-collapse: collapse;
  text-align: center;
  width: 85%;
}
#idPodcastTable CAPTION {
  font-weight: bold;
}
#idPodcastTable td, th {
  border: 1px solid black;
  padding: 2px;
}
#idPodcastTable IMG {         /* For the YouTube logo images */
  padding-top: 5px;
}
/*
  Fourth, the Affiliates page
*/
#idAffiliatesPageGridContainer {
/*  background-color: LightYellow;*/
  display: grid;
  grid-template-columns: 40% 40%;
  justify-content: space-evenly;
  margin-top: 5em;
  row-gap: 1em;          /* Space between images on the horizontal plane */
  text-align: center;
} 
#idAffiliatesPageGridContainer IMG {
  background-color: #ffffff;
  border: 4px solid gray;
  /*height: 120px;                          /* Default to 25% of 480 */
  margin-top: 1em;
  opacity: 1;
  padding: 6px;
  width: 70%;
}