/*
Theme Name: TnA Theme
Theme URI: https://totimehassociates.com
Description: Custom theme for Totimeh & Associates - Matching live site design
Author: Totimeh & Associates
Author URI: https://totimehassociates.com
Template: genesis-block-theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tna-theme
*/

/* ==========================================================================
   TnA Design System - Matching Live Site (totimehassociates.com)

   Colors:
   - Primary: Green #008D31
   - Primary Dark: #006B25
   - Text: #333
   - Text Light: #808080
   - Background: #f9f9f9
   - White: #ffffff

   Typography:
   - Font: Open Sans (sans-serif)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
    /* Colors - TnA brand green */
    --tna-primary: #008D31;
    --tna-primary-dark: #006B25;
    --tna-text: #333;
    --tna-text-light: #808080;
    --tna-bg: #f9f9f9;
    --tna-white: #ffffff;
    --tna-border: #e5e7eb;

    /* Override WordPress font size presets - BIGGER */
    --wp--preset--font-size--small: 16px;
    --wp--preset--font-size--normal: 18px;
    --wp--preset--font-size--medium: 20px;
    --wp--preset--font-size--large: 28px;
    --wp--preset--font-size--x-large: 42px;
    --wp--preset--font-size--huge: 56px;

    /* Typography */
    --font-body: 'Open Sans', sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;

    /* Transitions */
    --transition-fast: 100ms ease-in;
    --transition-base: 250ms ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
html {
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.7;
    color: var(--tna-text);
    background-color: var(--tna-bg);
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   TYPOGRAPHY - Bigger sizes, proper hierarchy
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--tna-text);
    line-height: 1.3;
    margin-bottom: 1rem;
}

/* Heading hierarchy: h1 > h2 > h3 > h4 > p (use px for predictability) */
h1 { font-size: 48px; }   /* page titles */
h2 { font-size: 36px; }   /* section headings */
h3 { font-size: 24px; }   /* service headings */
h4 { font-size: 20px; }   /* sub-headings */
/* p: 18px (defined below) */

p,
.entry-content p,
.wp-block-column p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Links */
a {
    color: var(--tna-primary);
    word-wrap: break-word;
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--tna-primary-dark);
    text-decoration: none;
    outline: 0;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.wp-block-button__link,
.btn-theme,
button[type="submit"] {
    background-color: var(--tna-primary);
    color: var(--tna-white);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    display: inline-block;
}

.wp-block-button__link:hover,
.btn-theme:hover,
button[type="submit"]:hover {
    background-color: var(--tna-primary-dark);
    color: var(--tna-white);
}

/* Outline Button */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--tna-white);
    border: 2px solid var(--tna-white);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--tna-white);
    color: var(--tna-primary);
}

/* --------------------------------------------------------------------------
   Header & Navigation - Matching live site

   ROOT CAUSE: Parent theme uses float-based layout with .site-identity.clear
   The .site-title-wrap floats left (30% max-width) and .top-navigation-right floats right (70%)
   We need to override these constraints to get a single-line compact header.
   -------------------------------------------------------------------------- */
.site-header {
    background-color: var(--tna-white);
    border-top: 3px solid var(--tna-primary);
    border-bottom: none;
    padding: 0;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Custom Logo Sizing */
.custom-logo-link img {
    max-height: 70px;
    width: auto;
}

/* Header layout - keep logo/nav on same line */
.site-identity,
.site-identity.clear {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.site-title-wrap {
    float: none !important;
    max-width: none !important;
}

/* Hide old branding - logo contains full branding now */
.titles-wrap,
.titles-wrap.has-description {
    display: none !important;
}

/* TnA Brand Badge */
.site-title,
p.site-title {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    margin: 0 !important;
    width: auto !important;
    display: inline-block !important;
}

.site-title a {
    background-color: var(--tna-primary);
    padding: 5px 8px;
    color: var(--tna-white);
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
}

.site-title a:hover {
    background-color: var(--tna-primary-dark);
    color: var(--tna-white);
}

/* Tagline */
.site-description,
p.site-description {
    position: static !important;
    font-size: 18px;
    font-weight: 700;
    color: var(--tna-text-light);
    margin: 0 !important;
    margin-left: 10px !important;
    width: auto !important;
    display: inline-block !important;
    white-space: nowrap;
}

/* Right side: Navigation */
.top-navigation-right {
    float: none !important;
    max-width: none !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
}

.main-navigation {
    display: flex;
    align-items: center;
}

.main-navigation ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation li {
    margin: 0;
    padding: 0;
}

.main-navigation a {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--tna-primary) !important;
    text-transform: uppercase;
    padding: 10px 18px;
    transition: color var(--transition-fast);
    display: block;
}

.main-navigation a:hover,
.main-navigation .current-menu-item a,
.navbar-nav > li > a:hover {
    color: var(--tna-text-light);
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero-section,
.wp-block-cover.hero-cover,
.introwrap {
    background-color: var(--tna-primary);
    min-height: 400px;
    display: flex;
    align-items: center;
    text-align: center;
}

/* Override Gutenberg inline colors with theme primary */
.wp-block-cover__background,
.wp-block-cover .wp-block-cover__background {
    background-color: var(--tna-primary) !important;
    opacity: 0.5 !important;  /* Balance between visibility and green color */
}

.hero-section h1,
.wp-block-cover h1 {
    color: var(--tna-white);
    font-weight: 300;
    /* Uses base h1 size: 48px */
}

.hero-section h2,
.wp-block-cover h2 {
    color: var(--tna-white);
    font-weight: 300;
    /* Uses base h2 size: 36px */
}

.hero-section p,
.wp-block-cover p {
    color: var(--tna-white);
    /* Uses base p size: 18px */
}

/* --------------------------------------------------------------------------
   About/Services Section - matching live site
   -------------------------------------------------------------------------- */
.aboutwrap,
.section-services {
    padding: var(--space-xl) 0;
    text-align: center;
}

/* .aboutwrap h2 inherits global h2 size (2.25rem) */
.aboutwrap h2 {
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

/* Service icons - linecons style */
.service-icon,
[class^="li_"] {
    font-size: 48px;
    color: var(--tna-primary);
    margin-bottom: var(--space-sm);
    display: block;
}

/* Override inline-styled Font Awesome icons in services section */
#services .fa-solid,
#services .fa-regular,
#services [class^="fa-"] {
    color: var(--tna-primary) !important;
}

.service-card,
.aboutwrap .col-lg-4 {
    padding: var(--space-md);
}

/* Service headings - inherits global h3 size (1.5rem) */
.service-card h3,
.aboutwrap h3 {
    font-weight: 400;
    margin-bottom: var(--space-sm);
}

.service-card p,
.aboutwrap p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--tna-text);
}

/* Services wrap - spacer section */
.serviceswrap .spacer,
.section-about-highlight {
    background-color: var(--tna-primary);
    padding: var(--space-xl) 0;
    color: var(--tna-white);
}

/* Spacer section h2 - inherits global h2 size */
.serviceswrap .spacer h2 {
    color: var(--tna-white);
    font-weight: 300;
}

/* Clients section */
.clientswrap {
    padding: var(--space-xl) 0;
    background-color: var(--tna-white);
}

/* Clients h2 - inherits global h2 size */
.clientswrap h2 {
    font-weight: 400;
    margin-bottom: var(--space-md);
}

.clientswrap hr {
    width: 500px;
    max-width: 100%;
    margin: 0 auto var(--space-lg);
}

/* --------------------------------------------------------------------------
   Contact Section
   -------------------------------------------------------------------------- */
.contactwrap {
    padding: var(--space-xl) 0;
}

/* Contact h4 - inherits global h4 size */
.contactwrap h4 {
    font-weight: 400;
    margin-bottom: var(--space-md);
}

/* Contact Form */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--tna-text);
    background-color: var(--tna-white);
    border: 1px solid var(--tna-border);
    border-radius: 4px;
    margin-bottom: var(--space-sm);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--tna-primary);
    box-shadow: 0 0 0 2px rgba(128, 189, 242, 0.2);
}

/* --------------------------------------------------------------------------
   Footer - matching live site
   -------------------------------------------------------------------------- */
.site-footer,
.footerwrap {
    background-color: #333;
    color: rgba(255, 255, 255, 0.8);
    padding: var(--space-xl) 0 var(--space-md);
}

.site-footer h4,
.footerwrap h4 {
    color: var(--tna-white);
    font-size: 18px;
    font-weight: 400;
    margin-bottom: var(--space-md);
}

.site-footer p,
.footerwrap p {
    font-size: 14px;
    line-height: 24px;
}

.site-footer a,
.footerwrap a {
    color: rgba(255, 255, 255, 0.8);
}

.site-footer a:hover,
.footerwrap a:hover {
    color: var(--tna-primary);
}

.site-footer i,
.footerwrap i {
    margin-right: 8px;
    width: 16px;
}

/* Copyright */
.copywrap,
.footer-bottom {
    background-color: #222;
    padding: var(--space-sm) 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.copywrap a {
    color: rgba(255, 255, 255, 0.6);
}

.copywrap a:hover {
    color: var(--tna-primary);
}

/* --------------------------------------------------------------------------
   WordPress Block Overrides
   -------------------------------------------------------------------------- */
.wp-block-cover {
    min-height: 400px;
}

.wp-block-columns {
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Service columns - simple style matching live site */
.wp-block-column {
    padding: 1.5rem;
    text-align: center;
}

/* Column headings inherit from global h1-h4 sizes */
.wp-block-column h2,
.wp-block-column h3,
.wp-block-column h4 {
    font-weight: 400;
    margin-bottom: 1rem;
}

.wp-block-column p {
    font-size: 18px;
    line-height: 1.7;
}

/* Remove card borders - live site doesn't have them */
.wp-block-column {
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Cover inner content */
.wp-block-cover .wp-block-column {
    background: transparent;
    padding: 1rem;
}

.wp-block-separator {
    border-color: var(--tna-border);
    max-width: 500px;
    margin: var(--space-lg) auto;
}

.wp-block-quote {
    border-left: 4px solid var(--tna-primary);
    padding-left: var(--space-md);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-primary { color: var(--tna-primary); }
.text-white { color: var(--tna-white); }
.bg-primary { background-color: var(--tna-primary); }
.bg-light { background-color: var(--tna-bg); }
.bg-white { background-color: var(--tna-white); }

/* DO NOT override .container - parent theme uses:
   max-width: 1600px; padding: 0 8%; margin: 0 auto;
   See genesis-block-theme/style.css line 3191-3196 */

/* --------------------------------------------------------------------------
   FORCE FULL WIDTH LAYOUT
   -------------------------------------------------------------------------- */
.wp-site-blocks,
.wp-site-blocks > *,
.entry-content,
.entry-content > *,
body .is-layout-constrained > *,
body .is-layout-constrained > .alignwide,
body .is-layout-constrained > .alignfull {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Full width covers */
.wp-block-cover,
.wp-block-cover.alignfull,
.wp-block-cover.alignwide {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Full width groups with background */
.wp-block-group.has-background,
.wp-block-group.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Block inner containers - constrain to readable width */
.wp-block-cover__inner-container,
.wp-block-group__inner-container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Hide page title AND its container on front page */
/* Parent theme: .post .entry-header { margin-bottom: 5%; } at line 3354 */
.home .entry-header,
.page-id-7 .entry-header {
    display: none !important;
}

.home .entry-title,
.home .page-title,
body.home h1.wp-block-post-title,
.page-id-7 .entry-title {
    display: none;
}

/* Remove excess padding/margins - FIX EXTRA SPACE ABOVE HERO */
.site-content,
.entry-content,
main {
    padding: 0;
    margin: 0;
}

/* Remove all top margins/padding from first block */
.entry-content > *:first-child,
.wp-site-blocks > *:first-child,
main > *:first-child,
article > *:first-child,
.post-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Fix Genesis Block Theme spacing - AGGRESSIVE */
body.home .wp-site-blocks,
body.page .wp-site-blocks {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.page .entry-content,
body.home .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Kill ALL spacing above hero */
.wp-block-post-content > .wp-block-cover:first-child,
.entry-content > .wp-block-cover:first-child,
.wp-site-blocks > .wp-block-cover:first-child,
article .wp-block-cover:first-child {
    margin-top: 0 !important;
}

/* Remove gap in wp-site-blocks layout */
.wp-site-blocks {
    gap: 0 !important;
}

/* Ensure no gap between header and content */
header + #page,
.site-header + #page,
#masthead + #page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove article/main padding */
article,
.type-page,
.hentry {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   FIX: Remove ALL spacing above hero
   Parent theme #page has padding-top: 6% at line 3329
   ========================================================================== */
#page,
#page.container,
#page.hfeed,
.hfeed.site.container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

@media (max-width: 600px) {
    #page {
        padding-top: 0 !important;
    }
}

#content,
#content.site-content,
.site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#primary,
#primary.content-area,
.content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#main,
main,
.site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

article,
.hentry,
.type-page,
.post {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove container max-width on home page for full bleed */
body.home #page.container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Button styling - matching live site blue */
.wp-block-button__link {
    background-color: var(--tna-primary);
    color: var(--tna-white);
    padding: 12px 24px;
    font-weight: 400;
    border-radius: 0;
}

.wp-block-button__link:hover {
    background-color: var(--tna-primary-dark);
    color: var(--tna-white);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .site-header {
        padding: 8px 15px;
    }

    .wp-block-columns {
        flex-direction: column;
    }

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

    h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
}

/* HR styling */
hr {
    border: 0;
    border-bottom: 1px solid var(--tna-border);
    padding-bottom: var(--space-lg);
}

.aboutwrap hr,
.serviceswrap hr {
    max-width: 500px;
    margin: 0 auto;
    padding-bottom: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Contact Form 7 Styling - Match Live Site

   ROOT CAUSE: CF7 inputs have size="40" HTML attribute which sets width.
   Must use !important and box-sizing to override.
   The .wpcf7 wrapper is inside WP block layout which can expand it.
   -------------------------------------------------------------------------- */

/* Constrain the entire form wrapper */
.wpcf7,
div.wpcf7 {
    max-width: 400px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Override CF7's size attribute on inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7-form-control {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 15px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #555;
    background-color: var(--tna-white);
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 5px;
    box-sizing: border-box !important;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
    border-color: var(--tna-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(128, 189, 242, 0.2);
}

.wpcf7 textarea {
    resize: none;
    min-height: 120px;
}

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
    background-color: var(--tna-primary);
    color: var(--tna-white);
    border: none;
    padding: 10px 30px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
    background-color: var(--tna-primary-dark);
}

/* Hide labels - use placeholders instead */
.wpcf7 label {
    display: block;
    font-size: 0;  /* Hide label text */
    line-height: 0;
}

/* But show the input inside the label */
.wpcf7 label input,
.wpcf7 label textarea,
.wpcf7 .wpcf7-form-control-wrap {
    font-size: 16px;
    line-height: 1.5;
}

/* CF7 validation messages */
.wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 14px;
    margin-top: -10px;
    margin-bottom: 10px;
}

.wpcf7-response-output {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: 4px;
}

.wpcf7-mail-sent-ok {
    border-color: #28a745;
    color: #28a745;
}

.wpcf7-validation-errors {
    border-color: #dc3545;
    color: #dc3545;
}

/* Remove p tag margins inside CF7 */
.wpcf7 p {
    margin-bottom: 10px;
}

/* Contact section wrapper */
.tna-contact-section {
    padding: var(--space-xl) 0;
    text-align: center;
}

/* Contact section h4 - inherits global h4 size */
.tna-contact-section h4 {
    font-weight: 400;
    margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Hide Parent Theme Footer (we use custom footer in page content)
   -------------------------------------------------------------------------- */
#colophon.site-footer {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Careers Page
   -------------------------------------------------------------------------- */
/* Careers page - white background */
.page-id-36,
.page-id-36 #page {
    background-color: #ffffff;
}

.page-id-36 .entry-header {
    padding-top: 2rem !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.page-id-36 .entry-title {
    text-align: center;
    margin-bottom: 1rem !important;
}

/* Careers iframe */
.careers-iframe-wrap {
    width: 100%;
    max-width: 100%;
    margin-top: 2rem;
    overflow: hidden;
}

.careers-iframe-wrap iframe {
    display: block;
    width: 100%;
    height: 1800px;
    border: 0;
}