/*
Theme Name: NEK9 (Intrace Child)
Theme URI: https://nek9.co.nz
Template: intrace
Author: Codia Tech
Author URI: https://codia.tech
Description: Child theme of Intrace for N E K9, professional dog training in Auckland. The parent renders the existing block content and template parts; this layer supplies the typography, palette and component styling. Content is unchanged.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nek9-child
*/

/* ============================================================
   NEK9 — presentation layer over Intrace block content.

   Ground is concrete, not black: the photographs are dark dogs
   on dark asphalt and a black page turns them to mud. Asphalt
   panels survive where they carry the brand's voice — the hero,
   the three service cards, the footer. The lime is the club's
   own #7BB303, rationed: on dark it may speak, on light it is
   webbing and stitching, never body text.

   Signature device: the eyebrow marks are set as harness
   patches — condensed caps on a lime webbing chip with a
   stitched edge.
   ============================================================ */

:root {
    --ink:        #17191C;
    --asphalt:    #1A1D20;
    --asphalt-2:  #22262A;
    --slate:      #545B61;
    --slate-soft: #7C838A;

    --concrete:   #EAEAE5;
    --paper:      #FFFFFF;
    --paper-warm: #F4F4F0;

    --lime:       #7BB303;
    --lime-deep:  #5E8A02;
    --lime-wash:  rgba(123, 179, 3, 0.12);

    --rule:       rgba(23, 25, 28, 0.14);
    --rule-soft:  rgba(23, 25, 28, 0.08);
    --rule-light: rgba(255, 255, 255, 0.16);

    --shadow-sm:  0 1px 2px rgba(23,25,28,0.06), 0 2px 10px rgba(23,25,28,0.05);
    --shadow-md:  0 2px 6px rgba(23,25,28,0.08), 0 14px 32px rgba(23,25,28,0.10);

    --display:    'Big Shoulders', 'Arial Narrow', 'Helvetica Neue', sans-serif;
    --body:       'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --ease:       cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast:     160ms var(--ease);
    --t-mid:      340ms var(--ease);
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--concrete);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.04;
    color: inherit;
}

/* Body copy set with the heading-6 size preset is body text, not display */
p.has-heading-6-font-size {
    font-family: var(--body);
    line-height: 1.7;
}

::selection { background: var(--lime); color: var(--ink); }

a { transition: color var(--t-fast); }

:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   Signature: harness-patch eyebrows.
   The green inline marks on heading-5 eyebrows become webbing
   chips: condensed caps, lime ground, stitched edge. The inline
   style attribute pins color, hence the !important.
   ------------------------------------------------------------ */

.wp-block-heading.has-heading-5-font-size > mark.has-inline-color {
    display: inline-block;
    background-color: var(--lime) !important;
    color: var(--ink) !important;
    font-family: var(--display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1;
    text-transform: uppercase;
    padding: 0.5em 0.9em 0.45em 1.05em;
    border-top: 1px dashed rgba(23, 25, 28, 0.45);
    border-bottom: 1px dashed rgba(23, 25, 28, 0.45);
    border-radius: 1px;
}

.wp-block-heading.has-heading-5-font-size > mark.has-inline-color strong {
    font-weight: 700;
}

/* Space beneath a patch before the big heading that follows */
.wp-block-heading.has-heading-5-font-size {
    margin-bottom: 0.9rem;
    line-height: 1;
}

/* ------------------------------------------------------------
   Hero cover — the header and wordmark live inside it.
   ------------------------------------------------------------ */

/* Hero cover (the one with the inline #181818 overlay): a gradient
   dim that lets the training-yard photo breathe mid-frame. */
.wp-block-cover .wp-block-cover__background.has-background-dim-80[style*="background-color"] {
    opacity: 0.78;
    background-image: linear-gradient(
        to bottom,
        rgba(23, 25, 28, 0.88) 0%,
        rgba(23, 25, 28, 0.62) 45%,
        rgba(23, 25, 28, 0.92) 100%
    );
    background-color: transparent !important;
}

/* Mid-page covers with no custom overlay: the field photos are bright
   and busy, and the copy sits mid-frame — flat, firm dim. */
.wp-block-cover:not(.is-light) .wp-block-cover__background.has-background-dim-80:not([style*="background-color"]) {
    opacity: 1;
    background-color: rgba(23, 25, 28, 0.82);
}

/* Wordmark: the two marks in the heading-1 hero title */
.wp-block-heading.has-heading-1-font-size {
    font-weight: 800;
    letter-spacing: 0.08em !important;
}

.wp-block-heading.has-heading-1-font-size mark.has-inline-color {
    background: transparent !important;
    font-weight: 800;
}

/* Hero strapline: quiet concrete caps under the wordmark, not a
   second lime block. Scoped to the hero via its inline #181818
   overlay — other covers keep their headline-scale heading-2s.
   Preset size classes and the inline color both carry
   !important-level weight, hence the heavy hand. */
.wp-block-cover:has(> .wp-block-cover__background[style*="#181818"]) .wp-block-heading.has-heading-2-font-size {
    font-weight: 600;
    letter-spacing: 0.3em !important;
    font-size: clamp(0.95rem, 0.8rem + 0.9vw, 1.3rem) !important;
    color: var(--concrete) !important;
    opacity: 0.92;
}

/* Headline heading-2s over photo covers stay white and bright */
.wp-block-cover:not(.is-light) .wp-block-heading.has-heading-2-font-size.has-white-color {
    color: #fff !important;
    letter-spacing: 0.1em !important;
}

/* The hero wordmark's lime "9" needs a brighter cut against the
   dark photo than body-lime provides */
.wp-block-heading.has-heading-1-font-size mark[style*="#7bb303"] {
    color: #92CF1E !important;
}

/* ------------------------------------------------------------
   Header part (rendered inside covers): topbar, rule, nav
   ------------------------------------------------------------ */

.mobile-header-custom p,
.mobile-header-custom a {
    font-family: var(--body);
    font-size: 0.75rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.mobile-header-custom a { color: var(--lime) !important; text-decoration: none; }
.mobile-header-custom a:hover { color: #9AD437 !important; }

/* topbar icons ride a touch high against the caps */
.mobile-header-custom .wp-block-image img { opacity: 0.75; }

/* The rule between topbar and masthead */
.wp-block-cover hr.wp-block-separator {
    background-color: var(--rule-light) !important;
    color: var(--rule-light) !important;
    border: none;
    height: 1px;
    opacity: 1;
}

/* Site title — the wordmark */
.wp-block-site-title,
.wp-block-site-title a {
    font-family: var(--display) !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    color: var(--lime) !important;
    text-decoration: none;
}

/* Navigation */
.wp-block-navigation a {
    font-family: var(--display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    padding-bottom: 0.35em;
    border-bottom: 2px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.wp-block-navigation a:hover {
    color: var(--lime);
}

.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a[aria-current="page"] {
    color: var(--lime);
    border-bottom-color: var(--lime);
}

/* Mobile navigation overlay: asphalt ground, roomy centred links.
   The nav block ships its own overlay colours, hence !important. */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--asphalt) !important;
    padding: 4.5rem 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: center;
    justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation a {
    color: #fff !important;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    padding: 0.4em 0;
    border-bottom: none;
}

.wp-block-navigation__responsive-container-open {
    color: #fff !important;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
    width: 28px;
    height: 28px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: #fff !important;
}

/* ------------------------------------------------------------
   Service cards — asphalt panels with the photo breaking the
   top edge (the existing negative-margin device, kept).
   ------------------------------------------------------------ */

.is-style-customboxshadow {
    box-shadow: var(--shadow-md);
    border-radius: 2px;
}

/* Dark service cards: palette background or the one inline #181818 */
.is-style-customboxshadow.has-intrace-primary-background-color,
.is-style-customboxshadow[style*="background-color:#181818"] {
    background-color: var(--asphalt) !important;
    border-top: 3px solid var(--lime);
}

/* Their photos: flat, slightly lifted, no vignette */
.is-style-customboxshadow .wp-block-image img {
    border-radius: 2px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Card titles on dark: white display caps, not green */
.is-style-customboxshadow.has-intrace-primary-background-color .wp-block-heading,
.is-style-customboxshadow[style*="background-color:#181818"] .wp-block-heading {
    color: #fff !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
}

/* Card body on dark: concrete, readable, not green */
.is-style-customboxshadow.has-intrace-primary-background-color p,
.is-style-customboxshadow[style*="background-color:#181818"] p {
    color: rgba(234, 234, 229, 0.88) !important;
    font-weight: 400 !important;
}

/* White cards (pricing, service trio lower down) */
.is-style-customboxshadow.has-white-background-color {
    background-color: var(--paper) !important;
    border: 1px solid var(--rule-soft);
    border-top: 3px solid var(--lime);
}

.is-style-customboxshadow.has-white-background-color .wp-block-heading {
    letter-spacing: 0.03em !important;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Buttons.
   Primary (custombuttonborder): lime webbing, ink text.
   Quiet (custombuttonborder2): hairline outline, fills on hover.
   Inline color attributes pinned in content, hence !important.
   ------------------------------------------------------------ */

.is-style-custombuttonborder .wp-block-button__link {
    background-color: var(--lime) !important;
    color: var(--ink) !important;
    border: none !important;
    border-radius: 2px;
    font-family: var(--display) !important;
    font-size: 0.9375rem !important;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.is-style-custombuttonborder .wp-block-button__link:hover {
    background-color: #8CC61B !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(123, 179, 3, 0.35);
}

.is-style-custombuttonborder2 .wp-block-button__link {
    background: transparent !important;
    border: 1px solid currentColor !important;
    border-radius: 2px;
    font-family: var(--display) !important;
    font-size: 0.875rem !important;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

/* Quiet buttons on light ground: ink, filling lime on hover */
.has-white-background-color .is-style-custombuttonborder2 .wp-block-button__link,
.is-light .is-style-custombuttonborder2 .wp-block-button__link {
    color: var(--ink) !important;
}

.is-style-custombuttonborder2 .wp-block-button__link:hover {
    background-color: var(--lime) !important;
    border-color: var(--lime) !important;
    color: var(--ink) !important;
}

/* On dark panels the quiet button keeps the lime voice */
.has-intrace-primary-background-color .is-style-custombuttonborder2 .wp-block-button__link,
.wp-block-cover:not(.is-light) .is-style-custombuttonborder2 .wp-block-button__link {
    color: var(--lime) !important;
    border-color: rgba(123, 179, 3, 0.55) !important;
}

/* ------------------------------------------------------------
   Section rhythm and grounds
   ------------------------------------------------------------ */

/* Screen gutter. The parent theme sets no root padding, so on any
   viewport narrower than a section's content constraint the text
   lands hard against the screen edge. Padding on the structural
   wrappers only bites below the constraint width — desktop layouts
   are unaffected. */
.wp-block-cover__inner-container,
.wp-block-group.has-white-background-color,
.wp-block-group.has-intrace-primary-background-color {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Content images: flat and quiet. The dated soft drop shadow the
   parent paints under every figure goes; dark cards re-add their own. */
.wp-block-image img {
    box-shadow: none;
    border-radius: 2px;
}

.wp-block-image.is-resized img,
figure.wp-block-image img {
    filter: none;
}

/* White content bands sit on warm paper, not stark white */
.wp-block-group.has-white-background-color {
    background-color: var(--paper-warm) !important;
}

/* The big statement headings (LOYALTY. RESPECT. ...) */
.has-intrace-primary-color.wp-block-heading {
    color: var(--ink) !important;
}

.wp-block-heading.has-heading-2-font-size {
    letter-spacing: 0.02em !important;
}

/* Paragraph color presets re-based for readability */
p.has-intrace-body-text-color { color: var(--slate) !important; }

/* Pricing band cover (#f8f8f8 inline) — let it read as concrete */
.wp-block-cover.is-light .wp-block-cover__background {
    background-color: var(--concrete) !important;
}

/* Separators inside pricing cards */
.wp-block-separator.has-intrace-body-text-2-background-color {
    background-color: var(--rule-soft) !important;
    color: var(--rule-soft) !important;
    height: 1px;
    border: none;
}

/* Price figures in the display face */
.has-white-background-color .wp-block-heading[style*="font-size:48px"] {
    font-family: var(--display);
    font-weight: 800;
    color: var(--ink) !important;
    letter-spacing: 0.02em;
}

/* CTA band (intrace-primary group at page foot) */
.wp-block-group.has-intrace-primary-background-color {
    background-color: var(--asphalt) !important;
}

.wp-block-group.has-intrace-primary-background-color .wp-block-heading mark.has-inline-color {
    background: transparent !important;
    color: var(--lime) !important;
}

.wp-block-group.has-intrace-primary-background-color p.has-intrace-body-text-2-color {
    color: rgba(234, 234, 229, 0.85) !important;
}

/* ------------------------------------------------------------
   Animations. The parent hides every .intrace-animate element and
   reveals it from a scroll handler that only fires while the
   element's top crosses the upper 75% of the viewport — jump
   scrolls, anchor links and no-JS all leave content invisible.
   Content visibility must not depend on that: everything renders
   visible, and the reveal choreography is retired.
   intrace-preset.css loads after this sheet, so specificity and
   !important are both needed.
   ------------------------------------------------------------ */

body .intrace-animate {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .intrace-animate,
    .is-style-custombuttonborder .wp-block-button__link,
    .is-style-custombuttonborder2 .wp-block-button__link {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------
   Interior pages: banner, measure and image discipline
   ------------------------------------------------------------ */

/* Page banners (the covers that hold the post title): a flat firm
   dim — these photos are bright group shots and the title sits
   mid-frame. Outranks the hero gradient rule by specificity. */
.wp-block-cover:has(.wp-block-post-title) .wp-block-cover__background[style*="#181818"] {
    opacity: 1;
    background-image: none;
    background-color: rgba(23, 25, 28, 0.85) !important;
}

/* Page titles: the template asks for a font preset that never
   existed ("cambria-georgia") with inline lime — set them in the
   display face, white, at proper scale. */
.wp-block-post-title {
    font-family: var(--display) !important;
    font-weight: 700;
    font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: #fff !important;
    text-align: center;
}

/* Content lists written in inline lime: ink for the words, lime
   kept for the markers. */
ul.wp-block-list[style*="#7bb303"] {
    color: var(--ink) !important;
}

ul.wp-block-list[style*="#7bb303"] li::marker {
    color: var(--lime);
}

/* WPForms escapes the constrained content column — pin it back */
.wp-block-post-content .wpforms-container {
    max-width: 680px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wpforms-container .wpforms-field-label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
}

/* One shared text column. Previously each block type computed its
   own 72ch (ch scales with font size), so headings, paragraphs and
   rules all centred at different widths — no common left edge. */
.wp-block-post-content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.wp-block-post-content > * {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Media and multi-column structures may run wider, still centred
   on the same axis */
.wp-block-post-content > .wp-block-image,
.wp-block-post-content > .wp-block-gallery,
.wp-block-post-content > .wp-block-columns,
.wp-block-post-content > .wp-block-group {
    max-width: 960px !important;
}

.wp-block-post-content > .wp-block-jetpack-tiled-gallery,
.wp-block-post-content > .tiled-gallery {
    max-width: 1140px !important;
}

/* Section rules: quiet hairlines on the text column, with room */
.wp-block-post-content > .wp-block-separator {
    max-width: 720px !important;
    height: 1px;
    border: none;
    background-color: var(--rule) !important;
    margin-top: 3.5rem !important;
    margin-bottom: 3.5rem !important;
    opacity: 1;
}

/* Vertical rhythm: headings open sections — generous above,
   tight to what they introduce */
.wp-block-post-content > .wp-block-heading {
    margin-top: 2.75rem;
    margin-bottom: 0.9rem;
}

.wp-block-post-content > :first-child {
    margin-top: 0 !important;
}

.wp-block-post-content > p {
    margin-top: 0.85rem;
    margin-bottom: 0.85rem;
}

/* The content band's fixed 100px paddings read as dead air above
   the first heading */
main.wp-block-group[style*="padding-top:100px"] {
    padding-top: 64px !important;
    padding-bottom: 72px !important;
}

.wp-block-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
}

/* Jetpack's post flair renders as a dead "Like this:" label here —
   the like button itself never loads on this install */
#jp-post-flair,
.sharedaddy {
    display: none;
}

/* Gallery tiles open the carousel — let them invite the click */
.tiled-gallery__item img {
    cursor: pointer;
    transition: filter var(--t-fast);
}

.tiled-gallery__item:hover img,
.tiled-gallery__item:focus-within img {
    filter: brightness(1.08);
}

/* Carousel chrome: the title slot holds raw upload filenames, and
   comments/EXIF aren't used on this site — arrows, pagination and
   close are all the chrome the carousel needs */
.jp-carousel-photo-title,
.jp-carousel-titleanddesc,
.jp-carousel-icon-comments,
.jp-carousel-icon-info,
.jp-carousel-comments-wrapper {
    display: none !important;
}

/* WPForms (contact page): quiet fields, lime focus, patch button */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 2px !important;
    font-family: var(--body) !important;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.wpforms-container input:focus,
.wpforms-container textarea:focus {
    border-color: var(--lime) !important;
    box-shadow: 0 0 0 3px var(--lime-wash) !important;
    outline: none !important;
}

.wpforms-container button[type="submit"] {
    background-color: var(--lime) !important;
    color: var(--ink) !important;
    border: none !important;
    border-radius: 2px !important;
    font-family: var(--display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding: 0.9em 2.2em !important;
    transition: background-color var(--t-fast);
}

.wpforms-container button[type="submit"]:hover {
    background-color: #8CC61B !important;
}

/* ------------------------------------------------------------
   Small screens
   ------------------------------------------------------------ */

@media (max-width: 781px) {
    .wp-block-heading.has-heading-1-font-size { letter-spacing: 0.06em !important; }

    .wp-block-cover .wp-block-heading.has-heading-2-font-size {
        letter-spacing: 0.2em !important;
    }

    /* The hero's fixed vertical padding is generous on a phone */
    .wp-block-cover .wp-block-group[style*="padding-top:200px"] {
        padding-top: 96px !important;
        padding-bottom: 140px !important;
    }

    /* Interior banners likewise */
    .wp-block-cover .wp-block-group[style*="padding-bottom:200px"] {
        padding-top: 48px !important;
        padding-bottom: 110px !important;
    }

    /* Interior content band tighter on a phone */
    main.wp-block-group[style*="padding-top:100px"] {
        padding-top: 36px !important;
        padding-bottom: 44px !important;
    }

    /* Topbar: the fixed-width icon/text columns stack into a mess —
       force one compact centred line. Core's mobile stacking rule is
       (0,3,0) with !important, so these selectors carry the cover
       class to outrank it. */
    .wp-block-cover .mobile-header-custom .wp-block-columns {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .wp-block-cover .mobile-header-custom .wp-block-columns > .wp-block-column {
        flex-basis: auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    .mobile-header-custom p { margin: 0; }

    /* Masthead: wordmark left, hamburger right, one row */
    .wp-block-cover .wp-block-columns.intrace-margin-top-n10 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        margin-top: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .wp-block-cover .wp-block-columns.intrace-margin-top-n10 > .wp-block-column {
        flex-basis: auto !important;
        width: auto;
    }

    .wp-block-site-title {
        font-size: 1.75rem !important;
        margin: 0 !important;
    }
}