/*
 Theme Name:   Narrative Hall Kadence Child
 Theme URI:    https://narrativehall.com/
 Description:  A premium child theme for Narrative Hall website using Kadence parent theme. Featuring modern Indigo and Bookbinder Gold editorial design.
 Author:       Narrative Hall
 Author URI:   https://narrativehall.com/
 Template:     kadence
 Version:      1.0.0
 Text Domain:  narrative-hall-child
*/

/* ==========================================================================
   DESIGN TOKENS & VARIABLES
   ========================================================================== */
:root {
    /* Tier 1 - Literal Tokens */
    --color-midnight-indigo: #0C182B;
    --color-steel-blue: #2E4C7A;
    --color-bookbinders-gold: #BF9B30;
    --color-crisp-white: #FFFFFF;
    --color-off-white: #F9FBFD;
    --color-dark-grey-indigo: #152030;
    --color-gold-foil-light: #F3E7C4;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-700: #334155;
    --color-slate-100: #f1f5f9;
    --color-slate-50: #f8fafc;

    /* Tier 2 - Semantic Tokens */
    --color-primary-bg: var(--color-midnight-indigo);
    --color-primary-text: var(--color-crisp-white);
    --color-accent: var(--color-bookbinders-gold);
    --color-border: var(--color-steel-blue);
    --color-body-bg: var(--color-midnight-indigo);
    --color-body-text: var(--color-crisp-white);
    --color-heading: var(--color-crisp-white);
    --color-card-bg: var(--color-dark-grey-indigo);

    /* Fonts */
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Montserrat', sans-serif;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY
   ========================================================================== */
body {
    font-family: var(--font-body);
    background-color: var(--color-body-bg);
    color: var(--color-body-text);
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-heading);
}

a {
    transition: color 0.3s ease;
}

/* ==========================================================================
   FOIL ACCENT UTILITIES
   ========================================================================== */
.foil-accent-bg {
    background: linear-gradient(135deg, var(--color-bookbinders-gold) 0%, var(--color-gold-foil-light) 50%, var(--color-bookbinders-gold) 100%);
}

.foil-accent-border {
    border: 1px solid transparent;
    background-image:
        linear-gradient(var(--color-midnight-indigo), var(--color-midnight-indigo)),
        linear-gradient(135deg, var(--color-bookbinders-gold) 0%, var(--color-gold-foil-light) 50%, var(--color-bookbinders-gold) 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

/* ==========================================================================
   KADENCE THEME OVERRIDES (Header, Menus, Cart, Footer)
   ========================================================================== */
#masthead,
.site-header {
    background-color: var(--color-midnight-indigo) !important;
}

/* Main menu navigation links */
.main-navigation ul li a,
.header-navigation ul li a {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--color-crisp-white) !important;
    transition: color 0.3s ease !important;
}

.main-navigation ul li a:hover,
.header-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.header-navigation ul li.current-menu-item > a {
    color: var(--color-accent) !important;
}

/* WooCommerce Cart Icon in Header */
.header-cart-icon,
.cart-contents,
.header-cart-link,
.header-cart-wrap .header-cart-button,
.header-cart-wrap a {
    color: var(--color-crisp-white) !important;
}

.header-cart-icon:hover,
.cart-contents:hover,
.header-cart-link:hover,
.header-cart-wrap .header-cart-button:hover,
.header-cart-wrap a:hover {
    color: var(--color-accent) !important;
}

/* Footer */
#colophon,
.site-footer {
    background-color: var(--color-midnight-indigo) !important;
    border-top: 1px solid rgba(46, 76, 122, 0.2) !important;
}

.site-footer a {
    color: var(--color-slate-400) !important;
    transition: color 0.3s ease !important;
}

.site-footer a:hover {
    color: var(--color-accent) !important;
}

/* ==========================================================================
   WOOCOMMERCE OVERRIDES (Dark Sections)
   ========================================================================== */
.woocommerce ul.products li.product .button {
    background-color: var(--color-accent);
    color: var(--color-crisp-white);
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.woocommerce ul.products li.product .button:hover {
    background-color: var(--color-crisp-white);
    color: var(--color-midnight-indigo);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--color-crisp-white);
    font-family: var(--font-body);
}

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

.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--color-accent);
    background-color: var(--color-dark-grey-indigo);
    color: var(--color-crisp-white);
}

/* Single product page Add-to-cart button */
.woocommerce div.product form.cart .button,
.woocommerce .single_add_to_cart_button {
    background-color: var(--color-accent) !important;
    color: var(--color-midnight-indigo) !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    padding: 0.75rem 2rem !important;
    border-radius: 4px !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.3s ease !important;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce .single_add_to_cart_button:hover {
    background-color: var(--color-crisp-white) !important;
    color: var(--color-midnight-indigo) !important;
}

/* ==========================================================================
   CUSTOM COMPONENT CLASSES
   ========================================================================== */
/* Division of Wings Section */
.nh-wing-container {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nh-wing-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Custom ghost button style */
.nh-ghost-button {
    display: inline-block !important;
    background: transparent !important;
    border: 2px solid var(--color-crisp-white) !important;
    color: var(--color-crisp-white) !important;
    padding: 10px 24px !important;
    border-radius: 2px !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.nh-ghost-button:hover {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-crisp-white) !important;
}

/* Custom dark button style */
.nh-dark-button {
    display: inline-block !important;
    background: var(--color-midnight-indigo) !important;
    border: 1px solid var(--color-midnight-indigo) !important;
    color: var(--color-crisp-white) !important;
    padding: 10px 24px !important;
    border-radius: 2px !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.nh-dark-button:hover {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-midnight-indigo) !important;
}

/* Custom icon styling */
.nh-custom-icon {
    width: 64px;
    height: 64px;
    fill: var(--color-accent);
}

.nh-custom-icon path {
    fill: var(--color-accent);
}

/* ==========================================================================
   CONTENT AREA FIXES (For White Cards and Light Backgrounds)
   ========================================================================== */
/* Fix readability on white background sections / white card layout */
.bg-white,
.nh-white-card,
.entry-content-wrap.layout-boxed,
[data-elementor-type="wp-page"] .elementor-section.bg-white,
[data-elementor-type="wp-page"] .elementor-container.bg-white {
    color: var(--color-slate-700);
}

/* Ensure headings inside white cards or light containers are dark indigo */
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6,
.nh-white-card h1, .nh-white-card h2, .nh-white-card h3, .nh-white-card h4, .nh-white-card h5, .nh-white-card h6,
.bg-white .wp-block-heading, .nh-white-card .wp-block-heading {
    color: var(--color-midnight-indigo) !important;
}

/* Style links inside light background content areas */
.bg-white a,
.nh-white-card a,
.entry-content-wrap.layout-boxed a {
    color: var(--color-steel-blue);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.bg-white a:hover,
.nh-white-card a:hover,
.entry-content-wrap.layout-boxed a:hover {
    color: var(--color-bookbinders-gold);
    text-decoration: underline;
}

/* Reset default button style inherits inside light containers */
.bg-white a.wp-block-button__link,
.nh-white-card a.wp-block-button__link {
    text-decoration: none !important;
    color: var(--color-crisp-white) !important;
}
.bg-white a.wp-block-button__link:hover,
.nh-white-card a.wp-block-button__link:hover {
    color: var(--color-midnight-indigo) !important;
}

/* Style lists inside white background containers */
.bg-white ul,
.nh-white-card ul {
    list-style-type: disc !important;
    margin-bottom: 1.5rem;
    padding-left: 2rem !important;
}

.bg-white ol,
.nh-white-card ol {
    list-style-type: decimal !important;
    margin-bottom: 1.5rem;
    padding-left: 2rem !important;
}

.bg-white li,
.nh-white-card li {
    margin-bottom: 0.5rem;
    color: var(--color-slate-700);
}

/* Style blockquotes inside white containers */
.bg-white blockquote,
.nh-white-card blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--color-slate-500);
}

/* WooCommerce Forms/Tables inside white container overrides (Cart/Checkout) */
.bg-white .woocommerce-billing-fields label,
.bg-white .woocommerce-shipping-fields label,
.bg-white .woocommerce-additional-fields label,
.bg-white .woocommerce table.shop_table th,
.bg-white .woocommerce table.shop_table td,
.bg-white .woocommerce-checkout-review-order-table th,
.bg-white .woocommerce-checkout-review-order-table td,
.bg-white #order_review label,
.bg-white .woocommerce-MyAccount-content label {
    color: var(--color-midnight-indigo) !important;
}

.bg-white .woocommerce table.shop_table th {
    border-bottom: 2px solid var(--color-slate-100);
}

.bg-white .woocommerce table.shop_table td {
    border-bottom: 1px solid var(--color-slate-50);
}

.bg-white .woocommerce-checkout #payment {
    background: var(--color-slate-50);
    border-radius: 4px;
}

.bg-white .woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--color-slate-100);
}

.bg-white .woocommerce-checkout #payment div.payment_box {
    background-color: var(--color-slate-100);
    color: var(--color-slate-700);
}

.bg-white select,
.bg-white input[type="text"],
.bg-white input[type="email"],
.bg-white input[type="tel"],
.bg-white input[type="password"],
.bg-white textarea {
    background-color: var(--color-crisp-white) !important;
    color: var(--color-slate-700) !important;
    border: 1px solid var(--color-slate-300) !important;
}

.bg-white select:focus,
.bg-white input[type="text"]:focus,
.bg-white input[type="email"]:focus,
.bg-white input[type="tel"]:focus,
.bg-white input[type="password"]:focus,
.bg-white textarea:focus {
    border-color: var(--color-accent) !important;
    outline: none;
}