/*
Theme Name:   Hermes (Blocksy Child)
Theme URI:    https://hermesseg.io
Description:  Hermes SEG branding overlay on Blocksy. Adds the orange palette, Inter typography, header treatment, and a few layout adjustments. Kept intentionally minimal so Blocksy updates apply cleanly.
Author:       Deeztek
Author URI:   https://hermesseg.io
Template:     blocksy
Version:      0.1.32
License:      Proprietary
Text Domain:  hermes-blocksy-child
*/

/* ---------------------------------------------------------------------------
 * Self-hosted Cabinet Grotesk 800 (wordmark only — subset to "HermesSEG"
 * + space, 1.1 KB). Original full font from Fontshare (OFL-licensed); subset
 * with pyftsubset --text="HermesSEG". Zero external font dependency for the
 * brand-critical asset.
 * --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Cabinet Grotesk';
    src: url('assets/fonts/cabinet-grotesk-800-hermesseg.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
 * Brand tokens
 * --------------------------------------------------------------------------- */
:root {
    /* Brand orange matches the logo mark (#f0a000 sampled from the PNG).
     * Earlier value (#ee6c2b) was a more red burnt-orange and clashed with
     * the logo's golden amber tone.  */
    --hermes-accent:       #f0a000;
    --hermes-accent-dark:  #c08000;
    --hermes-accent-light: #ffc04a;
    --hermes-ink:          #1d1f21;
    --hermes-muted:        #586069;
    --hermes-line:         #e1e4e8;
    --hermes-bg-soft:      #f6f8fa;
    --hermes-bg-callout:   #fff4ec;

    /* Hand these to Blocksy's CSS-variable system so its native styling
       (buttons, links, header accents) tracks our palette. Names match
       Blocksy's documented design tokens. */
    --theme-palette-color-1: var(--hermes-accent);
    --theme-palette-color-2: var(--hermes-accent-dark);
    --theme-palette-color-3: var(--hermes-ink);
    --theme-palette-color-4: var(--hermes-muted);
    --theme-palette-color-5: var(--hermes-bg-soft);
    --theme-palette-color-6: var(--hermes-line);
    --theme-palette-color-7: #ffffff;
    --theme-palette-color-8: var(--hermes-bg-callout);
}

/* ---------------------------------------------------------------------------
 * Typography — Inter for everything (enqueued from Google Fonts in functions.php)
 * --------------------------------------------------------------------------- */
body,
.entry-content,
.ct-main,
button,
input,
select,
textarea {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-feature-settings: "cv02", "cv03", "cv11";
    font-feature-settings: "cv02", "cv03", "cv11";
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hermes-ink);
}

body {
    color: var(--hermes-ink);
    line-height: 1.65;
}

/* ---------------------------------------------------------------------------
 * Links and accent treatment
 * --------------------------------------------------------------------------- */
a {
    color: var(--hermes-accent);
    text-decoration: none;
    transition: color 120ms ease;
}
a:hover,
a:focus {
    color: var(--hermes-accent-dark);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Header — logo + nav alignment
 * --------------------------------------------------------------------------- */
.ct-header .site-logo-container img {
    max-height: 56px;
    width: auto;
}

/* Visual separation between header and page content — a hairline border plus
 * a very subtle shadow. Without this the header bleeds into the content on
 * pages that don't open with a colored hero. */
.ct-header,
header.ct-header {
    border-bottom: 1px solid var(--hermes-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Header content column — constrain the inner wrapper so the logo + nav
 * align with the body content column (1080px). Blocksy's default
 * .ct-container is ~1290px which leaves the header content floating
 * outside the body's visual edges. The .ct-container is NOT a direct
 * child of .ct-header (Blocksy wraps it inside data-device/data-row
 * divs), so we use a descendant selector. */
.ct-header .ct-container,
header.ct-header .ct-container {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* WooCommerce "added to cart" / error / info notices render full-width by
 * default and break the 1080px content column visually. Constrain the
 * wrapper to match. Covers both classic (.woocommerce-notices-wrapper /
 * .woocommerce-message) and block-based (.wc-block-components-notice-banner)
 * rendering paths. */
.woocommerce-notices-wrapper,
.woocommerce-notices-wrapper > .woocommerce-message,
.woocommerce-notices-wrapper > .woocommerce-error,
.woocommerce-notices-wrapper > .woocommerce-info,
.wc-block-components-notice-banner {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Show the site title as a wordmark next to the icon-only logo.
 * Hide only the tagline / description (we don't want that next to the logo).
 *
 * Blocksy renders this as:
 *   <a class="custom-logo-link">[icon img]</a>
 *   <div class="site-title-container"><span class="site-title">Hermes SEG</span></div>
 * inside a logo-area cell. We make that cell a flex row so logo + wordmark
 * sit on one line. */
.site-description,
.ct-site-description {
    display: none !important;
}
.site-title-container {
    margin-left: 0.6rem;
    display: inline-flex !important;
    align-items: center;
}
/* Duotone wordmark next to the icon-only logo: "Hermes" in brand orange,
 * "SEG" in muted gray, no space between them. Sized to roughly match the
 * 56px logo icon's visual height. JS in functions.php splits the rendered
 * site title into two spans (.hw-h + .hw-seg) on page load. */
.site-title-container .site-title,
.site-title-container .site-title a,
a .site-title,
.site-title {
    /* Cabinet Grotesk 800 — industrial grotesque with deliberate off-balance,
     * gives the wordmark a brand-magazine feel without going weird. Loaded
     * from Fontshare (not Google Fonts) by functions.php.  */
    font-family: 'Cabinet Grotesk', system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: 2rem !important;            /* ~32px, parallels 56px logo */
    letter-spacing: -0.02em;
    text-decoration: none;
    line-height: 1;
}
/* Both halves of the HermesSEG wordmark use the *light* brand orange that
 * matches the logo mark (#f0a000) — not the dark hover variant. Heavier
 * 700 weight thickens the strokes so the orange reads as the same hue
 * eye-balling against the logo. Earlier 400/500 weight was too thin and
 * the lighter color washed out; bumping to 700 fixes it without changing
 * the hue.  */
.site-title .hw-h,
.site-title .hw-seg {
    color: var(--hermes-accent) !important;
    font-weight: 800;
}
.site-title a {
    text-decoration: none;
}
.site-title a:hover .hw-h,
.site-title a:hover .hw-seg,
.site-title-container .site-title a:hover .hw-h,
.site-title-container .site-title a:hover .hw-seg {
    color: var(--hermes-accent-dark) !important;
}
/* Force the logo + wordmark onto one line. Blocksy's exact wrapper class
 * varies (.ct-header-cell, .site-branding, .logo-container, etc.) so we use
 * a :has() selector to find whatever element wraps both the logo link and the
 * site-title-container as direct children, AND keep shotgun fallbacks. */
:where(*):has(> .custom-logo-link + .site-title-container),
:where(*):has(> .custom-logo-link):has(> .site-title-container) {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
}
.ct-header .ct-header-cell[data-id="logo"],
.ct-header [data-id="logo"],
.ct-header .site-branding,
.ct-header .logo-container,
.ct-header .ct-logo-container {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
}
/* Belt-and-braces: make the two children explicitly inline so even on a
 * non-flex parent they sit on the same baseline. */
.custom-logo-link {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
}
.site-title-container {
    margin-left: 0 !important;
    vertical-align: middle;
}
.ct-header [data-id="menu"] .menu > li > a {
    font-weight: 500;
    color: var(--hermes-ink);
}
.ct-header [data-id="menu"] .menu > li > a:hover,
.ct-header [data-id="menu"] .menu > li.current-menu-item > a {
    color: var(--hermes-accent);
}

/* --- Hide Blocksy's auto-rendered page-title hero on pages -----------------
 * Belt-and-braces because Blocksy's page-title container varies. */
body.page .ct-hero-section,
body.page header.entry-header,
body.page .entry-header,
body.page .ct-page-title,
body.page .page-title,
body.page .hero-section,
body.page .page-hero,
body.page .page-header,
body.page main > header,
body.page #main > header,
body.page main > .ct-hero-section,
body.page article > .entry-header,
body.page article:not(.hermes-release) > header,
body.page .ct-container > .entry-header,
body.page section.entry-content + .entry-header {
    display: none !important;
}

/* --- Top utility bar (My Account + Cart, above the Blocksy header) -------- */
.hermes-utility-bar {
    background: var(--hermes-bg-soft);
    border-bottom: 1px solid var(--hermes-line);
    font-size: 0.85rem;
    color: var(--hermes-muted);
}
.hermes-utility-bar-inner {
    /* Match the body content column (1080px) so the utility bar items align
     * with the rest of the page rather than floating to the viewport edge. */
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.45rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
}
.hermes-utility-link {
    color: var(--hermes-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
    transition: color 120ms ease;
}
.hermes-utility-link:hover,
.hermes-utility-link:focus {
    color: var(--hermes-accent);
    text-decoration: none;
}
.hermes-utility-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.hermes-utility-badge {
    display: inline-block;
    background: var(--hermes-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 0.3rem;
}
@media (max-width: 640px) {
    .hermes-utility-bar-inner {
        padding: 0.4rem 1rem;
        gap: 1rem;
        justify-content: center;
    }
    .hermes-utility-link span { display: none; }   /* icons only on mobile */
}

/* ---------------------------------------------------------------------------
 * WooCommerce + cart shell — keep buttons on-brand
 * --------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page button.button,
.woocommerce #respond input#submit {
    background: var(--hermes-accent);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 120ms ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background: var(--hermes-accent-dark);
    color: #fff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--hermes-accent);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--hermes-accent-dark);
}

/* ---------------------------------------------------------------------------
 * Footer — subdued, secondary
 * --------------------------------------------------------------------------- */
.ct-footer {
    background: var(--hermes-bg-soft);
    border-top: 1px solid var(--hermes-line);
    color: var(--hermes-muted);
    font-size: 0.92rem;
}
.ct-footer a { color: var(--hermes-muted); }
.ct-footer a:hover { color: var(--hermes-accent); }

/* Footer block (newsletter row + nav row) injected by functions.php */
.hermes-footer-block {
    padding-top: 1.5rem;
    border-bottom: 1px solid var(--hermes-line);
    margin-bottom: 1.25rem;
}

/* Compact newsletter form — sits above the footer nav */
.hermes-footer-newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--hermes-line);
}
.hermes-footer-newsletter-text {
    flex: 1 1 280px;
    color: var(--hermes-ink);
    font-size: 0.92rem;
}
.hermes-footer-newsletter-text strong {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.hermes-footer-newsletter-text span {
    color: var(--hermes-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}
.hermes-footer-newsletter-form {
    display: flex;
    gap: 0.5rem;
    flex: 0 1 360px;
    min-width: 280px;
}
.hermes-footer-newsletter-form input[type="email"] {
    flex: 1;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--hermes-line);
    border-radius: 6px;
    font-size: 0.9rem;
    background: #fff;
}
.hermes-footer-newsletter-form button {
    padding: 0.55rem 1rem;
    background: var(--hermes-accent);
    color: #fff;
    border: 1px solid var(--hermes-accent);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.hermes-footer-newsletter-form button:hover {
    background: var(--hermes-accent-dark);
    border-color: var(--hermes-accent-dark);
}

/* Footer navigation — injected by functions.php into .ct-footer .ct-container */
.hermes-footer-nav {
    padding: 0.25rem 0 1rem;
}
.hermes-footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    justify-content: center;
}
.hermes-footer-nav li { margin: 0; padding: 0; }
.hermes-footer-nav a {
    color: var(--hermes-muted);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 120ms ease;
}
.hermes-footer-nav a:hover,
.hermes-footer-nav a:focus { color: var(--hermes-accent); }

/* Visual separator + accent color for the community channels (icons + label). */
.hermes-footer-nav li:not(.hermes-footer-community) + li.hermes-footer-community {
    margin-left: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--hermes-line);
}
.hermes-footer-nav li.hermes-footer-community a {
    color: var(--hermes-accent);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.hermes-footer-nav li.hermes-footer-community a:hover {
    color: var(--hermes-accent-dark);
}
.hermes-footer-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Footer copyright — text rewritten by functions.php wp_footer JS.
 * Center it regardless of which Blocksy wrapper it lands in (different
 * Blocksy versions render the credit row with different layout
 * defaults — left, space-between, or grid). */
.ct-footer-copyright,
[data-id="copyright"],
.site-info,
.hermes-footer-copyright {
    text-align: center !important;
    width: 100%;
    color: var(--hermes-muted);
    font-size: 0.92rem;
    padding: 0.5rem 0;
}

@media (max-width: 640px) {
    .hermes-footer-nav ul { gap: 0.5rem 1rem; }
    .hermes-footer-nav li:not(.hermes-footer-community) + li.hermes-footer-community {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
    .hermes-footer-newsletter {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------------------------------------------------------------------------
 * Content max-widths — long-form pages read better at 720-820px line lengths.
 *
 * Blocksy's default "narrow content" layout centers paragraphs/lists inside
 * a narrower container while leaving headings full-width, producing the
 * staggered indent in the screenshot. Force every text block to anchor at
 * the left edge of .entry-content so headings and paragraphs line up.
 * --------------------------------------------------------------------------- */
.single-post .entry-content,
.page .entry-content {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.entry-content p {
    max-width: 760px;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
}
.entry-content ul,
.entry-content ol {
    max-width: 760px;
    margin-left: 0 !important;
    margin-right: auto !important;
    /* preserve bullet-list indent, but don't add extra left padding */
}
.entry-content > .hermes-pricing-grid,
.entry-content > .hermes-topology-grid,
.entry-content > .hermes-pro-grid,
.entry-content > .hermes-matrix-wrap,
.entry-content > .hermes-home-hero,
.entry-content > .hermes-home-section,
.entry-content > .hermes-callout {
    max-width: 1080px;
    margin-left: 0;
    margin-right: 0;
}

/* Section headings should also start flush-left, not be Blocksy-centered. */
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > section > h2,
.entry-content > section > h3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}