/*
Theme Name: Hamburg City Soul
Theme URI: http://localhost:8084
Description: Storefront child theme for Hamburg City Soul — dark theme with gold accents matching the newsletter branding.
Author: Hamburg City Soul
Author URI: http://localhost:8084
Template: storefront
Version: 1.0.0
Text Domain: storefront-hcs-child
*/

/* ==========================================================================
   Color Palette (from Mailchimp newsletter)
   ==========================================================================
   Background:  #110101 (near-black, warm)
   Surface:     #1a1010 (cards, slightly lighter)
   Border:      #2a2a2a
   Gold accent: #e8c547
   Text light:  #f2f2f2
   Text muted:  #cccccc
   Text dim:    #888888
   ========================================================================== */

:root {
    --hcs-bg:       #110101;
    --hcs-surface:  #1a1010;
    --hcs-border:   #2a2a2a;
    --hcs-gold:     #e8c547;
    --hcs-gold-dark:#c4a236;
    --hcs-text:     #f2f2f2;
    --hcs-text-muted: #cccccc;
    --hcs-text-dim: #888888;
    --hcs-danger:   #d9534f;
    --hcs-success:  #5cb85c;
}

/* ==========================================================================
   Global
   ========================================================================== */

body,
body.custom-background,
.site-content,
.hentry {
    background-color: var(--hcs-bg) !important;
    color: var(--hcs-text);
}

a {
    color: var(--hcs-gold);
}

a:hover,
a:focus {
    color: var(--hcs-gold-dark);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header,
.site-header .col-full {
    background-color: var(--hcs-bg);
    border-bottom: 2px solid var(--hcs-gold);
}

.site-title a,
.site-description {
    color: var(--hcs-gold) !important;
}

.site-title a:hover {
    color: var(--hcs-text) !important;
}

.site-branding {
    padding: 1.5em 0;
}

/* Navigation */
.main-navigation ul li a,
.site-header-cart .widget_shopping_cart a,
.site-header-cart a {
    color: var(--hcs-text);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
    color: var(--hcs-gold);
}

.main-navigation ul.menu > li.current-menu-item > a {
    border-bottom-color: var(--hcs-gold);
}

.main-navigation ul ul,
.main-navigation ul.menu ul {
    background-color: var(--hcs-surface);
    border-color: var(--hcs-border);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer,
.site-info {
    background-color: var(--hcs-bg);
    border-top: 2px solid var(--hcs-gold);
    color: var(--hcs-text-dim);
}

.site-footer a {
    color: var(--hcs-gold);
}

.footer-widgets {
    background-color: var(--hcs-surface);
    border-top: 1px solid var(--hcs-border);
}

.footer-widgets .widget-title {
    color: var(--hcs-gold);
}

/* ==========================================================================
   Full-width layout (no sidebar)
   ========================================================================== */

.woocommerce-page #primary.content-area {
    width: 100%;
    float: none;
}

.woocommerce-page #secondary.widget-area {
    display: none;
}

/* ==========================================================================
   Search + Category Filter Bar
   ========================================================================== */

.hcs-filter-bar {
    margin-bottom: 1.5em;
    padding: 1.2em;
    background: var(--hcs-surface);
    border: 1px solid var(--hcs-border);
    border-radius: 4px;
}

.hcs-filter-form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.hcs-filter-search {
    display: flex;
    gap: 0;
}

.hcs-filter-search input[type="search"] {
    flex: 1;
    padding: 0.6em 1em;
    background: var(--hcs-bg);
    border: 1px solid var(--hcs-border);
    border-right: none;
    border-radius: 3px 0 0 3px;
    color: var(--hcs-text);
    font-size: 0.95em;
}

.hcs-filter-search input[type="search"]::placeholder {
    color: var(--hcs-text-dim);
}

.hcs-filter-search input[type="search"]:focus {
    border-color: var(--hcs-gold);
    outline: none;
}

.hcs-filter-search button {
    padding: 0.6em 0.9em;
    background: var(--hcs-gold) !important;
    color: var(--hcs-bg) !important;
    border: 1px solid var(--hcs-gold) !important;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.hcs-filter-search button:hover {
    background: var(--hcs-gold-dark) !important;
    border-color: var(--hcs-gold-dark) !important;
}

.hcs-filter-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.hcs-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.3em 0.8em;
    background: var(--hcs-bg);
    border: 1px solid var(--hcs-border);
    border-radius: 20px;
    color: var(--hcs-text-muted);
    font-size: 0.82em;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.hcs-cat-pill:hover {
    border-color: var(--hcs-gold);
    color: var(--hcs-gold);
}

.hcs-cat-pill.is-active {
    background: var(--hcs-gold);
    border-color: var(--hcs-gold);
    color: var(--hcs-bg);
    font-weight: 700;
}

.hcs-cat-pill.is-active .hcs-cat-count {
    color: var(--hcs-bg);
    opacity: 0.7;
}

.hcs-cat-count {
    font-size: 0.85em;
    color: var(--hcs-text-dim);
}

/* ==========================================================================
   WooCommerce — Shop / Product Grid
   ========================================================================== */

ul.products li.product {
    background-color: var(--hcs-surface);
    border: 1px solid var(--hcs-border);
    border-radius: 4px;
    padding: 1em;
    transition: border-color 0.2s;
}

ul.products li.product:hover {
    border-color: var(--hcs-gold);
}

ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title {
    color: var(--hcs-text) !important;
    font-size: 0.95em;
}

ul.products li.product .price,
.woocommerce ul.products li.product .price {
    color: var(--hcs-gold) !important;
    font-weight: 700;
}

ul.products li.product .star-rating span::before {
    color: var(--hcs-gold);
}

.woocommerce-result-count,
.woocommerce-ordering select {
    color: var(--hcs-text-muted);
    background-color: var(--hcs-surface);
    border-color: var(--hcs-border);
}

/* ==========================================================================
   WooCommerce — Single Product
   ========================================================================== */

.single-product div.product {
    color: var(--hcs-text);
}

.single-product div.product .product_title {
    color: var(--hcs-text);
}

.single-product div.product p.price,
.single-product div.product span.price {
    color: var(--hcs-gold) !important;
    font-size: 1.5em;
}

.single-product div.product .woocommerce-product-details__short-description {
    color: var(--hcs-text-muted);
    border-left: 3px solid var(--hcs-gold);
    padding-left: 1em;
}

.woocommerce-Tabs-panel,
.woocommerce-tabs ul.tabs {
    background-color: var(--hcs-surface);
    border-color: var(--hcs-border);
}

.woocommerce-tabs ul.tabs li {
    background-color: var(--hcs-bg);
    border-color: var(--hcs-border);
}

.woocommerce-tabs ul.tabs li.active {
    background-color: var(--hcs-surface);
    border-bottom-color: var(--hcs-surface);
}

.woocommerce-tabs ul.tabs li a {
    color: var(--hcs-text-muted);
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--hcs-gold);
}

.woocommerce-Tabs-panel {
    color: var(--hcs-text);
}

.woocommerce-Tabs-panel h2 {
    color: var(--hcs-gold);
}

/* Stock status */
.stock.in-stock {
    color: var(--hcs-success);
}

.stock.out-of-stock {
    color: var(--hcs-danger);
}

/* Product meta (SKU, categories, tags) */
.product_meta {
    color: var(--hcs-text-dim);
    border-top-color: var(--hcs-border);
}

.product_meta a {
    color: var(--hcs-gold);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button,
button,
input[type="button"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.added_to_cart {
    background-color: var(--hcs-gold) !important;
    color: var(--hcs-bg) !important;
    border-color: var(--hcs-gold) !important;
    font-weight: 700;
    border-radius: 3px;
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--hcs-gold-dark) !important;
    border-color: var(--hcs-gold-dark) !important;
    color: var(--hcs-bg) !important;
}

/* ==========================================================================
   Forms & Inputs
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select,
.input-text {
    background-color: var(--hcs-surface);
    border-color: var(--hcs-border);
    color: var(--hcs-text);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--hcs-gold);
    outline: none;
}

/* ==========================================================================
   WooCommerce — My Account / Login Forms
   ========================================================================== */

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-form-coupon,
.woocommerce-EditAccountForm,
.woocommerce-ResetPassword,
#customer_login {
    background-color: var(--hcs-surface);
    color: var(--hcs-text);
}

#customer_login .col-1,
#customer_login .col-2 {
    background-color: var(--hcs-surface);
    border-color: var(--hcs-border);
}

.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-form-coupon label {
    color: var(--hcs-text);
}

.woocommerce-form-login .input-text,
.woocommerce-form-register .input-text,
.woocommerce-form-coupon .input-text,
.woocommerce-EditAccountForm .input-text {
    background-color: #f5f5f5 !important;
    color: #111 !important;
    border-color: var(--hcs-border) !important;
}

.woocommerce-LostPassword a,
.woocommerce-form-login a {
    color: var(--hcs-gold);
}

/* ==========================================================================
   Cart & Checkout
   ========================================================================== */

.woocommerce table.shop_table {
    background-color: var(--hcs-surface);
    border-color: var(--hcs-border);
}

.woocommerce table.shop_table th {
    color: var(--hcs-gold);
    border-color: var(--hcs-border);
}

.woocommerce table.shop_table td {
    color: var(--hcs-text);
    border-color: var(--hcs-border);
}

.woocommerce .cart-collaterals .cart_totals {
    background-color: var(--hcs-surface);
    border-color: var(--hcs-border);
}

/* ==========================================================================
   Widgets & Sidebar
   ========================================================================== */

.widget {
    color: var(--hcs-text-muted);
}

.widget-title,
.widgettitle {
    color: var(--hcs-gold);
}

.widget a {
    color: var(--hcs-text);
}

.widget a:hover {
    color: var(--hcs-gold);
}

/* Category list */
.woocommerce .widget_product_categories ul li a {
    color: var(--hcs-text);
}

.woocommerce .widget_product_categories ul li a:hover {
    color: var(--hcs-gold);
}

/* Price filter widget */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
    background-color: var(--hcs-border);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
    background-color: var(--hcs-gold);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    background-color: var(--hcs-gold);
}

/* ==========================================================================
   Breadcrumbs & Pagination
   ========================================================================== */

.storefront-breadcrumb {
    background-color: var(--hcs-bg);
    padding: 0.5em 0;
    margin-bottom: 0;
}

.woocommerce-breadcrumb {
    color: var(--hcs-text-dim);
    font-size: 0.8em;
    padding: 0;
    margin: 0;
}

.woocommerce-breadcrumb a {
    color: var(--hcs-text-muted);
}

.woocommerce-breadcrumb a:hover {
    color: var(--hcs-gold);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background-color: var(--hcs-surface);
    border-color: var(--hcs-border);
    color: var(--hcs-text);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--hcs-gold);
    color: var(--hcs-bg);
    border-color: var(--hcs-gold);
}

/* ==========================================================================
   Misc
   ========================================================================== */

.page-title,
.entry-title,
h1, h2, h3, h4, h5, h6 {
    color: var(--hcs-text);
}

hr {
    border-color: var(--hcs-border);
}

mark,
.woocommerce-info,
.woocommerce-message {
    background-color: var(--hcs-surface);
    border-color: var(--hcs-gold);
    color: var(--hcs-text);
}

.woocommerce-info::before,
.woocommerce-message::before {
    color: var(--hcs-gold);
}

.woocommerce-error {
    background-color: var(--hcs-surface);
    border-color: var(--hcs-danger);
    color: var(--hcs-text);
}

/* Onsale badge */
.woocommerce span.onsale {
    background-color: var(--hcs-gold);
    color: var(--hcs-bg);
}

/* Scrollbar (webkit) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--hcs-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--hcs-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--hcs-gold-dark);
}