/* style/contact.css */

/* Custom Properties for Colors */
:root {
    --color-primary: #11A84E;
    --color-secondary: #22C768;
    --color-button-gradient-start: #2AD16F;
    --color-button-gradient-end: #13994A;
    --color-card-bg: #11271B;
    --color-background: #08160F;
    --color-text-main: #F2FFF6;
    --color-text-secondary: #A7D9B8;
    --color-border: #2E7A4E;
    --color-glow: #57E38D;
    --color-gold: #F2C14E;
    --color-divider: #1E3A2A;
    --color-deep-green: #0A4B2C;
}

.page-contact {
    font-family: Arial, sans-serif;
    color: var(--color-text-main); /* Default text color for the page */
    background-color: var(--color-background); /* Body background from shared.css, but ensure content sections respect it */
}

.page-contact__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Hero Section */
.page-contact__hero-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    padding-top: 10px; /* Small top padding, body handles header offset */
    background-color: var(--color-deep-green);
    overflow: hidden;
}

.page-contact__hero-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.page-contact__hero-content {
    text-align: center;
    max-width: 900px;
    z-index: 1;
}

.page-contact__main-title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 15px;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.page-contact__hero-description {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Section Titles */
.page-contact__section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    color: var(--color-text-main);
    text-align: center;
    margin-bottom: 20px;
    padding-top: 40px;
}

.page-contact__section-description {
    font-size: 1rem;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

/* Contact Form Section */
.page-contact__contact-form-section {
    background-color: var(--color-background);
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.page-contact__form {
    background-color: var(--color-card-bg);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    max-width: 600px;
    width: 100%;
    margin: 0 auto 40px auto;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.page-contact__form-group {
    margin-bottom: 20px;
}

.page-contact__form-label {
    display: block;
    font-size: 1rem;
    color: var(--color-text-main);
    margin-bottom: 8px;
    font-weight: 600;
}

.page-contact__form-input,
.page-contact__form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-deep-green);
    color: var(--color-text-main);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.page-contact__form-input::placeholder,
.page-contact__form-textarea::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.page-contact__form-input:focus,
.page-contact__form-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

.page-contact__form-textarea {
    resize: vertical;
    min-height: 120px;
}

.page-contact__form-image {
    display: block;
    margin: 40px auto 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Buttons */
.page-contact__btn-primary,
.page-contact__btn-secondary {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    box-sizing: border-box;
}

.page-contact__btn-primary {
    background: linear-gradient(180deg, var(--color-button-gradient-start) 0%, var(--color-button-gradient-end) 100%);
    color: var(--color-text-main);
    border: none;
    width: 100%;
    max-width: 100%;
}

.page-contact__btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 209, 111, 0.4);
}

.page-contact__btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.page-contact__btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-text-main);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(17, 168, 78, 0.4);
}

/* Direct Contact Section */
.page-contact__direct-contact-section {
    background-color: var(--color-deep-green);
    padding: 60px 0;
    text-align: center;
}

.page-contact__contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.page-contact__method-item {
    background-color: var(--color-card-bg);
    padding: 30px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-contact__method-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.page-contact__method-title {
    font-size: 1.5rem;
    color: var(--color-text-main);
    margin-bottom: 15px;
    font-weight: 700;
}

.page-contact__method-description {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.page-contact__direct-contact-image {
    display: block;
    margin: 40px auto 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* FAQ Section */
.page-contact__faq-section {
    background-color: var(--color-background);
    padding: 60px 0;
}

.page-contact__faq-list {
    max-width: 900px;
    margin: 40px auto 0 auto;
}

.page-contact__faq-item {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.page-contact__faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-main);
    cursor: pointer;
    background-color: var(--color-card-bg);
    transition: background-color 0.3s ease;
    list-style: none; /* For <details> summary */
}

.page-contact__faq-question::-webkit-details-marker {
    display: none; /* For <details> summary */
}

.page-contact__faq-question:hover {
    background-color: var(--color-deep-green);
}

.page-contact__faq-qtext {
    flex-grow: 1;
}

.page-contact__faq-toggle {
    font-size: 1.5rem;
    line-height: 1;
    margin-left: 15px;
    color: var(--color-primary);
}

.page-contact__faq-answer {
    padding: 0 25px 20px 25px;
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.page-contact__faq-answer p {
    margin: 0;
    padding-top: 10px;
}

.page-contact__faq-answer a {
    color: var(--color-primary);
    text-decoration: none;
}

.page-contact__faq-answer a:hover {
    text-decoration: underline;
}

/* For JS-driven FAQ (if not using <details>) */
.page-contact__faq-item.active .page-contact__faq-answer {
    max-height: 2000px !important; /* Ensure content expands */
    transition: max-height 0.5s ease-in-out;
}

.page-contact__faq-item:not(.active) .page-contact__faq-answer {
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.page-contact__faq-item.active .page-contact__faq-toggle {
    content: '−';
}

.page-contact__faq-image {
    display: block;
    margin: 40px auto 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Social Media Section */
.page-contact__social-media-section {
    background-color: var(--color-deep-green);
    padding: 60px 0;
    text-align: center;
}

.page-contact__social-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.page-contact__social-link {
    display: block;
    transition: transform 0.3s ease;
}

.page-contact__social-link:hover {
    transform: translateY(-5px) scale(1.1);
}

.page-contact__social-link img {
    
    
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
    /* No color changing filters */
}

.page-contact__social-image {
    display: block;
    margin: 40px auto 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* CTA Section */
.page-contact__cta-section {
    background-color: var(--color-background);
    padding: 60px 0;
    text-align: center;
}

.page-contact__cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-contact__container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .page-contact__hero-section {
        padding: 40px 15px;
        padding-top: 10px !important;
    }

    .page-contact__main-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    .page-contact__hero-description {
        font-size: 1rem;
    }

    .page-contact__section-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
        padding-top: 30px;
    }

    .page-contact__section-description {
        font-size: 0.9rem;
    }

    .page-contact__contact-form-section,
    .page-contact__direct-contact-section,
    .page-contact__faq-section,
    .page-contact__social-media-section,
    .page-contact__cta-section {
        padding: 40px 0;
    }

    .page-contact__form {
        padding: 25px;
        margin-bottom: 30px;
    }

    .page-contact__btn-primary,
    .page-contact__btn-secondary,
    .page-contact a[class*="button"],
    .page-contact a[class*="btn"] {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    .page-contact__cta-buttons,
    .page-contact__button-group,
    .page-contact__btn-container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 15px;
        padding-right: 15px;
        flex-direction: column !important;
        gap: 15px !important;
        overflow: hidden !important;
    }

    .page-contact__hero-image,
    .page-contact__form-image,
    .page-contact__direct-contact-image,
    .page-contact__faq-image,
    .page-contact__social-image,
    .page-contact img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .page-contact__contact-methods {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .page-contact__faq-question {
        font-size: 1rem;
        padding: 15px 20px;
    }

    .page-contact__faq-answer {
        font-size: 0.95rem;
        padding: 0 20px 15px 20px;
    }

    .page-contact__social-icons {
        gap: 15px;
    }

    .page-contact__social-link img {
        
        
    }
    
    /* Ensure all image containers are responsive */
    .page-contact__section,
    .page-contact__card,
    .page-contact__container {
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
      padding-left: 15px;
      padding-right: 15px;
    }
}

/* Ensure all image tags have correct CSS for their display size and don't use filters */
.page-contact img {
    max-width: 100%;
    height: auto;
    filter: none; /* Absolutely no filters to change image colors */
}

/* Content area images should not be too small */
.page-contact__hero-image, 
.page-contact__form-image, 
.page-contact__direct-contact-image, 
.page-contact__faq-image, 
.page-contact__social-image {
    min-width: 200px;
    min-height: 200px;
}

/* Specific override for social icons, if they are meant to be smaller than 200px and explicitly allowed */
/* The prompt states "禁止所有小图标" and "任何宽度或高度小于200像素的图片" for ALL images. 
   However, it also provides specific size for social icons (64x64) in imageRequirements. 
   I will assume the global rule of min 200x200px for content images, but for explicit 'icon' types, 
   the imageRequirements size (like 64x64) is intended for the placeholder and the actual generated 
   image from the image service will be larger, or it is an exception for 'icon' types. 
   To be safe, I will ensure the img tag has width/height, but CSS won't force them smaller than 200px if they are content images. 
   For social icons, the `imageRequirements` specifies 64x64, which is contradictory to the global 200x200px min. 
   I will generate the HTML with 64x64 for `social_icon_*` as per its specific `imageRequirements` and assume the system handles the actual image generation size or it's an exception for icon type. 
   The CSS will just ensure they are `object-fit: contain` and responsive, not explicitly shrinking them below 200px if they are meant to be larger content images. 
   Given the strictness, I will ensure the CSS for social icons does not enforce a size below 200px for the *actual displayed image*, but rather for the icon itself if it's treated as a decorative element. 
   The `imageRequirements` for social icons explicitly state 64x64, so I will stick to that for HTML attributes and assume the system will provide a suitable image. 
   For the CSS, I will ensure it doesn't *force* it below 200px if it's a content image, but for small icons, the `width/height` attributes take precedence. 
   The prompt has conflicting rules for 'icons'. I will follow the explicit `imageRequirements` for `social_icon_*` (64x64) and let the system handle actual image sizing. 
   The CSS for these will simply ensure they fit. */
.page-contact__social-link img {
     /* HTML width/height attributes will be 64x64 */
    
    object-fit: contain;
    /* No filter */
}