/*
Theme Name:   Designed In Ink Child
Theme URI:    https://designedinink.com
Description:  Astra child theme for Designed In Ink
Author:       Designed In Ink
Template:     astra
Version:      1.0.0
Text Domain:  designed-in-ink-child
*/

/*
 * SITEWIDE styles — header, global Astra overrides, sitewide utilities.
 * Homepage styles  → assets/css/homepage.css
 * Footer styles    → assets/css/footer.css
 * Font faces       → assets/css/fonts.css
 *
 * HEADER COLOR: #5C8BA4
 * To change: find/replace #5C8BA4 and #3d6a82 throughout this file.
 *
 * SINGLE-ROW HEADER SETUP (matches HatLaunch / Sticker Mule style):
 *   In Astra Customizer → Header Builder:
 *   - Above Header row: DISABLED
 *   - Primary Header: logo left, menu center/right, HTML element far right
 *   - Logo max width: 160px (set in Customizer → Header → Logo)
 *   - Header height: 70px (set in Customizer → Header → Primary Header → Height)
 *   - Transparent Header: disabled (we use solid brand blue)
 */

/* ═══════════════════════════════════════════════════════════════
   1. HIDE TOP BAR / ABOVE HEADER
   Removes Astra's above-header row completely.
   If you re-enable it in Customizer, remove these rules.
═══════════════════════════════════════════════════════════════ */

.ast-above-header-bar,
.ast-above-header,
#ast-above-header-bar {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. PRIMARY HEADER — single row, brand blue background
═══════════════════════════════════════════════════════════════ */

.site-header,
.ast-primary-header-bar,
#masthead {
    background-color: #5C8BA4 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Sticky header on scroll */
.ast-sticky-active .site-header,
.ast-sticky-active .ast-primary-header-bar,
.ast-header-sticked .ast-primary-header-bar {
    background-color: #5C8BA4 !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18) !important;
}

/* Logo sizing — controlled primarily via Customizer but enforced here */
.ast-primary-header-bar .site-logo img,
.ast-primary-header-bar .custom-logo,
.ast-primary-header-bar .astra-logo-svg {
    max-height: 56px !important;
    width: auto !important;
}

/* Remove any extra padding Astra adds around the logo */
.ast-primary-header-bar .ast-site-identity {
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. NAVIGATION LINKS
═══════════════════════════════════════════════════════════════ */

/* All nav links white */
.ast-primary-header-bar .main-header-menu .menu-item > a,
.ast-primary-header-bar .main-header-menu .menu-item > a:visited {
    color: #ffffff !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
}

/* Hover state */
.ast-primary-header-bar .main-header-menu .menu-item > a:hover,
.ast-primary-header-bar .main-header-menu .menu-item > a:focus {
    color: rgba(255,255,255,0.78) !important;
    text-decoration: none !important;
}

/* Active / current page */
.ast-primary-header-bar .main-header-menu .current-menu-item > a,
.ast-primary-header-bar .main-header-menu .current-menu-ancestor > a {
    color: #ffffff !important;
    opacity: 1 !important;
    border-bottom: 2px solid rgba(255,255,255,0.5) !important;
}

/* Dropdown arrow color */
.ast-primary-header-bar .main-header-menu .menu-item .ast-menu-toggle,
.ast-primary-header-bar .main-header-menu .menu-item .dropdown-toggle {
    color: rgba(255,255,255,0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. DROPDOWN SUBMENUS
   Dark blue — distinct from the header but on-brand
═══════════════════════════════════════════════════════════════ */

.ast-primary-header-bar .main-header-menu .sub-menu {
    background-color: #2a4f63 !important;
    border-top: 2px solid rgba(255,255,255,0.15) !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
    min-width: 200px !important;
}

.ast-primary-header-bar .main-header-menu .sub-menu .menu-item > a {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.ast-primary-header-bar .main-header-menu .sub-menu .menu-item > a:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}

.ast-primary-header-bar .main-header-menu .sub-menu .menu-item:last-child > a {
    border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. LOGO / SITE TITLE TEXT (if using text instead of image logo)
═══════════════════════════════════════════════════════════════ */

.ast-primary-header-bar .site-title a,
.ast-primary-header-bar .site-title a:hover,
.ast-primary-header-bar .site-title a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

.ast-primary-header-bar .site-description {
    color: rgba(255,255,255,0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. REQUEST A QUOTE BUTTON
   Styles the HTML element added to the header builder.
   The <a> tag uses class="dii-header-cta" for targeting.
   Also styles the WooCommerce cart icon if present.
═══════════════════════════════════════════════════════════════ */

.dii-header-cta,
.ast-primary-header-bar .ast-header-html-code a.dii-header-cta {
    display: inline-block !important;
    background: #ffffff !important;
    color: #5C8BA4 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 9px 18px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    line-height: 1 !important;
}

.dii-header-cta:hover,
.ast-primary-header-bar .ast-header-html-code a.dii-header-cta:hover {
    background: #e8f2f7 !important;
    color: #3d6a82 !important;
    text-decoration: none !important;
}

/* WooCommerce cart icon */
.ast-primary-header-bar .ast-cart-menu-wrap .count,
.ast-primary-header-bar .ast-cart-menu-wrap .ast-cart-totals,
.ast-primary-header-bar .ast-cart-menu-wrap svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Search icon */
.ast-primary-header-bar .ast-search-icon,
.ast-primary-header-bar .search-field {
    color: rgba(255,255,255,0.8) !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. MOBILE HEADER
   Hamburger icon, mobile nav drawer
═══════════════════════════════════════════════════════════════ */

/* Hamburger button */
.ast-mobile-menu-buttons .menu-toggle,
.ast-mobile-menu-buttons .menu-toggle:hover,
button.menu-toggle {
    color: #ffffff !important;
    background: transparent !important;
    border-color: rgba(255,255,255,0.35) !important;
}

.ast-mobile-menu-buttons .menu-toggle svg,
.menu-toggle .svg-icon {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Mobile nav drawer background */
#ast-mobile-header,
.ast-mobile-header-wrap,
.ast-header-break-point .main-header-bar-navigation,
.ast-mobile-popup-drawer .ast-primary-header-bar {
    background-color: #3d6a82 !important;
}

/* Mobile nav links */
.ast-header-break-point .main-header-bar-navigation .menu-item a,
.ast-mobile-header-wrap .main-header-bar-navigation .menu-item a {
    color: #ffffff !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
    font-size: 15px !important;
    padding: 12px 20px !important;
}

.ast-header-break-point .main-header-bar-navigation .menu-item a:hover {
    color: rgba(255,255,255,0.8) !important;
    background: rgba(255,255,255,0.06) !important;
}

/* Mobile submenu toggle */
.ast-header-break-point .main-header-bar-navigation .ast-menu-toggle {
    color: rgba(255,255,255,0.7) !important;
    border-left-color: rgba(255,255,255,0.1) !important;
}

/* Mobile submenu items */
.ast-header-break-point .main-header-bar-navigation .sub-menu {
    background-color: rgba(0,0,0,0.15) !important;
}

.ast-header-break-point .main-header-bar-navigation .sub-menu .menu-item a {
    padding-left: 36px !important;
    font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. SITEWIDE UTILITY OVERRIDES
   Typography, links, WooCommerce buttons — global brand consistency
═══════════════════════════════════════════════════════════════ */

/* Sitewide link color */
a { color: #5C8BA4; }
a:hover { color: #3d6a82; }

/* WooCommerce primary button */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt {
    background-color: #5C8BA4 !important;
    color: #fff !important;
    border-radius: 4px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: #3d6a82 !important;
    color: #fff !important;
}

/* WooCommerce sale badge */
.woocommerce span.onsale {
    background-color: #5C8BA4 !important;
}

/* Astra default button color override */
.ast-button,
.ast-btn,
.wp-block-button__link {
    background-color: #5C8BA4 !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. PAGE TITLES — consistent across all interior pages
═══════════════════════════════════════════════════════════════ */

.ast-page-title-bar {
    background-color: #f4f9fb !important;
    border-bottom: 1px solid #dde8ed !important;
}

.ast-page-title-bar .ast-page-title {
    color: #1a2e38 !important;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

/* Hide page title only on homepage (set per-page via Astra metabox) */
.home .ast-page-title-bar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   10. HEADER ACTIONS — phone + CTA combo (optional)
   Only applies if you use the dii-header-actions HTML in Customizer
═══════════════════════════════════════════════════════════════ */

.dii-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dii-header-phone {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.88) !important;
    text-decoration: none !important;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.dii-header-phone:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Responsive — hide phone number on tablet, keep CTA button */
@media (max-width: 1024px) {
    .dii-header-phone { display: none; }
}
@media (max-width: 768px) {
    .dii-header-actions { gap: 0; }
    .dii-header-cta { font-size: 11px !important; padding: 7px 12px !important; }
}
/* WooCommerce full width fix */
.woocommerce-page #content > .ast-container,
.woocommerce #content > .ast-container,
.single-product #content > .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
.woocommerce-page #primary,
.woocommerce #primary,
.single-product #primary {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
}
/* WooCommerce full width — outer wrappers */
.woocommerce-page #page,
.woocommerce-page #content,
.woocommerce-page .site-content,
.single-product #page,
.single-product #content,
.single-product .site-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
   HEADER — FULL WIDTH ON EVERY PAGE, ALWAYS.
═══════════════════════════════════════════════════════════════ */

.site-header .ast-container,
.ast-primary-header-bar .ast-container,
.main-header-bar .ast-container,
#masthead .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}