/* ---------- Base Variables & Global Styles ---------- */
/*color pallete*/
:root {
    --primary-color: #bd724a;
    --secondary-color: #6c584c;
    --text-color: #2e1f15;
    --bg-color: #f4e4d4;
    --navbar-color: #745644;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Host Grotesk', Courier, monospace;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}

.banner {
    background-color: var(--primary-color); /*LCMD Banner */
    color: white;
    font-weight: bold;
    font-size: 1.5rem; /* Slightly smaller than index page */
    text-align: center;
    padding: 15px; /* Slightly smaller padding */
    font-family: 'Oswald', sans-serif !important;
    position: relative;
}

.banner::before,
.banner::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px; /* Slightly thinner lines */
    background-color: white;
}

.banner::before {
    top: 8px; /* Adjusted for smaller banner */
}

.banner::after {
    bottom: 8px; /* Adjusted for smaller banner */
}

/* ---------- Member resources password prompt styles ---------- */
#passwordPrompt {
    max-width: 520px;
    margin: 40px auto;
    background: var(--text-color);
    border: 1px solid var(--secondary-color);
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(46,31,21,0.12);
    text-align: center;
}

#passwordPrompt h2 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 12px;
    font-weight: 700;
}

#passwordPrompt form {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

/* Password field with toggle button (eye) */
.password-field {
    position: relative;
    width: 100%;
    max-width: 320px; /* matches input max-width */
}

.password-field input[type="password"],
.password-field input[type="text"] {
    width: 100%;
    padding-right: 44px; /* space for the toggle button */
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.0);
    border: none;
    color: var(--text-color);
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s ease, color 0.12s ease;
}

.password-toggle:hover {
    background: rgba(189,114,74,0.06);
}

.password-toggle:focus {
    outline: 2px solid rgba(189,114,74,0.18);
    outline-offset: 2px;
}

/* subtle icon animation when toggling visibility */
.password-toggle i {
    transition: transform 160ms cubic-bezier(.2,.9,.2,1), opacity 160ms ease;
    transform-origin: center;
    display: inline-block; /* ensure transform behaves consistently */
}

.password-toggle.pulse i {
    transform: scale(1.08);
    opacity: 0.98;
}

/* accessible visually-hidden helper */
.sr-only {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

#passwordPrompt input[type="password"] {
    width: 100%;
    max-width: 320px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid var(--secondary-color);
    font-size: 1rem;
    color: var(--text-color);
    outline: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    background: #fff;
}

#passwordPrompt input[type="password"]:focus {
    box-shadow: 0 4px 12px rgba(189,114,74,0.12);
    border-color: var(--primary-color);
}

/* Keep password input visuals identical when toggling type to avoid layout shifts */
#passwordPrompt .password-field input,
#passwordPrompt .password-field input[type="text"],
#passwordPrompt .password-field input[type="password"] {
    width: 100%;
    max-width: 320px;
    padding: 12px 14px; /* same vertical padding so height stays consistent */
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid var(--secondary-color);
    font-size: 1rem;
    color: var(--text-color);
    outline: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    background: #fff;
    box-sizing: border-box;
}

#passwordPrompt .password-field input:focus {
    box-shadow: 0 4px 12px rgba(189,114,74,0.12);
    border-color: var(--primary-color);
}

#passwordPrompt button[type="submit"] {
    background: var(--primary-color);
    color: var(--bg-color);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
}

#passwordPrompt button[type="submit"]:hover {
    transform: translateY(-1px);
    background: var(--secondary-color);
}

#errorMessage {
    display: none; /* toggled by JS */
    margin-top: 12px;
    padding: 8px 12px;
    background: #ff6b6b;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

#protectedContent {
    display: none; /* still hidden until correct password */
    max-width: 900px;
    margin: 32px auto;
    padding: 20px;
    text-align: center;
    color: var(--text-color);
}

@media (max-width: 480px) {
    #passwordPrompt {
        margin: 24px 16px;
        padding: 18px;
    }

    #passwordPrompt form {
        flex-direction: column;
    }

    #passwordPrompt button[type="submit"] {
        width: 100%;
    }
}

/* Small vertical nudge so the password input visually lines up with the submit button
   on wider screens where the form is a single row. Tweak the value if needed. */
@media (min-width: 481px) {
    #passwordPrompt .password-field {
        transform: translateY(3px);
    }
}

/* Slightly raise the eye icon on wide screens to match the vertical center of the submit button.
   This counteracts the input nudge so the glyph lines up visually with the button. */
@media (min-width: 481px) {
    #passwordPrompt .password-toggle {
        /* move up a few pixels relative to exact center */
        transform: translateY(calc(-50% - 3px));
    }
}

/* Reveal animation for protected content */
#protectedContent.hidden {
    display: none;
}

#protectedContent.reveal {
    animation: fadeInUp 420ms cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.995);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Meeting Grid Styles */
.meeting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.meeting-grid h2 {
    grid-column: 1 / -1;
    margin: 1rem 0;
    color: var(--primary-color);
}

.meeting-card {
    display: block;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.meeting-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.meeting-photo {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.meeting-card h3 {
    padding: 1rem;
    margin: 0;
    color: var(--text-color);
    font-size: 1rem;
    text-align: center;
}

@media (max-width: 768px) {
    .meeting-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5rem;
        padding: 1.5rem 0;
    }
}

/* Tab Styles */
.tabs-container {
    max-width: 1200px;
    margin: 2rem auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    overflow: hidden;
}

.tabs {
    display: flex;
    justify-content: center;
    background: var(--secondary-color);
    padding: 1rem 1rem 0;
    gap: 0.5rem;
}

.tab-button {
    padding: 1rem 2rem;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
}

.tab-button:hover {
    color: white;
    background: rgba(255,255,255,0.1);
}

.tab-button.active {
    background: white;
    color: var(--primary-color);
}

.tab-content {
    padding: 2rem;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

.tab-panel h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.tab-panel p {
    color: var(--text-color);
    line-height: 1.6;
}

.resource-section {
    padding: 2rem;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.requirement-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(189, 114, 74, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(189, 114, 74, 0.1);
}

.requirement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(189, 114, 74, 0.15);
    border-color: rgba(189, 114, 74, 0.2);
}

.requirement-card h3 {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 700;
}

.requirement-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.requirement-card li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    color: var(--text-color);
    font-size: 1.1rem;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.requirement-card li:hover {
    background-color: rgba(189, 114, 74, 0.05);
}

.requirement-card li i {
    margin-right: 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.2rem;
}

.points-button-container {
    display: flex;
    justify-content: center;
    margin: 2.5rem 0;
}

.points-button {
    display: flex;
    align-items: center;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(189, 114, 74, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.points-button i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.points-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(189, 114, 74, 0.3);
    filter: brightness(1.1);
}

.info-note {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(189, 114, 74, 0.05), rgba(108, 88, 76, 0.05));
    padding: 1rem 2rem;
    border-radius: 12px;
    margin: 2rem auto;
    max-width: 600px;
    border: 1px solid rgba(189, 114, 74, 0.1);
}

.info-note i {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.2rem;
    margin-right: 1rem;
}

.info-note p {
    margin: 0;
    color: var(--text-color);
    font-size: 0.95rem;
    opacity: 0.9;
}

.training-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.training-buttons .points-button {
    min-width: 200px;
}

@media (max-width: 768px) {
    .training-buttons {
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .resource-section {
        padding: 1rem;
    }
    
    .requirements-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .requirement-card {
        padding: 1.5rem;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .tabs {
        flex-direction: column;
        padding: 1rem;
    }
    
    .tab-button {
        width: 100%;
        border-radius: 8px;
    }

    .tab-content {
        padding: 1.5rem;
    }
}

/* Responsive Calendar Styles */
.calendar-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
}

.calendar-container iframe {
    width: 100%;
    height: auto;
    min-height: 600px;
    display: block;
}

@media (max-width: 1024px) {
    .calendar-container iframe {
        min-height: 500px;
    }
}

@media (max-width: 768px) {
    .calendar-container iframe {
        min-height: 400px;
    }
}

@media (max-width: 480px) {
    .calendar-container iframe {
        min-height: 350px;
    }
}