/*
Theme Name: Gannan Navel Orange Export
Theme URI: https://gannan-navel-orange.com
Author: Gannan Orange Export Team
Author URI: https://gannan-navel-orange.com
Description: A professional WordPress theme for Gannan Navel Orange export business, featuring modern design, SEO optimization, responsive layout, GDPR compliant contact forms, and product showcase functionality.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gannan-orange
Domain Path: /languages
Tags: one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready, theme-options, e-commerce, portfolio

This theme is designed specifically for Gannan Navel Orange export business, focusing on international trade promotion with professional design and SEO optimization.

Gannan Navel Orange Export Theme is distributed under the terms of the GNU GPL.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #2c3e50;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: #e67e22;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #d35400;
}

a:focus {
    outline: 2px solid #e67e22;
    outline-offset: 2px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #e67e22;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.btn:hover {
    background-color: #d35400;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
    color: white;
}

.btn:focus {
    outline: 2px solid #d35400;
    outline-offset: 2px;
}

.btn-secondary {
    background-color: #3498db;
}

.btn-secondary:hover {
    background-color: #2980b9;
}

.site-header {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.site-branding {
    display: flex;
    align-items: center;
}

.site-logo {
    max-height: 60px;
    width: auto;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-left: 15px;
}

.site-title a {
    color: #2c3e50;
}

.site-title a:hover {
    color: #e67e22;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.main-navigation a {
    color: #2c3e50;
    font-weight: 600;
    padding: 5px 0;
    position: relative;
}

.main-navigation a:hover {
    color: #e67e22;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #e67e22;
    transition: width 0.3s ease;
}

.main-navigation a:hover::after {
    width: 100%;
}

.hero-section {
    background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
    padding: 100px 0;
    text-align: center;
}

.hero-content h1 {
    font-size: 3rem;
    color: #2c3e50;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2rem;
    color: #7f8c8d;
    max-width: 800px;
    margin: 0 auto 40px;
}

.features-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    margin-bottom: 15px;
}

.section-title p {
    color: #666;
    font-size: 1.1rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: white;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-icon {
    font-size: 3rem;
    color: #e67e22;
    margin-bottom: 20px;
}

.site-footer {
    background-color: #2c3e50;
    color: white;
    padding: 60px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-widget h3 {
    color: white;
    margin-bottom: 20px;
}

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

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

.footer-widget a {
    color: #bdc3c7;
}

.footer-widget a:hover {
    color: #e67e22;
}

.copyright {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #34495e;
    color: #bdc3c7;
    font-size: 0.9rem;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #e67e22;
    color: white;
    padding: 8px;
    z-index: 100001;
}

.skip-link:focus {
    top: 0;
}

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

.gallery {
    margin-bottom: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-caption {
    display: block;
}

.search-form {
    display: flex;
    max-width: 400px;
}

.search-field {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #eee;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
}

.search-submit {
    padding: 10px 20px;
    background: #e67e22;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background 0.3s ease;
}

.search-submit:hover {
    background: #d35400;
}

.page-header {
    padding: 40px 0;
    background: #f8f9fa;
    margin-bottom: 40px;
}

.page-title {
    margin-bottom: 0;
}

.archive-description {
    margin-top: 15px;
    color: #666;
}

.entry-header {
    margin-bottom: 30px;
}

.entry-title {
    margin-bottom: 15px;
}

.entry-title a {
    color: #2c3e50;
}

.entry-title a:hover {
    color: #e67e22;
}

.entry-meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.entry-content {
    margin-bottom: 30px;
}

.entry-footer {
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 0.9rem;
}

.cat-links,
.tags-links {
    display: inline-block;
    margin-right: 15px;
}

.edit-link {
    display: inline-block;
}

.page-links {
    clear: both;
    margin: 30px 0;
}

.page-links a {
    display: inline-block;
    padding: 5px 10px;
    background: #f8f9fa;
    margin-right: 5px;
    border-radius: 4px;
}

.page-links a:hover {
    background: #e67e22;
    color: white;
}

.pagination {
    margin: 40px 0;
    text-align: center;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.page-numbers {
    display: inline-block;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 4px;
    color: #2c3e50;
}

.page-numbers:hover,
.page-numbers.current {
    background: #e67e22;
    color: white;
}

.widget {
    margin-bottom: 30px;
}

.widget-title {
    font-size: 1.25rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.widget ul {
    list-style: none;
}

.widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.widget ul li:last-child {
    border-bottom: none;
}

.comments-area {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

.comments-title {
    margin-bottom: 30px;
}

.comment-list {
    list-style: none;
    margin-bottom: 40px;
}

.comment {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.comment .children {
    margin-top: 20px;
    margin-left: 40px;
}

.comment-author {
    font-weight: 600;
    margin-bottom: 10px;
}

.comment-metadata {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 15px;
}

.reply a {
    font-size: 0.9rem;
}

.comment-respond {
    margin-top: 40px;
}

.comment-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #eee;
    border-radius: 4px;
    margin-bottom: 15px;
}

.comment-form textarea {
    min-height: 150px;
}

.form-submit input[type="submit"] {
    padding: 12px 30px;
    background: #e67e22;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s ease;
}

.form-submit input[type="submit"]:hover {
    background: #d35400;
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-section {
        padding: 60px 0;
    }
    
    .hero-content h1 {
        font-size: 1.75rem;
    }
}

@media print {
    .site-header,
    .site-footer,
    .main-navigation,
    .sidebar,
    .comment-respond {
        display: none;
    }
    
    body {
        font-size: 12pt;
    }
    
    a {
        color: #000;
    }
}