/*
 * Theme Name:        Kadence Child — ihprohub.ai
 * Theme URI:         https://ihprohub.ai
 * Description:       Child theme for ihprohub.ai. Inherits Kadence parent
 *                    styles and adds ihprohub brand tokens, typography, and
 *                    global overrides. All tool page templates
 *                    (ihprohub-exposure-page-template.php,
 *                    ihprohub-regulatory-qa-template.php,
 *                    ihprohub-sds-interpreter-template.php) live in this
 *                    folder and are registered automatically by WordPress.
 * Author:            ihprohub.ai
 * Author URI:        https://ihprohub.ai
 * Template:          kadence
 * Version:           1.0.0
 * License:           GPL-2.0+
 * Text Domain:       ihprohub-child
 *
 * ============================================================
 * UPLOAD LOCATION:
 *   /wp-content/themes/kadence-child/style.css
 *
 * ACTIVATE:
 *   WordPress Admin → Appearance → Themes → Kadence Child → Activate
 * ============================================================
 */


/* ============================================================
   1. IHPROHUB DESIGN TOKENS — CSS CUSTOM PROPERTIES
   Applied globally across all WordPress / Elementor pages.
   Tool page templates also import these via their own <style>
   blocks, so they stay in sync if you ever update a value here.
   ============================================================ */

:root {

  /* ── Brand colours ── */
  --ih-navy:        #0A1F3D;   /* primary — authority, trust            */
  --ih-navy-md:     #122952;
  --ih-navy-lt:     #1A3A6E;
  --ih-orange:      #E8621A;   /* accent — energy, innovation           */
  --ih-orange-lt:   #FDF0E8;
  --ih-orange-dk:   #C44E0E;

  /* ── Neutral palette ── */
  --ih-grey:        #6B7A8D;   /* body text, muted UI                   */
  --ih-grey-lt:     #F0F2F5;
  --ih-grey-dk:     #3D4B5C;
  --ih-white:       #FFFFFF;
  --ih-off-white:   #F8FAFC;   /* page background                       */

  /* ── Semantic / status colours ── */
  --ih-green:       #1D9E75;   /* ACCEPTABLE exposure band              */
  --ih-green-lt:    #E1F5EE;
  --ih-red:         #A32D2D;   /* UNACCEPTABLE exposure band            */
  --ih-red-lt:      #FCEBEB;
  --ih-amber:       #BA7517;   /* ACTION LEVEL exposure band            */
  --ih-amber-lt:    #FAEEDA;

  /* ── Border & shadow ── */
  --ih-border:      rgba(10, 31, 61, 0.09);
  --ih-shadow-sm:   0 2px 8px  rgba(10, 31, 61, 0.06);
  --ih-shadow-md:   0 4px 24px rgba(10, 31, 61, 0.08);
  --ih-shadow-lg:   0 8px 40px rgba(10, 31, 61, 0.12);

  /* ── Radius ── */
  --ih-radius-sm:   6px;
  --ih-radius-md:   10px;
  --ih-radius-lg:   14px;

  /* ── Typography ── */
  --ih-font-display: 'Syne',    sans-serif;   /* headings, wordmark     */
  --ih-font-body:    'Inter',   sans-serif;   /* body copy              */
  --ih-font-mono:    'DM Mono', monospace;    /* labels, code, badges   */
}


/* ============================================================
   2. GLOBAL BASE OVERRIDES
   Lightweight overrides on top of Kadence defaults.
   Do NOT override Kadence layout here — use Kadence Customizer
   or Elementor for structural changes.
   ============================================================ */

/* Smooth rendering */
html {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* Body — apply ihprohub off-white background on standard pages */
body:not(.elementor-page) {
  background-color: var(--ih-off-white);
}

/* Consistent box model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Links ── */
a {
  color: var(--ih-orange);
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover {
  color: var(--ih-orange-dk);
  text-decoration: underline;
}

/* ── Headings — apply Syne when not overridden by Elementor ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ih-font-display);
  font-weight: 700;
  color: var(--ih-navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ── Body text ── */
p, li, td, th, label, input, select, textarea, button {
  font-family: var(--ih-font-body);
}

/* ── Code / monospace ── */
code, pre, kbd, samp {
  font-family: var(--ih-font-mono);
  font-size: 0.875em;
  background: var(--ih-grey-lt);
  padding: 2px 6px;
  border-radius: var(--ih-radius-sm);
}


/* ============================================================
   3. KADENCE THEME OVERRIDES
   Adjust Kadence defaults to match ihprohub branding without
   touching the parent theme files.
   ============================================================ */

/* Primary button — orange */
.wp-block-button__link,
.button,
.kb-button,
.kb-btn {
  background-color: var(--ih-orange) !important;
  color: #ffffff !important;
  border-radius: var(--ih-radius-md) !important;
  font-family: var(--ih-font-body) !important;
  font-weight: 500 !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
}
.wp-block-button__link:hover,
.button:hover,
.kb-button:hover,
.kb-btn:hover {
  background-color: var(--ih-orange-dk) !important;
  transform: translateY(-1px) !important;
}

/* Kadence header — navy background on member pages */
.site-header,
#masthead {
  background-color: var(--ih-navy);
}

/* Kadence nav links — white on navy header */
.main-navigation a,
.site-header .kadence-navigation a {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--ih-font-body);
  font-weight: 400;
}
.main-navigation a:hover,
.site-header .kadence-navigation a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* Kadence footer */
.site-footer,
#colophon {
  background-color: #060F1E;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-family: var(--ih-font-mono);
}
.site-footer a {
  color: rgba(255, 255, 255, 0.4);
}
.site-footer a:hover {
  color: rgba(255, 255, 255, 0.7);
}


/* ============================================================
   4. PAID MEMBERSHIPS PRO — GLOBAL STYLE OVERRIDES
   Makes PMPro login, checkout, and account pages match the
   ihprohub brand without editing PMPro plugin files.
   ============================================================ */

/* PMPro container */
.pmpro_content_message,
#pmpro_form,
.pmpro_checkout,
.pmpro_account {
  font-family: var(--ih-font-body);
  color: var(--ih-navy);
}

/* PMPro submit / action buttons */
.pmpro_btn,
.pmpro_btn-submit,
input[name="submit"],
#pmpro_form input[type="submit"] {
  background-color: var(--ih-orange) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--ih-radius-md) !important;
  font-family: var(--ih-font-body) !important;
  font-weight: 500 !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}
#pmpro_form input[type="submit"]:hover,
.pmpro_btn:hover {
  background-color: var(--ih-orange-dk) !important;
}

/* PMPro level boxes */
.pmpro_level {
  border: 1px solid var(--ih-border) !important;
  border-radius: var(--ih-radius-lg) !important;
  background: var(--ih-white) !important;
}
.pmpro_level h2 {
  color: var(--ih-navy) !important;
  font-family: var(--ih-font-display) !important;
}

/* PMPro selected level highlight */
.pmpro_level.pmpro_selected,
.pmpro_level:hover {
  border-color: var(--ih-orange) !important;
  box-shadow: 0 0 0 2px rgba(232, 98, 26, 0.15) !important;
}

/* PMPro login form */
.pmpro_login_wrap input[type="text"],
.pmpro_login_wrap input[type="email"],
.pmpro_login_wrap input[type="password"],
#pmpro_form input[type="text"],
#pmpro_form input[type="email"],
#pmpro_form input[type="password"] {
  border: 1px solid var(--ih-border) !important;
  border-radius: var(--ih-radius-md) !important;
  font-family: var(--ih-font-body) !important;
  color: var(--ih-navy) !important;
  background: var(--ih-off-white) !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#pmpro_form input[type="text"]:focus,
#pmpro_form input[type="email"]:focus,
#pmpro_form input[type="password"]:focus {
  border-color: var(--ih-orange) !important;
  box-shadow: 0 0 0 3px rgba(232, 98, 26, 0.1) !important;
  outline: none !important;
}

/* PMPro notices */
.pmpro_message {
  border-radius: var(--ih-radius-md) !important;
  font-family: var(--ih-font-body) !important;
}
.pmpro_error {
  background: var(--ih-red-lt) !important;
  border-color: rgba(163, 45, 45, 0.3) !important;
  color: var(--ih-red) !important;
}
.pmpro_success {
  background: var(--ih-green-lt) !important;
  border-color: rgba(29, 158, 117, 0.3) !important;
  color: var(--ih-green) !important;
}


/* ============================================================
   5. TOOL PAGE TEMPLATE — HIDE KADENCE CHROME
   The IH tool page templates are full-screen apps. They call
   get_header() / get_footer() but we hide the Kadence nav bar
   and footer on those pages using body class targeting.
   The PHP templates add a body class via add_filter in
   functions.php — see ihprohub_tool_body_class().
   ============================================================ */

body.ihprohub-tool-page #masthead,
body.ihprohub-tool-page .site-header,
body.ihprohub-tool-page #site-header,
body.ihprohub-tool-page .kadence-sticky-header,
body.ihprohub-tool-page #colophon,
body.ihprohub-tool-page .site-footer,
body.ihprohub-tool-page #site-footer,
body.ihprohub-tool-page .wp-admin-bar {
  display: none !important;
}

body.ihprohub-tool-page {
  overflow: hidden;
  background: var(--ih-off-white);
}

/* Remove default Kadence content padding on tool pages */
body.ihprohub-tool-page .content-container,
body.ihprohub-tool-page .site-content,
body.ihprohub-tool-page #content,
body.ihprohub-tool-page .wp-site-blocks {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}


/* ============================================================
   6. WORDPRESS ADMIN BAR — push tool pages down correctly
   When logged in, WP Admin Bar adds 32px to the top.
   Compensate on full-screen tool pages.
   ============================================================ */

body.admin-bar.ihprohub-tool-page {
  padding-top: 0 !important;
}
body.admin-bar.ihprohub-tool-page #wpadminbar {
  display: block !important;   /* keep admin bar visible for admins */
}


/* ============================================================
   7. ELEMENTOR DASHBOARD PAGE — GLOBAL TWEAKS
   The /dashboard page is built in Elementor. These rules
   ensure Elementor sections respect the ihprohub palette.
   ============================================================ */

/* Elementor default link colour */
.elementor-widget-text-editor a,
.elementor-widget-icon-box a {
  color: var(--ih-orange);
}

/* Elementor heading widget */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ih-font-display);
  color: var(--ih-navy);
  letter-spacing: -0.02em;
}

/* Elementor button widget */
.elementor-button {
  font-family: var(--ih-font-body) !important;
  border-radius: var(--ih-radius-md) !important;
}


/* ============================================================
   8. UTILITY CLASSES
   Available globally on all pages — Elementor CSS classes,
   Gutenberg blocks, or hand-coded sections can use these.
   ============================================================ */

/* Colours */
.ih-text-navy   { color: var(--ih-navy)   !important; }
.ih-text-orange { color: var(--ih-orange) !important; }
.ih-text-grey   { color: var(--ih-grey)   !important; }
.ih-text-white  { color: var(--ih-white)  !important; }

.ih-bg-navy     { background-color: var(--ih-navy)     !important; }
.ih-bg-orange   { background-color: var(--ih-orange)   !important; }
.ih-bg-off-white{ background-color: var(--ih-off-white)!important; }

/* Fonts */
.ih-font-display { font-family: var(--ih-font-display) !important; }
.ih-font-body    { font-family: var(--ih-font-body)    !important; }
.ih-font-mono    { font-family: var(--ih-font-mono)    !important; }

/* Badges */
.ih-badge {
  display: inline-block;
  font-family: var(--ih-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 4px;
  line-height: 1.6;
}
.ih-badge-orange { background: var(--ih-orange-lt); color: var(--ih-orange-dk); }
.ih-badge-navy   { background: rgba(10,31,61,0.08); color: var(--ih-navy);      }
.ih-badge-green  { background: var(--ih-green-lt);  color: var(--ih-green);     }
.ih-badge-red    { background: var(--ih-red-lt);    color: var(--ih-red);       }
.ih-badge-amber  { background: var(--ih-amber-lt);  color: var(--ih-amber);     }

/* Orange divider line */
.ih-divider-orange {
  display: block;
  height: 3px;
  width: 40px;
  background: var(--ih-orange);
  border-radius: 99px;
  margin-bottom: 1rem;
}