/* _LAYOUT STYLING */

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

html {
  font-size: 16px;
  font-family: var(--font-family-main), sans-serif;   /* Verdana for 'standard' text */
  
  scrollbar-width: thin;
  scroll-behavior: smooth;
  scrollbar-color: var(--nav-link-active) var(--nav-border);   /* Mimic navbar look */
  
  
  --debug-border: solid 1px deeppink;  /* DEBUG use only */
  --debug-border2: solid 1px limegreen;  /* DEBUG use only */
  
  
  
  
  /* SEPARATE VARIABLES THAT CHANGE WITH THEM FROM COMMON STYLING (SUCH AS SIZING)!!! */  /* TODO: Reword this mess! */
  
  /* COMMON RESPONSIVE VARIABLES */
  
  /* Responsive Sizing Variables */
  --intra-element-spacing: 0.25rem;
  --post-element-spacing: 1rem;       /* Standard spacing after an element */
  --post-section-spacing: 2rem;       /* Standard spacing after a page section */
  
  --form-about-width: 50%;  
  
  /* Common Font Styling */
  
  --font-family-main: Verdana;          /* Verdana (sans-serif) for 'standard' text */;
  /* TODO: Add a back up font??? */
  --font-header: Gothic L, serif;       /* Georgia */   /* Serif TODO: Try 'palatino' as well */
  --font-header-family: serif;          /* TODO: Find a way to include this! */
  --font-family-blog: Comic Sans MS, sans-serif;
  --font-family-blog-heading: Bookman, sarif;
  /*--font-family-blog-header: Courier New, Courier, monospace;*/
  
  
  /* BASE THEME VARIABLES */
  
  --main-theme-01: #2569b2;   /* Main nav border/footer */                /* Matched shade from sky above (landscape orientation) navbar */
  --main-theme-02: white;     /* Nav link */
  --main-theme-03: #6cbbff;   /* Active nav link */
  --main-theme-04: #0d6efd;   /* Special nav border (on hover effect) */
  --main-theme-05: aliceblue; /* Special nav border accent */  
  --main-theme-06: white;     /* Page bg */
    
  /* TODO: Define form colour variables?? */
  
  /* TODO: Determine if following colours are needed: */
  --main-theme-09: aliceblue;
  --main-theme-11: #f7f7f7;   /* Compliment to nav border/footer */
  
  --text-main: black;
  --text-accent: white;
  --text-link-hover: var(--main-theme-03);


  /* Default Theme Variables */
  
  background-color: var(--main-theme-06);
  --theme-bg: rgba(0, 0, 0, 0);   /* Fully transparent to match background (used by #view-container) */
  --special-border-colour: var(--main-theme-04);
  --special-border-accent: var(--main-theme-05);
  
  
  --nav-border: var(--main-theme-01);
  --nav-link: var(--main-theme-02);
  --nav-link-active: var(--main-theme-03);

  /* Set forms to mimic look of nav bar??? */  /* TODO: Check colours before bringing back forms!!! */
  --form-border: var(--nav-border);
  --form-bg-colour: var(--nav-link-active);
  --form-text-main: var(--text-main);
  --form-text-accent: var(--text-main);   /* Main colour is still best contrast */
  
  --form-outline: none;         /* Default theme does not need an outline */
  --form-outline-hover: none;   /* Default theme does not need an outline */
  --form-outline-focus: none;   /* Default theme does not need an outline */  
  --form-border-hover: solid 2px var(--special-border-colour);  /* Attract attention to hovered forms */
  --form-border-focus: solid 2px var(--nav-link-active);        /* Add contrast for in focus shadow */
  --form-shadow-focus: 3px 3px 10px var(--nav-link-active), -3px -3px 10px var(--nav-link-active);
  
  --form-field-border: var(--form-border);                    /* Standard colour matches form border */
  --form-field-outline-focus: var(--form-field-border);       /* Outline assumes border colour on focus */
  --form-field-border-focus: var(--special-border-colour);    /* Border colour switches to special colour on focus */
  --form-field-bg: var(--nav-link);                           /* Standard bg matches nav link */
  --form-field-bg-active: var(--special-border-accent);       /* Bg switches to theme bg on focus */
  /*--form-field-bg-active: var(--nav-link-active);    !* Bg switches to theme bg on focus *!*/
  --form-button-border: var(--nav-link);                      /* Contrast colour for on hover shadow */
  --form-button-bg: var(--nav-border);                        /* Standard colour matches nav border */
  --form-button-shadow: var(--special-border-accent);         /* TODO: Make bigger for light mode?? */
  /*--form-button-shadow: var(--nav-link-active);   !* TODO: Make bigger for light mode?? *!*/

  --links-list-divider: var(--special-border-colour);  
}
html:has(#hero-image-dark.active),
html:has(#error-theme.dark-theme) {   /* Change theme variable dark mode hero image is active */

  /* BASE THEME VARIABLES */

  --main-theme-01: #dbe1df;   /* Main nav border/footer */                /* Matched a shade from just right of the palm tree *** */
  --main-theme-02: #3d4856;   /* Nav link */                              /* Matched a shade from the leftmost cloud *** */
  --main-theme-03: #97a7b4;   /* Active nav link */                       /* Matched a shade from a lower right cloud *** */
  --main-theme-04: #ffad1a;   /* Special nav border (on hover effect) */  /* Complimentary colour for added effect */
  --main-theme-05: #4a5e77;   /* Special nav border accent */             /* Matched a shade from lower right cloud region */  
  --main-theme-06: var(--main-theme-02);   /* Page bg */                  /* Matching the nav link colour for consistency */


  /* TODO: Determine if following colours are needed: */
  --main-theme-11: #f7f7f7;
  /* TODO: Complete test of special colours (below) for dark theme: */
  --special-border-colour2: #e3e3e3;
  --special-border-colour3: #67778e;
  --special-border-colour4: #aabbdd;
    
  --text-main: #dbe1df;   /* Matched a shade from just right of the palm tree */
  --text-accent: black;
  --text-link-hover: var(--main-theme-03);
  
  
  /* Dark Theme Variables */

  --theme-bg: rgba(0, 0, 0, 0);   /* Fully transparent to match background */
  --special-border-colour: var(--main-theme-04);
  --special-border-accent: var(--main-theme-05);

  --nav-border: var(--main-theme-01);
  --nav-link: var(--main-theme-02);
  --nav-link-active: var(--main-theme-03);
  
  /* Set form to mimic look of nav bar */   /* TODO: Check colours before bring back forms!!! */  
  --form-border: var(--nav-border);
  --form-bg-colour: var(--special-border-accent);
  --form-text-main: var(--text-main);
  --form-text-accent: var(--text-accent);
  
  --form-outline: none;         /* Dark theme does not need an outline */
  --form-outline-hover: none;   /* Dark theme does not need an outline */
  --form-outline-focus: solid 3px var(--nav-bg);
  --form-border-hover: solid 2px var(--special-border-colour);
  --form-border-focus: solid 1px var(--special-border-colour);
  --form-shadow-focus: 4px 4px 12px var(--special-border-colour), -4px -4px 12px var(--special-border-colour);

  /* TODO: See if these comments are as relevant for dark mode as for default (it was copied from) */
  --form-field-border: var(--form-border);                      /* Standard colour matches form border */
  --form-field-outline-focus: var(--special-border-colour);     /* Outline assumes border colour on focus */
  --form-field-border-focus: var(--nav-bg);                     /* Border colour switches to special colour on focus */
  --form-field-bg: var(--theme-bg);                             /* Standard bg matches nav link */
  --form-field-bg-active: var(--nav-link-active);               /* Bg switches to theme bg on focus */
  --form-button-border: var(--special-border-accent);           /* Contrast colour for on hover shadow */
  --form-button-bg: var(--special-border-colour);               /* Standard colour matches nav border */
  --form-button-shadow: var(--special-border-colour);           /* TODO: Make bigger for light mode?? */

  --links-list-divider: var(--special-border-colour);
}
html:has(#hero-image-warm.active),
html:has(#error-theme.warm-theme) {   /* Change theme variable warm mode hero image is active */

  /* BASE THEME VARIABLES */

  --main-theme-01: #f8a69e;                   /* Main nav border/footer */                  /* Matched ??? *** */
  --main-theme-02: #fad2a3;                   /* Nav link */                                /* Matched a shade from the upper right corner rgb(250, 210, 163, 0.3) converted to hex *** */  
  --main-theme-03: #8280af;                   /* Nav link active */                         /* *** */
  --main-theme-04: var(--main-theme-01);      /* Special nav border (on hover effect) */    /* Keep nav border colour */
  --main-theme-05: white;                     /* Special nav border accent */  
  --main-theme-06: rgb(250, 210, 163, 0.3);   /* Page bg */                                 /* Matching the nav link colour for consistency */


  /* TODO: Determine if following colours are needed: */
  --main-theme-10: #fdce8f;   /* Matched a shade from just left of the left palm leaf */
  --main-theme-11: #f7f7f7;
  --main-theme-12: #f8a69e;
  --main-theme-13: #ac9cc0;    /* Matched a shade from the leaves *** */
  --main-theme-14: #fca69d;
  --main-theme-15: #fda89f;
  
  --text-main: black;
  --text-accent: #f7f7f7;
  --text-link-hover: var(--main-theme-03);

  
  /* Warm Theme Variables */
  
  --scrollbar-warm-main: var(--nav-border) var(--nav-link-active);
  --scrollbar-warm-alt: var(--nav-border) var(--nav-bg);
  
  scrollbar-color: var(--scrollbar-warm-main);   /* Mimic navbar look */

  --theme-bg: rgba(0, 0, 0, 0);   /* Fully transparent to match background */
  --special-border-colour: var(--main-theme-04);
  --special-border-accent: var(--main-theme-05);

  --nav-border: var(--main-theme-01);
  --nav-link: var(--main-theme-02);
  --nav-link-active: var(--main-theme-03);
  --nav-bg: var(--main-theme-06);   /* TODO: Consider replacing/renaming for use in forms */

  /* Set forms to mimic look of nav bar */
  --form-border: var(--nav-border);
  --form-bg-colour: var(--special-border-accent);
  --form-text-main: var(--text-main);
  --form-text-accent: var(--text-main);

  --form-outline: none;         /* Default theme does not need an outline */
  --form-outline-hover: none;   /* Default theme does not need an outline */
  --form-outline-focus: solid 3px var(--nav-bg);
  --form-border-hover: solid 2px var(--nav-link-active);
  --form-border-focus: solid 2px var(--nav-link-active);
  --form-shadow-focus: 4px 4px 12px var(--nav-link-active), -4px -4px 12px var(--nav-link-active);

  --form-field-border: var(--nav-border);
  --form-field-outline-focus: var(--special-border-colour);
  --form-field-border-focus: var(--nav-bg);
  --form-field-bg: var(--theme-bg);
  --form-field-bg-active: var(--nav-link);
  --form-button-border: var(--nav-link-active);
  --form-button-bg: var(--nav-link);            /* Standard colour matches nav border */
  --form-button-shadow: var(--nav-link-active);

  --links-list-divider: var(--nav-link-active);
}
body {
  min-height: 100vh;  /* Forces footer to be no higher than page bottom */

  /* Set up page a as vertical flexbox */
  display: flex;
  flex-flow: column nowrap;

  color: var(--text-main);
}


/* COMMON SITE-WIDE STYLING */

.text-center {
  text-align: center;
}
.hover-info {
  cursor: help;
}

a:link, a:visited {
  color: var(--text-main);
}
a:hover {
  color: var(--text-link-hover);
}

img.dormant {   /* Hide non-"active" theme elements */
  display: none;
}

#coming-soon,
#blog-header {   /* Common styling for all "coming soon" image containers */
  width: fit-content;
  max-width: 50%;   /* Restrict size of contained image */
  margin: auto;
}
#coming-soon img,
#blog-header img {   /* Common styling for all "coming soon" images */
  width: 100%;
  height: auto;
}

/* LAYOUT STYLING  */

header {   /* Child 1 of main */
  margin-bottom: var(--post-section-spacing);   /* Spacing before page content */
  background-color: var(--nav-bg);
}
header #hero-container img {   /* Sizing of themed hero images */
  width: 100%;
  height: 20vh;

  object-fit: cover;
}
header #hero-container img.active {
  display: block;   /* JS will toggle between active/inactive */
}

#view-container {
  /*
    Child 2 of main 
    Parent container of all views  
  */
  
  background-color: var(--theme-bg);
  flex: 1;   /* Ensures footer stays in view if empty space exists */
  width: 95%;
  margin: auto;
}

footer {   /* Child 3 of main */
  margin-top: var(--post-section-spacing);

  /* Set up footer as a vertical flexbox for stacking */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;

  background-color: var(--nav-border);
}
footer #footer-container {
  color: var(--text-accent);
}


/* COMMON VIEW STYLING */

section {   /* Common styling for main container within views */
  margin-bottom: var(--post-element-spacing);
}
h1, h2, h3, h4, h5, h6 {   /* Common styling for all view headers */
  text-align: center;
  font-family: var(--font-family-main), sans-serif;
  color: var(--text-main);  
}
h2, h3, h4, h5, h6 {   /* Specific styling for all sub-h2 headers */
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
}
h1, h2 {   /* Common styling for top header levels */
  
  margin: 0 0 var(--post-section-spacing);   /* Spacing before page content */     
}
h1 {
  font-size: 2rem;
  text-decoration: underline;
}
h2 {
  font-size: 1.5rem;
}
p {
  margin: 0 0 var(--post-element-spacing);
}

#personal-links {   /* Social Media link bar */
  width: fit-content;
  margin: 0 auto 0;
  border: solid 2px var(--special-border-colour);
  border-radius: 5px;
  padding: 0.5rem 0 1rem;
}
#personal-links h3 {
  margin-bottom: 0.5rem;
}
#personal-links span {
  width: fit-content;
  margin: auto;
  display: block;
}
#personal-links #links-list {
  display: flex;
  flex-flow: row nowrap;

  padding-inline-start: 0;
  list-style-type: none;
}
#personal-links #links-list li {
  border-right: solid 1px var(--links-list-divider);
  padding: 0.5rem 1rem;

  text-align: center;
}
#personal-links #links-list li:last-child {
  border-right: none;
}
#personal-links #links-list li a {
  color: var(--text-main);
}
#personal-links #links-list li:hover {
  border-top: solid 1px var(--links-list-divider);
  border-bottom: solid 1px var(--links-list-divider);
  background-color: var(--form-bg-colour);
}
#personal-links #links-list img.brand-logo-small {
  width: auto;
  height: 2rem;
}


/* RESPONSIVE MEDIA RULES */

@media only screen and (min-width: 768px) {
  /* Common styling for PC-specific browser formatting */
}

@media only screen and (orientation: landscape) and (min-width: 768px)  {
  /* Styling for PC browsers in "standard" (landscape) mode */  
  
  /* Adjusting the viewable hero image area */
  #hero-container #hero-image {
    object-position: 0 50%;   /* View of sky and clouds */
  }
  #hero-container #hero-image-dark {
    object-position: 0 75%;   /* Avoid brightest part of image */
  }
  #hero-container #hero-image-warm {
    object-position: 50% 35%; /* Maximize sky view to expose colour scheme */
  }
  
  footer {
    height: calc(var(--nav-size-landscape) / 2);   /* Half the size of navbar */    
  }
  
}
@media only screen and (orientation: portrait) and (min-width: 768px)  {
  /* Styling for PC browsers in an "upright" mode */

  /* Adjusting the viewable hero image area */
  #hero-container #hero-image {
    object-position: 0 92%;
  }
  #hero-container #hero-image-dark {
    object-position: 0 100%;
  }
  #hero-container #hero-image-other {
    object-position: 0 0;
  }

  footer {   /* Change footer proportions */
    height: calc(var(--nav-size-portrait) / 2);
  }
}

/* .NET Default */
@media only screen and (min-width: 501px) and (max-width: 768px) {
/* Styling for tablets */
  
  html {
  /* Increase font size */
    font-size: 16px;
  }
  
  #hero-container #hero-image, #hero-image-dark {   /* Change sizing of hero image */
    height: 15vh;
  }
  
  footer {   /* Change footer proportions */
    height: calc(var(--nav-size-portrait) / 2);
  }
}

@media only screen and (max-width: 500px) {
  /* Styling for cell phones */
  
  html {   /* Increase font size */
    font-size: 16px;
  }
  
  #coming-soon {
    max-width: 100%;
  }

  header {
    text-align: center;
  }
  header #hero-container img {   /* Change sizing of hero image */
    height: 5vh;
  }
  
  
  #hero-container #hero-image {   /* Adjusting the viewable hero image area - View of sky and clouds */
    object-position: 0 50%;
  }
  #hero-container #hero-image-dark {   /* Avoid brightest part of image */
    object-position: 0 75%;   
  }
  #hero-container #hero-image-warm {   /* Maximize sky view to expose colour scheme */
    object-position: 0 0; 
  }
}