/*
Theme Name: GenX Power Solutions
Theme URI: http://localhost/genx
Author: GenX
Description: Custom theme for GenX Power Solutions — Generator Rental in Dubai. Deep industrial navy, yellow and off-white. Faithful conversion of the approved design with responsive enhancements.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: genx
*/

/* ============================================================
   GENX — Base + design tokens
   Global palette & typography are defined in theme.json (WordPress
   Global Styles). The tokens below map onto the theme.json presets
   (--wp--preset--*) with the raw hex/stack as fallbacks, so theme.json
   is the single source of truth while the stylesheet stays portable.
   Colours: navy #0B1A2F · navy-2 #14263F · yellow #FFC20E · off-white #F5F6F8
   ============================================================ */
:root{
  --navy:var(--wp--preset--color--navy,#0B1A2F);
  --navy-2:var(--wp--preset--color--navy-2,#14263F);
  --yellow:var(--wp--preset--color--yellow,#FFC20E);
  --offwhite:var(--wp--preset--color--off-white,#F5F6F8);
  --genx-font:var(--wp--preset--font-family--poppins,'Poppins',sans-serif);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:var(--genx-font)}
html{-webkit-text-size-adjust:100%}
body{background:var(--offwhite);color:var(--navy);line-height:1.5}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}

/* Full-width canvas: coloured "bands" span the whole viewport,
   inner .wrap keeps the 1120px content measure centred. */
.genx-canvas{width:100%;background:var(--offwhite);overflow-x:hidden}

/* ---- Layout utilities (from the original design) ---- */
.navy{background:var(--navy)}
.yel{color:var(--yellow)}
.wrap{width:auto;max-width:1120px;margin:0 auto}
.row{font-size:0}
.c{display:inline-block;vertical-align:top;font-size:13px}
.card{background:#fff;border:1px solid rgba(11,26,47,.12);border-radius:10px}
.ph{background:var(--navy);border-radius:8px;color:rgba(255,255,255,.35);font-size:11px;text-align:center;letter-spacing:1px}

/* ---- Buttons ---- */
.btn{display:inline-block;background:var(--yellow);color:var(--navy);font-size:13px;font-weight:600;padding:11px 22px;border-radius:6px;text-align:center;border:none;cursor:pointer;transition:filter .15s ease,transform .15s ease}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btno{display:inline-block;background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff;font-size:13px;font-weight:600;padding:10px 22px;border-radius:6px;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.btno:hover{border-color:var(--yellow);background:rgba(255,194,14,.08)}

/* ---- Section headings ---- */
.sh{font-size:20px;font-weight:600;color:var(--navy);text-align:center;letter-spacing:.3px}
.ss{font-size:12px;color:rgba(11,26,47,.6);text-align:center;margin-top:5px}

/* ---- Ticks / crosses ---- */
.tick:before{content:"\2713";color:var(--yellow);font-weight:700;margin-right:8px}
.cross:before{content:"\2715";color:rgba(11,26,47,.35);margin-right:8px}

/* ---- Small tag pill ---- */
.tag{background:var(--yellow);color:var(--navy);font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:.5px;display:inline-block}

/* ---- Nav links (real links, styled like the mockup spans) ---- */
.genx-nav a{color:rgba(255,255,255,.75);font-size:13px;margin-right:20px;transition:color .15s ease}
.genx-nav a:last-child{margin-right:0}
.genx-nav a:hover,.genx-nav a.current{color:var(--yellow)}
.genx-nav a.current{font-weight:600}

/* Generic page (About/Contact prose) niceties reuse tokens */
.genx-prose{color:rgba(11,26,47,.8);font-size:13px;line-height:1.9}
.genx-prose h2{font-size:20px;font-weight:600;color:var(--navy);margin:22px 0 10px}
.genx-prose h3{font-size:15px;font-weight:600;color:var(--navy);margin:18px 0 8px}
.genx-prose p{margin-bottom:12px}
.genx-prose ul{margin:0 0 14px 0;list-style:none}
.genx-prose ul li{position:relative;padding-left:22px;margin-bottom:7px}
.genx-prose ul li:before{content:"\2713";color:var(--yellow);font-weight:700;position:absolute;left:0}

/* ---- Contact form ---- */
.genx-field{width:100%;background:#fff;border:1px solid rgba(11,26,47,.18);border-radius:6px;padding:11px 13px;font-size:13px;color:var(--navy);margin-top:6px}
.genx-field:focus{outline:none;border-color:var(--yellow)}
.genx-label{font-size:11px;font-weight:600;color:rgba(11,26,47,.7);letter-spacing:.3px}

/* ============================================================
   Full-width + responsive
   The desktop design is preserved pixel-for-pixel at the 1120px
   content measure; below that, bands keep their full-width colour
   while columns reflow so the site works on tablet and mobile.
   Structural "bands": header, footer, the CTA .navy strip, the
   mobile menu, and every direct child of #genx-main-content.
   ============================================================ */

/* Helper: the horizontal-gutter override reused at each breakpoint */
@media (max-width:1024px){
  #genx-main-content > section,
  #genx-main-content > div,
  .genx-canvas > header,
  .genx-canvas > footer,
  .genx-canvas > .navy,
  .genx-canvas > .genx-mobile-menu{padding-left:28px !important;padding-right:28px !important}
}

/* Toggle: desktop nav vs hamburger */
@media (min-width:821px){ .genx-mobile-toggle{display:none} }

@media (max-width:820px){
  /* Hide desktop nav (it also carries .c, so out-specify the stack rule) */
  .genx-canvas nav.genx-nav{display:none !important}
  .genx-mobile-toggle{display:inline-block}

  /* Stack every layout column to full width */
  .genx-canvas .c{
    display:block !important;
    width:100% !important;
    margin-right:0 !important;
    margin-left:0 !important;
    margin-bottom:14px;
    vertical-align:top;
  }
  .genx-canvas .row{font-size:inherit}

  /* Tighter band gutters */
  #genx-main-content > section,
  #genx-main-content > div,
  .genx-canvas > header,
  .genx-canvas > footer,
  .genx-canvas > .navy,
  .genx-canvas > .genx-mobile-menu{padding-left:20px !important;padding-right:20px !important}

  /* Fluid hero type */
  .genx-hero-title{font-size:clamp(28px,7.4vw,40px) !important;line-height:1.14 !important}

  /* Right-aligned CTA groups reflow to the left when stacked */
  .genx-canvas [style*="text-align:right"]{text-align:left !important}

  /* Nested inline chips (size pills etc.) keep flowing */
  .genx-canvas .tag{display:inline-block !important;width:auto !important}
}

/* Small mobile */
@media (max-width:480px){
  #genx-main-content > section,
  #genx-main-content > div,
  .genx-canvas > header,
  .genx-canvas > footer,
  .genx-canvas > .navy,
  .genx-canvas > .genx-mobile-menu{padding-left:16px !important;padding-right:16px !important}

  /* Full-width tappable buttons */
  .genx-canvas .btn,
  .genx-canvas .btno{display:block !important;width:100% !important;margin:10px 0 0 0 !important}

  .sh{font-size:18px}
}

/* Mobile nav panel */
.genx-mobile-toggle{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:6px;padding:6px 11px;font-size:16px;line-height:1;cursor:pointer}
.genx-mobile-menu{display:none;background:var(--navy-2);padding:10px 40px 16px}
.genx-mobile-menu.open{display:block}
.genx-mobile-menu a{display:block;color:rgba(255,255,255,.8);font-size:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.genx-mobile-menu a:hover{color:var(--yellow)}