/*
Theme Name: Portfolio Web Neubrutalism
Template:   portfolio-web
Version:    1.0.1
Description: Neu Brutalism child theme for malin.ro
*/

/* ============================================================
   CSS DESIGN TOKENS
   ============================================================ */
:root {
    --nb-bg:         #e9b396;
    --nb-black:      #573c36;
    --nb-yellow:     #af8576;
    --nb-coral:      #89665e;
    --nb-blue:       #74B9FF;
    --nb-green:      #88D498;
    --nb-lavender:   #B8A9FA;
    --nb-orange:     #FFA552;
    --nb-border:     3px solid #573c36;
    --nb-border-thin:2px solid #573c36;
    --nb-shadow-sm:  3px 3px 0 0 #573c36;
    --nb-shadow:     5px 5px 0 0 #573c36;
    --nb-shadow-lg:  8px 8px 0 0 #573c36;
    --nb-shadow-xl:  12px 12px 0 0 #573c36;
    --nb-radius:     0;
    --nb-font-display: 'Syne', sans-serif;
    --nb-font-head:    'Space Grotesk', sans-serif;
    --nb-font-body:    'Inter', sans-serif;
    --nb-font-mono:    'Space Mono', monospace;
    --nb-transition:   0.12s ease;
}

/* ============================================================
   BASE RESET & BODY
   ============================================================ */
*,
*::before,
*::after {
    border-radius: var(--nb-radius) !important;
}

html,
body {
    background-color: var(--nb-bg) !important;
    color: var(--nb-black) !important;
    font-family: var(--nb-font-body) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h1 a,
h2, h2 a,
h3, h3 a,
h4, h4 a,
h5, h5 a,
h6, h6 a {
    font-family: var(--nb-font-head) !important;
    font-weight: 700 !important;
    color: var(--nb-black) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.875rem) !important; }
h4 { font-size: 1.25rem !important; }

/* Hero display text gets Syne */
.site-title,
.site-title a,
.slick-slide h2,
.slick-slide .slider-title,
.acme-about .about-title,
.widget-title,
.acme-section-title {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
}

p {
    color: #1a1a1a !important;
    font-family: var(--nb-font-body) !important;
}

a {
    color: var(--nb-black) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 500;
    transition: color var(--nb-transition), background var(--nb-transition);
}

a:hover,
a:focus {
    color: var(--nb-coral) !important;
    text-decoration: underline !important;
    outline: 2px solid var(--nb-black);
    outline-offset: 2px;
}

/* ============================================================
   TOP HEADER BAR
   ============================================================ */
.top-header {
    background-color: var(--nb-black) !important;
    border-bottom: var(--nb-border) !important;
    padding: 8px 0 !important;
}

.top-header *,
.top-header a,
.top-header p,
.top-header span,
.top-header i {
    color: var(--nb-yellow) !important;
    font-family: var(--nb-font-mono) !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

.top-header a:hover {
    color: var(--nb-coral) !important;
    outline: none !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.at-navbar,
.navbar,
.navbar.at-navbar {
    background-color: var(--nb-bg) !important;
    border-bottom: var(--nb-border) !important;
    box-shadow: 0 3px 0 0 var(--nb-black) !important;
    padding: 0 !important;
    min-height: 64px !important;
}

.navbar.portfolio-web-sticky.stuck,
.at-sticky.stuck {
    background-color: var(--nb-yellow) !important;
    border-bottom: var(--nb-border) !important;
    box-shadow: 0 3px 0 0 var(--nb-black) !important;
}

/* Logo / Site Title */
.site-title a,
.site-title {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    color: var(--nb-black) !important;
    text-decoration: none !important;
    letter-spacing: -0.02em;
}

.site-title a:hover {
    color: var(--nb-coral) !important;
    outline: none !important;
}

.site-description {
    font-family: var(--nb-font-mono) !important;
    font-size: 10px !important;
    color: var(--nb-black) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Nav links */
.main-navigation .navbar-nav > li > a,
.main-navigation ul li a,
.primary-menu li a,
.navbar-nav li a {
    font-family: var(--nb-font-head) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: var(--nb-black) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 8px 14px !important;
    border: 2px solid transparent !important;
    transition: all var(--nb-transition) !important;
}

.main-navigation .navbar-nav > li > a:hover,
.main-navigation ul li a:hover,
.main-navigation .navbar-nav > li > a:focus,
.primary-menu li a:hover {
    color: var(--nb-black) !important;
    background-color: var(--nb-yellow) !important;
    border: 2px solid var(--nb-black) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Active nav item */
.main-navigation .acme-normal-page .current_page_item > a,
.main-navigation .acme-normal-page .current-menu-item > a,
.main-navigation .active > a,
.main-navigation .navbar-nav > .current-menu-item > a,
.main-navigation .navbar-nav > .current_page_item > a {
    background-color: var(--nb-yellow) !important;
    color: var(--nb-black) !important;
    border: 2px solid var(--nb-black) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    text-decoration: none !important;
}

/* Dropdown menus */
.main-navigation ul ul,
.navbar-nav .dropdown-menu {
    background-color: var(--nb-bg) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 4px !important;
    min-width: 200px !important;
}

.main-navigation ul ul li a,
.navbar-nav .dropdown-menu li a {
    border-bottom: 1px solid #eee !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
}

.main-navigation ul ul li a:hover,
.navbar-nav .dropdown-menu li a:hover {
    background-color: var(--nb-yellow) !important;
    border-bottom: 1px solid #eee !important;
    box-shadow: none !important;
}

/* Hire Me button in nav */
.navbar .btn-primary,
.navbar .featured-button,
a.featured-button,
.featured-button.btn {
    background-color: var(--nb-yellow) !important;
    color: var(--nb-black) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    font-family: var(--nb-font-head) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 8px 20px !important;
    text-decoration: none !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

.navbar .btn-primary:hover,
a.featured-button:hover,
.featured-button.btn:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow) !important;
    background-color: var(--nb-yellow) !important;
    color: var(--nb-black) !important;
    text-decoration: none !important;
}

/* Hamburger */
.navbar-toggle {
    border: var(--nb-border) !important;
    background: var(--nb-bg) !important;
    padding: 8px 10px !important;
}

.navbar-toggle:hover {
    background: var(--nb-yellow) !important;
    box-shadow: var(--nb-shadow-sm) !important;
}

.navbar-toggle .menu-icon span {
    background: var(--nb-black) !important;
    height: 3px !important;
}

/* ============================================================
   HERO / SLIDER SECTION
   ============================================================ */
.at-featured-slider,
.slick-slider,
.acme-slider,
.portfolio-web-slider {
    border-bottom: var(--nb-border) !important;
}

.slick-slide,
.slide-item {
    background-color: var(--nb-bg) !important;
}

/* Slider text */
.slick-slide h1,
.slick-slide h2,
.slick-slide .slider-title,
.slider-title {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    color: var(--nb-black) !important;
    text-shadow: none !important;
}

.slick-slide p,
.slider-description {
    font-family: var(--nb-font-body) !important;
    color: #333 !important;
}

/* Slider arrows */
i.slick-arrow,
.slick-prev,
.slick-next {
    background-color: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    color: var(--nb-black) !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

i.slick-arrow:hover,
.slick-prev:hover,
.slick-next:hover {
    background-color: var(--nb-coral) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow) !important;
    color: var(--nb-black) !important;
}

/* ============================================================
   SITE CONTENT WRAPPER
   ============================================================ */
#page,
.site {
    background-color: var(--nb-bg) !important;
}

#content,
.site-content {
    background-color: var(--nb-bg) !important;
}

/* Section title bars */
.widget-title,
.acme-section-title,
.section-title {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    color: var(--nb-black) !important;
    border-bottom: var(--nb-border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 24px !important;
    display: inline-block !important;
    position: relative;
}

/* Yellow underline accent on section titles */
.widget-title::after,
.acme-section-title::after {
    content: '';
    display: block;
    height: 4px;
    background: var(--nb-yellow);
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
}

/* ============================================================
   HOME WIDGETS / SECTIONS
   ============================================================ */

/* About section */
.acme-about,
.at-about {
    background-color: var(--nb-bg) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 32px !important;
    margin: 24px 0 !important;
}

.acme-about .about-title {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    color: var(--nb-black) !important;
}

/* Service boxes */
.acme-service,
.at-service,
.service-item {
    background-color: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

.acme-service:hover,
.at-service:hover,
.service-item:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: var(--nb-shadow-lg) !important;
}

.acme-service .service-icon,
.service-item i {
    color: var(--nb-black) !important;
    background: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-bottom: 16px !important;
}

/* Skills */
.acme-skills,
.at-skills {
    background-color: var(--nb-bg) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 24px !important;
}

.skill-percent {
    font-family: var(--nb-font-mono) !important;
    font-weight: 700 !important;
    color: var(--nb-black) !important;
}

/* Pie chart colors */
.easyPieChart canvas,
.easy-pie-chart canvas {
    filter: none !important;
}

/* Timeline */
.acme-timeline,
.at-timeline {
    border-left: var(--nb-border) !important;
}

.acme-timeline .timeline-item,
.at-timeline .timeline-item {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    margin-left: 24px !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

.acme-timeline .timeline-item:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow) !important;
}

/* Gallery */
.acme-gallery .gallery-item,
.at-gallery .gallery-item {
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    overflow: hidden !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

.acme-gallery .gallery-item:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: var(--nb-shadow-lg) !important;
}

.acme-gallery .read-more {
    background-color: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
    color: var(--nb-black) !important;
    font-weight: 700 !important;
}

/* Testimonial */
.acme-testimonial,
.at-testimonial {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 24px !important;
}

.acme-testimonial .testimonial-content {
    font-style: italic;
    border-left: 4px solid var(--nb-yellow) !important;
    padding-left: 16px !important;
}

/* Contact widget */
.acme-contact,
.at-contact {
    background: var(--nb-bg) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 24px !important;
}

.acme-contact .contact-page-content ul li strong {
    color: var(--nb-black) !important;
    font-family: var(--nb-font-mono) !important;
}

/* Parallax sections */
.acme-parallax,
.at-parallax {
    border-top: var(--nb-border) !important;
    border-bottom: var(--nb-border) !important;
}

/* Count-up numbers */
.acme-col-posts .post-count,
.count-number {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    font-size: 3rem !important;
    color: var(--nb-black) !important;
}

/* ============================================================
   BUTTONS — Global
   ============================================================ */
.btn,
.btn-primary,
button,
input[type="submit"],
input[type="button"],
.comment-form .form-submit input,
.wpcf7-form input.wpcf7-submit,
.search-form .search-submit,
a.btn,
a.btn-primary {
    font-family: var(--nb-font-head) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background-color: var(--nb-yellow) !important;
    color: var(--nb-black) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 10px 24px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

.btn:hover,
.btn-primary:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.comment-form .form-submit input:hover,
.wpcf7-form input.wpcf7-submit:hover,
.search-form .search-submit:hover,
a.btn:hover,
a.btn-primary:hover {
    background-color: var(--nb-yellow) !important;
    color: var(--nb-black) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow-lg) !important;
    text-decoration: none !important;
    outline: none !important;
}

.btn:active,
.btn-primary:active,
button:active,
input[type="submit"]:active {
    transform: translate(3px, 3px) !important;
    box-shadow: none !important;
}

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    color: var(--nb-black) !important;
    font-family: var(--nb-font-body) !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    transition: box-shadow var(--nb-transition), transform var(--nb-transition) !important;
    outline: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    box-shadow: var(--nb-shadow) !important;
    transform: translate(-1px, -1px) !important;
    outline: 2px solid var(--nb-black) !important;
    outline-offset: 2px !important;
}

/* Contact Form 7 */
.wpcf7-form label {
    font-family: var(--nb-font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--nb-black) !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* ============================================================
   POSTS & CARDS
   ============================================================ */
article,
.post,
.type-post,
.hentry {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 28px !important;
    margin-bottom: 28px !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

article:hover,
.post:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: var(--nb-shadow-lg) !important;
}

.entry-title,
.entry-title a {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    color: var(--nb-black) !important;
    text-decoration: none !important;
}

.entry-title a:hover {
    text-decoration: underline !important;
    color: var(--nb-black) !important;
}

.entry-meta,
.posted-on,
.byline {
    font-family: var(--nb-font-mono) !important;
    font-size: 11px !important;
    color: #555 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Read more links */
.read-more,
.more-link,
a.more-link {
    background: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    color: var(--nb-black) !important;
    font-weight: 700 !important;
    font-family: var(--nb-font-head) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    padding: 6px 16px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

.read-more:hover,
.more-link:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow) !important;
    text-decoration: none !important;
    color: var(--nb-black) !important;
}

/* Featured images */
.post-thumbnail,
.wp-post-image,
.featured-image img {
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    display: block !important;
}

/* ============================================================
   SIDEBAR & WIDGETS
   ============================================================ */
.widget,
.widget-area .widget {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

.widget .widget-title {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    color: var(--nb-black) !important;
    background: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
    padding: 6px 14px !important;
    margin: -20px -20px 16px !important;
    display: block !important;
}

.widget .widget-title::after {
    display: none !important;
}

/* Tag cloud */
.tagcloud a {
    background: var(--nb-bg) !important;
    border: var(--nb-border-thin) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    color: var(--nb-black) !important;
    font-family: var(--nb-font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    display: inline-block !important;
    margin: 3px !important;
    text-decoration: none !important;
    transition: all var(--nb-transition) !important;
}

.tagcloud a:hover {
    background: var(--nb-yellow) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: var(--nb-shadow) !important;
    text-decoration: none !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.navigation.pagination .nav-links .page-numbers,
.page-numbers {
    background: var(--nb-bg) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    color: var(--nb-black) !important;
    font-family: var(--nb-font-mono) !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 2px !important;
    transition: all var(--nb-transition) !important;
}

.navigation.pagination .nav-links .page-numbers.current,
.navigation.pagination .nav-links a.page-numbers:hover {
    background-color: var(--nb-yellow) !important;
    color: var(--nb-black) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow) !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
#portfolio-web-breadcrumbs,
.breadcrumb-area,
.inner-main-title {
    background-color: var(--nb-black) !important;
    border-bottom: var(--nb-border) !important;
}

#portfolio-web-breadcrumbs,
#portfolio-web-breadcrumbs a,
#portfolio-web-breadcrumbs span {
    color: var(--nb-yellow) !important;
    font-family: var(--nb-font-mono) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

#portfolio-web-breadcrumbs a:hover {
    color: var(--nb-coral) !important;
}

.breadcrumb-inner-content h1,
.inner-main-title h1 {
    color: var(--nb-yellow) !important;
    font-family: var(--nb-font-display) !important;
}

/* ============================================================
   COMMENTS
   ============================================================ */
.comment-list .comment-body,
.comment-list article {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    margin-bottom: 16px !important;
}

.comment-list article:hover {
    transform: none !important;
    box-shadow: var(--nb-shadow-sm) !important;
}

.comment-reply-link {
    background: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
    color: var(--nb-black) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 4px 12px !important;
    text-decoration: none !important;
    transition: all var(--nb-transition) !important;
}

.comment-reply-link:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    text-decoration: none !important;
    color: var(--nb-black) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background-color: var(--nb-black) !important;
    border-top: var(--nb-border) !important;
    color: #fff !important;
}

.site-footer * {
    color: #fff !important;
}

.site-footer .widget-title,
.footer-sidebar .widget-title {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    color: var(--nb-yellow) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--nb-yellow) !important;
    padding: 0 0 8px !important;
    margin: 0 0 16px !important;
    box-shadow: none !important;
}

.site-footer .widget {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.site-footer a {
    color: var(--nb-yellow) !important;
    text-decoration: none !important;
}

.site-footer a:hover {
    color: var(--nb-coral) !important;
    text-decoration: underline !important;
}

.copy-right {
    background-color: var(--nb-yellow) !important;
    border-top: var(--nb-border) !important;
    padding: 12px 0 !important;
}

.copy-right *,
.copy-right a,
.copy-right p,
.footer-copyright,
.footer-copyright *,
.site-info,
.site-info * {
    color: var(--nb-black) !important;
    font-family: var(--nb-font-mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Back to top */
.sm-up-container {
    background-color: var(--nb-black) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    color: var(--nb-yellow) !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--nb-transition) !important;
}

.sm-up-container:hover {
    background: var(--nb-yellow) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow) !important;
}

.sm-up-container .sm-up {
    color: var(--nb-yellow) !important;
}

.sm-up-container:hover .sm-up {
    color: var(--nb-black) !important;
}

/* ============================================================
   SOCIAL ICONS
   ============================================================ */
.at-social .socials li a,
.social-links a {
    background: var(--nb-bg) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    color: var(--nb-black) !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all var(--nb-transition) !important;
}

.at-social .socials li a:hover,
.social-links a:hover {
    background: var(--nb-yellow) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow) !important;
    color: var(--nb-black) !important;
}

/* Social icons in top bar */
.top-header .at-social .socials li a {
    background: transparent !important;
    border: 1px solid var(--nb-yellow) !important;
    box-shadow: none !important;
    color: var(--nb-yellow) !important;
    width: 28px !important;
    height: 28px !important;
}

.top-header .at-social .socials li a:hover {
    background: var(--nb-yellow) !important;
    color: var(--nb-black) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ============================================================
   SEARCH
   ============================================================ */
.search-form {
    display: flex !important;
    gap: 0 !important;
}

.search-form .search-field {
    border-right: none !important;
    flex: 1 !important;
}

.search-form .search-submit {
    border-left: none !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   404 / SPECIAL PAGES
   ============================================================ */
.error-404 {
    background: var(--nb-bg) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-lg) !important;
    padding: 48px !important;
    text-align: center !important;
}

.error-404 .page-title {
    font-family: var(--nb-font-display) !important;
    font-size: clamp(4rem, 12vw, 9rem) !important;
    font-weight: 800 !important;
    color: var(--nb-yellow) !important;
    -webkit-text-stroke: 3px var(--nb-black) !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* ============================================================
   WOOCOMMERCE (if applicable)
   ============================================================ */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--nb-yellow) !important;
    color: var(--nb-black) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    font-family: var(--nb-font-head) !important;
    transition: all var(--nb-transition) !important;
}

.woocommerce .button:hover,
.woocommerce a.button:hover {
    background-color: var(--nb-yellow) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow) !important;
    color: var(--nb-black) !important;
}

/* ============================================================
   POPUP MODAL
   ============================================================ */
#at-shortcode-bootstrap-modal .modal-content {
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-xl) !important;
}

#at-shortcode-bootstrap-modal .modal-header {
    background: var(--nb-yellow) !important;
    border-bottom: var(--nb-border) !important;
    color: var(--nb-black) !important;
}

#at-shortcode-bootstrap-modal .modal-header * {
    color: var(--nb-black) !important;
    font-family: var(--nb-font-head) !important;
    font-weight: 700 !important;
}

/* ============================================================
   UTILITY / OVERRIDES
   ============================================================ */

/* Remove box-shadow from Bootstrap inputs to use ours */
.form-control:focus {
    box-shadow: var(--nb-shadow) !important;
    border-color: var(--nb-black) !important;
}

/* Slick dots */
.slick-dots li button:before {
    color: var(--nb-black) !important;
    font-size: 10px !important;
}

.slick-dots li.slick-active button:before {
    color: var(--nb-yellow) !important;
    font-size: 12px !important;
}

/* Images - tasteful borders only on standalone images */
.entry-content img:not(.emoji):not(.avatar) {
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
}

/* WOW animation init */
.init-animate {
    visibility: visible !important;
}

/* Primary color override (theme uses inline color variables) */
.primary-color,
.primary-bg {
    color: var(--nb-black) !important;
    background-color: var(--nb-yellow) !important;
}

/* HR */
hr {
    border: none !important;
    border-top: 3px solid var(--nb-black) !important;
    margin: 32px 0 !important;
}

/* Blockquote */
blockquote {
    border-left: 5px solid var(--nb-yellow) !important;
    background: #fff !important;
    border-top: var(--nb-border) !important;
    border-right: var(--nb-border) !important;
    border-bottom: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 20px 24px !important;
    font-style: italic !important;
    font-family: var(--nb-font-head) !important;
}

/* Code */
code, pre {
    font-family: var(--nb-font-mono) !important;
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    padding: 2px 8px !important;
    font-size: 13px !important;
}

pre {
    padding: 20px !important;
    overflow-x: auto !important;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
    .at-navbar,
    .navbar {
        min-height: 56px !important;
    }

    .site-title {
        font-size: 1.2rem !important;
    }

    .main-navigation .navbar-nav > li > a {
        font-size: 15px !important;
        padding: 14px 20px !important;
        border-bottom: 1px solid #eee !important;
    }

    /* Mobile nav drawer */
    .at-beside-navbar-header,
    .navbar-collapse {
        background: var(--nb-bg) !important;
        border: var(--nb-border) !important;
        box-shadow: var(--nb-shadow-lg) !important;
        padding: 12px !important;
    }

    article,
    .post {
        padding: 16px !important;
    }

    .widget {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }

    .btn, .btn-primary, button, input[type="submit"] {
        padding: 8px 18px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   FULLSCREEN OVERLAY NAV (menu-default class)
   ============================================================ */

/* Override the dark overlay with yellow neu brutalism panel */
.menu-default .navbar-collapse {
    background: var(--nb-yellow) !important;
    border-right: var(--nb-border) !important;
    width: 420px !important;
    left: auto !important;
    right: 0 !important;
    box-shadow: -8px 0 0 0 var(--nb-black) !important;
    overflow-y: auto !important;
}

.menu-default .navbar-nav {
    position: static !important;
    transform: none !important;
    text-align: left !important;
    padding: 80px 40px 40px !important;
    width: 100% !important;
}

.menu-default .navbar-nav > li {
    display: block !important;
    float: none !important;
    opacity: 1 !important;
    filter: none !important;
    border-bottom: var(--nb-border) !important;
    margin: 0 !important;
    transition: none !important;
}

.menu-default .in .navbar-nav > li {
    opacity: 1 !important;
    transition: none !important;
}

.menu-default .main-navigation ul li a,
.menu-default .navbar-nav > li > a {
    font-family: var(--nb-font-display) !important;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem) !important;
    font-weight: 800 !important;
    color: var(--nb-black) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    padding: 14px 0 !important;
    text-decoration: none !important;
    display: block !important;
    transition: color var(--nb-transition), padding-left var(--nb-transition) !important;
}

.menu-default .main-navigation ul li a:hover,
.menu-default .navbar-nav > li > a:hover {
    color: var(--nb-coral) !important;
    padding-left: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Dropdown inside overlay */
.menu-default .main-navigation ul ul,
.menu-default .navbar-nav .dropdown-menu {
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 0 20px !important;
}

.menu-default .main-navigation ul ul li a {
    font-size: 1rem !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.15) !important;
}

/* Close button */
.menu-default .close-menu {
    display: none !important;
    position: fixed !important;
    top: 20px !important;
    right: 440px !important;
    z-index: 1000 !important;
    background: var(--nb-black) !important;
    color: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
}

.menu-default .close-menu span.menu-icon span {
    background: var(--nb-yellow) !important;
}

/* When nav is open, show close button as flex */
.menu-default .navbar-collapse.in ~ .close-menu,
.menu-default .close-menu[style*="display: block"],
.menu-default .close-menu[style*="display:block"] {
    display: flex !important;
}

/* Hamburger button */
.menu-default .navbar-toggle {
    background: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    padding: 8px 12px !important;
    float: right !important;
    margin-top: 10px !important;
    margin-right: 15px !important;
}

.menu-default .navbar-toggle:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow) !important;
    background: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
}

/* ============================================================
   SECTION BACKGROUNDS — Override grey/blue
   ============================================================ */

/* Light blue slider wrapper */
.image-slider-wrapper {
    background: var(--nb-bg) !important;
    border-bottom: var(--nb-border) !important;
}

/* Grey/blue bg class used by theme on widget sections */
.at-gray-bg,
.at-widgets.at-gray-bg {
    background: var(--nb-bg) !important;
    border-top: var(--nb-border) !important;
    border-bottom: var(--nb-border) !important;
}

/* Section wrappers */
.at-widgets {
    background: var(--nb-bg) !important;
}

/* Primary-bg sections (call to action) — keep yellow */
.at-widgets.primary-bg,
.primary-bg {
    background-color: var(--nb-yellow) !important;
    border-top: var(--nb-border) !important;
    border-bottom: var(--nb-border) !important;
}

.at-widgets.primary-bg *,
.at-widgets.primary-bg h2,
.at-widgets.primary-bg h3,
.at-widgets.primary-bg p {
    color: var(--nb-black) !important;
}

/* ============================================================
   ACME SERVICES CARDS — Neu Brutalism override
   ============================================================ */
.acme-services .single-list .single-item {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    border-radius: 0 !important;
    padding: 28px !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

.acme-services .single-list:hover .single-item,
.acme-services .single-list:focus-within .single-item {
    box-shadow: var(--nb-shadow-lg) !important;
}

.acme-services .single-list:hover,
.acme-services .single-list:focus-within {
    transform: translate(-3px, -3px) !important;
}

.acme-services .column .single-item i {
    color: var(--nb-black) !important;
    background: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
    width: 60px !important;
    height: 60px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.acme-services.feature .featured-entries-col .single-list .single-item i {
    background: var(--nb-yellow) !important;
    border-radius: 0 !important;
    border: var(--nb-border) !important;
}

.acme-services.feature .featured-entries-col .single-list:hover .single-item i,
.acme-services.feature .featured-entries-col .single-list:focus-within .single-item i {
    background: var(--nb-coral) !important;
}

.acme-services .column .single-item .title {
    font-family: var(--nb-font-head) !important;
    font-weight: 700 !important;
    color: var(--nb-black) !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-top: 12px !important;
}

/* ============================================================
   SKILLS SECTION
   ============================================================ */
.at-skills {
    background: var(--nb-bg) !important;
}

.at-skills .widget-title {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
}

/* Pie chart — override white bar color via a JS hook isn't easy; 
   we style the percent text instead */
.percent,
.skill-percent {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    font-size: 2.5rem !important;
    color: var(--nb-black) !important;
    line-height: 1 !important;
}

.percent::after {
    font-size: 1.5rem !important;
    font-family: var(--nb-font-display) !important;
}

.at-skills h3:not(.widget-title) {
    font-family: var(--nb-font-head) !important;
    font-weight: 700 !important;
    color: var(--nb-black) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.08em !important;
    margin-top: 8px !important;
}

/* Skill item wrapper */
.at-skills .chart {
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    padding: 20px !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 130px !important;
    height: 130px !important;
    position: relative !important;
    margin: 0 auto 12px !important;
}

/* ============================================================
   TIMELINE SECTION
   ============================================================ */
.at-timeline-section::before {
    background: var(--nb-black) !important;
    width: 3px !important;
}

.at-timeline-block::after {
    border-color: transparent var(--nb-yellow) transparent transparent !important;
}

/* Timeline icon dot */
.at-timeline-img {
    background: var(--nb-yellow) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    border-radius: 0 !important;
    width: 44px !important;
    height: 44px !important;
}

.at-timeline-img img,
.at-timeline-img i {
    color: var(--nb-black) !important;
}

/* Timeline content box */
.at-timeline-content {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 20px 24px !important;
    border-radius: 0 !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

.at-timeline-content:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow-lg) !important;
}

.at-timeline-content h4,
.at-timeline-content .at-timeline-header h4 {
    font-family: var(--nb-font-head) !important;
    font-weight: 700 !important;
    color: var(--nb-black) !important;
}

.at-timeline-content .at-timeline-date,
.at-timeline-content time {
    font-family: var(--nb-font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    background: var(--nb-yellow) !important;
    border: var(--nb-border-thin) !important;
    color: var(--nb-black) !important;
    padding: 2px 8px !important;
    display: inline-block !important;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.acme-about,
.widget_portfolio_web_about {
    background: var(--nb-bg) !important;
}

.acme-about .about-content {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 28px !important;
}

/* ============================================================
   TESTIMONIAL SECTION
   ============================================================ */
.acme-testimonial .testimonial-inner,
.at-testimonial .testimonial-inner {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 24px !important;
}

/* ============================================================
   GALLERY / PORTFOLIO SECTION
   ============================================================ */
.acme-gallery .at-gallery-item,
.grid .element-item {
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    background: #fff !important;
    transition: transform var(--nb-transition), box-shadow var(--nb-transition) !important;
}

.acme-gallery .at-gallery-item:hover,
.grid .element-item:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: var(--nb-shadow) !important;
}

/* Gallery filter buttons */
.filters button,
.button-group button {
    background: var(--nb-bg) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow-sm) !important;
    color: var(--nb-black) !important;
    font-family: var(--nb-font-mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 6px 16px !important;
    margin: 4px !important;
    cursor: pointer !important;
    transition: all var(--nb-transition) !important;
}

.filters button:hover,
.button-group button:hover,
.filters button.is-checked,
.button-group button.is-checked {
    background: var(--nb-yellow) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow) !important;
}

/* ============================================================
   COUNT-UP / NUMBERS WIDGET
   ============================================================ */
.acme-imp-number .at-number {
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    font-size: 3rem !important;
    color: var(--nb-black) !important;
    display: block !important;
    line-height: 1 !important;
}

.acme-imp-number {
    background: #fff !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
    padding: 24px !important;
    text-align: center !important;
}

/* ============================================================
   PARALLAX CTA SECTION
   ============================================================ */
.at-parallax {
    position: relative !important;
    border-top: var(--nb-border) !important;
    border-bottom: var(--nb-border) !important;
}

.at-parallax:after {
    background: rgba(0, 0, 0, 0.6) !important;
}

.at-parallax .widget-title,
.at-parallax h2,
.at-parallax h3 {
    color: #fff !important;
    font-family: var(--nb-font-display) !important;
    font-weight: 800 !important;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5) !important;
}

.at-parallax .btn,
.at-parallax .btn-primary,
.at-parallax a.btn,
.at-widgets.at-parallax .featured-button {
    background: var(--nb-yellow) !important;
    color: var(--nb-black) !important;
    border: var(--nb-border) !important;
    box-shadow: var(--nb-shadow) !important;
}

.at-parallax .btn:hover,
.at-parallax .btn-primary:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: var(--nb-shadow-lg) !important;
}

/* ============================================================
   LOGO WIDGET
   ============================================================ */
.acme-logo-widget,
.widget_portfolio_web_logo {
    background: var(--nb-bg) !important;
}

/* ============================================================
   SITE-WIDE SECTION TITLE TREATMENT
   ============================================================ */
.at-widget-title-wrapper,
.at-widget-title-wrapper .widget-title {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 32px !important;
}

/* Subtitle under section titles */
.at-subtitle,
.widget-description,
.acme-subtitle {
    font-family: var(--nb-font-body) !important;
    color: #444 !important;
    border-left: 4px solid var(--nb-yellow) !important;
    padding-left: 12px !important;
    margin-bottom: 32px !important;
}

/* ============================================================
   INNER PAGE HEADER — neu brutalism treatment
   ============================================================ */
.inner-main-title {
    background-color: #573c36 !important;
    border-bottom: 3px solid #573c36 !important;
    min-height: 120px !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 32px 0 !important;
    margin-bottom: 0 !important;
}
.inner-main-title .container {
    width: 100% !important;
}
.inner-main-title .entry-header {
    position: static !important;
    transform: none !important;
    -webkit-transform: none !important;
    text-align: left !important;
    padding: 0 15px !important;
}
.inner-main-title h1.entry-title {
    color: #af8576 !important;
    font-family: "Syne", sans-serif !important;
    font-size: clamp(1.8rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 8px 0 !important;
    position: static !important;
    transform: none !important;
    -webkit-transform: none !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
}

/* ============================================================
   REPLY BUTTON IN COMMENTS
   ============================================================ */
.reply {
    background: var(--nb-yellow) !important;
    border-top: var(--nb-border) !important;
    border-left: var(--nb-border) !important;
    padding: 4px 14px !important;
}


/* ============================================================
   CORRECTIONS BATCH — Issues 1-10
   ============================================================ */

/* --- 1. TOP HEADER BAR ------------------------------------ */
/* Ensure top header is visible and properly styled */
.top-header {
    display: block !important;
    background-color: #573c36 !important;
    border-bottom: 3px solid #573c36 !important;
    padding: 8px 0 !important;
}

.top-header,
.top-header * {
    color: #af8576 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 12px !important;
}

.top-header a { text-decoration: none !important; }
.top-header a:hover { color: #89665e !important; text-decoration: underline !important; }

.top-header .at-social .socials li a {
    background: transparent !important;
    border: 1px solid #af8576 !important;
    box-shadow: none !important;
    color: #af8576 !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
    margin: 0 2px !important;
}

.top-header .at-social .socials li a:hover {
    background: #af8576 !important;
    color: #573c36 !important;
}

/* Feature info (phone/availability icons) */
.top-header .at-feature-info,
.top-header .info-icon-box-wrapper,
.top-header .info-icon-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-right: 16px !important;
}

.top-header .fa,
.top-header i {
    color: #af8576 !important;
    font-size: 11px !important;
}

/* --- 3. REMOVE BACKGROUND IMAGES from parallax sections --- */
.at-parallax,
.at-widgets.at-parallax,
.at-widgets.at-skills.at-parallax,
.at-widgets.primary-bg.at-parallax,
[class*="at-widgets"][class*="at-parallax"] {
    background-image: none !important;
}

/* Skills section without parallax image — use clean bg */
.at-widgets.at-skills.at-parallax {
    background-color: #e9b396 !important;
}

/* CTA section without image — use black for contrast */
.at-widgets.primary-bg.at-parallax {
    background-color: #af8576 !important;
}

/* Remove the dark overlay pseudo-element since no image */
.at-parallax:after {
    display: none !important;
}

/* --- 4. FIX WHITE TEXT ON YELLOW — Section titles --------- */
/* All widget titles regardless of section */
.widget-title,
.at-widget-title-wrapper .widget-title,
.at-parallax .widget-title,
.at-widgets .widget-title,
.primary-bg .widget-title,
.at-skills .widget-title,
h3.widget-title {
    color: #573c36 !important;
    background: #af8576 !important;
    border: 3px solid #573c36 !important;
    padding: 6px 14px !important;
    display: inline-block !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    box-shadow: 4px 4px 0 0 #573c36 !important;
    margin-bottom: 24px !important;
}

/* Remove the ::after underline now that we have the box style */
.widget-title::after { display: none !important; }

/* CTA section text in yellow section */
.at-widgets.primary-bg *:not(.btn):not(button) {
    color: #573c36 !important;
}

/* --- 5. SERVICE CARD — fix overflow on long title ---------- */
.acme-services .column .single-item .title {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    min-height: 2.6em !important;
    display: block !important;
    word-break: break-word !important;
    hyphens: auto !important;
}

/* Ensure card has enough height and border doesn't cut into text */
.acme-services .single-list .single-item {
    padding: 20px 20px 24px !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* --- 6. TIMELINE ICONS — add FA icons via CSS ------------- */
/* Each .at-timeline-img is the dot/icon on the timeline line */
.at-timeline-img {
    width: 44px !important;
    height: 44px !important;
    background: #af8576 !important;
    border: 3px solid #573c36 !important;
    box-shadow: 3px 3px 0 0 #573c36 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 10px !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

/* Default icon for all timeline items */
.at-timeline-img::before {
    font-family: 'FontAwesome' !important;
    font-size: 18px !important;
    color: #573c36 !important;
    content: '\f0b1' !important; /* briefcase */
}

/* Vary icons by position for visual interest */
.at-timeline-block:nth-child(1) .at-timeline-img::before { content: '\f0b1' !important; } /* briefcase */
.at-timeline-block:nth-child(2) .at-timeline-img::before { content: '\f0c0' !important; } /* group */
.at-timeline-block:nth-child(3) .at-timeline-img::before { content: '\f233' !important; } /* server */
.at-timeline-block:nth-child(4) .at-timeline-img::before { content: '\f0e7' !important; } /* bolt */
.at-timeline-block:nth-child(5) .at-timeline-img::before { content: '\f121' !important; } /* code */
.at-timeline-block:nth-child(6) .at-timeline-img::before { content: '\f0c1' !important; } /* link */

/* Desktop: timeline icon centred on the vertical line */
@media only screen and (min-width: 1170px) {
    .at-timeline-img {
        left: 50% !important;
        margin-left: -22px !important;
    }
}

/* --- 7. BODY FONT — apply Inter to all text --------------- */
body,
p, li, td, th, blockquote, figcaption,
.entry-content, .entry-summary,
.widget ul li, .widget ol li,
.comment-content,
.acme-about p,
.at-timeline-content p,
.acme-services p,
.single-item p,
.footer-copyright,
.copy-right p,
input, textarea, select,
.wpcf7 p, .wpcf7 label {
    font-family: 'Inter', sans-serif !important;
}

/* Headings: Space Grotesk */
h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a,
.at-timeline-content h4,
.acme-services .title,
.section-title {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* Display/hero only: Syne */
.site-title, .site-title a,
.widget-title,
.error-404 .page-title,
.slick-slide .banner-title,
.acme-about .about-title {
    font-family: 'Syne', sans-serif !important;
}

/* Mono: labels, meta, code */
.entry-meta, .posted-on, .byline,
code, pre, kbd, .skill-percent,
.at-timeline-content time,
.top-header,
.copy-right *,
.search-field::placeholder {
    font-family: 'Space Mono', monospace !important;
}

/* --- 8. HIDE RECENT WORKS SECTION ------------------------- */
.widget_portfolio_web_gallery,
.widget_portfolio_web_gallery + *,
.at-widgets .widget_portfolio_web_gallery {
    display: none !important;
}

/* Also hide the background image section that was carrying the gallery */
.portfolio-web-home > .widget_portfolio_web_gallery {
    display: none !important;
}

/* --- 9. HIDE FRONT PAGE CONTENT (the "Home" page area) ---- */
/* Scope to front-page only — must NOT match inner pages */
body.home .page-content,
body.front-page .page-content,
body.home .entry-content.page-content,
body.front-page .entry-content.page-content,
.at-front-page-content,
body.home #content .hentry.page,
body.front-page #content .hentry.page,
body.home .site-content .page:not([class*="widget"]) .entry-content,
body.front-page .site-content .page:not([class*="widget"]) .entry-content {
    display: none !important;
}

/* --- 10. HIRE FORM — style the text widget with CF7 form --- */
.widget_text {
    display: block !important;
    background: #fff !important;
    border: 3px solid #573c36 !important;
    box-shadow: 8px 8px 0 0 #573c36 !important;
    padding: 32px !important;
    margin: 32px 15px !important;
}

.widget_text .widget-title,
.widget_text h3.widget-title {
    font-size: 1.5rem !important;
    margin-bottom: 20px !important;
}

/* CF7 form inside hire widget */
.widget_text .wpcf7 input[type="text"],
.widget_text .wpcf7 input[type="email"],
.widget_text .wpcf7 textarea {
    background: #e9b396 !important;
    border: 3px solid #573c36 !important;
    box-shadow: 3px 3px 0 0 #573c36 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    display: block !important;
    transition: box-shadow 0.1s, transform 0.1s !important;
}

.widget_text .wpcf7 input:focus,
.widget_text .wpcf7 textarea:focus {
    outline: 2px solid #573c36 !important;
    outline-offset: 2px !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 5px 5px 0 0 #573c36 !important;
}

.widget_text .wpcf7 input[type="submit"],
.widget_text .wpcf7-submit {
    background: #af8576 !important;
    color: #573c36 !important;
    border: 3px solid #573c36 !important;
    box-shadow: 5px 5px 0 0 #573c36 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 12px 28px !important;
    cursor: pointer !important;
    transition: transform 0.1s, box-shadow 0.1s !important;
    width: 100% !important;
}

.widget_text .wpcf7 input[type="submit"]:hover,
.widget_text .wpcf7-submit:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 7px 7px 0 0 #573c36 !important;
}


/* ============================================================
   CORRECTIONS BATCH v2 — Selector strength fixes
   ============================================================ */

/* 8b. GALLERY — stronger selector including WOW state */
body .widget.widget_portfolio_web_gallery,
body .widget_portfolio_web_gallery,
html body .widget_portfolio_web_gallery,
.portfolio-web-home .widget_portfolio_web_gallery {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 10b. HIRE FORM — force visibility even with WOW animation hidden state */
body .widget.widget_text,
body .widget_text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .widget_text .widget-title,
body .widget_text h2.widget-title {
    visibility: visible !important;
    animation: none !important;
}

/* 6b. TIMELINE ICONS — use text fallback if FontAwesome CSS content fails */
.at-timeline-img {
    font-family: 'FontAwesome' !important;
    font-style: normal !important;
}

/* For any FontAwesome that won't render via content, show a square accent */
.at-timeline-img:empty {
    background: #af8576 !important;
    border: 3px solid #573c36 !important;
    width: 40px !important;
    height: 40px !important;
    display: block !important;
    position: relative !important;
}

/* Inner dot in each timeline marker */
.at-timeline-img::after {
    content: '' !important;
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    background: #573c36 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 7b. BODY FONT explicit non-variable version */
body, html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 15px !important;
    color: #111 !important;
}

body p,
body li,
body td,
body span:not(.widget-title):not(.site-title):not(.site-description),
body .entry-content * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Force headings to Space Grotesk (non-variable) */
body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: 'Space Grotesk', 'Arial Black', sans-serif !important;
}

/* Hero/display only to Syne */
body .site-title,
body .site-title a,
body .widget-title {
    font-family: 'Syne', 'Arial Black', Impact, sans-serif !important;
}



/* ============================================================
   INNER PAGES — content area styling
   ============================================================ */

/* Page content wrapper — cream bg, border accent */
body.page:not(.home):not(.front-page) #content,
body.page:not(.home):not(.front-page) .site-content {
    background-color: #e9b396 !important;
    padding-top: 0 !important;
}

body.page:not(.home):not(.front-page) #primary {
    padding: 48px 0 60px !important;
}

/* Article on inner pages */
body.page:not(.home):not(.front-page) article.page {
    display: block !important;
    visibility: visible !important;
}

/* Entry content typography */
body.page:not(.home):not(.front-page) .entry-content {
    display: block !important;
    visibility: visible !important;
    max-width: 780px !important;
    font-family: Inter, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #573c36 !important;
}

body.page:not(.home):not(.front-page) .entry-content h2 {
    font-family: Syne, sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin-top: 40px !important;
    padding-bottom: 8px !important;
    border-bottom: 3px solid #573c36 !important;
    color: #573c36 !important;
}

body.page:not(.home):not(.front-page) .entry-content h3 {
    font-family: Space Grotesk, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    margin-top: 28px !important;
    color: #573c36 !important;
}

body.page:not(.home):not(.front-page) .entry-content p {
    margin-bottom: 1.2em !important;
}

body.page:not(.home):not(.front-page) .entry-content ul,
body.page:not(.home):not(.front-page) .entry-content ol {
    padding-left: 1.5em !important;
    margin-bottom: 1.2em !important;
}

body.page:not(.home):not(.front-page) .entry-content li {
    margin-bottom: 0.4em !important;
}

body.page:not(.home):not(.front-page) .entry-content a {
    color: #573c36 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 2px !important;
}

body.page:not(.home):not(.front-page) .entry-content a:hover {
    background: #af8576 !important;
    text-decoration: none !important;
}

/* Featured image on inner pages */
body.page:not(.home):not(.front-page) .single-feat {
    margin-bottom: 32px !important;
    border: 3px solid #573c36 !important;
    box-shadow: 6px 6px 0 0 #573c36 !important;
}

/* Breadcrumb bar on inner pages */
body.page:not(.home):not(.front-page) #portfolio-web-breadcrumbs {
    background: transparent !important;
    padding: 6px 0 0 !important;
    border-top: none !important;
}

/* Sidebar on inner pages */
body.page:not(.home):not(.front-page) #secondary {
    padding-top: 48px !important;
}

body.page:not(.home):not(.front-page) .widget {
    border: 3px solid #573c36 !important;
    box-shadow: 4px 4px 0 0 #573c36 !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
    background: #fff !important;
}