/*
Theme Name: GenxChild
Theme URI: https://compuwebcenter.com
Description: Reusable color/typography child theme for MasterTheme, built by TechGenX. Only overrides --color-* and --font-* custom properties — all layout, structure, and components are inherited from the parent. Same theme is reused across every site; only the values in the :root block below change per deployment.
Author: TechGenX
Author URI: https://compuwebcenter.com
Template: MasterTheme
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: genxchild
*/

/* ==================================================
   HOW TO USE THIS FILE — PER-SITE SETUP
   ==================================================
   This theme is reused as-is across every site. Do not
   rename it, do not change the folder name. The only
   thing that changes per deployment is the values inside
   the :root block below.

   1. Set --color-primary / --color-secondary to the
      site's brand colors.
   2. Set --font-family-base / --font-family-heading.
      If using Google Fonts, uncomment the @import line
      below, add the font(s) needed, and point the
      --font-family-* values at them.
   3. Leave everything else (spacing, radius, shadows,
      layout widths) alone — those live in MasterTheme
      and are not this theme's job to touch.
   4. Do not add template PHP files (single.php,
      front-page.php, index.php, etc.) to this theme.
      If a site needs structural changes, that belongs
      in MasterTheme itself or a true one-off child
      theme — not in GenxChild.
   ================================================== */

/* Optional: Google Fonts. Uncomment and edit per site if needed.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap');
*/

:root {

  /* ----------------------------------
     Site Colors
     Overrides MasterTheme's defaults from
     00-variables.css. Keep these exact
     variable names — every component
     (buttons, links, header, footer, etc.)
     reads from them automatically.
     ---------------------------------- */
  --color-primary: #2563eb;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1e40af;

  --color-secondary: #f59e0b;
  --color-secondary-light: #fbbf24;
  --color-secondary-dark: #d97706;

  /* Body copy, headings, backgrounds, borders.
     Usually fine to leave as MasterTheme's gray
     scale defaults — only change for a site that
     needs an off-white background, dark mode, or
     non-default text color. */
  --color-text: var(--color-gray-900);
  --color-text-light: var(--color-gray-600);
  --color-text-muted: var(--color-gray-500);

  --color-background: #ffffff;
  --color-background-alt: var(--color-gray-50);
  --color-background-dark: var(--color-gray-100);

  --color-border: var(--color-gray-200);
  --color-border-light: var(--color-gray-100);
  --color-border-dark: var(--color-gray-300);

  /* ----------------------------------
     Site Fonts
     Defaults to MasterTheme's system font
     stack. Replace with a Google Fonts family
     name (and uncomment the @import above) if
     this site needs custom type.
     ---------------------------------- */
  --font-family-base: -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
  --font-family-heading: var(--font-family-base);

  /* Example once Google Fonts is enabled above:
  --font-family-base: 'Open Sans', sans-serif;
  --font-family-heading: 'Poppins', sans-serif;
  */

  /* Font sizes — only change if this site's type
     needs to run larger/smaller than MasterTheme's
     default scale. Leave as-is in most cases. */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
}



/* =========================================================
   Trucker's Permits — Compact Homepage Contact Form (Ninja Forms)
   Paste into: Elementor page > Advanced > Custom CSS
   (or Appearance > Customize > Additional CSS for site-wide use)
   ========================================================= */

/* Overall form container — tighten outer spacing */
#nf-form-1-cont {
    max-width: 480px;
    margin: 0 auto;
    font-size: 14px;
}

/* Lay fields out in a tight 2-column grid so Email/Phone
   sit side by side, cutting vertical height. Name, Permit Type,
   Message, and Submit stay full-width via their own IDs below. */
#nf-form-1-cont nf-fields-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
}

#nf-form-1-cont nf-field {
    flex: 1 1 100%;
}

/* Email + Phone share a row (Ninja Forms already marks these
   one-half/first in the exported markup) */
/* nf-field order in this form: 1 Name, 2 Email, 3 Phone,
   4 Permit Type, 5 Message, 6 Submit — target by position */
#nf-form-1-cont nf-fields-wrap > nf-field:nth-child(2),
#nf-form-1-cont nf-fields-wrap > nf-field:nth-child(3) {
    flex: 1 1 calc(50% - 6px);
}

/* Remove Ninja Forms' default field spacing, replace with a
   small, consistent gap */
.nf-form-cont .nf-field-container {
    margin-bottom: 8px !important;
}

/* Shrink labels */
.nf-form-cont .nf-field-label label {
    font-size: 12px;
    margin-bottom: 2px;
    line-height: 1.2;
}

/* Compact inputs, selects, textareas */
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont select,
.nf-form-cont textarea {
    padding: 6px 8px !important;
    height: auto !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    border-radius: 4px;
}

/* Shrink the message textarea instead of Ninja Forms' tall default */
.nf-form-cont .textarea-wrap textarea {
    min-height: 60px !important;
    height: 60px !important;
    resize: vertical;
}

/* Tighten the "required fields" helper text */
.nf-form-fields-required {
    font-size: 11px;
    margin-bottom: 6px;
}

/* Compact, right-sized submit button (not full width/oversized) */
.nf-form-cont .submit-wrap {
    margin-top: 4px;
}

.nf-form-cont input[type="submit"] {
    padding: 8px 20px !important;
    font-size: 13px !important;
    min-height: unset !important;
    width: auto !important;
}

/* Remove extra Ninja Forms wrapper padding/margins that add height */
.nf-form-cont .nf-before-field,
.nf-form-cont .nf-after-field {
    margin: 0;
}

.nf-form-cont .nf-input-limit {
    display: none;
}

/* Mobile: stack everything to full width, still compact */
@media (max-width: 480px) {
    #nf-form-1-cont nf-field {
        flex: 1 1 100%;
    }
}

/* =========================================================
   Trucker's Permits — Modern Contact Form Styling (Ninja Forms)
   Scoped to the Contact Us form via its CSS ID: contact_page_frm
   Works WITH Ninja Forms' existing .one-half / .first float
   layout — does not override field widths or positioning.
   Add to: child theme's style.css
   ========================================================= */

/* Card container — gives the form some visual weight instead of
   floating loose on the page */
#contact_page_frm {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 36px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Consistent vertical rhythm between fields (works alongside
   the existing float layout — doesn't touch width/float) */
#contact_page_frm .nf-field-container {
    margin-bottom: 20px !important;
}

/* Gutter between one-half fields — NF's float layout doesn't
   include a gap, so this adds breathing room without changing
   the underlying width/float mechanics */
#contact_page_frm .one-half {
    box-sizing: border-box;
    padding-right: 12px;
}

#contact_page_frm .one-half:not(.first) {
    padding-right: 0;
    padding-left: 12px;
}

/* Labels — small, bold, brand-toned */
#contact_page_frm .nf-field-label label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #1a1a2e;
    margin-bottom: 6px;
    display: inline-block;
}

#contact_page_frm .ninja-forms-req-symbol {
    color: #c8102e;
}

/* Inputs, selects, textareas — rounded, clean borders, smooth
   focus transition in the brand red */
#contact_page_frm input[type="text"],
#contact_page_frm input[type="email"],
#contact_page_frm input[type="tel"],
#contact_page_frm select,
#contact_page_frm textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 15px;
    border: 1.5px solid #e0e0e6;
    border-radius: 8px;
    background: #fafafa;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#contact_page_frm input[type="text"]:focus,
#contact_page_frm input[type="email"]:focus,
#contact_page_frm input[type="tel"]:focus,
#contact_page_frm select:focus,
#contact_page_frm textarea:focus {
    outline: none;
    border-color: #c8102e;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}

#contact_page_frm textarea {
    min-height: 110px;
    resize: vertical;
}

/* Custom select arrow so it matches the rounded, modern inputs
   instead of the browser default */
#contact_page_frm select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a2e' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Error states — soften the default red block into an inline note */
#contact_page_frm .nf-error-wrap .nf-error-msg {
    font-size: 12px;
    color: #c8102e;
    margin-top: 4px;
}

#contact_page_frm input.nf-error,
#contact_page_frm select.nf-error,
#contact_page_frm textarea.nf-error {
    border-color: #c8102e;
}

/* Submit button — bold, brand-colored, full width for a clear
   single call to action */
#contact_page_frm input[type="submit"] {
    width: 100%;
    padding: 14px 24px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #ffffff;
    background: #c8102e;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

#contact_page_frm input[type="submit"]:hover {
    background: #a80d26;
    transform: translateY(-1px);
}

#contact_page_frm input[type="submit"]:disabled {
    background: #e0e0e6;
    color: #999;
    cursor: not-allowed;
    transform: none;
}

/* Required-fields helper text */
.nf-form-fields-required {
    font-size: 12px;
    color: #777;
    margin-bottom: 16px;
}

/* Mobile — stack one-half fields at small widths since two
   narrow columns get cramped on phones */
@media (max-width: 560px) {
    #contact_page_frm {
        padding: 24px 20px;
        border-radius: 0;
        box-shadow: none;
    }

    #contact_page_frm .one-half,
    #contact_page_frm .one-half:not(.first) {
        float: none !important;
        width: 100% !important;
        padding-right: 0;
        padding-left: 0;
    }
}