/*
Theme Name: Theme 8
Description: A modern, professional theme using the Foundation framework.
*/

/* --- Global Styles --- */
body,
body p {
    font-family: var(--font-family, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif);
    background-color: var(--gray-color, #f9f9f9);
    color: var(--font-color, #444);
    line-height: 1.7;
    font-size: 16px;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif);
    font-weight: bold;
    color: var(--font-dark-color, #222);
    line-height: 1.3;
}

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; }

/* --- Links --- */
a {
    color: var(--primary-color, #3498db);
    text-decoration: none;
    transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
    border-bottom: 1px solid transparent;
}

a:hover, a:active {
    color: var(--primary-color-hover, #2980b9);
    border-bottom-color: var(--primary-color-hover, #2980b9);
    text-decoration: none;
}

/* --- Buttons --- */
.button {
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.button:hover, .button:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.button a,
.button a:visited {
    color: #fff;
    text-decoration: none;
}

.card {
    border: 1px solid var(--section-border-color, #ddd);
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

.card > .card-section {
    padding: 1.5rem;
}

/* --- Header --- */
.site-header {
    background-color: #fff;
    border-bottom: 1px solid var(--section-border-color, #ddd);
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.logo-link img {
    max-height: 50px;
    margin-right: 1rem;
}

.site-name-header {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--font-dark-color, #222);
}

.menu-icon {
    font-size: 1.8rem;
}

/* --- Menu --- */
.dropdown.menu a {
    color: var(--font-color, #444);
    font-weight: bold;
}

.dropdown.menu a:hover,
.dropdown.menu a:focus,
.dropdown.menu a:active {
    background-color: var(--gray-hover-color, #f2f2f2);
    color: var(--primary-color-hover, #2980b9);
}

.is-dropdown-submenu-parent > a::after {
    border-color: var(--primary-color, #3498db) transparent transparent;
}

/* --- Forms --- */
label {
    font-weight: bold;
    color: var(--font-dark-color, #222);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    border: 1px solid var(--section-border-color, #ddd);
    border-radius: 3px;
    padding: 0.75rem;
    box-shadow: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color, #3498db);
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

.auth-card .card-section {
    padding: 2rem;
}

/* --- Lists --- */
.no-bullet {
    list-style-type: none;
    margin-left: 0;
}

.no-bullet li {
    margin-bottom: 0.5rem;
}

/* --- Tables --- */
table.hover {
    border: 1px solid var(--section-border-color, #ddd);
    border-radius: 5px;
}

table.hover th {
    background-color: var(--gray-color, #f9f9f9);
}

/* --- Main Content --- */
.main-content {
    padding: 3rem 0;
}

.company-card .card-image {
    overflow: hidden;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.company-card .card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.company-card:hover .card-image img {
    transform: scale(1.08);
}

.company-card h5 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* --- Category Card --- */
.category-card .card-divider {
    color: #fff;
    padding: 1.5rem 1rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.category-card .primary-background {
    background-color: var(--primary-color, #3498db);
}

.category-card .success-background {
    background-color: var(--green-color, #2ecc71);
}

.category-card .warning-background {
    background-color: var(--gold-color, #f1c40f);
}

.category-card .alert-background {
    background-color: var(--secondary-color, #9b59b6);
}

.category-card .secondary-background {
    background-color: var(--font-lighter-color, #888);
}

/* --- Location Card --- */
.location-card {
    display: block;
    color: var(--font-color, #444);
}

.location-card:hover {
    color: var(--primary-color, #3498db);
}

.location-card i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* --- Blog List --- */
.blog-post-item {
    margin-bottom: 2rem;
}

.blog-post-item .blog-image {
    border-radius: 5px;
}

.blog-post-item .blog-title {
    font-size: 1.3rem;
    font-weight: bold;
}

.blog-post-item .blog-meta {
    font-size: 0.9rem;
    color: var(--font-lighter-color, #888);
    margin-bottom: 1rem;
}

/* --- Blog Post --- */
.blog-post-container {
    background-color: #fff;
    padding: 3rem;
    border-radius: 5px;
}

.blog-post-title {
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.blog-post-meta {
    font-size: 0.9rem;
    color: var(--font-lighter-color, #888);
    margin-bottom: 2rem;
}

.post-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.post-content h2, .post-content h3 {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.post-content blockquote {
    border-left: 4px solid var(--primary-color, #3498db);
    padding-left: 1.5rem;
    font-style: italic;
    color: var(--font-lighter-color, #888);
    margin: 2rem 0;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 2rem 0;
}

/* --- Author --- */
.author-card {
    display: flex;
    align-items: center;
    background-color: var(--gray-color, #f9f9f9);
    padding: 1.5rem;
    border-radius: 5px;
    border: 1px solid var(--section-border-color, #ddd);
}

.author-avatar,
.author-avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 1.5rem;
}

.author-info .author-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.author-info .author-website {
    margin-bottom: 0.5rem;
}

.author-info .author-bio {
    font-size: 0.9rem;
    color: var(--font-lighter-color, #888);
}

/* --- Pagination --- */
.pagination {
    margin-top: 2rem;
}

.pagination .current {
    background: var(--primary-color, #3498db);
    color: #fff;
    font-weight: bold;
}

/* --- Search Results --- */
.search-header {
    margin-bottom: 2rem;
}

.search-title {
    font-size: 1.8rem;
    font-weight: bold;
}

.search-count {
    color: var(--font-lighter-color, #888);
}

/* --- Sitemap --- */
.sitemap-card a {
    display: block;
    padding: 1rem;
    font-weight: bold;
    word-break: break-all;
}

/* --- Footer --- */
.site-footer {
    background-color: var(--footer-bg-color, #34495e);
    color: var(--footer-color, #ecf0f1);
    padding: 3rem 0;
    margin-top: 3rem;
}

.site-footer a {
    color: var(--font-light-color, #fff);
}

.site-footer a:hover {
    color: var(--primary-color, #3498db);
}

.site-footer .menu {
    justify-content: flex-end;
}

/* --- Off-Canvas Menu --- */
.off-canvas {
    background: var(--gray-dark-color, #e0e0e0);
}

.off-canvas .menu a {
    color: var(--primary-color, #3498db);
    font-weight: bold;
}

.off-canvas .menu a:hover {
    color: var(--primary-color-hover, #2980b9);
}

.text-white {
    color: #fff !important;
}

/* --- Responsive --- */
@media screen and (max-width: 640px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.1rem; }
    h6 { font-size: 1rem; }

    .main-content {
        padding: 1.5rem 0;
    }
}