/*
 * AIS landing page
 * Oxygen WebHelp Responsive custom CSS
 *
 * Add this CSS to your WebHelp Responsive publishing template
 * and make sure the template is selected by the WebHelp transformation.
 */

/* =========================================================
   1. PAGE / GLOBAL
   ========================================================= */

body#ais-home {
  --ais-blue: #0878c9;
  --ais-blue-dark: #075b99;
  --ais-blue-deep: #123f67;
  --ais-blue-soft: #edf5ff;
  --ais-border: #c8ddf2;
  --ais-text: #102a43;
  --ais-muted: #6d8caf;
  --ais-card-bg: #ffffff;
  --ais-tag-bg: #f3f7fb;
  --ais-page-bg: #eef6ff;
  --ais-shadow: 0 1px 2px rgba(16, 42, 67, 0.04);

  color: var(--ais-text);
}

/* Remove excessive default topic spacing where possible. */
body#ais-home .title.topictitle1 {
  display: none;
}

/* Keep the landing page wider than a normal documentation topic. */
body#ais-home .topic {
  max-width: none;
}

body#ais-home .body {
  max-width: none;
  padding: 0;
}

/* =========================================================
   2. HERO
   ========================================================= */

body#ais-home .ais-hero {
  margin: 0 calc(50% - 50vw);
  padding: 62px 8% 42px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(185, 218, 250, 0.48), transparent 55%),
    var(--ais-page-bg);
  border-bottom: 1px solid var(--ais-border);
}

body#ais-home .ais-hero > .title {
  margin: 0 auto 14px;
  color: var(--ais-blue-deep);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
}

body#ais-home .ais-hero-subtitle {
  margin: 0 auto 24px;
  color: #294966;
  font-size: 16px;
}

body#ais-home .ais-hero-links {
  margin: 0 auto 28px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

body#ais-home .ais-hero-links a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}

body#ais-home .ais-primary-link {
  color: #fff;
  background: var(--ais-blue);
  border: 1px solid var(--ais-blue);
}

body#ais-home .ais-primary-link:hover {
  background: var(--ais-blue-dark);
  color: #fff;
}

body#ais-home .ais-secondary-link {
  color: var(--ais-blue);
  background: transparent;
  border: 1px solid var(--ais-blue);
}

body#ais-home .ais-secondary-link:hover {
  color: #fff;
  background: var(--ais-blue);
}

/* =========================================================
   3. STAT / VALUE STRIP
   ========================================================= */

body#ais-home .ais-stat-strip {
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--ais-border);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body#ais-home .ais-stat {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid #bdd7ef;
  border-radius: 18px;
  background: #e8f3ff;
  color: #315676;
  font-size: 13px;
}

/* =========================================================
   4. LEARNING JOURNEY
   ========================================================= */

body#ais-home .ais-journey {
  margin: 0 calc(50% - 50vw);
  padding: 52px 8% 60px;
  background: var(--ais-page-bg);
}

body#ais-home .ais-journey > .title {
  margin: 0 0 6px;
  color: var(--ais-text);
  font-size: 22px;
  font-weight: 700;
}

body#ais-home .ais-journey-intro {
  margin: 0 0 22px;
  color: var(--ais-muted);
  font-size: 14px;
}

body#ais-home .ais-guidance {
  margin: 0 0 18px;
  padding: 11px 15px;
  border: 1px solid var(--ais-border);
  border-radius: 6px;
  background: rgba(224, 239, 255, 0.62);
  color: #6280a0;
  font-size: 13px;
}

body#ais-home .ais-guidance a {
  color: var(--ais-blue);
  font-weight: 700;
  text-decoration: none;
}

/* =========================================================
   5. CARD GRID
   ========================================================= */

body#ais-home .ais-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}

/*
 * DITA section titles normally inherit heading styles.
 * These rules turn each section into a card.
 */

body#ais-home .ais-card {
  box-sizing: border-box;
  min-width: 0;
  min-height: 260px;
  margin: 0;
  padding: 17px 19px 14px;
  border: 1px solid var(--ais-border);
  border-radius: 10px;
  background: var(--ais-card-bg);
  box-shadow: var(--ais-shadow);

  display: flex;
  flex-direction: column;
}

/* Remove the default section top/bottom borders if the WebHelp theme adds them. */
body#ais-home .ais-card::before,
body#ais-home .ais-card::after {
  display: none;
}

/* =========================================================
   6. CARD HEADER
   ========================================================= */

body#ais-home .ais-card > .title {
  display: flex;
  align-items: center;
  gap: 9px;

  margin: 0 0 7px;
  padding: 0;

  color: var(--ais-blue-dark);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

body#ais-home .ais-step-number {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;

  border-radius: 50%;
  background: var(--ais-blue);
  color: #fff;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

body#ais-home .ais-card-label {
  display: inline-block;
}

/* =========================================================
   7. AUDIENCE TAGS
   ========================================================= */

body#ais-home .ais-audience {
  margin: 0 0 11px;
  line-height: 1;
}

body#ais-home .ais-tag {
  display: inline-block;
  margin: 0 4px 3px 0;
  padding: 3px 8px;

  border: 1px solid #d5e1ec;
  border-radius: 12px;

  background: var(--ais-tag-bg);
  color: #6d86a1;

  font-size: 10px;
  line-height: 1.2;
}

/* =========================================================
   8. CARD DESCRIPTION
   ========================================================= */

body#ais-home .ais-card-description {
  margin: 0 0 10px;
  color: #0f2031;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
}

/* =========================================================
   9. CARD LINKS
   ========================================================= */

body#ais-home .ais-card-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

body#ais-home .ais-card-links li {
  margin: 0 0 8px;
  padding: 0;
}

body#ais-home .ais-card-links li::before {
  content: "→";
  display: inline-block;
  margin-right: 4px;
  color: #79a7cf;
}

body#ais-home .ais-card-links a {
  color: var(--ais-blue);
  font-size: 13px;
  text-decoration: none;
}

body#ais-home .ais-card-links a:hover {
  color: var(--ais-blue-dark);
  text-decoration: underline;
}

/* =========================================================
   10. CARD FOOTER / META
   ========================================================= */

body#ais-home .ais-card-meta {
  margin: auto 0 0;
  padding-top: 9px;

  border-top: 1px solid #d5e3f0;

  color: #7892ad;
  font-size: 11px;
  line-height: 1.2;
}

/* =========================================================
   11. CARD-SPECIFIC ACCENTS
   ========================================================= */

body#ais-home .ais-card-discover .ais-step-number {
  background: #0878c9;
}

/* =========================================================
   AIS LEARNING JOURNEY
   Oxygen WebHelp child-topic tiles
   ========================================================= */

/*
 * The six cards in the DITA are nested <task> topics.
 * Oxygen WebHelp renders those child topics as:
 *
 * .wh_child_links
 *    .ullinks
 *       .ulchildlink
 *
 * We turn the generated UL into a 3-column grid.
 */


/* ---------------------------------------------------------
   JOURNEY CONTAINER
   --------------------------------------------------------- */

body.ais-home .wh_child_links {
  width: 100% !important;
  max-width: none !important;

  margin: 24px 0 0 !important;
  padding: 0 !important;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   THREE-COLUMN GRID
   --------------------------------------------------------- */

body.ais-home .wh_child_links .ullinks {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  grid-auto-flow: row;

  gap: 14px !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   INDIVIDUAL TILE
   --------------------------------------------------------- */

body.ais-home .wh_child_links .ulchildlink {
  position: relative;

  display: flex !important;
  flex-direction: column !important;

  width: auto !important;
  min-width: 0 !important;

  min-height: 250px;

  margin: 0 !important;
  padding: 16px 18px 12px !important;

  box-sizing: border-box;

  background: #ffffff;

  border: 1px solid #c8ddf2;
  border-left: 4px solid #0878c9;

  border-radius: 6px;

  box-shadow:
    0 1px 3px rgba(16, 42, 67, 0.07);

  text-align: left;

  list-style: none !important;

  overflow: hidden;

  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}


/* Hover */

body.ais-home .wh_child_links .ulchildlink:hover {
  box-shadow:
    0 4px 14px rgba(8, 120, 201, 0.13);

  transform: translateY(-1px);
}


/* ---------------------------------------------------------
   CARD TITLE
   --------------------------------------------------------- */

body.ais-home .wh_child_links .ulchildlink > strong {
  display: block !important;

  width: 100%;

  margin: 0 0 8px !important;
  padding: 0 !important;
}


body.ais-home .wh_child_links .ulchildlink > strong > a {
  display: block;

  color: #0878c9 !important;

  font-size: 12px !important;
  line-height: 1.3 !important;

  font-weight: 800 !important;

  letter-spacing: 0.6px;

  text-transform: uppercase;

  text-decoration: none !important;
}


/* Chevron */

body.ais-home .wh_child_links
.ulchildlink > strong > a::before {
  content: "\203A\00a0";

  color: #0878c9;

  font-size: 15px;

  font-weight: 700;

  vertical-align: middle;
}


/* ---------------------------------------------------------
   FULL CARD CLICK AREA
   --------------------------------------------------------- */

body.ais-home .wh_child_links
.ulchildlink > strong > a::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 6px;
}


/* ---------------------------------------------------------
   AUDIENCE TAGS
   --------------------------------------------------------- */

body.ais-home .wh_child_links
.ulchildlink .ais-tag {
  display: inline-block !important;

  margin: 0 3px 6px 0 !important;

  padding: 2px 8px !important;

  border: 1px solid #d5e1ec;

  border-radius: 12px;

  background: #f3f7fb;

  color: #6d86a1;

  font-size: 10px !important;

  line-height: 1.3 !important;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

body.ais-home .wh_child_links
.ulchildlink .ais-card-description {
  display: block !important;

  margin: 2px 0 9px !important;

  color: #102a43;

  font-size: 14px !important;

  line-height: 1.4 !important;

  font-weight: 400;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

body.ais-home .wh_child_links
.ulchildlink .ais-card-links {
  display: block !important;

  width: 100%;

  margin: 0 0 8px !important;

  padding: 0 !important;

  list-style: none !important;

  text-align: left;
}


body.ais-home .wh_child_links
.ulchildlink .ais-card-links li {
  display: block !important;

  width: 100%;

  margin: 0 !important;

  padding: 3px 0 !important;

  font-size: 12px !important;

  line-height: 1.4 !important;
}


body.ais-home .wh_child_links
.ulchildlink .ais-card-links li::before {
  content: "→ ";

  color: #79a7cf;

  font-size: 11px;
}


body.ais-home .wh_child_links
.ulchildlink .ais-card-links a {
  color: #0878c9 !important;

  font-size: 12px !important;

  text-decoration: none !important;
}


body.ais-home .wh_child_links
.ulchildlink .ais-card-links a:hover {
  color: #075b99 !important;

  text-decoration: underline !important;
}


/* ---------------------------------------------------------
   CARD FOOTER
   --------------------------------------------------------- */

body.ais-home .wh_child_links
.ulchildlink .ais-card-meta {
  display: block !important;

  margin: auto 0 0 !important;

  padding-top: 8px !important;

  border-top: 1px solid #d5e3f0;

  color: #7892ad;

  font-size: 10px !important;

  line-height: 1.3 !important;
}


/* ---------------------------------------------------------
   CARD ACCENT COLORS
   --------------------------------------------------------- */

body.ais-home .wh_child_links
.ulchildlink.ais-card-discover {
  border-left-color: #0878c9 !important;
}

body.ais-home .wh_child_links
.ulchildlink.ais-card-prepare {
  border-left-color: #00a8cc !important;
}

body.ais-home .wh_child_links
.ulchildlink.ais-card-build {
  border-left-color: #10b981 !important;
}

body.ais-home .wh_child_links
.ulchildlink.ais-card-firstwin {
  border-left-color: #22c55e !important;
}

body.ais-home .wh_child_links
.ulchildlink.ais-card-ts {
  border-left-color: #f59e0b !important;
}

body.ais-home .wh_child_links
.ulchildlink.ais-card-vid {
  border-left-color: #f97316 !important;
}


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

/*
 * 3 cards per row.
 *
 * Six cards therefore become:
 *
 *   DISCOVER       PREPARE       BUILD FOUNDATIONS
 *   FIRST WIN      TROUBLESHOOT  WATCH AND LEARN
 */

@media (min-width: 701px) {

  body.ais-home .wh_child_links .ullinks {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 700px) {

  body.ais-home .wh_child_links .ullinks {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

  body.ais-home .wh_child_links .ullinks {
    grid-template-columns: 1fr !important;
  body#ais-home .ais-hero,
}

/* Palette variables available on the journey page */
body:is(.ais-journey-page, #task_hj4_nky_fkc) {
  --ais-blue:      #0878c9;
  --ais-blue-dark: #075b99;
  --ais-border:    #c8ddf2;
  --ais-text:      #102a43;
  --ais-muted:     #6d8caf;
  --ais-card-bg:   #ffffff;
  --ais-tag-bg:    #f3f7fb;
  --ais-page-bg:   #eef6ff;
  --ais-shadow:    0 1px 3px rgba(16, 42, 67, 0.07);
}

/* 3-column card grid – explicit ID selector is the reliable fallback */
body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links,
body#task_hj4_nky_fkc .wh_child_links {
  margin-top: 24px;
}

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ullinks,
body#task_hj4_nky_fkc .wh_child_links .ullinks {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual card tile – left-aligned to match design reference */
body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink,
body#task_hj4_nky_fkc .wh_child_links .ulchildlink {
  position: relative;
  background: var(--ais-card-bg);
  border: 1px solid var(--ais-border);
  border-left: 4px solid #0878c9;
  border-radius: 6px;
  padding: 16px 18px 14px;
  text-align: left;
  box-shadow: var(--ais-shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink:hover,
body#task_hj4_nky_fkc .wh_child_links .ulchildlink:hover {
  box-shadow: 0 4px 14px rgba(8, 120, 201, 0.13);
}

/* Card title link – uppercase bold with chevron prefix to match image */
body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink > strong,
body#task_hj4_nky_fkc .wh_child_links .ulchildlink > strong {
  display: block;
  margin-bottom: 8px;
}

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink > strong > a,
body#task_hj4_nky_fkc .wh_child_links .ulchildlink > strong > a {
  font-size: 12px;
  font-weight: 800;
  color: var(--ais-blue) !important;
  text-decoration: none !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink > strong > a::before,
body#task_hj4_nky_fkc .wh_child_links .ulchildlink > strong > a::before {
  content: "\203A\00a0";
  font-size: 15px;
  font-weight: 700;
  color: var(--ais-blue);
  vertical-align: middle;
}

/* Full-card click overlay */
body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink > strong > a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
}

/* Audience tags – must display as inline-block, not inline */
body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-tag {
  display: inline-block !important;
  margin: 0 3px 6px 0;
  padding: 2px 9px;
  border: 1px solid #d5e1ec;
  border-radius: 12px;
  background: var(--ais-tag-bg);
  color: #6d86a1;
  font-size: 10px;
  line-height: 1.4;
}

/* Card description – must be a block so it sits below the tags */
body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-description,
body#task_hj4_nky_fkc .wh_child_links .ulchildlink .ais-card-description {
  display: block !important;
  margin: 6px 0 10px;
  color: var(--ais-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

/* Link list – must be block so items stack vertically */
body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-links {
  display: block !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  text-align: left;
}

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-links li {
  display: block !important;
  padding: 3px 0 !important;
  margin: 0 !important;
  font-size: 12px;
  color: var(--ais-blue);
  line-height: 1.4;
}

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-links li::before {
  content: "→ ";
  color: #79a7cf;
  font-size: 11px;
}

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-links a {
  color: var(--ais-blue);
  text-decoration: none;
  font-size: 12px;
}

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-links a:hover {
  color: var(--ais-blue-dark);
  text-decoration: underline;
}

/* Card footer meta (time / self-serve label) – pushed to bottom */
body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-meta {
  display: block !important;
  margin: auto 0 0;
  padding-top: 8px;
  border-top: 1px solid #d5e3f0;
  color: #7892ad;
  font-size: 10px;
  line-height: 1.3;
}

/* Card-specific left border accent colours matching each stage */
body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-discover,
body#task_hj4_nky_fkc .wh_child_links .ais-card-discover  { border-left-color: #0878c9 !important; }

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-prepare,
body#task_hj4_nky_fkc .wh_child_links .ais-card-prepare   { border-left-color: #00a8cc !important; }

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-build,
body#task_hj4_nky_fkc .wh_child_links .ais-card-build     { border-left-color: #10b981 !important; }

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-firstwin,
body#task_hj4_nky_fkc .wh_child_links .ais-card-firstwin  { border-left-color: #22c55e !important; }

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-ts,
body#task_hj4_nky_fkc .wh_child_links .ais-card-ts        { border-left-color: #f59e0b !important; }

body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-vid,
body#task_hj4_nky_fkc .wh_child_links .ais-card-vid       { border-left-color: #f97316 !important; }

/* Responsive: 2 columns below 860 px, 1 column below 540 px */
@media (max-width: 860px) {
  body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ullinks,
  body#task_hj4_nky_fkc .wh_child_links .ullinks {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 540px) {
  body:is(.ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ullinks,
  body#task_hj4_nky_fkc .wh_child_links .ullinks {
    grid-template-columns: 1fr !important;
  }
}

body#ais-home .ais-card-prepare .ais-step-number {
  background: #0878c9;
}

body#ais-home .ais-card-foundations .ais-step-number {
  background: #0878c9;
}

body#ais-home .ais-card-first-win .ais-step-number {
  background: #0878c9;
}

body#ais-home .ais-card-troubleshooting .ais-step-number {
  background: #0878c9;
}

body#ais-home .ais-card-video .ais-step-number {
  background: #0878c9;
}

/* =========================================================
   12. RESPONSIVE LAYOUT
   ========================================================= */

@media (max-width: 1050px) {
  body#ais-home .ais-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  body#ais-home .ais-hero,
  body#ais-home .ais-journey {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media (max-width: 650px) {
  body#ais-home .ais-card-grid {
    grid-template-columns: 1fr;
  }

  body#ais-home .ais-hero {
    padding: 42px 22px 30px;
  }

  body#ais-home .ais-journey {
    padding: 34px 22px 44px;
  }

  body#ais-home .ais-stat-strip {
    flex-direction: column;
    align-items: stretch;
  }

  body#ais-home .ais-stat {
    text-align: center;
  }
}

/* =========================================================
   13. OPTIONAL: HIDE DEFAULT DITA SECTION BORDERS / SPACING
   ========================================================= */

body#ais-home .ais-card > .sectiontitle {
  border: 0;
}

body#ais-home .ais-card p,
body#ais-home .ais-card ul {
  max-width: none;
}

/*
 * NOTE:
 * The exact surrounding WebHelp selectors can vary by Oxygen version
 * and publishing template. The .ais-* outputclass hooks above are the
 * stable part you control from DITA.
 */