/* Full-width container */
.page {
    position: relative;
    width: 100%;
    padding: 0;
    /*max-width:1350px;*/
    /*box-shadow: 0 4px 6px 4px rgba(0, 0, 0, 0.7); !* X, Y, blur, spread, color *!*/
}

.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    color: #333;
}

footer {
    background-color : #2a2827;
    border-top: 3px solid #962f33;
    padding: 30px;
    color:navajowhite;
    font-size: 12px;
}

/* Hrg Header */
/* Hrg Header */
.hrg-header {
    box-shadow: inset 0 1px 0 0 #a6827e;
    background: linear-gradient(to bottom, #7d5d3b 5%, #634b30 100%);
    /*background-color: #7d5d3b;*/
    border-radius: 3px;
    border: 1px solid #54381e;
    color: #ffce34;
    font-family: "Kalam", serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 3px 18px;
    text-decoration: none;
    text-shadow: 0 1px 0 #4d3534;
}

.page .hrg-header h2 {
    color: #ffce34;
    font-family: "Kalam", serif;
    font-weight: 400;
    font-style: normal;

}


/* Hrg Button */
/* Hrg Button */
.hrg-btn {
    box-shadow: inset 0 1px 0 0 #a6827e;
    background: linear-gradient(to bottom, #7d5d3b 5%, #634b30 100%);
    background-color: #7d5d3b;
    border-radius: 3px;
    border: 1px solid #54381e;
    display: inline-block;
    cursor: pointer;
    color: #ffce34;
    font-family: "Kalam", serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 3px 18px;
    text-decoration: none;
    text-shadow: 0 1px 0 #4d3534;
}

.hrg-btn:hover {
    background: linear-gradient(to bottom, #634b30 5%, #7d5d3b 100%);
    background-color: #634b30;
    color: #c19500;
}

.hrg-btn:active {
    position: relative;
    top: 1px;
}

.hrg-btn-full {
    width:100%;
}

/* Hrg Small Button */
/* Hrg Small Button */
.hrg-sm-btn {
    box-shadow: inset 0 1px 0 0 #a6827e;
    background: linear-gradient(to bottom, #7d5d3b 5%, #634b30 100%);
    background-color: #7d5d3b;
    border-radius: 3px;
    border: 1px solid #54381e;
    display: inline-block;
    cursor: pointer;
    color: #ffce34;
    /*font-family: "Kalam", serif;*/
    font-size: 0.75em;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 2px 10px;
    text-decoration: none;
    text-shadow: 0 1px 0 #4d3534;
}

.hrg-sm-btn:hover {
    background: linear-gradient(to bottom, #634b30 5%, #7d5d3b 100%);
    background-color: #634b30;
    color: #c19500;
}

.hrg-sm-btn:active {
    position: relative;
    top: 1px;
}


/* Color Variants */
.hrg-yellow-btn {
    background: linear-gradient(to bottom, #d4b830 5%, #aa941f 100%);
    border-color: #8c7518;
    box-shadow: inset 0 1px 0 0 #e6d07e;
    color: #fff8c7;
    text-shadow: 0 1px 0 #7a6215;
}

.hrg-green-btn {
    background: linear-gradient(to bottom, #3b7d5d 5%, #30634b 100%);
    border-color: #1e5438;
    box-shadow: inset 0 1px 0 0 #7ea682;
    color: #c7ffce;
    text-shadow: 0 1px 0 #154d35;
}

.hrg-red-btn {
    background: linear-gradient(to bottom, #9b2d2d 5%, #7a2525 100%);
    border-color: #651a1a;
    box-shadow: inset 0 1px 0 0 #c08585;
    color: #ffbaba;
    text-shadow: 0 1px 0 #5a1e1e;
}

.hrg-blue-btn {
    background: linear-gradient(to bottom, #2f6aad 5%, #24507d 100%);
    border-color: #1a3f66;
    box-shadow: inset 0 1px 0 0 #91a4d6;
    color: #d0e0ff;
    text-shadow: 0 1px 0 #102a4d;
}

.hrg-gray-btn {
    background: linear-gradient(to bottom, #777777 5%, #5e5e5e 100%);
    border-color: #4a4a4a;
    box-shadow: inset 0 1px 0 0 #9b9b9b;
    color: #e0e0e0;
    text-shadow: 0 1px 0 #3d3d3d;
}

.hrg-button-container {
    display: flex;
    justify-content: flex-end;
    gap: 5px; /* Adds space between buttons */
}

/* Intro Container */
/* Intro Container */
.intro-container {
    background: url('../img/bg-wood-vertical.jpg') center/cover no-repeat;
    position: relative;
    padding: 80px 0 60px 0;
}

.intro-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

/* Torn Overlay */
/* Torn Overlay */
.torn-overlay {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    pointer-events: none;
}






/* Homepage Intro Text */
/* Homepage Intro Text */
.homepage-intro-text {
    position: relative;
    z-index: 1;
    color:#ffce34;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    max-width:1200px;
}

.homepage-intro-text h1 {
    color:#ffd03a;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.homepage-intro-text h1{font-size: 2.8rem;}
.homepage-intro-text h1.mobile {display: none;}
.homepage-intro-text p{ font-size: 1.2rem; padding:6px 30px; line-height:1.4;}

@media (max-width: 992px) {
    .homepage-intro-text h1{font-size: 2.0rem;}
    .homepage-intro-text p{ font-size: 1.1rem; }}

@media (max-width: 768px) {
    .homepage-intro-text h1{display: none;}
    .homepage-intro-text h1.mobile {display: block;}
}



/* SubPage Header */
/* SubPage Header */
.subpage-header {
    position: relative;
}

.subpage-header img {
    width: 100%;
    height: auto;
    display: block;
}

.subpage-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}

.subpage-caption h1 {
    font-family: "Seaweed Script", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 8rem;
    color: whitesmoke;
    line-height: 9rem;
    text-transform: lowercase;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
    margin: 0; /* Remove default margin */
    text-align: center; /* Center the text horizontally */
    word-wrap: break-word; /* Prevent overflow in narrow screens */
}

@media (max-width: 1200px) { .subpage-caption h1 { font-size: 6rem; line-height: 7rem; }  }
@media (max-width: 992px) { .subpage-caption h1 { font-size: 5rem; line-height: 6rem; }  }
@media (max-width: 768px) { .subpage-caption h1 { font-size: 4rem; line-height: 5rem; }  }
@media (max-width: 576px) { .subpage-caption h1 { font-size: 3rem; line-height: 4rem; }  }


/* Subpage Intro */
/* Subpage Intro */
.subpage-intro {
    position: relative;
    z-index: 1;
    color:#ffd03a;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    max-width:1250px;
}

.subpage-intro h2 {
    color:#ffd03a;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.subpage-intro h2.large-screens{font-size: 2.8rem;}
.subpage-intro h2.mobile {display: none;}
.subpage-intro p{ font-size: 1.2rem; padding:6px 30px; line-height:1.4;}

@media (max-width: 992px) {
    .subpage-intro h2.large-screens{font-size: 2.0rem;}
    .subpage-intro p{ font-size: 1.1rem; }}

@media (max-width: 768px) {
    .subpage-intro h2.large-screens{display: none;}
    .subpage-intro h2.mobile {display: block;}
}

.subpage-main-content-container {
    background-color: #f5efdb;
}


/* For screens larger than 768px, the first column will be 400px and the second takes the rest of the space */
@media (min-width: 768px) {
    .subpage-fixed-column {
        width: 350px;
        flex: 0 0 350px; /* Fix width to 400px */
    }

    .subpage-flex-column {
        flex: 1; /* Take the remaining space */
        margin-right:20px;
        border-right:1px dashed #6c5b42;
        padding-right:20px;
    }
}

/* For screens smaller than 768px, both columns will take up 100% of the width */
@media (max-width: 768px) {
    .subpage-fixed-column,
    .subpage-flex-column {
        width: 100%; /* Full width for both columns */
    }
}

.committee-title {
    padding-top:10px;
    color: #6c5b42;
    font-size:1.1rem;
}

.committee-list {
    padding-left: 0;
    list-style: none;
    font-size:0.9rem;
}







/* HRG Members Area  Header Styling */
/* HRG Members Area  Header Styling */
.member-content h1,
.member-content h2,
.member-content h3,
.member-content h4,
.member-content h5,
.member-content h6 {
    font-family: "Roboto Condensed", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #2a2827;
}

.member-content h1 {
    color: #ffd03a;
    width:100%;
    padding:6px 0px;
    text-align: center;
    background-color: #2e1900;
}

.member-content h1 {
    font-size: 1.7em; /* Adjust as needed */
}

.member-content h2 {
    font-size: 1.2em; /* Adjust as needed */
}

.member-content h3 {
    font-size: 1.1em; /* Adjust as needed */
}

.member-content h4 {
    font-size: 1.0em; /* Adjust as needed */
}

.member-content h5 {
    font-size: 1.0em; /* Adjust as needed */
}

.member-content h6 {
    font-size: 1.0em; /* Adjust as needed */
}

.member-content p {
    font-size:0.9em;
    margin-bottom:4px;
}


/* HRG Member Area  Columns and Cards */
/* HRG Member Area  Columns and Cards */
.hrg-column {
    padding:20px;
    background-color: rgba(255, 255, 255, 0.6); /* Slightly transparent white */
}

.heading-border {
    border-bottom: 2px solid #2e1900;
    padding-bottom: 0.5rem;
}

.hrg-card {
    background-color: rgba(255, 255, 255, 0.4);
}

.hrg-card .card-header {
    background-color: transparent;
}

.hrg-card .card-body {
    background-color: transparent;
}


/* HRG Members Area Table Styling */
/* HRG Members Area Table Styling */
.hrg-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Roboto Condensed", serif;
    font-size: 0.9rem;
}

.hrg-sm-text {
    font-size: 0.85rem;
}

.hrg-table thead {
    background-color: #2e1900;
    color: white;
    text-align: left;
}

.hrg-table thead th {
    padding: 10px;
    border: 1px solid #dee2e6;
}

.hrg-table tbody tr {
    border: 1px solid #dee2e6;
}

.hrg-table tbody tr th {
    background-color: #2e1900;
    color: white;
    text-align: left;
    padding: 10px;
}

.hrg-table td {
    padding: 10px;
    border: 1px solid #dee2e6;
}

.status-column {
    width: 50px;
    text-align: center;
}

.text-success {
    color: green;
    font-size: 1.2em;
}

.hrg-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.hrg-contact-table tbody tr {
    background-color: #f2f2f2;
}

.wrap-text {
    white-space: normal;
    word-break: break-word;
    max-width: 250px;
}

/* Mobile-Friendly Table (Vertical Layout) */
@media (max-width: 576px) {
    .hrg-table thead {
        display: none;
    }

    .hrg-table, .hrg-table tbody, .hrg-table tr, .hrg-table td {
        display: block;
        width: 100%;
    }

    .hrg-table tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        padding: 10px;
    }

    .hrg-table tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .hrg-contact-table tr {
        background-color: #f2f2f2;
    }
    
    .hrg-table td {
        text-align: right;
        padding-left: 35%;
        position: relative;
        display: flex;
        justify-content: space-between;
        border: 1px solid #dee2e6;
    }

    .hrg-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        font-weight: bold;
        text-align: left;
    }
}

.hrg-info-list {
    display: grid;
    grid-template-columns: 125px auto; /* Fixed width for dt, flexible width for dd */
    gap: 3px; /* Spacing between items */
    font-size:0.9rem;
    margin-bottom:0;
}

.hrg-info-list dt {
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.035); /* Light gray background for dt */
    padding: 5px;
    font-size:0.8rem
}

.hrg-info-list dd {
    margin: 0; /* Remove default margin */
    padding: 5px;
}

/* Apply background color to alternating rows */
.hrg-info-list dt:nth-child(4n+1),
.hrg-info-list dd:nth-child(4n+2) {
    background-color: rgba(0, 0, 0, 0.035); /* Light gray */
}

.hrg-info-list2 {
    display: grid;
    grid-template-columns: 4fr 1fr; /* dt takes 3 parts, dd takes 1 part */
    gap: 3px;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.hrg-info-list2 dt {
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.035);
    padding: 5px;
    font-size: 0.8rem;
}

.hrg-info-list2 dd {
    margin: 0;
    padding: 5px;
    display: flex;                  /* Flex container */
    align-items: center;
    justify-content: flex-end;      /* Align children to the right */
    gap: 8px;                       /* Space between number and button */
}

.hrg-info-list2 dd span.number {
    flex-grow: 1;                   /* Take remaining space */
    text-align: right;              /* Right justify the number */
}

/* alternating background rows */
.hrg-info-list2 dt:nth-child(4n+1),
.hrg-info-list2 dd:nth-child(4n+2) {
    background-color: rgba(0, 0, 0, 0.035);
}


.hrg-sm-icon{
    font-size: 0.8rem;
}

.hrg-edit-fieldset legend {
    font-weight: bold;
    font-size: 0.9rem;
    padding: 2px 0 0 0;
    border:none;
    color: #6c5b42;
    margin-bottom: 2px;
}

.hrg-change-container {
    margin: 20px auto;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.135);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    max-width: 600px;
}

.disabled-input {
    background-color: rgba(0, 0, 0, 0.035); /* Light gray background */
    color: #6c757d; /* Muted text color */
    cursor: not-allowed; /* Show disabled cursor */
    opacity: 0.65; /* Reduce visibility slightly */
    border: 1px solid #ced4da; /* Maintain border consistency */
}

.hrg-app-action-icon {
    font-size: 1.2rem;
}