/* STYLING FOR ALL HOME CONTROLLER ACTIONS */

* {
  /* Give full control over margins and block sizes */
  box-sizing: border-box;
  margin: 0;
}

body {
  font-size: 100%;   /* Allow for uniform text sizing across browsers (pixels / 16 = em) */
}

/* COMMON TABLE FORMATTING  */

.landing-table,
#roadmap-table {
  margin: 0 0 var(--post-element-spacing);   /* Conform to uniform element spacing */
  border-collapse: collapse;
  
  /* Common table variables */
  --table-header-colour: var(--special-border-colour);   /* Header/division lines */
}
#roadmap-table {
  margin: 0 auto var(--post-element-spacing);   /* Conform to uniform element spacing */
}
.landing-table th,
#roadmap-table th {   /* Table headers */
  padding: var(--intra-element-spacing) 1rem;
  background-color: var(--table-header-colour);
  color: var(--text-accent);
}
.landing-table tr:nth-child(odd),
#roadmap-table tr:nth-child(odd) {   /* Zebra stripes (based on theme) */  
  background-color: var(--nav-link);
}
.landing-table tr:nth-child(even),
#roadmap-table tr:nth-child(even) {   /* Zebra stripes (based on theme) */
  background-color: var(--special-border-accent);
}
.landing-table td,
#roadmap-table td {  
  border-bottom: solid 1px var(--table-header-colour);
  padding: var(--intra-element-spacing) 1rem;
  vertical-align: top;
}
.landing-table td:first-child,
#roadmap-table td:first-child {   /* Ensure first and last columns do no wrap */
  white-space: nowrap;
}


/* HOME - ROADMAP */

#roadmap-table td:first-child {
  text-align: center;
}
#roadmap-table td.nowrap,
#roadmap-table td:last-child {   /* Allow for custom control of centered, non-wrapping columns */
  text-align: center;
  white-space: nowrap;
}


/* HOME - ABOUT */

p.before-form {   /* Sized to match the forms they preclude */
  width: var(--form-about-width);
  margin: 0 auto var(--post-element-spacing);
}

.about-form-standard {   /* Standard styling for about page forms */
  width: var(--form-about-width);
  margin: 0 auto var(--post-section-spacing);
  outline: solid 1px var(--form-outline);
  border: solid 2px var(--form-border);
  border-radius: 5px;
  padding: 1rem;
  background-color: var(--form-bg-colour);
}
/* TODO: Test values for light theme (no border change) */
.about-form-standard:hover,
#personal-links:hover {
  outline: var(--form-outline-hover);
  border: var(--form-border-hover);
}
/* TODO: Test values for light theme (strong outline disappears) */
.about-form-standard:focus-within {
  outline: var(--form-outline-focus);
  border: var(--form-border-focus);

  /* TODO: Add width of outline to values (???) */
  box-shadow: var(--form-shadow-focus);
}
.about-form-standard .form-row-stack {   /* Styling for pairings of label/form elements */
  margin-bottom: 1rem;

  /* Set up as vertical flexboxes for stacking */
  display: flex;
  flex-flow: column nowrap;
}
.about-form-standard .form-row-stack span {   /* Ensure validation star is next to form label */
  display: inline;
}
.about-form-standard .form-row-stack input,
.about-form-standard .form-row-stack select,
.about-form-standard .form-row-stack option,
.about-form-standard .form-row-stack textarea {   /* Common styling for form fields */
  border: solid 2px var(--nav-border);
  border-radius: 5px;
  padding: 0.5rem;
  background-color: var(--form-field-bg);
  
  font-size: 1.05rem;
  color: var(--form-text-main);
}
.about-form-standard .form-row-stack option:checked {
  background: var(--form-field-outline-focus);
  color: var(--form-text-accent);
}
.about-form-standard .form-row-stack input:hover,
.about-form-standard .form-row-stack select:hover,
.about-form-standard .form-row-stack option:hover,
.about-form-standard .form-row-stack textarea:hover {   /* Change border background colours */
  border: solid 2px var(--form-field-border);
  background-color: var(--form-field-bg-active);
  color: var(--form-text-accent);
}
.about-form-standard .form-row-stack input:focus-within,
.about-form-standard .form-row-stack select:focus-within,
.about-form-standard .form-row-stack textarea:focus-within {   /* Add outline and background coloring for extra effect */
  outline: solid 2px var(--form-field-outline-focus);   /* TODO: Verify 'Only good for dark mode' */
  border: solid 2px var(--form-field-border-focus);     /* TODO: Verify 'Only good for dark mode' */
  background-color: var(--form-field-bg-active);
  color: var(--form-text-accent);
}
.about-form-standard .form-row-stack textarea {   /* Set default and max/min sizing */
  /* TODO: Responsive media rule candidate */
  height: 5rem;
  min-height: 3rem;
  max-height: 10vh;
  resize: vertical;

  scrollbar-width: thin;   /* Ensure thin scrollbar appears if needed */
}
.about-form-standard button {   /* Common styling for submit/clear buttons */
  width: fit-content;
  margin-right: 0.5rem;
  border: solid 2px var(--form-button-border);
  border-radius: 0.5rem;
  padding: 0.5rem;

  background-color: var(--form-button-bg);
  color: var(--form-button-border);
  transition: 0.5s;
}
.about-form-standard button:hover {
  box-shadow: 2px 2px 5px var(--form-button-shadow), -2px -2px 5px var(--form-button-shadow);
}


/* RESPONSIVE MEDIA RULES */

@media only screen and (min-width: 768px) {}

@media only screen and (orientation: landscape) and (min-width: 768px)  {
  .landing-table {
    max-width: 60%;
  }

  #roadmap-table {
    max-width: 75%;
  }
}

@media only screen and (orientation: portrait) and (min-width: 768px)  {
  
  /* HOME VIEW - INDEX  */
  
  .landing-table {
    max-width: 80%;
  }

  #roadmap-table {
    max-width: 100%;
  }

  h3 + p.before-form {
    width: 75%;
  }

  .about-form-standard {   /* Change form sizing */
    width: 75%;
  }
}

/* .NET Default */
@media only screen and (min-width: 501px) and (max-width: 768px) {
  /* HOME VIEW - INDEX  */

  .about-form-standard {   /* Change form sizing */
    width: 75%;
  }

  #roadmap-table td.nowrap {
    white-space: normal;
  }
}

@media only screen and (max-width: 500px) {

  /* HOME VIEW - INDEX  */

  .about-form-standard {   /* Change form sizing */
    width: 75%;
  }

  #roadmap-table td:first-child,
  #roadmap-table td.nowrap {
    white-space: normal;
  }
}