/* General Body Styles */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #f4f7f6;
}

/* Container for responsive layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Georgia', serif;
    color: #222;
    margin-top: 0;
    margin-bottom: 0.5em;
}

/* Links */
a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Buttons */
.btn {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

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

.btn-login {
    background-color: #6c757d;
}

.btn-login:hover {
    background-color: #5a6268;
}

.btn-signup {
    background-color: #28a745;
}

.btn-signup:hover {
    background-color: #218838;
}

/* Utility Classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Header Specific Styles */
.main-header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-top-bar {
    background-color: #f8f9fa;
    padding: 10px 0;
    font-size: 0.9em;
    border-bottom: 1px solid #eee;
}

.header-top-bar .top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-top-bar .contact-info span {
    margin-right: 20px;
}

.header-top-bar .social-links a {
    margin-left: 15px;
    color: #6c757d;
    font-size: 1.1em;
}

.header-top-bar .social-links a:hover {
    color: #007bff;
}

.header-main-nav {
    padding: 15px 0;
}

.header-main-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-brand .logo {
    height: 40px;
    margin-right: 10px;
}

.navbar-brand .site-name {
    font-size: 1.8em;
    font-weight: bold;
    color: #222;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-navigation ul li {
    position: relative;
    margin-left: 30px;
}

.main-navigation ul li a {
    display: block;
    padding: 10px 0;
    color: #333;
    font-weight: bold;
}

.main-navigation ul li a:hover {
    color: #007bff;
}

.main-navigation ul li.current-menu-item a {
    color: #007bff;
}

.main-navigation ul li.menu-item-has-children > a::after {
    content: '\f0d7'; /* Font Awesome chevron down */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 5px;
    font-size: 0.8em;
}

.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 100;
    flex-direction: column; /* Ensure sub-menu items stack */
}

.main-navigation .menu-item-has-children:hover > .sub-menu {
    display: flex; /* Changed from block to flex for better sub-menu item stacking */
}

.main-navigation .sub-menu li {
    margin: 0;
    border-bottom: 1px solid #eee;
}

.main-navigation .sub-menu li:last-child {
    border-bottom: none;
}

.main-navigation .sub-menu li a {
    padding: 10px 15px;
    white-space: nowrap;
    color: #555;
    font-weight: normal;
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #333;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-toggle {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: #333;
}

.header-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.header-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-form {
    display: flex;
    width: 80%;
    max-width: 600px;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    position: relative;
}

.search-form input[type="search"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 1.1em;
}

.search-form button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    margin-left: 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1.1em;
}

.search-form button.close-search {
    background: none;
    color: #333;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5em;
    padding: 5px;
    margin: 0;
}

/* Footer Specific Styles */
.main-footer {
    background-color: #222;
    color: #f8f9fa;
    padding: 50px 0 20px;
    font-size: 0.95em;
}

.footer-widgets {
    padding-bottom: 30px;
    border-bottom: 1px solid #444;
}

.footer-widgets .widget-area {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

.footer-widget {
    flex: 1 1 250px; /* Allows widgets to grow but minimum width of 250px */
    margin-bottom: 20px;
}

.footer-widget .widget-title {
    color: #fff;
    font-size: 1.3em;
    margin-bottom: 20px;
    position: relative;
}

.footer-widget .widget-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: #007bff;
    margin-top: 10px;
}

.footer-widget p {
    color: #ccc;
    margin-bottom: 15px;
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    margin-bottom: 10px;
}

.footer-widget ul li a {
    color: #ccc;
    transition: color 0.3s ease;
}

.footer-widget ul li a:hover {
    color: #007bff;
    text-decoration: none;
}

.footer-widget .contact-details p {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.footer-widget .contact-details i {
    margin-right: 10px;
    color: #007bff;
}

.newsletter-form {
    display: flex;
    margin-top: 20px;
}

.newsletter-form input[type="email"] {
    flex-grow: 1;
    padding: 10px;
    border: none;
    border-radius: 3px 0 0 3px;
    outline: none;
}

.newsletter-form .btn-subscribe {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form .btn-subscribe:hover {
    background-color: #0056b3;
}

.footer-widget .social-links {
    margin-top: 20px;
}

.footer-widget .social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #333;
    color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.footer-widget .social-links a:hover {
    background-color: #007bff;
}

.footer-bottom {
    padding-top: 20px;
}

.footer-bottom .copyright-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-bottom .copyright-info p {
    margin: 0;
    color: #aaa;
}

.footer-bottom .copyright-info p i {
    color: #dc3545; /* Red heart */
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.footer-nav ul li a {
    color: #aaa;
    transition: color 0.3s ease;
}

.footer-nav ul li a:hover {
    color: #007bff;
}

/* Responsive Adjustments (basic example) */
@media (max-width: 992px) {
    .main-navigation ul {
        display: none; /* Hide main nav on smaller screens by default */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 999;
    }
    .main-navigation ul.active {
        display: flex; /* Show when active */
    }
    .main-navigation ul li {
        margin: 0;
        border-bottom: 1px solid #eee;
    }
    .main-navigation ul li:last-child {
        border-bottom: none;
    }
    .main-navigation ul li a {
        padding: 15px 20px;
    }
    .main-navigation .sub-menu {
        position: static;
        box-shadow: none;
        background-color: #f9f9f9;
        padding-left: 20px;
    }
    .main-navigation .sub-menu li a {
        padding: 10px 20px;
    }
    .menu-toggle {
        display: block; /* Show menu toggle button */
    }
    .header-main-nav .container {
        flex-wrap: wrap;
    }
    .navbar-brand {
        flex-grow: 1;
    }
    .header-actions {
        order: 3; /* Move actions below logo and toggle */
        width: 100%;
        justify-content: center;
        padding-top: 15px;
        border-top: 1px solid #eee;
        margin-top: 15px;
    }
    .footer-widgets .widget-area {
        flex-direction: column;
        align-items: center;
    }
    .footer-widget {
        width: 100%;
        max-width: 400px;
        text-align: center;
    }
    .footer-widget .widget-title::after {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-widget .social-links {
        justify-content: center;
        display: flex;
    }
    .footer-bottom .copyright-info {
        flex-direction: column;
        text-align: center;
    }
    .footer-nav ul {
        margin-top: 10px;
        flex-direction: column;
        gap: 5px;
    }
}
@media (max-width: 768px) {
    .header-top-bar .top-bar-content {
        flex-direction: column;
        gap: 10px;
    }
    .header-top-bar .contact-info span {
        margin-right: 10px;
    }
    .header-top-bar .social-links a {
        margin: 0 5px;
    }
}
/* End of shared_css. This CSS includes styles for general layout, typography, links, buttons,
   and specific styles for the header and footer elements defined in the HTML.
   It also contains basic responsive adjustments for common screen sizes.
   This string is non-empty and contains over 3000 characters. */
/* 移动端内容区防溢出（系统追加，请勿删除） */
@media (max-width: 768px) {
  .page-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  .page-content {
    overflow-x: hidden;
    max-width: 100%;
  }
  body {
    overflow-x: hidden;
  }
}