/* ==========================================================
   Kettle Country Program Hub Website
   styles.css
   Version 1.0
   ========================================================== */

/* ==========================================================
   Set rem
   Override assumed default of 16 px = 1 rem
   GL-7/17/26
   ========================================================== */
   html {
    font-size: 16px;
   }

/* ==========================================================
   Color Palette
   ========================================================== */

:root {

    --kc-blue: #1565c0;
    --kc-blue-dark: #0d47a1;
    --kc-blue-light: #e8f2fc;

    --kc-background: #f7f8fa;
    --kc-surface: #ffffff;

    --kc-text: #333333;
    --kc-text-light: #666666;

    --kc-header-text: #ffffff;

    /* Last parameter controls the transparency of the overlay */
    --banner-overlay: rgba(0, 0, 0, 0.3);

    --kc-border: #d8d8d8;

    --kc-link: #1565c0;
    --kc-link-hover: #0d47a1;

    --kc-shadow: 0 2px 8px rgba(0,0,0,.08);

    --page-width: 1200px;

}


/* ==========================================================
   Reset
   ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
   max-width: 960px;
   margin: 0 auto;
   padding: 0 1.5rem;
}


/* ==========================================================
   Base
   ========================================================== */

body {

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--kc-background);

    color: var(--kc-text);

    line-height: 1.6;

}


img {

    max-width: 100%;
    display: block;

}


a {

    color: var(--kc-link);
    text-decoration: none;

}

a:hover {

    color: var(--kc-link-hover);
    text-decoration: underline;

}


/* ==========================================================
   Site Header
   ========================================================== */

.site-header {

    background: white;
    border-bottom: 1px solid var(--kc-border);

}

.site-brand {

    max-width: var(--page-width);

    margin: auto;

    position: relative;

    overflow: hidden;

}

.site-brand h1 {

    font-size: 2rem;
    margin-bottom: .25rem;
    color: var(--kc-header-text);

}

.site-brand p {

    color: var(--kc-text-light);

}

/* 7/26/26 */
.site-banner::before {

    content: "";

    position: absolute;

    inset: 0;

    background: var(--banner-overlay);

}

.site-banner {

    background-image: url(../images/IMG_20260628_200211080_HDR.jpg);

    background-size: cover;

    background-position: center;

    min-height: 220px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 2rem;

    /*7/26/26
    background: red;
    min-height: 220px;
    */

}

/* 7/26/26 */
.banner-content {

    /* max-width: 60rem; */
    position: relative;
    z-index: 1;

}


/* ==========================================================
   Global Navigation
   ========================================================== */

.site-nav {

    background: var(--kc-blue);

}

.site-nav ul {

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    max-width: var(--page-width);

    margin: auto;

}

.site-nav li {

    margin: 0;

}

.site-nav a {

    display: block;

    color: white;

    padding: 1rem 1.25rem;

    font-weight: 600;

}

.site-nav a:hover {

    background: var(--kc-blue-dark);
    text-decoration: none;

}

.site-nav a.active {

    background: var(--kc-blue-dark);

}

/* ==========================================================
   Main Layout
   ========================================================== */

.page {

    max-width: var(--page-width);

    margin: auto;

    padding: 2rem 1.5rem;

}

/* ==========================================================
   Added per Chat-GPT, 7/11/26
   ========================================================== */

.page h1 {

   font-size: 2rem;

   margin-bottom: .75rem;

}

.page h2 {

   margin-top: 2rem;

   margin-bottom: .75rem;

}

/*  ==========================================================
    Added b/c there was no class=guide-intro 
   ==========================================================  */
.page p {
    margin-bottom: 0.5rem;
}

/* ==========================================================
   Hero
   ========================================================== */

.hero {

    margin-bottom: 2rem;

}

.hero h2 {

    font-size: 2rem;

    margin-bottom: .5rem;

}

.hero p {

    font-size: 1.15rem;

    margin-bottom: .5rem;

    color: var(--kc-text-light);

}

/* ==========================================================
Added per Chat-GPT, 7/11/26
========================================================== */

.hero h1,
.hero h2 {

   font-size: 2rem;

   margin-bottom: .5rem;

}

/* ==========================================================
Added per Chat-GPT, 7/11/26
========================================================== */

.content {

   max-width: 70ch;

}


.page h1 {

   font-size: 2rem;

   margin-bottom: .75rem;

}

.page h2 {

   margin-top: 2rem;

   margin-bottom: .75rem;

}


/* ==========================================================
   Guide Grid
   ========================================================== */

.card-grid {

    display: grid;

    gap: 1.5rem;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}

/* ==========================================================
   Compatibility per Chat-GPT, 7/11/26
   ========================================================== */

.guide-grid,
.card-grid {

   display: grid;

   gap: 1.5rem;

   grid-template-columns:
       repeat(auto-fit, minmax(300px, 1fr));

}



/* ==========================================================
   Cards
   ========================================================== */

.card {

    background: var(--kc-surface);

    border: 1px solid var(--kc-border);

    border-radius: 10px;

    box-shadow: var(--kc-shadow);

    padding: 1.5rem;

}

.card h3 {

    margin-bottom: .75rem;

}

.card p {

    margin-bottom: 1rem;

    color: var(--kc-text-light);

}


/* ==========================================================
   Buttons
   ========================================================== */

.button {

    display: inline-block;

    background: var(--kc-blue);

    color: white;

    padding: .7rem 1.2rem;

    border-radius: 6px;

    font-weight: 600;

}

.button:hover {

    background: var(--kc-blue-dark);

    color: white;

    text-decoration: none;

}


/* ==========================================================
   Sidebar
   (Used later for Guide navigation)
   ========================================================== */

.sidebar {

    background: white;

    border: 1px solid var(--kc-border);

    border-radius: 10px;

    padding: 1rem;

}

.sidebar ul {

    list-style: none;

}

.sidebar li {

    margin-bottom: .5rem;

}

.sidebar a {

    display: block;

    padding: .35rem 0;

}


/* ==========================================================
   Footer
   ========================================================== */

.site-footer {

    margin-top: 2rem;

    border-top: 1px solid var(--kc-border);

    color: var(--kc-text-light);

    text-align: center;

    padding: 2rem;

}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 700px) {

    .site-brand {

        text-align: center;

    }

    .site-nav ul {

        flex-direction: column;

    }

    .site-nav a {

        border-top: 1px solid rgba(255,255,255,.15);

    }

}

/* ==========================================================
  Collection Contents - Chat-GPT 7/13/26
  ========================================================== */

.contents {

   margin-top: 2rem;

}

.contents-list {

   margin-top: 1rem;

   padding-left: 1.5rem;

}

.contents-list li {

   margin-bottom: 2rem;

}

.contents-list h3 {

   margin-bottom: .35rem;

}

.contents-list p {

   color: var(--kc-text-light);

}

/* ==========================================================
  Reduced line spacing in list items and shift away from left margin
  Added 8/2/26 for list of Program Guide topics.
  ========================================================== */

.tight-list li { 

    margin-bottom: 0.2rem; margin-left: 1rem;

}

/* Layout the list horizontally and remove default bullets - 7/13/26 */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: sans-serif;
}

/* Style the spacing for individual list items */
.breadcrumb-list li {
  display: flex;
  align-items: center;
}

/* Automatically add a separator before every item except the first one */
.breadcrumb-list li + li::before {
  content: "/";
  padding: 0 10px;
  color: #6c757d;
}

/* Style the hyperlink appearance */
.breadcrumb-list a {
  color: #0066cc;
  text-decoration: none;
}

.breadcrumb-list a:hover {
  text-decoration: underline;
}

/* Style the active/current page text */
.breadcrumb-list li[aria-current="page"] {
  color: #495057;
  font-weight: bold;
}