/**
 * NL Reinforcement — Front-end Styles
 *
 * Industrial, bold aesthetic — square corners, strong accents, dark palette.
 *
 * @package NLReinforcement
 * @since   1.0.0
 */

/* ----------------------------------------------------------------
   1. BASE & TRANSITIONS
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}

a,
button,
.wp-block-button__link,
.wp-block-navigation-item__content {
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

img {
max-width: 100%;
height: auto;
}

/* ----------------------------------------------------------------
   2. HEADER — Sticky with yellow accent stripe
   ---------------------------------------------------------------- */
header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 1000;
}

header .is-scrolled {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ----------------------------------------------------------------
   3. NAVIGATION ENHANCEMENTS
   ---------------------------------------------------------------- */
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus-visible {
color: var(--wp--preset--color--highlight) !important;
}

/* Ensure nav links are white on dark header */
.has-charcoal-background-color .wp-block-navigation-item__content,
.has-charcoal-background-color .wp-block-navigation-item__content:link,
.has-charcoal-background-color .wp-block-navigation-item__content:visited {
color: var(--wp--preset--color--white) !important;
}

/* Submenu styling */
.wp-block-navigation__submenu-container {
background-color: var(--wp--preset--color--charcoal);
border-top: 3px solid var(--wp--preset--color--highlight);
padding: 0.5rem 0;
min-width: 220px;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding: 0.5rem 1.25rem;
font-size: 0.8125rem;
}

/* ----------------------------------------------------------------
   4. COVER BLOCK — Hero enhancements
   ---------------------------------------------------------------- */
.wp-block-cover {
overflow: hidden;
}

.wp-block-cover .wp-block-cover__inner-container {
position: relative;
z-index: 1;
}

/* ----------------------------------------------------------------
   5. CARDS & GROUP BLOCKS
   ---------------------------------------------------------------- */
.wp-block-group.has-white-background-color,
.wp-block-group.has-light-background-color {
transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.wp-block-group.has-white-background-color:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}

/* Dark card style */
.wp-block-group.has-dark-background-color {
transition: box-shadow 0.25s ease;
}

.wp-block-group.has-dark-background-color:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Project card headings — white on dark backgrounds for readability */
.has-dark-background-color h3.wp-block-heading,
.has-charcoal-background-color h3.wp-block-heading {
color: var(--wp--preset--color--white);
}

/* ----------------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------------- */
.wp-block-button__link {
transition: all 0.2s ease;
border-radius: 0 !important;
font-weight: 700;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--highlight) !important;
color: var(--wp--preset--color--charcoal) !important;
border-color: var(--wp--preset--color--highlight) !important;
}

/* ----------------------------------------------------------------
   7. SEPARATOR
   ---------------------------------------------------------------- */
.wp-block-separator {
border-bottom-width: 3px;
opacity: 1;
}

/* ----------------------------------------------------------------
   8. POST CARDS (archive / blog)
   ---------------------------------------------------------------- */
.wp-block-post-template .wp-block-group {
transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.wp-block-post-template .wp-block-group:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-3px);
}

.wp-block-post-featured-image img {
width: 100%;
object-fit: cover;
}

/* ----------------------------------------------------------------
   9. QUOTE BLOCK
   ---------------------------------------------------------------- */
.wp-block-quote {
font-style: italic;
}

.wp-block-quote cite {
font-style: normal;
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}

/* ----------------------------------------------------------------
   10. FOOTER
   ---------------------------------------------------------------- */
footer .is-style-no-bullets {
list-style: none;
padding-left: 0;
}

footer .is-style-no-bullets li {
padding: 0.25rem 0;
}

/* ----------------------------------------------------------------
   11. ACCESSIBILITY
   ---------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--wp--preset--color--highlight);
outline-offset: 2px;
}

.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal !important;
}

/* ----------------------------------------------------------------
   12. PRINT STYLES
   ---------------------------------------------------------------- */
@media print {
header,
footer,
.wp-block-button,
.wp-block-navigation {
display: none !important;
}

body {
color: #000 !important;
background: #fff !important;
}

a[href]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
}
}

/* ----------------------------------------------------------------
   13. SITE LOGO — Responsive scaling
   ---------------------------------------------------------------- */
.nlr-site-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}

.nlr-site-logo img,
.nlr-logo-img {
width: auto;
height: auto;
max-height: 60px;
object-fit: contain;
display: block;
}

/* ----------------------------------------------------------------
   14. RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 781px) {
.wp-block-columns {
flex-direction: column !important;
}

.wp-block-column {
flex-basis: 100% !important;
}

h1.wp-block-heading {
font-size: clamp(2rem, 6vw, 3rem) !important;
}

/* Scale logo down on mobile */
.nlr-site-logo img,
.nlr-logo-img {
max-height: 44px;
}
}

@media (max-width: 480px) {
/* Further reduce on small phones */
.nlr-site-logo img,
.nlr-logo-img {
max-height: 36px;
}
}


/* ----------------------------------------------------------------
   15. ANCHOR SMOOTH SCROLL
   ---------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

/* ----------------------------------------------------------------
   16. WHITE HEADER — nav links dark + subtle shadow
   ---------------------------------------------------------------- */
header.wp-block-template-part {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.has-white-background-color .wp-block-navigation-item__content,
.has-white-background-color .wp-block-navigation-item__content:link,
.has-white-background-color .wp-block-navigation-item__content:visited {
    color: var(--wp--preset--color--charcoal) !important;
}