/*
Theme Name:   Goldone
Theme URI:    https://goldone.vn
Author:       Goldone
Author URI:   https://goldone.vn
Description:  Goldone – a modern block-based WordPress theme with a powerful page-builder experience inspired by Flatsome. Comes with pre-built blocks, patterns and deep integration with the Goldone Product Element plugin.
Version:      1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  goldone
Tags:         full-site-editing, block-patterns, custom-blocks, restaurant, food, e-commerce, portfolio, blog
*/

/* -----------------------------------------------------------------------
   Reset & Base
----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --gd-color-primary:   #c8a96e;
    --gd-color-secondary: #1a1a1a;
    --gd-color-accent:    #e8c47e;
    --gd-color-light:     #f9f5ee;
    --gd-color-dark:      #111111;
    --gd-color-text:      #333333;
    --gd-color-muted:     #888888;
    --gd-color-border:    #e5e5e5;
    --gd-color-white:     #ffffff;

    --gd-font-heading: 'Playfair Display', Georgia, serif;
    --gd-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --gd-font-size-xs:  0.75rem;
    --gd-font-size-sm:  0.875rem;
    --gd-font-size-md:  1rem;
    --gd-font-size-lg:  1.125rem;
    --gd-font-size-xl:  1.25rem;
    --gd-font-size-2xl: 1.5rem;
    --gd-font-size-3xl: 2rem;
    --gd-font-size-4xl: 2.5rem;
    --gd-font-size-5xl: 3.5rem;

    --gd-space-xs:  0.25rem;
    --gd-space-sm:  0.5rem;
    --gd-space-md:  1rem;
    --gd-space-lg:  1.5rem;
    --gd-space-xl:  2rem;
    --gd-space-2xl: 3rem;
    --gd-space-3xl: 4rem;
    --gd-space-4xl: 6rem;

    --gd-radius-sm: 4px;
    --gd-radius-md: 8px;
    --gd-radius-lg: 16px;
    --gd-radius-xl: 24px;
    --gd-radius-full: 9999px;

    --gd-shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --gd-shadow-md:  0 4px 16px rgba(0,0,0,.12);
    --gd-shadow-lg:  0 8px 32px rgba(0,0,0,.16);
    --gd-shadow-xl:  0 16px 48px rgba(0,0,0,.20);

    --gd-container-width: 1280px;
    --gd-container-padding: 1.5rem;

    --gd-header-height: 72px;
    --gd-transition: 0.25s ease;
}

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

body {
    margin: 0;
    font-family: var(--gd-font-body);
    font-size: var(--gd-font-size-md);
    line-height: 1.7;
    color: var(--gd-color-text);
    background-color: var(--gd-color-white);
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gd-color-primary); text-decoration: none; transition: color var(--gd-transition); }
a:hover { color: var(--gd-color-accent); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gd-font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--gd-color-secondary);
    margin-top: 0;
    margin-bottom: 0.5em;
}

/* -----------------------------------------------------------------------
   Layout utilities
----------------------------------------------------------------------- */
.gd-container {
    width: 100%;
    max-width: var(--gd-container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gd-container-padding);
    padding-right: var(--gd-container-padding);
}

.gd-flex { display: flex; }
.gd-grid { display: grid; }

/* -----------------------------------------------------------------------
   Site Header
----------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    height: var(--gd-header-height);
    background: var(--gd-color-white);
    border-bottom: 1px solid var(--gd-color-border);
    box-shadow: var(--gd-shadow-sm);
    transition: box-shadow var(--gd-transition);
}
.site-header.scrolled { box-shadow: var(--gd-shadow-md); }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.site-branding { display: flex; align-items: center; gap: var(--gd-space-sm); }
.site-title { font-size: var(--gd-font-size-xl); font-weight: 800; color: var(--gd-color-secondary); margin: 0; }
.site-title a { color: inherit; }
.site-title span { color: var(--gd-color-primary); }

/* Navigation */
.main-navigation ul { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--gd-space-sm); }
.main-navigation a {
    display: block;
    padding: var(--gd-space-sm) var(--gd-space-md);
    font-size: var(--gd-font-size-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gd-color-secondary);
    border-radius: var(--gd-radius-sm);
    transition: background var(--gd-transition), color var(--gd-transition);
}
.main-navigation a:hover, .main-navigation .current-menu-item > a {
    background: var(--gd-color-light);
    color: var(--gd-color-primary);
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: var(--gd-space-sm); }

/* Mobile toggle */
.menu-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    flex-direction: column; gap: 5px; padding: 8px;
}
.menu-toggle span {
    display: block; width: 24px; height: 2px;
    background: var(--gd-color-secondary);
    transition: all var(--gd-transition);
}

/* -----------------------------------------------------------------------
   Site Footer
----------------------------------------------------------------------- */
.site-footer {
    background: var(--gd-color-secondary);
    color: rgba(255,255,255,0.7);
    padding: var(--gd-space-4xl) 0 0;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gd-space-2xl);
    padding-bottom: var(--gd-space-3xl);
}

.footer-widget-title {
    font-family: var(--gd-font-heading);
    font-size: var(--gd-font-size-lg);
    color: var(--gd-color-white);
    margin-bottom: var(--gd-space-lg);
}

.footer-widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widget ul li { margin-bottom: var(--gd-space-sm); }
.footer-widget a { color: rgba(255,255,255,0.6); transition: color var(--gd-transition); }
.footer-widget a:hover { color: var(--gd-color-primary); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: var(--gd-space-lg) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gd-space-md);
    font-size: var(--gd-font-size-sm);
}

/* -----------------------------------------------------------------------
   Buttons
----------------------------------------------------------------------- */
.gd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gd-space-sm);
    padding: 0.75rem 1.75rem;
    font-family: var(--gd-font-body);
    font-size: var(--gd-font-size-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: var(--gd-radius-sm);
    cursor: pointer;
    transition: all var(--gd-transition);
    text-decoration: none;
    line-height: 1;
}

.gd-btn-primary {
    background: var(--gd-color-primary);
    color: var(--gd-color-white);
    border-color: var(--gd-color-primary);
}
.gd-btn-primary:hover {
    background: var(--gd-color-accent);
    border-color: var(--gd-color-accent);
    color: var(--gd-color-secondary);
    transform: translateY(-2px);
    box-shadow: var(--gd-shadow-md);
}

.gd-btn-outline {
    background: transparent;
    color: var(--gd-color-primary);
    border-color: var(--gd-color-primary);
}
.gd-btn-outline:hover {
    background: var(--gd-color-primary);
    color: var(--gd-color-white);
}

.gd-btn-white {
    background: var(--gd-color-white);
    color: var(--gd-color-secondary);
    border-color: var(--gd-color-white);
}
.gd-btn-white:hover {
    background: transparent;
    color: var(--gd-color-white);
}

.gd-btn-lg { padding: 1rem 2.5rem; font-size: var(--gd-font-size-md); }
.gd-btn-sm { padding: 0.5rem 1.25rem; font-size: var(--gd-font-size-xs); }

/* -----------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root { --gd-container-padding: 1.25rem; }
}

@media (max-width: 768px) {
    :root { --gd-container-padding: 1rem; }

    .menu-toggle { display: flex; }

    .main-navigation {
        display: none;
        position: absolute;
        top: var(--gd-header-height);
        left: 0; right: 0;
        background: var(--gd-color-white);
        border-bottom: 1px solid var(--gd-color-border);
        padding: var(--gd-space-md);
        box-shadow: var(--gd-shadow-md);
    }
    .main-navigation.is-open { display: block; }
    .main-navigation ul { flex-direction: column; }
    .main-navigation a { padding: var(--gd-space-sm) var(--gd-space-md); }
}