/*
Theme Name:  Kadence Child - Hammer Down Headlines
Description: Kadence child theme for Hammer Down Headlines — trucker news & weather. Asphalt + road-orange, DOT-signage inspired.
Author:      Hobo Joe
Template:    kadence
Version:     2.0.0
Text Domain: kadence-child-hdh
*/

/* =============================================================================
   HAMMER DOWN HEADLINES — KADENCE CHILD
   Base colors/fonts are set in Customizer (Global Palette + Typography).
   This file only adds what Kadence can't do natively: grit.
   =============================================================================

   Brand tokens (mirror of Customizer Global Palette):
   --global-palette1  #E8590C  Road Orange (accent, links, buttons)
   --global-palette2  #B93E08  Burnt Orange (hover)
   --global-palette3  #1C1C1E  Asphalt (headings, header bg)
   --global-palette4  #33353A  Blacktop Gray (body text)
   --global-palette5  #6B6E75  Gravel (meta text)
   --global-palette6  #D8D5CE  Shoulder Line (borders)
   --global-palette7  #EFEDE8  Concrete (section bg)
   --global-palette8  #F7F6F2  Fog (light bg)
   --global-palette9  #FFFFFF  White (content bg)
   ========================================================================== */

:root {
    --hdh-hazard-size: 14px; /* width of one chevron stripe */
    --hdh-radius: 2px;       /* squared-off, industrial */
}

/* =============================================================================
   SIGNATURE: HAZARD CHEVRON STRIPE (trailer conspicuity tape)
   ============================================================================= */

.hdh-hazard,
.site-header::after {
    content: '';
    display: block;
    height: 8px;
    background: repeating-linear-gradient(
        -45deg,
        var(--global-palette1) 0,
        var(--global-palette1) var(--hdh-hazard-size),
        var(--global-palette3) var(--hdh-hazard-size),
        var(--global-palette3) calc(var(--hdh-hazard-size) * 2)
    );
}

/* =============================================================================
   HEADER — asphalt with subtle texture
   ============================================================================= */

.site-header {
    position: relative;
}

/* Fine asphalt grain over dark header rows (set header bg to palette3 in Customizer) */
.site-main-header-wrap,
.site-top-header-wrap {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><circle cx="1" cy="1" r=".6" fill="%23ffffff" opacity=".05"/><circle cx="4" cy="4" r=".5" fill="%23000000" opacity=".25"/></svg>');
}

/* Site title: condensed, uppercase, tight — set Oswald in Customizer, this adds treatment */
.site-branding .site-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Nav items get a signage feel */
.main-navigation .primary-menu-container > ul > li > a {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.main-navigation .primary-menu-container > ul > li > a:hover {
    color: var(--global-palette1);
}

/* Orange underline indicator on hover/current — like a lane marker */
.main-navigation .primary-menu-container > ul > li > a {
    position: relative;
}

.main-navigation .primary-menu-container > ul > li > a::after {
    content: '';
    position: absolute;
    left: 1em;
    right: 1em;
    bottom: 4px;
    height: 3px;
    background: var(--global-palette1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.main-navigation .primary-menu-container > ul > li > a:hover::after,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a::after {
    transform: scaleX(1);
}

/* =============================================================================
   POST CARDS / ARCHIVE — squared, heavy left rule, lifts on hover
   ============================================================================= */

.loop-entry.entry {
    border-radius: var(--hdh-radius);
    border-left: 5px solid var(--global-palette1);
    box-shadow: 0 2px 10px rgba(28, 28, 30, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.loop-entry.entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(28, 28, 30, 0.18);
}

.loop-entry .entry-title {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.loop-entry .entry-title a:hover {
    color: var(--global-palette1);
}

/* Post meta reads like a manifest line */
.entry-meta {
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--global-palette5);
}

/* Category badge: signage plate */
.loop-entry .entry-taxonomies a,
.single-entry .entry-taxonomies a {
    display: inline-block;
    background: var(--global-palette3);
    color: var(--global-palette9);
    padding: 2px 10px;
    border-radius: var(--hdh-radius);
    border-left: 4px solid var(--global-palette1);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-decoration: none;
}

.loop-entry .entry-taxonomies a:hover,
.single-entry .entry-taxonomies a:hover {
    background: var(--global-palette1);
    color: var(--global-palette9);
}

/* =============================================================================
   BUTTONS — squared, solid, no gradients (gradients = 2019)
   ============================================================================= */

.button,
.wp-block-button__link,
button,
input[type="submit"] {
    border-radius: var(--hdh-radius);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    box-shadow: 0 3px 0 var(--global-palette2); /* pressed-metal edge */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--global-palette2);
}

/* =============================================================================
   SINGLE POST — dashed lane-line divider under title
   ============================================================================= */

.single-entry .entry-header {
    position: relative;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    background-image: linear-gradient(
        to right,
        var(--global-palette1) 0 32px,
        transparent 32px 52px
    );
    background-size: 52px 4px;
    background-repeat: repeat-x;
    background-position: left bottom;
}

/* =============================================================================
   FOOTER — asphalt, hazard stripe on top (set footer bg to palette3 in Customizer)
   ============================================================================= */

#colophon {
    position: relative;
}

#colophon::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        -45deg,
        var(--global-palette1) 0,
        var(--global-palette1) var(--hdh-hazard-size),
        var(--global-palette3) var(--hdh-hazard-size),
        var(--global-palette3) calc(var(--hdh-hazard-size) * 2)
    );
}

#colophon a:hover {
    color: var(--global-palette1);
}

/* =============================================================================
   ACCESSIBILITY / POLISH
   ============================================================================= */

a:focus-visible,
button:focus-visible,
.button:focus-visible {
    outline: 3px solid var(--global-palette1);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .loop-entry.entry,
    .button,
    .wp-block-button__link,
    .main-navigation .primary-menu-container > ul > li > a::after {
        transition: none;
    }
}