/*
 * GCTF Taste-Skill Refactor CSS
 * ==============================
 *
 * Design Read: NGO/Organization institutional site, trust-first,
 *   clean typography + restrained color + Vietnamese accessibility.
 *
 * Dials: VARIANCE=6, MOTION=3, DENSITY=4
 *
 * This file overrides Enfold defaults with taste-skill principles.
 * Organized by concern: Typography → Color → Layout → Cards → NAV → Footer → Responsive
 */

/* ================================================================
 * 1. TYPOGRAPHY — Clean sans-serif, no Inter, Vietnamese-safe
 * ================================================================ */

/*
 * !important used here because Enfold dynamic CSS (uploads/dynamic_avia/)
 * injects font-family on same selectors with equal specificity.
 * Without !important, Open Sans Google Font wins → wasted render-blocking download.
 * The child theme system font stack MUST win.
 */
body,
#top,
#top #wrap_all,
#main,
.avia_textblock,
.entry-content,
.content,
.widget,
.sidebar,
#socket,
.main_color,
.alternate_color {
    font-family: var(--gctf-font-sans) !important;
    color: var(--gctf-text);
    line-height: var(--gctf-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings — tighter leading, cleaner weight */
h1, h2, h3, h4, h5, h6,
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
.av-special-heading-tag,
.main-title,
.entry-title,
.post-title,
.widgettitle,
.avia-content-slider .slide-entry-title {
    font-family: var(--gctf-font-display) !important;
    color: var(--gctf-text);
    line-height: var(--gctf-line-heading);
    letter-spacing: -0.015em;
    font-weight: 600;
}

h1, .av-special-heading .av-special-heading-tag { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

/* Body copy — max-width for readability */
p, li, .avia_textblock p, .entry-content p {
    max-width: 65ch;
    color: var(--gctf-text);
}

.avia_textblock p + p {
    margin-top: var(--gctf-space-md);
}


/* ================================================================
 * 2. COLOR SYSTEM — Trust-first institutional palette
 *    No AI-purple, no beige+brass, no warm-paper backgrounds
 * ================================================================ */

/* Page background — clean slate (overrides dynamic CSS #333333) */
body,
#wrap_all,
#main,
.html_boxed #wrap_all,
html.html_boxed,
.boxed#top,
.boxed #wrap_all {
    background-color: var(--gctf-bg) !important;
}

/* Content areas — white surface on light bg */
.content,
.template-page,
.entry-content-wrapper,
#main .container_wrap,
.container_wrap,
.avia-section .content {
    background-color: var(--gctf-bg);
}

/* Alternate sections — white card surface */
.av_alternating_color,
.alternate_color,
.avia-section.alternate_color,
.av_alternating_color .container_wrap {
    background-color: var(--gctf-surface);
}

/* Primary accent — links & interactive */
a,
a:visited,
.main_color a,
.avia_textblock a,
.entry-content a {
    color: var(--gctf-primary);
    text-decoration: none;
    transition: color var(--gctf-transition);
}

a:hover,
a:focus,
.main_color a:hover,
.avia_textblock a:hover {
    color: var(--gctf-primary-dark);
    text-decoration: underline;
}

/* Underline on hover only for text links (not nav/buttons) */
.entry-content a,
.avia_textblock a,
.widget a {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ================================================================
 * 3. BUTTONS — Anti-slop: no generic AI purple glow
 * ================================================================ */

/* Primary buttons */
.avia-button,
.avia-button.avia-color-theme-color,
.avia-button.avia-color-dark,
input[type="submit"],
button[type="submit"],
.wp-block-button__link {
    background-color: var(--gctf-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--gctf-radius);
    padding: 0.625rem 1.5rem;
    font-family: var(--gctf-font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color var(--gctf-transition),
                transform var(--gctf-transition),
                box-shadow var(--gctf-transition);
    text-decoration: none !important;
}

.avia-button:hover,
.avia-button:focus,
input[type="submit"]:hover,
button[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--gctf-primary-dark);
    color: #ffffff;
    box-shadow: var(--gctf-shadow-md);
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Tactile push on click (4.5) */
.avia-button:active,
input[type="submit"]:active,
button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: var(--gctf-shadow-sm);
}

/* Secondary / ghost buttons */
.avia-button.avia-color-light,
.avia-button.avia-color-theme-color-subtle {
    background-color: transparent;
    color: var(--gctf-primary);
    border: 1.5px solid var(--gctf-primary);
}

.avia-button.avia-color-light:hover,
.avia-button.avia-color-theme-color-subtle:hover {
    background-color: var(--gctf-primary);
    color: #ffffff;
}

/* ================================================================
 * 4. LAYOUT — Grid-based, anti-center bias, responsive
 * ================================================================ */

/* Contain page width (overrides dynamic CSS 1130px) */
#wrap_all,
.container,
.responsive .container,
.responsive .boxed#top,
.html_boxed.html_header_sticky #header,
.responsive #top #wrap_all .container {
    max-width: 1400px !important;
}

/* Section spacing */
.avia-section,
.container_wrap,
.content {
    padding-top: var(--gctf-space-3xl);
    padding-bottom: var(--gctf-space-3xl);
}

/* Sidebar — clean spacing */
.sidebar {
    padding: var(--gctf-space-xl) 0;
}

.sidebar .widget {
    margin-bottom: var(--gctf-space-xl);
    padding: var(--gctf-space-lg);
    background: var(--gctf-surface);
    border-radius: var(--gctf-radius);
    box-shadow: var(--gctf-shadow-sm);
}

/* ================================================================
 * 5. CARDS & BOXES — Consistent radius, tinted shadows
 * ================================================================ */

.avia-content-slider .slide-entry,
.avia-content-slider .slide-entry-wrap,
.avia-builder-el,
.iconbox,
.avia-icon-list,
.av-magazine-entry,
.grid-entry,
.portfolio-entry,
.avia-testimonial,
.avia-table,
.wp-block-table table {
    border-radius: var(--gctf-radius);
}

/* Cards — clean elevation, no pure-black shadows */
.iconbox,
.avia-icon-list .iconlist_content,
.avia-testimonial {
    background: var(--gctf-surface);
    box-shadow: var(--gctf-shadow-sm);
    border: 1px solid var(--gctf-border-light);
    padding: var(--gctf-space-xl);
    transition: box-shadow var(--gctf-transition),
                transform var(--gctf-transition);
}

.iconbox:hover,
.avia-testimonial:hover {
    box-shadow: var(--gctf-shadow-md);
    transform: translateY(-2px);
}

/* ================================================================
 * 6. NAVIGATION & HEADER — Clean, capped height
 * ================================================================ */

#header {
    background-color: var(--gctf-surface);
    border-bottom: 1px solid var(--gctf-border);
    box-shadow: var(--gctf-shadow-sm);
}

/* Navigation max height 80px cap (taste 4.7) */
#header_main {
    max-height: 80px;
}

#header_main .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* Menu items — clean typography, single-line enforce */
.main_menu ul:first-child > li > a,
.av-main-nav > li > a {
    font-family: var(--gctf-font-sans);
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--gctf-text);
    letter-spacing: normal;
    text-transform: none;
    padding: 0 14px;
    line-height: 80px;
    transition: color var(--gctf-transition);
}

.av-main-nav > li > a:hover,
.av-main-nav > li > a:focus,
.av-main-nav > li.current-menu-item > a,
.av-main-nav > li.current_page_item > a {
    color: var(--gctf-primary);
}

/* Dropdown menus */
.av-main-nav ul {
    background: var(--gctf-surface);
    border-radius: var(--gctf-radius);
    box-shadow: var(--gctf-shadow-lg);
    border: 1px solid var(--gctf-border);
}

.av-main-nav ul a {
    font-family: var(--gctf-font-sans);
    color: var(--gctf-text);
    padding: 10px 18px;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--gctf-border-light);
}

.av-main-nav ul a:hover {
    background-color: var(--gctf-bg);
    color: var(--gctf-primary);
}

/* ================================================================
 * 7. FOOTER & SOCKET — Clean institutional
 * ================================================================ */

#footer {
    background-color: #1e293b;
    color: #cbd5e1;
    padding: var(--gctf-space-3xl) 0 var(--gctf-space-xl);
}

#footer a {
    color: #94a3b8;
}

#footer a:hover {
    color: #ffffff;
}

#footer .widgettitle {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: var(--gctf-space-lg);
}

#socket {
    background-color: #0f172a;
    color: #64748b;
    font-size: 0.8125rem;
    padding: var(--gctf-space-md) 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

#socket a {
    color: #94a3b8;
}

/* ================================================================
 * 8. TABLES — Clean, readable (document-heavy site)
 * ================================================================ */

.avia-table,
.wp-block-table table,
table.wp-table-reloaded,
.avia-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--gctf-radius);
    overflow: hidden;
    box-shadow: var(--gctf-shadow-sm);
    font-size: 0.9375rem;
}

.avia-table th,
.wp-block-table th,
table.wp-table-reloaded th,
.avia-data-table th {
    background-color: var(--gctf-primary);
    color: #ffffff;
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.avia-table td,
.wp-block-table td,
table.wp-table-reloaded td,
.avia-data-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--gctf-border-light);
    background: var(--gctf-surface);
}

.avia-table tr:last-child td,
.wp-block-table tr:last-child td {
    border-bottom: none;
}

.avia-table tr:nth-child(even) td {
    background-color: var(--gctf-bg);
}

/* ================================================================
 * 9. FORMS — Clean, accessible, above-label pattern
 * ================================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select,
.wpcf7 input,
.wpcf7 textarea {
    font-family: var(--gctf-font-sans);
    font-size: 0.9375rem;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--gctf-border);
    border-radius: var(--gctf-radius-sm);
    background: var(--gctf-surface);
    color: var(--gctf-text);
    transition: border-color var(--gctf-transition),
                box-shadow var(--gctf-transition);
    width: 100%;
    max-width: 100%;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--gctf-primary);
    box-shadow: 0 0 0 3px rgba(13, 107, 94, 0.12);
}

/* Labels above inputs (taste 4.6) */
label,
.wpcf7 label {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gctf-text);
    margin-bottom: 0.375rem;
}

/* ================================================================
 * 10. RESPONSIVE — Mobile-first collapse
 * ================================================================ */

@media (max-width: 767px) {
    h1, .av-special-heading .av-special-heading-tag {
        font-size: 1.625rem;
    }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.125rem; }

    .avia-section,
    .container_wrap,
    .content {
        padding-top: var(--gctf-space-2xl);
        padding-bottom: var(--gctf-space-2xl);
    }

    #header_main {
        max-height: none;
    }
}

/* ================================================================
 * 11. ACCESSIBILITY — Reduced motion, contrast
 * ================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gctf-primary);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--gctf-primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    border-radius: 0 0 var(--gctf-radius) 0;
}

.skip-to-content:focus {
    top: 0;
}

/* ================================================================
 * 11.5. SELECTION COLOR — Teal-green (override Enfold grass-green)
 * ================================================================ */

::-moz-selection {
    background-color: var(--gctf-primary) !important;
    color: #ffffff;
}
::selection {
    background-color: var(--gctf-primary) !important;
    color: #ffffff;
}

/* ================================================================
 * 12. ANTI-SLOP OVERRIDES — Kill AI defaults
 * ================================================================ */

/* Kill centered hero text (VARIANCE=6 → left-align) */
.avia_textblock.av_textblock_center,
.align_center {
    text-align: left;
}

/* Exception: truly centered decorative elements */
.avia_textblock.av_textblock_center.av-center-exception {
    text-align: center;
}

/* Kill generic AI-purple gradient backgrounds */
.avia-section[style*="linear-gradient"],
.avia-section[style*="radial-gradient"] {
    /* Overridden by palette below — keeps only if intentional */
}

/* Remove stock Enfold rounded-corners-overuse on everything */
.avia-builder-el {
    border-radius: var(--gctf-radius);
}

/* Enfold social icons — clean hover */
.av-social-sharing-box .av-share-box ul li a {
    border-radius: var(--gctf-radius-sm);
    transition: background var(--gctf-transition);
}

/* Consistent image border-radius */
.avia_image,
.avia-image-container-inner,
.wp-block-image img,
.attachment img,
.wp-caption img,
.avia_image img,
.avia-image-container img {
    border-radius: var(--gctf-radius);
}

/* ================================================================
 * 13. DARK MODE SUPPORT (auto preference)
 * ================================================================ */
/* Disabled by default — institutional site stays light.
   Uncomment below to enable prefers-color-scheme support. */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --gctf-bg:      #0f172a;
        --gctf-surface: #1e293b;
        --gctf-text:    #e2e8f0;
        --gctf-border:  #334155;
    }
    body, #wrap_all, #main { background-color: var(--gctf-bg); }
    .content, .container_wrap { background-color: var(--gctf-bg); }
    .sidebar .widget { background: var(--gctf-surface); }
    #header { background: var(--gctf-surface); }
}
*/