@charset "UTF-8";
:root {
/* Gray scale */
    --sbd8-color-black:  #000000;
    --sbd8-color-gray1:  #202020;
    --sbd8-color-gray2:  #404040;
    --sbd8-color-gray3:  #606060;
    --sbd8-color-gray4:  #808080;
    --sbd8-color-gray5:  #a0a0a0;
    --sbd8-color-gray6:  #c0c0c0;
    --sbd8-color-gray7:  #e0e0e0;
    --sbd8-color-white:  #ffffff;

/* Colors for app components - Part 1 */
    --sbd8-color-brand: #F3770B;
    --sbd8-color-bg: #FAFAFA;
    --sbd8-color-header: #202020;
    --sbd8-color-footer: #C0C0C0;
    --sbd8-color-link: #0069d6;
    --sbd8-color-link-hover: #0089FF;
    --sbd8-color-link-focus: #F3770B;  /*High-contrast orange outline*/
    --sbd8-color-link-focus-visible: #F3770B; /*High-contrast orange outline*/
    --sbd8-color-text: #202020;

/* Colors for app components - Part 2 */
    --sbd8-color-neutral: #E0E0E0;
    --sbd8-color-primary: #202020;
    --sbd8-color-secondary: #F3770B;

/* Colors for app components - Part 3 */
    --sbd8-color-accent: #0089FF;

/* ... */
}

/*
 * sbd8.css minimalist css library.
 * Created by Fred Nora.
 * (This is a work in progress)
 */

/*
 * Library components:
 * ===============================================
 *   0 ) Initialization     - Global scope
 * -------------------------------------
 *   1.1 ) .sbd8-banner    - Banner
 *   1.2 ) .sbd8-nav       - Navigation bar
 *   1.3 ) .sbd8-container - Container
 *   1.4 ) .sbd8-header    - Header
 * -------------------------------------
 *   2.1 ) .sbd8-text      - Text
 *   2.2 ) .sbd8-image     - Image
 *   2.3 ) .sbd8-button    - Button
 * -------------------------------------
 *   3.1 ) .sbd8-footer    - Footer
 */

/*   0 ) Initialization     - Global scope */
html, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--sbd8-color-bg)
}
h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}
a {
    color: var(--sbd8-color-link)
}
a:hover {
    color: var(--sbd8-color-link-hover)
}
a:focus {
    outline: 2px solid var(--sbd8-color-link-focus);  /*High-contrast orange outline*/ 
    outline-offset: 2px;          /*Small space between outline and link*/ 
}
a:focus-visible {
    outline: 2px solid var(--sbd8-color-link-focus-visible);  /* High-contrast orange outline */
    outline-offset: 2px;
}

/* 
 * Small screen: ------------------------------
 * Mobile first?
 */

/* 1.1 ) .sbd8-banner    - Banner */

/* 1.2 ) .sbd8-nav       - Navigation bar */
.sbd8-nav {
    font-size: 4.5vw;
    border-top: 2px solid rgba(88, 88, 88, .3);
    border-bottom: 2px solid rgba(129, 129, 129, .3);
}
.sbd8-nav ul {
    text-align: center;
    margin: 0;
}
.sbd8-nav li {
    width: fit-content;
    text-align: center;
    display: block;
    padding: 0.4% 0.2% 0.2% 0.2%;
}
.sbd8-nav a {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #F3770B;
    display: inline-block;
}
.sbd8-nav a:hover {
    background-color: rgba(256, 256, 256, .9); 
}

/* 
    Sidebar for small screens 
*/

.sbd8-sidebar {
    width: 100vw;
    position: static;
    box-shadow: none;
    padding-top: 0; 
}

.sbd8-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /*display: flex;*/
    /*flex-direction: column;*/
    align-items: center;      /* horizontally center items */
    justify-content: center;  /* vertically center items */
    min-height: 100vh;        /* full screen height */
}

.sbd8-sidebar li {
    width: 100%;              /* full width */
    margin: 8px 0;            /* spacing between links */
}    

.sbd8-sidebar a {
  display: block;               /* Full clickable block for tap targets */
  text-align: center;           /* Center text for both icons and text */
  text-decoration: none;        /* Remove underline */
  text-transform: uppercase;    /* Consistent look */
  color: #F3770B;               /* Brand color */
  font-weight: 500;             /* Slightly bolder for readability */
  padding: 12px 0;              /* Touch-friendly vertical padding */
  border-radius: 6px;           /* Slightly rounded corners */
  transition: background 0.2s, color 0.2s;  /* Smooth hover effect */
  margin: 0 8px 8px 8px;        /* Space between links */
  font-size: 1.2em;             /* Slightly larger for accessibility */
}

.sbd8-sidebar a:hover,
.sbd8-sidebar a:focus {
  background: rgba(243, 119, 11, 0.1);   /* Subtle brand highlight */
  color: #d35e00;                        /* Slightly darker on hover */
  text-decoration: underline;            /* Optional: show underline on hover */
  outline: none;                         /* Remove default focus outline */
}

.sbd8-sidebar-image {
  display: block;
  margin-left: auto;
  margin-top: 8px;
  margin-right: auto;
  margin-bottom: 8px;
  border-radius: 8px;
  max-width: 80%;
  width: 120px;
  height: auto;
}

.sbd8-main-content {
    margin-left: 0;
    padding-top: 60px; /* Add space for nav if needed */
    font-size: 4.4vw;
    text-align: center;
}


/* 1.3 ) .sbd8-container - Container */
.sbd8-container {
    font-size: 4.4vw;
    text-align: center;
}

/* 1.4 ) .sbd8-header    - Header */
.sbd8-header {
    font-size: 3.5vw;
    text-align: center;
    text-transform: uppercase;
    color: var(--sbd8-color-header);
}

.sbd8-header-image {
    text-align: center;
    width: 11%;
    height: auto;
}

/* 2.1 ) .sbd8-text      - Text */
.sbd8-text{
    font-size: 3.5vw;
}

/* 2.2 ) .sbd8-image     - Image */
.sbd8-image {
    width: 96%;
    height: auto;
}
.sbd8-image-container {
    text-align: center;
    border-top: 4px solid rgba(222, 222, 222, .3);
}

/* 2.3 ) .sbd8-button    - Button */
.sbd8-button {
    font-size: 4.5vw;
    text-align: center;
    color: #fff;
    background-color: #F3770B;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-radius: .25rem;
    padding: .375rem .75rem;
    display: inline-block;
}
.sbd8-button:hover {
    background-color: #F3770B;
    text-decoration: none;
}
.sbd8-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}
.sbd8-button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

/* 3.1 ) .sbd8-footer    - Footer */
.sbd8-footer {
    font-size: 3.5vw;
    text-align: center;
    color: var(--sbd8-color-footer);
    padding-bottom: 2%;
}
.sbd8-footer-logo {
    text-align: center;
    border-top: 4px solid rgba(222, 222, 222, .3);
}

/*
 * ------------------------------------------------------
 * Component: Media queries. 
 */


/* large screen */
@media (min-width: 1024px) {

/* 1.1 ) .sbd8-banner    - Banner */

/* 1.2 ) .sbd8-nav       - Navigation bar */
.sbd8-nav {
    font-size: 2.2vw;
    border-top: 2px solid rgba(80, 80, 80, .3);
    border-bottom: 2px solid rgba(123, 123, 123, .3);
}
.sbd8-nav ul {
    text-align: center;
    margin: 0;
}
.sbd8-nav li {
    text-align: center;
    display: inline;
    padding: 0 2%;
}
.sbd8-nav a {
    text-decoration: none;
    text-transform: uppercase;
    color: #F3770B;
}
.sbd8-nav a:hover {
    background-color: rgba(256, 256, 256, .9); 
}

/* Fixed sidebar styles */
.sbd8-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    background: #222;
    color: #fff;
    padding-top: 0px;
    box-shadow: 2px 0 8px rgba(0,0,0,0.10);
    z-index: 1000;
}

.sbd8-sidebar ul {
    padding: 0 12px;
    height: auto;           /* don’t stretch */
    margin-top: 8px;        /* small gap below logo */
    box-sizing: border-box;
}

.sbd8-sidebar li {
    width: 100%;          /* override the earlier width: fit-content */
    margin: 12px 0;       /* vertical spacing between items */
}

.sbd8-sidebar a {
    display: block !important;    /* full-width clickable area */
    width: 100% !important;
    box-sizing: border-box;
    text-align: center !important;/* center the text */
    padding: 10px 12px;
    margin: 0;                    /* keep margins on the li, not the a */
    color: #F0F0F0;
}
.sbd8-sidebar a:hover,
.sbd8-sidebar a:focus {
    color: #e0e0e0;
}

.sbd8-sidebar-image {
  display: block;
  /*margin: 0 auto 24px auto;*/
  margin-top: 4px;
  margin-bottom: 4px;
  border-radius: 16px; /* More visible rounding */
  max-width: 80%;
  width: 120px;
  height: auto;
  background: transparent; /* Just in case */
}

/* Push main content to the right */
.sbd8-main-content {
    margin-left: 240px; /* slightly larger than sidebar width */
    padding: 20px;
    font-size: 4.4vw;
    text-align: center;
}

/* 1.3 ) .sbd8-container - Container */
.sbd8-container {
    font-size: 4.0vw;
    text-align: center;
}

/* 1.4 ) .sbd8-header    - Header */
.sbd8-header {
    font-size: 1.8vw;
    color: var(--sbd8-color-header);
}
.sbd8-header-image {
    text-align: center;
    width: 11%;
    height: auto;
}

/* 2.1 ) .sbd8-text      - Text */
.sbd8-text{
    font-size: 2.2vw;
    color: #202020;
}

/* 2.2 ) .sbd8-image     - Image */
.sbd8-image {
    width: 50%;
    height: auto;
}
.sbd8-image-container {
    text-align: center;
    border-top: 4px solid rgba(222, 222, 222, .3);
}

/* 2.3 ) .sbd8-button    - Button */
.sbd8-button {
    font-size: 2.2vw;
    text-align: center;
    color: #fff;
    background-color: #F3770B;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-radius: .25rem;
    padding: .375rem .75rem;
    display: inline-block;
}
.sbd8-button:hover {
    background-color: #F3770B;
    text-decoration: none;
}
.sbd8-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}
.sbd8-button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

/* 3.1 ) .sbd8-footer    - Footer */
.sbd8-footer {
    font-size: 1.4vw;
    text-align: center;
    color: var(--sbd8-color-footer);
    padding-bottom: 2%;
}
.sbd8-footer-logo {
    text-align: center;
    border-top: 4px solid rgba(222, 222, 222, .3);
}

}