/* style_info.css */
@import url('style_common.css'); /* Import common styles */

/* === Info Page Specific Styles === */
main#info-content { max-width: 900px; }

/* Page Nav */
#page-nav { background-color: #f1f1f1; background-image: none; border-bottom: 1px solid #ddd; padding: 8px 15px; position: static; z-index: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.05); height: auto; margin-bottom: 20px; }
#page-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }
#page-nav li { margin: 0; }
#page-nav a { display: inline-block; padding: 8px 16px; color: #333; text-shadow: none; text-decoration: none; font-weight: 500; border-radius: 4px; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; border: 1px solid transparent; }
#page-nav a:hover, #page-nav a:focus { background-color: #ddd; color: #000; outline: none; border-color: #ccc; }

/* Info Section Layout */
.info-section { padding: 0; margin-bottom: 25px; }
.info-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; grid-template-areas: "title title" "loc   hours" "contact hours"; }
.info-grid > .section-title { grid-area: title; margin-bottom: 0; }
.info-card-location { grid-area: loc; }
.info-card-hours { grid-area: hours; }
.info-card-contact { grid-area: contact; }

/* Info Card Styling */
.info-card { background-color: #fff; padding: 20px 20px 15px 20px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); border: 1px solid #e0e0e0; display: flex; flex-direction: column; }
.info-card h3 { margin-top: 0; margin-bottom: 10px; color: #555; text-align: center; border-bottom: 1px dashed #eee; padding-bottom: 8px; font-size: 1.2em; flex-shrink: 0; }
.info-card p { margin: 8px 0; line-height: 1.6; text-align: center; font-size: 0.95em; flex-grow: 1; }
.card-separator { border: none; border-top: 1px dashed #eee; margin: 10px 0; }
.card-actions { margin-top: auto; padding-top: 15px; text-align: center; }

/* Today Hours Display (Styled as button) */
#today-hours-display.action-button { cursor: default; background-color: #5ca0d3; border-color: #4a8ac1; }
#today-hours-display.action-button:hover { transform: none; box-shadow: 0 2px 4px rgba(0,0,0,0.15); background-color: #5ca0d3; border-color: #4a8ac1; }

/* Google Form */
#google-form-container { max-width: 640px; margin: 20px auto; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }
#google-form-container iframe { display: block; width: 100%; height: 1000px; min-height: 800px; border: none; }

/* Info Page Responsive */
@media (max-width: 768px) {
    .info-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-areas: none; gap: 15px; }
    .info-grid > .section-title { grid-column: 1 / -1; }
    .info-card-location, .info-card-hours, .info-card-contact { grid-area: auto; }
}

@media (max-width: 600px) {
    .info-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "title" "loc" "hours" "contact"; gap: 15px; }
    .info-card { padding: 15px; }
    #google-form-container iframe { height: 1200px; }
    #info-content .info-section:last-child { padding: 15px; }
     #today-hours-display.action-button { min-width: auto; width: auto; max-width: 90%; }
}
/* Job Application Section Styling */
#job-application-section {
    background-color: #f9f9f9; /* Light background to distinguish it */
    padding: 30px 15px;
    margin-top: 30px;
    border-top: 1px solid #e0e0e0;
    text-align: center; /* Center the content of this section */
}
#job-application-section .section-title {
    border-bottom: none; /* No border for this title, or style differently */
    margin-bottom: 15px;
}
#job-application-section p {
    margin-bottom: 20px;
    font-size: 1.1em;
    color: #555;
}