/*
  File:      homepage.css
  Author:    Arthur L. Farnsworth
  Purpose:   Cascading stylesheet for Nancy's Liv-N-Rejuvenate site's home page
  Created:   25 Sep 2026  From livnrejuvenate.css by splitting off page-specific code
  Revisions: 
  Comments:  This is the CSS that is specific to the home page
             The default (no content-based media query needed) handles at least the mobile case, with the user needing to rotate the device to landscape mode 
             below about 278px width, as that's when the top-of-page banner border hits the LNR text.
*/
  P {
    padding: 0em 0em 0em 1em; /* TRBL */
    text-align: left;
  }
  #idHPContentContainer {     /* The parent container for small screens is flexbox */
    display: flex;            /* 8/17 */
    flex-direction: column;   /* Need this here in parent element */
    flex-wrap: wrap;
  }
  #idHPItem1 {                /* The photo, name, and credentials */
    align-items: center;      /* 8/19 to center on cross axis (row) */
    border: none;             /* No border in mobile version */
    display: flex;            /* 8/19 */
    flex-direction: column;
    margin-top: 1em;
    text-align: center;       /* Horizontally center the below-image text */
    width: auto;              /* Auto is default value (browser calculates width) */
  }
  #idHPItem1 IMG {            /* NCL head shot */
    background-color: yellow; /* 8/2 */
    border: 4px solid black;  /* Create a "picture frame" */
    display: flex;            /* 8/17 test */
    padding: 4px;
  }
  #idHPItem2 {                /* The welcome message */
    border: none;
    display: flex;
    margin-top: 2em;
    width: 90%;               /* Auto is default value (browser calculates width) */
  }
  #idHPItem3 {                /* Added 8/19 to replace yellow bottom border on Section 2 */
    display: flex;
  }
  #idHPItem3 HR {
    border: 10px solid yellow;
    border-radius: 10px;
    padding: 0;
    width: 90%;
  }
  #idHPItem4 {                /* Nancy background story */
    border: none;
    display: flex;            /* Child element of parent grid container */
    margin-top: 1em;
    width: 90%;               /* Auto is default value (browser calculates width) */
  }
@media screen and (min-width:760px) {
  P {
    padding: 0em 0em 0em 1em; /* TRBL */
    text-align: left;
  }
  #idHPContentContainer {           /* The parent container for large screens is grid */
    column-gap: 3em;                /* Space between the two columns */
    display: grid;
    grid-template-columns: 30% 60%;
    margin-left: 3em;
    margin-right: 3em;
    margin-top: 5em;                /* Space down from the NAV section */
  }
  #idHPItem1 {                /* The photo, name, and credentials */
    border: thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;     /* Image starts on row 1 and spans 1 row */
    margin-top: 3em;
    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) */
  }
  #idHPItem1 IMG {            /* NCL head shot */
    background-color: yellow;
    border: 4px solid black;
    display: grid;
    padding: 4px;
  }
  #idHPItem2 {                /* The welcome message */
    border: none;
    display: grid;            /* Child element of parent grid container */
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;     /* Image starts on row 1 and spans 1 row */
    margin-top: 3em;
    width: 90%;               /* Auto is default value (browser calculates width) */
  }
  #idHPItem3 {                /* Item 3 is the yellow divider line */
    display: none;            /* No item 2 (yellow divider line) in big-screen layout */
  }
  #idHPItem4 {                /* Nancy background story */
    border: none;             /* thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 1 / span 2;  /* Was span 1 <= 8/19 */
    grid-row: 2 / span 1;     /* Story starts on row 1 and spans 1 row */
    margin-top: 3em;
    width: 100%;              /* was 90% through 8/19 Auto is default value (browser calculates width) */
  }
}