/**
 * Impexly Core — Frontend Styles
 *
 * All brand and functional styles for the Impexly global trade marketplace.
 * Loaded by the Impexly Core plugin on all frontend pages.
 */

/* =========================================================
   Brand custom properties
   ========================================================= */
:root {
  --impexly-primary:      #1a6fc4;
  --impexly-primary-dark: #155fa0;
  --impexly-accent:       #f4a020;
  --impexly-accent-dark:  #d98a0f;
  --impexly-dark:         #1a2332;
  --impexly-light-bg:     #f5f7fa;
  --impexly-success:      #27ae60;
  --impexly-border:       #e0e0e0;
  --impexly-text:         #2d3748;
  --impexly-text-muted:   #718096;
  --impexly-radius:       8px;
  --impexly-shadow:       0 2px 12px rgba(0,0,0,.10);
  --impexly-max-width:    1200px;
}

/* =========================================================
   Utility
   ========================================================= */
.impexly-container {
  max-width:     var(--impexly-max-width);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  24px;
  padding-right: 24px;
}

/* =========================================================
   Button system
   ========================================================= */
.impexly-btn {
  display:         inline-block;
  padding:         11px 24px;
  border-radius:   var(--impexly-radius);
  font-size:       15px;
  font-weight:     600;
  line-height:     1;
  text-decoration: none;
  cursor:          pointer;
  transition:      background-color .18s ease, border-color .18s ease, color .18s ease;
  border:          2px solid transparent;
  white-space:     nowrap;
}

.impexly-btn-lg {
  padding:   14px 32px;
  font-size: 17px;
}

/* Primary — blue fill */
.impexly-btn-primary {
  background-color: var(--impexly-primary);
  color:            #fff;
  border-color:     var(--impexly-primary);
}
.impexly-btn-primary:hover,
.impexly-btn-primary:focus {
  background-color: var(--impexly-primary-dark);
  border-color:     var(--impexly-primary-dark);
  color:            #fff;
}

/* Accent — orange fill */
.impexly-btn-accent {
  background-color: var(--impexly-accent);
  color:            #fff;
  border-color:     var(--impexly-accent);
}
.impexly-btn-accent:hover,
.impexly-btn-accent:focus {
  background-color: var(--impexly-accent-dark);
  border-color:     var(--impexly-accent-dark);
  color:            #fff;
}

/* White — white fill, blue text (use on dark backgrounds) */
.impexly-btn-white {
  background-color: #fff;
  color:            var(--impexly-primary);
  border-color:     #fff;
}
.impexly-btn-white:hover,
.impexly-btn-white:focus {
  background-color: #f0f6ff;
  border-color:     #f0f6ff;
  color:            var(--impexly-primary);
}

/* Ghost — transparent with white border (use on dark backgrounds) */
.impexly-btn-ghost {
  background-color: transparent;
  color:            rgba(255,255,255,.9);
  border-color:     rgba(255,255,255,.5);
}
.impexly-btn-ghost:hover,
.impexly-btn-ghost:focus {
  background-color: rgba(255,255,255,.1);
  border-color:     #fff;
  color:            #fff;
}

/* Outline — transparent with blue border (use on light backgrounds) */
.impexly-btn-outline {
  background-color: transparent;
  color:            var(--impexly-primary);
  border-color:     var(--impexly-primary);
}
.impexly-btn-outline:hover,
.impexly-btn-outline:focus {
  background-color: var(--impexly-primary);
  color:            #fff;
}

/* WooCommerce button overrides */
.ast-button,
.woocommerce .button.alt,
.woocommerce button[type="submit"],
.woocommerce a.button.alt {
  background-color: var(--impexly-primary) !important;
  border-color:     var(--impexly-primary) !important;
  color:            #ffffff !important;
}
.ast-button:hover,
.woocommerce .button.alt:hover,
.woocommerce button[type="submit"]:hover {
  background-color: var(--impexly-primary-dark) !important;
  border-color:     var(--impexly-primary-dark) !important;
}

/* =========================================================
   Header — Astra theme enhancement
   ========================================================= */
.site-header,
#masthead {
  border-bottom: 2px solid var(--impexly-primary);
  box-shadow:    0 2px 8px rgba(0,0,0,.06);
}

/* Sticky header */
.ast-header-sticked {
  box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
}

/* Nav link styles */
.main-navigation a,
.ast-main-navigation a,
#site-navigation a {
  color:       var(--impexly-dark);
  font-weight: 500;
  transition:  color .15s ease;
}
.main-navigation a:hover,
.ast-main-navigation a:hover,
#site-navigation a:hover {
  color: var(--impexly-primary);
}

/* Active/current menu item */
.main-navigation .current-menu-item > a,
.ast-main-navigation .current-menu-item > a {
  color: var(--impexly-primary);
}

/* Nav register/login highlight */
.main-navigation .menu-item-register a,
.ast-main-navigation .menu-item-register a {
  background-color: var(--impexly-accent);
  color:            #fff;
  padding:          6px 14px;
  border-radius:    var(--impexly-radius);
}

/* Site logo max-width */
.custom-logo {
  max-height: 50px;
  width:      auto;
}

/* =========================================================
   Section shared styles
   ========================================================= */
.impexly-section {
  padding: 64px 0;
}

.impexly-section-title {
  font-size:   2rem;
  font-weight: 700;
  color:       var(--impexly-dark);
  text-align:  center;
  margin:      0 0 12px;
}

.impexly-section-subtitle {
  font-size:   1.05rem;
  color:       var(--impexly-text-muted);
  text-align:  center;
  margin:      0 0 40px;
}

.impexly-section-footer {
  text-align: center;
  margin-top: 36px;
}

/* =========================================================
   Hero section
   ========================================================= */
.impexly-hero {
  background:      linear-gradient(135deg, #0f2a4e 0%, var(--impexly-primary) 100%);
  color:           #fff;
  padding:         80px 0 72px;
  text-align:      center;
}

.impexly-hero-eyebrow {
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          rgba(255,255,255,.65);
  margin:         0 0 16px;
}

.impexly-hero-title {
  font-size:   2.8rem;
  font-weight: 800;
  line-height: 1.2;
  margin:      0 0 18px;
  color:       #fff;
}

.impexly-hero-subtitle {
  font-size:  1.15rem;
  color:      rgba(255,255,255,.85);
  max-width:  620px;
  margin:     0 auto 36px;
  line-height: 1.6;
}

/* Search bar */
.impexly-search-form {
  max-width:   640px;
  margin:      0 auto 28px;
}

.impexly-search-bar {
  display:       flex;
  border-radius: var(--impexly-radius);
  overflow:      hidden;
  box-shadow:    0 4px 20px rgba(0,0,0,.2);
}

.impexly-search-input {
  flex:          1;
  border:        none;
  padding:       14px 20px;
  font-size:     15px;
  outline:       none;
  color:         var(--impexly-text);
  background:    #fff;
}

.impexly-search-input::placeholder {
  color: #aaa;
}

.impexly-search-bar .impexly-btn-primary {
  border-radius: 0;
  padding:       14px 28px;
  border:        none;
}

/* CTA buttons row */
.impexly-hero-ctas {
  display:     flex;
  gap:         12px;
  justify-content: center;
  flex-wrap:   wrap;
}

/* =========================================================
   Stats bar
   ========================================================= */
.impexly-stats {
  background:  var(--impexly-dark);
  color:       #fff;
  padding:     28px 0;
}

.impexly-stats-grid {
  display:         grid;
  grid-template-columns: repeat(4, 1fr);
  gap:             0;
  text-align:      center;
}

.impexly-stat {
  padding:       16px 24px;
  border-right:  1px solid rgba(255,255,255,.12);
}

.impexly-stat:last-child {
  border-right: none;
}

.impexly-stat-number {
  display:     block;
  font-size:   2rem;
  font-weight: 800;
  color:       var(--impexly-accent);
  line-height: 1;
  margin-bottom: 4px;
}

.impexly-stat-label {
  display:   block;
  font-size: 13px;
  color:     rgba(255,255,255,.65);
}

/* =========================================================
   Categories section
   ========================================================= */
.impexly-categories-section {
  background: var(--impexly-light-bg);
}

.impexly-categories-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   16px;
}

.impexly-category-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             10px;
  padding:         20px 12px;
  background:      #fff;
  border:          1px solid var(--impexly-border);
  border-radius:   var(--impexly-radius);
  text-decoration: none;
  color:           var(--impexly-text);
  font-size:       13px;
  font-weight:     500;
  text-align:      center;
  line-height:     1.3;
  transition:      border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.impexly-category-card:hover {
  border-color: var(--impexly-primary);
  box-shadow:   var(--impexly-shadow);
  transform:    translateY(-2px);
  color:        var(--impexly-primary);
}

.impexly-category-icon {
  font-size: 2rem;
  line-height: 1;
}

.impexly-category-name {
  font-size: 12px;
}

/* =========================================================
   How it works section
   ========================================================= */
.impexly-hiw-section {
  background: #fff;
}

.impexly-hiw-grid {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  gap:             0;
}

.impexly-hiw-step {
  flex:       1;
  max-width:  300px;
  text-align: center;
  padding:    0 24px;
}

.impexly-hiw-number {
  display:       flex;
  align-items:   center;
  justify-content: center;
  width:         56px;
  height:        56px;
  border-radius: 50%;
  background:    var(--impexly-primary);
  color:         #fff;
  font-size:     1.4rem;
  font-weight:   800;
  margin:        0 auto 20px;
  box-shadow:    0 4px 12px rgba(26,111,196,.3);
}

.impexly-hiw-step h3 {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--impexly-dark);
  margin:      0 0 10px;
}

.impexly-hiw-step p {
  font-size:  14px;
  color:      var(--impexly-text-muted);
  line-height: 1.6;
  margin:     0;
}

/* Connecting line between steps */
.impexly-hiw-connector {
  flex:           0 0 60px;
  height:         2px;
  background:     linear-gradient(90deg, var(--impexly-primary), var(--impexly-accent));
  margin-top:     28px;
  border-radius:  1px;
}

/* =========================================================
   Featured products section
   ========================================================= */
.impexly-featured-section {
  background: var(--impexly-light-bg);
}

/* =========================================================
   Roles section
   ========================================================= */
.impexly-roles-section {
  background: #fff;
}

.impexly-roles-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   24px;
}

.impexly-role-card {
  padding:       28px 24px;
  border:        1px solid var(--impexly-border);
  border-radius: var(--impexly-radius);
  text-align:    center;
  transition:    box-shadow .2s ease, border-color .2s ease;
}

.impexly-role-card:hover {
  box-shadow:   var(--impexly-shadow);
  border-color: var(--impexly-primary);
}

.impexly-role-icon {
  font-size:     2.4rem;
  line-height:   1;
  margin-bottom: 14px;
}

.impexly-role-card h3 {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--impexly-dark);
  margin:      0 0 10px;
}

.impexly-role-card p {
  font-size:  13px;
  color:      var(--impexly-text-muted);
  line-height: 1.6;
  margin:     0 0 18px;
}

.impexly-role-link {
  font-size:       13px;
  font-weight:     600;
  color:           var(--impexly-primary);
  text-decoration: none;
}
.impexly-role-link:hover {
  text-decoration: underline;
}

/* =========================================================
   CTA section
   ========================================================= */
.impexly-cta-section {
  background:  linear-gradient(135deg, var(--impexly-primary) 0%, #0f2a4e 100%);
  color:       #fff;
  padding:     72px 0;
  text-align:  center;
}

.impexly-cta-section h2 {
  font-size:   2rem;
  font-weight: 800;
  color:       #fff;
  margin:      0 0 14px;
}

.impexly-cta-section p {
  font-size:  1.05rem;
  color:      rgba(255,255,255,.8);
  margin:     0 0 32px;
}

.impexly-cta-buttons {
  display:         flex;
  gap:             16px;
  justify-content: center;
  flex-wrap:       wrap;
}

/* =========================================================
   Verified Supplier badge
   ========================================================= */
.impexly-verified-badge {
  display:        inline-block;
  background:     var(--impexly-success);
  color:          white;
  padding:        2px 10px;
  border-radius:  3px;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.3px;
  margin-left:    6px;
  vertical-align: middle;
}

/* =========================================================
   Trade specifications table
   ========================================================= */
.impexly-trade-specs {
  background:    var(--impexly-light-bg);
  border:        1px solid var(--impexly-border);
  border-radius: 6px;
  padding:       16px 20px;
  margin:        20px 0;
}

.impexly-trade-specs h4 {
  margin:         0 0 12px;
  font-size:      14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color:          var(--impexly-dark);
}

.impexly-trade-specs table {
  width:           100%;
  border-collapse: collapse;
}

.impexly-trade-specs td {
  padding:       7px 12px;
  border-bottom: 1px solid #eee;
  font-size:     14px;
  line-height:   1.5;
}

.impexly-trade-specs td:first-child {
  font-weight: 600;
  color:       #555;
  width:       40%;
}

.impexly-trade-specs tr:last-child td {
  border-bottom: none;
}

/* =========================================================
   RFQ board notice
   ========================================================= */
.impexly-rfq-notice {
  background:    #e8f4fd;
  border-left:   4px solid var(--impexly-primary);
  padding:       12px 16px;
  margin-bottom: 20px;
  border-radius: 0 4px 4px 0;
  font-size:     14px;
}

/* =========================================================
   Supplier store page
   ========================================================= */
.wcfm-store-header {
  border-bottom: 3px solid var(--impexly-primary);
}

/* =========================================================
   YITH quote confirmation follow-up block
   ========================================================= */
.impexly-quote-followup {
  background:    var(--impexly-light-bg);
  border:        1px solid var(--impexly-border);
  border-radius: var(--impexly-radius);
  padding:       20px 24px;
  margin-top:    24px;
  text-align:    center;
}

.impexly-quote-followup p {
  margin-bottom: 12px;
  color:         var(--impexly-text-muted);
}

/* =========================================================
   WooCommerce product grid — mobile
   ========================================================= */
@media (max-width: 768px) {
  ul.products.columns-4,
  ul.products.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  ul.products.columns-4,
  ul.products.columns-3,
  ul.products.columns-2 {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   WooCommerce single product — mobile
   ========================================================= */
@media (max-width: 768px) {
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    float:  none;
    width:  100%;
    margin: 0 0 20px;
  }

  .woocommerce div.product div.summary {
    padding-left: 0;
  }
}

/* =========================================================
   WCFM vendor store — mobile
   ========================================================= */
@media (max-width: 768px) {
  .wcfm-store-header .wcfm-store-header-wrapper {
    flex-direction: column;
    align-items:    flex-start;
    gap:            12px;
  }

  .wcfm-store-header .wcfm-store-logo {
    margin: 0;
  }

  /* WCFM dashboard sidebar collapses above content */
  .wcfm_dashboard_sidebar {
    width: 100% !important;
  }

  .wcfm_dashboard_content_wrap {
    margin-left: 0 !important;
    width:       100% !important;
  }
}

/* =========================================================
   Navigation — mobile improvements
   ========================================================= */
@media (max-width: 768px) {
  /* Ensure mobile nav dropdown doesn't overflow viewport */
  .ast-main-navigation .sub-menu {
    left:      0;
    right:     auto;
    max-width: 100vw;
  }

  /* Give the header logo breathing room on small screens */
  .ast-site-identity {
    max-width: 180px;
  }

  /* Push hamburger icon to align with logo */
  .ast-button-wrap .menu-toggle {
    padding: 6px 10px;
  }
}

/* =========================================================
   RFQ board — mobile
   ========================================================= */
@media (max-width: 600px) {
  .job_listings .job_listing {
    padding: 14px 12px;
  }

  .job_listings .job_listing .position h3 {
    font-size: 15px;
  }

  /* Submit RFQ form inputs full-width */
  .job-manager-form fieldset {
    padding-left:  0;
    padding-right: 0;
  }
}

/* =========================================================
   Registration / UM forms — mobile
   ========================================================= */
@media (max-width: 600px) {
  .um-form .um-field-area input,
  .um-form .um-field-area select,
  .um-form .um-field-area textarea {
    width:     100%;
    box-sizing: border-box;
  }

  .um .um-header {
    flex-direction: column;
    text-align:     center;
  }
}

/* =========================================================
   Responsive — Tablet (≤ 900px)
   ========================================================= */
@media (max-width: 900px) {
  .impexly-hero-title {
    font-size: 2.1rem;
  }

  .impexly-categories-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .impexly-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .impexly-stat {
    border-right:  none;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .impexly-stat:nth-child(2n) {
    border-right: none;
  }

  .impexly-hiw-grid {
    flex-direction: column;
    align-items:    center;
    gap:            24px;
  }

  .impexly-hiw-step {
    max-width: 380px;
  }

  .impexly-hiw-connector {
    width:  2px;
    height: 40px;
    flex:   0 0 40px;
    background: linear-gradient(180deg, var(--impexly-primary), var(--impexly-accent));
    margin-top: 0;
  }

  .impexly-roles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   Responsive — Mobile (≤ 600px)
   ========================================================= */
@media (max-width: 600px) {
  .impexly-hero {
    padding: 52px 0 48px;
  }

  .impexly-hero-title {
    font-size: 1.65rem;
  }

  .impexly-section {
    padding: 44px 0;
  }

  .impexly-section-title {
    font-size: 1.5rem;
  }

  .impexly-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .impexly-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .impexly-roles-grid {
    grid-template-columns: 1fr;
  }

  .impexly-hero-ctas {
    flex-direction: column;
    align-items:    center;
  }

  .impexly-search-bar {
    flex-direction: column;
  }

  .impexly-search-bar .impexly-btn-primary {
    border-radius: 0 0 var(--impexly-radius) var(--impexly-radius);
    width:         100%;
    text-align:    center;
  }

  .impexly-trade-specs td:first-child {
    width: 50%;
  }

  .impexly-trade-specs table {
    font-size: 13px;
  }

  .impexly-trade-specs td {
    padding: 6px 8px;
  }
}