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

body {
    font-family: Arial, sans-serif;
    background-color: #f2d6d6;
    /* Background color between body and screen */
    /* NOT display:flex - as a flex item the .container could collapse below
       the viewport width (flex items ignore width:100% when shrinking); the
       containers center themselves with margin: 0 auto instead. */
    margin: 0;
}

.container {
    width: 100%;
    /* The site is a centred 900px card and stays that way - widening it made
       the page feel sprawling. What was actually too narrow was the .login-form
       box inside it (see below), not this. Change this one number to retune
       the whole site. */
    max-width: 900px;
    /* Centers the content on large screens */
    margin: 0 auto;
    background-color: white;
    display: grid;
    grid-template-areas:
        "header header"
        "nav nav"
        "main sidebar"
        "footer footer";
    /* minmax(0, ...): a bare fr track cannot shrink below its content's
       min-content width (wide tables force the whole page wider than the
       phone screen); minmax lets the track shrink so inner overflow-x
       wrappers can take over. Same in every container grid below. */
    grid-template-columns: minmax(0, 5fr) 280px;
    /* Fixed sidebar width of 280px */
    grid-gap: 0;
    padding: 0;
    border: 2px solid #000;
}

.container2 {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    /* Centers the content on large screens (body is no longer a flex box) */
    background-color: white;
    /* Body background color */
    display: grid;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 0;
    padding: 0px;
    border: 2px solid #000;
}

/* Header */
.header {
    grid-area: header;
    background-color: rgb(5, 55, 5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;

    max-height: 80px;
    ;
}

.header-image-left,
.header-image-right {
    height: 100%;
}

.header-image-left img,
.header-image-right img {
    height: 100%;
}

.header-text {
    text-align: center;
    flex-grow: 1;
}

.header h1 {
    margin: 5px;
    font-size: 1.5em;
    color: rgb(232, 194, 194);
    text-align: center;
}

.header h2 {
    margin: 5px;
    font-size: 1em;
    color: rgb(232, 224, 194);
    text-align: center;
}

.header p {
    margin: 0;
}

ul {
    list-style-type: square;
    margin-left: 20px;
    font-family: Arial, sans-serif;
    font-size: .9em;
    line-height: 1.6;
    color: #333;
}

/* Ordered lists had no rule at all, so they fell back to the browser default
   (1em, tight leading) and read bigger and denser than the paragraphs around
   them. Match the body text instead, and separate the points - a numbered
   step of two or three sentences needs a gap or the list reads as one block. */
ol {
    margin-left: 20px;
    font-family: Arial, sans-serif;
    font-size: .9em;
    line-height: 1.6;
    color: #333;
}

ol li {
    margin-bottom: 0.8em;
}

ol li:last-child {
    margin-bottom: 0;
}

.section {
    margin-bottom: 20px;
}


/* Navigation */
.nav {
    grid-area: nav;
    background-color: black;

    display: flex;
    align-items: center;
}

.nav ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.nav a {
    color: white;
    padding: 4px 15px;
    display: block;
    font-size: .8em;
}

.nav li {
    color: white;
    margin: 4px;
}

.nav a:hover {
    color: rgba(255, 255, 0, 0.594);

}

/* Main Content */
.main {
    grid-area: main;
    background-color: peachpuff;
    padding: 20px;
    min-height: calc(100vh - 160px);
}

/* Sidebar */
.sidebar {
    grid-area: sidebar;
    background-color: grey;
    padding: 20px;
    width: 280px;
    /* Fixed width */
    max-width: 280px;
    /* Do not allow wider than 280px */
    min-width: 280px;
    /* Do not allow less than 280px */

    overflow-wrap: break-word;
    /* Wrap long words */
    word-wrap: break-word;
    word-break: break-word;
    /* Force breaks in long strings */
    white-space: normal;
    /* Allow normal wrapping */
}



/* Footer */
.footer {
    grid-area: footer;
    background-color: grey;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

h1 {
    font-size: 1.2em;
    text-align: center;
    color: rgb(8, 5, 55);
    margin: 1em 0 1em 0;
}

h2 {
    font-size: 1em;
    text-align: left;
    color: #2c3e50;
    margin: 1em 0 1em 0;
}

h3 {
    font-size: 0.85em;
    text-align: left;
    color: #2c3e50;
    margin: 1em 0 0.5em 0;
}

p {
    font-size: .8em;
    text-align: justify;
    margin: 1em 0 1em 0;
    font-family: Arial, sans-serif;
    font-size: .9em;
    line-height: 1.6;
}

.noTopMargin {
    margin-top: 0;
}

.bolt {
    font-weight: bold;
}

/* The white card in <main>. It began life as a bare login box (a fixed 300px
   strip pushed 50px to the right), but most of the pages that use it now carry
   paragraphs - registration.php, confirmEmail.php, redeemActivation.php - and
   300px of prose inside a much wider column read badly. So the card is fluid:
   it fills the main column and follows the window. Pages that really do hold
   nothing but a credential form add .compact for the old narrow card. */
.login-form {
    background-color: white;
    /* auto collapses to 0 while the card fills the column, and centres it on
       the wider sidebar-less pages where the cap below bites. */
    margin: 0 auto;
    padding: 20px 28px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: auto;
    /* Fills the main column: ~576px on the pages that keep the 280px sidebar,
       ~856px on the sidebar-less ones. The 62em is a ceiling that only bites
       if the container is ever widened again - past roughly that width prose
       stops being comfortable to read, however much room the window has. */
    max-width: min(100%, 62em);
}

.login-form.compact {
    max-width: 360px;
    margin: 0 auto;
    padding: 20px;
}

.login-form h2 {
    margin-top: 0;
}

.login-form label {
    display: block;
    margin-bottom: 8px;
}

.login-form input[type="email"],
.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    /* The card is fluid now; a 900px-wide text box looks silly. */
    max-width: 34em;
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Show/hide password toggle */
.pw-wrap {
    position: relative;
    margin-bottom: 16px;
    max-width: 34em;
}

.pw-wrap input[type="password"],
.pw-wrap input[type="text"] {
    margin-bottom: 0;
    padding-right: 55px;
}

.pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #4CAF50;
    font-size: 0.8em;
    cursor: pointer;
    padding: 2px 4px;
}

.pw-toggle:hover {
    text-decoration: underline;
}

.login-form input[type="submit"] {
    width: 100%;
    max-width: 34em;
    padding: 10px;
    background-color: #4CAF50;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.login-form input[type="submit"]:hover {
    background-color: #45a049;
}

#searchResults {
    max-width: 800px;
    margin: 20px auto;
}

#searchResults p {
    margin-bottom: 10px;
}

#searchResults hr {
    border: 0;
    height: 1px;
    background: #666;
    margin: 15px 0;
}

/* Form Styles */
.form-group {
    margin-bottom: 10px;
    /* Reduced from 15px */
}

.form-group label {
    display: block;
    margin-bottom: 3px;
    /* Reduced from 5px */
    font-weight: bold;
    font-size: 0.9em;
    /* Slightly smaller font for labels */
}

.form-control {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
}

select.form-control {
    height: 30px;
}

.btn {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border: none;
}

.btn-primary:hover {
    background-color: #0056b3;
}

#searchForm {

    margin: 0 auto;
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.7em;
}

.form-group input[type="text"],
.form-group select {
    width: 100%;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.8em;
}

select.form-group {
    height: 30px;
}

.form-group button {
    width: 100%;
    padding: 8px;
    /* Reduced from 10px */
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.form-group button:hover {
    background-color: #45a049;
}


@media (max-width: 768px) {
    body {
        background-color: white;
    }

    .container {
        max-width: 100%;
        margin: 0;
        border: none;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: minmax(0, 1fr);
    }



    .sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }


    .header, .nav, .main, .sidebar, .footer {
        width: 100%;
    }

    .main, .sidebar {
        padding: 10px;
    }

    .form-group {
        margin-bottom: 10px;
    }

    /* The header images have large intrinsic widths: as flex items they do
       not shrink below them, which forced every page to a ~460px minimum
       width and made phones scroll sideways. Hide them on small screens
       (these rules existed here before but were accidentally nested inside
       the width:100% rule above, so they never applied). */
    .header {
        justify-content: center;
    }

    .header-image-left,
    .header-image-right {
        display: none;
    }

    .header p {
        display: none;
    }

    .header h1 {
        font-size: 1.2em;
    }

    /* Long unbroken strings (email addresses, file names, hashes) must wrap
       instead of widening the page. */
    .main {
        overflow-wrap: break-word;
    }

    /* File pickers have a wide intrinsic size too. */
    input[type="file"] {
        max-width: 100%;
    }
}
/* Mobile Styles */
@media (max-width: 768px) {
    body {
      background-color: white;
    }
    
    .container {
      max-width: 100%;
      margin: 0;              /* Remove auto margins */
      border: none;
      display: grid;
      grid-template-areas:
        "header"
        "nav"
        "main"
        "sidebar"
        "footer";
      grid-template-columns: minmax(0, 1fr);
    }
    
    .sidebar {
      width: 100%;
      max-width: 100%;
      min-width: 100%;
    }
    
    /* Ensure header, nav, main, sidebar, and footer span full width */
    .header, .nav, .main, .sidebar, .footer {
      width: 100%;
    }
    
    /* Mobile adjustments for header */
    .header {
      justify-content: center;
    }
    /*
    .header-image-left,
    .header-image-right {
      display: none;
    }
    
    .header p {
      display: none;
    }
    */
    
    .header h1 {
      font-size: 1.2em;
    }
  }
  
  /* Large Screen Adjustments (if needed) */
  @media (min-width: 769px) {
    /* On large screens, we keep the base styles.
       We may add desktop-specific tweaks here (e.g., changing the body background). */
    body {
      background-color: rgb(198, 163, 163);
    }
    
    /* No changes to .container so it remains 900px and centered */
  }
/* ── Contribution plan tables ────────────────────────────────────────────
   Used by prk_plans.php's prk_plans_table(), which prints the same three
   rows on index.php, faq.php, donate.php, registration.php and about.php.
   The wrapper scrolls on its own so a narrow phone never widens the page
   (the same rule the app's tables follow - see the mobile-width notes at
   the top of this file). */
.prk-plans-scroll {
  overflow-x: auto;
  margin: 14px 0;
}

table.prk-plans {
  border-collapse: collapse;
  width: 100%;
  max-width: 520px;
  font-size: 0.95em;
}

table.prk-plans th,
table.prk-plans td {
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 6px 12px;
  text-align: left;
  white-space: nowrap;
}

table.prk-plans th {
  background-color: rgba(0, 0, 0, 0.05);
  font-weight: 600;
}