/*
 ALOKTRADE — Unified Kadence Child Theme Stylesheet
 Includes the sitewide typography / colours previously in Additional CSS
 plus all child-theme custom-section utilities.
 File: wp-content/themes/aloktrade-kadence-child/assets/css/aloktrade-style.css
 Kadence Global Palette and Typography remain configured in Customizer.
*/

/* SECTION 1 — Child theme utility/layout styles */
/**
 * ALOKTRADE Brand Styles — version 1.0
 * Used by the AlokTrade Kadence Child theme.
 * Fonts Manrope + Inter are set in Kadence > Customize > Colors & Fonts > Typography.
 * Kadence Global Palette remains the source of truth for normal WordPress blocks.
 * These prefixed utility styles are for custom AlokTrade HTML sections.
 */

/* Reusable classes for custom sections; avoids disrupting existing Kadence blocks. */
.at-container { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.at-section { padding-block: clamp(56px, 7vw, 100px); }
.at-section--soft { background: var(--at-canvas); }
.at-section--navy { background: var(--at-navy); color: var(--at-white); }
.at-section--navy :is(h1, h2, h3, p) { color: inherit; }
.at-eyebrow { margin: 0 0 14px; color: var(--at-teal); font: 700 12px/1.5 var(--at-font-body); letter-spacing: .13em; text-transform: uppercase; }
.at-title { color: var(--at-navy); font: 800 clamp(32px, 4.2vw, 56px)/1.14 var(--at-font-head); letter-spacing: -.035em; }
.at-subtitle { color: var(--at-muted); font: 400 clamp(16px, 1.55vw, 19px)/1.7 var(--at-font-body); }
.at-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.at-card { background: var(--at-white); border: 1px solid var(--at-border); border-radius: var(--at-radius); box-shadow: var(--at-shadow); padding: clamp(22px, 3vw, 34px); }
.at-card h3 { margin-top: 0; color: var(--at-navy); font-family: var(--at-font-head); }
.at-card p { color: var(--at-muted); }
.at-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border: 1px solid var(--at-blue); border-radius: 9px; background: var(--at-blue); color: var(--at-white); font: 600 15px/1.35 var(--at-font-body); text-decoration: none; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.at-btn:is(:hover,:focus-visible) { background: var(--at-blue-hover); border-color: var(--at-blue-hover); color: var(--at-white); transform: translateY(-1px); }
.at-btn--outline { background: transparent; color: var(--at-blue); }
.at-btn--outline:is(:hover,:focus-visible) { color: var(--at-white); }
.at-highlight { color: var(--at-teal); }
.at-small { font: 400 13px/1.5 var(--at-font-body); color: var(--at-muted); }

@media (max-width: 900px) { .at-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .at-container { width: min(100% - 32px, 1200px); } .at-grid { grid-template-columns: 1fr; } .at-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .at-btn { transition: none; } }

/* SECTION 2 — Site-wide design and overrides (formerly Additional CSS) */
:root {
  /* Child theme utility tokens */
  --at-text: #26344B;
  --at-font-head: "Manrope", system-ui, sans-serif;
  --at-font-body: "Inter", system-ui, sans-serif;
  --at-radius: 14px;

  --at-navy: #101D33;
  --at-navy-soft: #26344B;
  --at-blue: #2855CC;
  --at-blue-hover: #1D42A7;
  --at-teal: #087F77;
  --at-teal-hover: #06655F;
  --at-slate: #5B6981;
  --at-muted: #78869B;
  --at-border: #E3EAF2;
  --at-canvas: #F6F8FC;
  --at-white: #FFFFFF;
  --at-radius-sm: 8px;
  --at-radius-md: 14px;
  --at-radius-lg: 20px;
  --at-shadow: 0 12px 36px rgba(16, 29, 51, 0.08);
}

/* ===== Typography / site basics ===== */
body {
  color: var(--at-navy);
  background-color: var(--at-white);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
  color: var(--at-navy);
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.22;
}

h1 { font-weight: 800; }
h2, h3, h4 { font-weight: 700; }

.entry-content p, .entry-content li { color: var(--at-navy-soft); }
.entry-content strong { color: var(--at-navy); }

/* Avoid global link rules that would override styled Kadence buttons. */
.entry-content p a:not(.wp-element-button):not(.kb-button),
.entry-content li a:not(.wp-element-button):not(.kb-button) {
  color: var(--at-blue);
  text-underline-offset: 3px;
}
.entry-content p a:not(.wp-element-button):not(.kb-button):hover,
.entry-content li a:not(.wp-element-button):not(.kb-button):hover {
  color: var(--at-teal);
}

/* ===== Site header / navigation ===== */
#masthead {
  border-bottom: 1px solid var(--at-border);
}
#masthead .main-navigation .menu > li > a {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
}
#masthead .main-navigation .menu > li > a:hover,
#masthead .main-navigation .menu > li.current-menu-item > a {
  color: var(--at-blue);
}

/* ===== Buttons (WordPress core, Kadence and member interface) ===== */
.entry-content .wp-block-button__link,
.entry-content .kb-button,
.entry-content .kt-button,
.entry-content .pmpro_btn,
.entry-content input[type='submit'],
.entry-content button[type='submit'] {
  border-radius: var(--at-radius-sm);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 650;
  letter-spacing: 0;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* Only standard/default buttons; avoid changing outline/secondary variants. */
.entry-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.entry-content .pmpro_btn:not(.pmpro_btn-cancel) {
  background-color: var(--at-blue);
  color: var(--at-white);
}
.entry-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.entry-content .pmpro_btn:not(.pmpro_btn-cancel):hover {
  background-color: var(--at-blue-hover);
  color: var(--at-white);
}

/* ===== Form elements ===== */
.entry-content input[type='text'],
.entry-content input[type='email'],
.entry-content input[type='password'],
.entry-content input[type='tel'],
.entry-content input[type='search'],
.entry-content input[type='number'],
.entry-content select,
.entry-content textarea {
  border: 1px solid #CFD8E5;
  border-radius: var(--at-radius-sm);
  background: var(--at-white);
  color: var(--at-navy);
  min-height: 44px;
}

.entry-content input:focus-visible,
.entry-content select:focus-visible,
.entry-content textarea:focus-visible,
.entry-content button:focus-visible,
.entry-content a:focus-visible,
#masthead a:focus-visible {
  outline: 3px solid rgba(40, 85, 204, .34);
  outline-offset: 3px;
}

/* ===== Reusable classes for Gutenberg / Kadence Blocks =====
   Add these in a block's Advanced > Additional CSS class(es).
   E.g. a section: at-section-soft ; a group: at-card
   ========================================================= */
.at-section-soft {
  background: var(--at-canvas);
}

.at-section-dark {
  background: var(--at-navy);
  color: var(--at-white);
}
.at-section-dark h1,
.at-section-dark h2,
.at-section-dark h3,
.at-section-dark p {
  color: var(--at-white);
}

.at-card {
  background: var(--at-white);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-md);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--at-shadow);
}

.at-card--flat { box-shadow: none; }

.at-eyebrow {
  color: var(--at-teal);
  font: 700 12px/1.4 'Inter', system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.at-muted { color: var(--at-slate); }
.at-text-teal { color: var(--at-teal); }

.at-market-number {
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.at-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #BFE3DE;
  border-radius: 999px;
  padding: 6px 12px;
  background: #EAF7F4;
  color: #06655F;
  font-size: 12px;
  font-weight: 700;
}

.at-button-secondary .wp-block-button__link,
.at-button-secondary.kb-button,
.at-button-secondary.kt-button {
  color: var(--at-blue) !important;
  background: var(--at-white) !important;
  border: 1px solid var(--at-blue) !important;
}
.at-button-secondary .wp-block-button__link:hover,
.at-button-secondary.kb-button:hover,
.at-button-secondary.kt-button:hover {
  background: var(--at-canvas) !important;
}

/* ===== Tables / reports ===== */
.entry-content table:not(.has-fixed-layout) {
  border-collapse: collapse;
  width: 100%;
}
.entry-content table:not(.has-fixed-layout) th {
  background: var(--at-canvas);
  color: var(--at-navy);
  font-weight: 700;
}
.entry-content table:not(.has-fixed-layout) th,
.entry-content table:not(.has-fixed-layout) td {
  padding: 12px 14px;
  border: 1px solid var(--at-border);
}

/* ===== Membership sections (Paid Memberships Pro, if installed) ===== */
#pmpro_account .pmpro_box,
.pmpro .pmpro_card,
.pmpro_card {
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-md);
}

/* ===== Mobile refinements ===== */
@media (max-width: 767px) {
  body { font-size: 15px; }
  h1 { line-height: 1.16; }
  .at-card { padding: 20px; }
  .entry-content table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .entry-content .wp-block-button__link,
  .entry-content .kb-button,
  .entry-content .kt-button,
  .entry-content .pmpro_btn {
    transition: none;
  }
}

/* ==========================================
   ALOKTRADE CUSTOM GLOBAL HEADER
   ========================================== */

#at-site-header {
  position: sticky;
  top: 0;
  z-index: 9999;

  width: 100%;
  background: #101D33;
  border-bottom: 1px solid rgba(255,255,255,.12);

  font-family: 'Inter', sans-serif;
}

body.admin-bar #at-site-header {
  top: 32px;
}

#at-site-header *,
#at-site-header *::before,
#at-site-header *::after {
  box-sizing: border-box;
}

#at-site-header .at-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  width: min(calc(100% - 48px), 1320px);
  min-height: 80px;
  margin: 0 auto;
}

/* LOGO */

#at-site-header .at-header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 184px;
  padding: 7px 9px;

  border-radius: 8px;
  background: #FFFFFF;
  text-decoration: none;
}

#at-site-header .at-header-logo img {
  display: block;
  width: 166px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* DESKTOP NAVIGATION */

#at-site-header .at-header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(12px, 1.6vw, 23px);
}

#at-site-header .at-header-nav a {
  color: #E0EAF5 !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none !important;
  transition: color .2s ease;
}

#at-site-header .at-header-nav a:hover {
  color: #6CE3D2 !important;
}

/* MEMBERSHIP BUTTON */

#at-site-header .at-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 10px;

  min-height: 43px;
  padding: 12px 16px;

  border-radius: 8px;
  background: #2855CC;

  color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none !important;

  transition: background .2s, transform .2s;
}

#at-site-header .at-header-cta:hover {
  background: #1D42A7;
  transform: translateY(-2px);
}

/* MOBILE MENU HIDDEN ON DESKTOP */

#at-site-header .at-header-mobile {
  display: none;
}

/* TABLET + MOBILE */

@media (max-width: 1180px) {

  #at-site-header .at-header-nav,
  #at-site-header .at-header-cta {
    display: none;
  }

  #at-site-header .at-header-mobile {
    position: relative;
    display: block;
    margin-left: auto;
  }

  #at-site-header .at-header-mobile summary {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.27);
    border-radius: 8px;

    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  #at-site-header .at-header-mobile summary::-webkit-details-marker {
    display: none;
  }

  #at-site-header .at-header-menu-icon {
    font-size: 19px;
    line-height: 1;
  }

  #at-site-header .at-header-mobile-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;

    width: min(330px, calc(100vw - 32px));
    max-height: calc(100vh - 110px);
    overflow-y: auto;

    padding: 12px;

    border: 1px solid #3B526C;
    border-radius: 12px;
    background: #14243C;

    box-shadow: 0 20px 45px rgba(0,0,0,.25);
  }

  #at-site-header .at-header-mobile-panel a {
    display: block;
    padding: 12px 13px;

    border-radius: 7px;
    color: #E1EAF5 !important;

    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
  }

  #at-site-header .at-header-mobile-panel a:hover {
    background: rgba(255,255,255,.08);
    color: #76E6D6 !important;
  }

  #at-site-header .at-header-mobile-panel
  .at-header-mobile-cta {
    margin-top: 8px;
    background: #2855CC;
    color: #FFFFFF !important;
    text-align: center;
  }
}

/* SMALL MOBILE */

@media (max-width: 767px) {

  #at-site-header .at-header-inner {
    width: calc(100% - 32px);
    min-height: 70px;
  }

  #at-site-header .at-header-logo {
    width: 225px;
    padding: 6px 8px;
  }

  #at-site-header .at-header-logo img {
    width: 207px;
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 782px) {
  body.admin-bar #at-site-header {
    top: 46px;
  }
}

/* ACCESSIBILITY */

#at-site-header a:focus-visible,
#at-site-header summary:focus-visible {
  outline: 3px solid #70E5D4;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #at-site-header * {
    transition: none !important;
  }
}