/*
 * KAI technology portal.
 * Everything here is scoped to /portal/; global header/footer and appearance
 * remain owned by the normal KAI theme.
 */

.kai-employee-portal main#main-content,
.kai-employee-portal main#main-content .wp-block-post-content {
  margin-block: 0;
  padding: 0;
}

.kai-employee-portal main#main-content .wp-block-post-content {
  max-width: none;
}

.kai-portal-shell {
  --kai-portal-surface: rgba(255, 255, 255, .38);
  --kai-portal-surface-hover: rgba(255, 255, 255, .50);
  --kai-portal-ink: #172439;
  --kai-portal-muted: #5d6b7c;
  --kai-portal-primary-strong: #c58c2a;
  --kai-portal-border: rgba(255, 255, 255, .72);
  --kai-portal-border-soft: rgba(255, 255, 255, .54);
  --kai-portal-shadow: 0 18px 44px rgba(37, 53, 72, .14);
  --kai-portal-shadow-soft: 0 10px 26px rgba(37, 53, 72, .10);
  --kai-portal-link-color: #304a69;
  --kai-portal-radius: 22px;
  --kai-portal-radius-sm: 18px;
  --kai-portal-gutter: 14px;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: min(100svh, 880px);
  overflow: hidden;
  color: var(--kai-portal-ink);
  background:
    radial-gradient(circle at 78% 8%, rgba(209, 173, 125, .20), transparent 28rem),
    radial-gradient(circle at 16% 74%, rgba(69, 119, 173, .14), transparent 30rem),
    linear-gradient(145deg, #f4f0f2 0%, #edf3f7 52%, #e1ebf4 100%);
}

html[data-kai-theme="dark"] .kai-portal-shell {
  --kai-portal-surface: rgba(255, 255, 255, .13);
  --kai-portal-surface-hover: rgba(255, 255, 255, .17);
  --kai-portal-ink: #f8fbff;
  --kai-portal-muted: #d0d8e4;
  --kai-portal-primary-strong: #f0bd54;
  --kai-portal-border: rgba(255, 255, 255, .30);
  --kai-portal-border-soft: rgba(255, 255, 255, .17);
  --kai-portal-shadow: 0 22px 52px rgba(0, 7, 18, .32);
  --kai-portal-shadow-soft: 0 14px 32px rgba(0, 7, 18, .24);
  --kai-portal-link-color: #edf5ff;
  background:
    radial-gradient(circle at 80% 8%, rgba(29, 83, 139, .50), transparent 32rem),
    radial-gradient(circle at 18% 82%, rgba(167, 103, 33, .22), transparent 33rem),
    linear-gradient(145deg, #071426 0%, #0a1a32 48%, #09223c 100%);
}

.kai-portal-shell::before,
.kai-portal-shell::after {
  position: absolute;
  inset: -6%;
  content: "";
  pointer-events: none;
}

.kai-portal-shell::before {
  z-index: 0;
  opacity: .70;
  background:
    radial-gradient(circle at 7% 34%, rgba(231, 165, 75, .32) 0 1.2rem, rgba(231, 165, 75, .08) 4rem, transparent 10rem),
    radial-gradient(circle at 92% 78%, rgba(217, 153, 68, .28) 0 1.4rem, rgba(217, 153, 68, .07) 4rem, transparent 11rem),
    radial-gradient(circle at 68% 43%, rgba(77, 131, 193, .18) 0 2rem, transparent 13rem),
    radial-gradient(circle at 48% 88%, rgba(63, 126, 166, .16) 0 3rem, transparent 17rem);
  transform: scale(1.08);
  filter: blur(30px) saturate(112%);
}

html[data-kai-theme="dark"] .kai-portal-shell::before {
  opacity: .94;
  background:
    radial-gradient(circle at 6% 35%, rgba(255, 183, 64, .48) 0 1.4rem, rgba(255, 183, 64, .14) 4rem, transparent 10rem),
    radial-gradient(circle at 92% 77%, rgba(255, 176, 52, .46) 0 1.6rem, rgba(255, 176, 52, .13) 4.5rem, transparent 11rem),
    radial-gradient(circle at 68% 42%, rgba(68, 136, 220, .28) 0 2rem, transparent 13rem),
    radial-gradient(circle at 48% 88%, rgba(39, 109, 149, .24) 0 3rem, transparent 17rem);
}

.kai-portal-shell::after {
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(227, 236, 244, .27));
  backdrop-filter: blur(16px) saturate(116%);
}

html[data-kai-theme="dark"] .kai-portal-shell::after {
  background: linear-gradient(180deg, rgba(3, 10, 21, .20), rgba(4, 16, 32, .38));
}

.kai-portal-page {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(calc(100% - (2 * var(--kai-portal-gutter))), 1360px);
  max-width: 1360px;
  margin-inline: auto;
  padding-block: clamp(.8rem, 1.6vw, 1.2rem) clamp(1.4rem, 2.8vw, 2.2rem);
}

.kai-portal-glass {
  border: 1px solid var(--kai-portal-border-soft);
  border-radius: var(--kai-portal-radius);
  background: var(--kai-portal-surface);
  box-shadow: var(--kai-portal-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(28px) saturate(138%);
}

.kai-portal-welcome {
  max-width: 42rem;
  margin-block: clamp(.8rem, 2vw, 1.35rem) clamp(.75rem, 1.8vw, 1.15rem);
  text-align: center;
}

.kai-portal-welcome > * {
  margin-inline: auto;
}

.kai-portal-shell .kai-portal-title {
  max-width: 18ch;
  margin-block: 0 .5rem;
  color: var(--kai-portal-ink);
  font-size: clamp(2.1rem, 5.3vw, 3.45rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 4px 18px rgba(0, 8, 20, .11);
}

.kai-portal-highlight {
  padding: 0;
  color: var(--kai-portal-primary-strong);
  background: transparent;
}

.kai-portal-intro {
  max-width: 32rem;
  margin-block: 0;
  color: var(--kai-portal-muted);
  font-size: clamp(.9rem, 1.5vw, 1rem);
  line-height: 1.65;
}

.kai-portal-search-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  max-width: 38rem;
  margin-block-start: .8rem;
  padding: .3rem .62rem .3rem .75rem;
  border-color: var(--kai-portal-border);
  border-radius: 999px;
}

.kai-portal-search-wrap > .dashicons {
  color: var(--kai-portal-ink);
  font-size: 1.35rem;
}

.kai-portal-search-wrap input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: .38rem .12rem;
  border: 0;
  outline: 0;
  color: var(--kai-portal-ink);
  background: transparent;
  font: inherit;
  font-size: .92rem;
}

.kai-portal-search-wrap input::placeholder {
  color: color-mix(in srgb, var(--kai-portal-muted) 78%, transparent);
}

.kai-portal-search-wrap button,
.kai-portal-empty button {
  min-height: 36px;
  padding: .4rem .7rem;
  border: 1px solid var(--kai-portal-border-soft);
  border-radius: 999px;
  color: var(--kai-portal-ink);
  background: var(--kai-portal-surface);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

.kai-portal-search-wrap input:focus-visible,
.kai-portal-search-wrap button:focus-visible,
.kai-portal-link:focus-visible,
.kai-portal-empty button:focus-visible,
.kai-portal-help__cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kai-portal-primary-strong) 76%, white);
  outline-offset: 3px;
}

.kai-portal-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
  margin-block: 0 .9rem;
}

.kai-portal-tool {
  min-width: 0;
  padding: .82rem .9rem;
  border-color: var(--kai-portal-border);
  background: var(--kai-portal-surface);
}

.kai-portal-tool h2,
.kai-portal-value h3,
.kai-portal-help h2 {
  margin-block: 0;
  color: var(--kai-portal-ink);
}

.kai-portal-tool > .wp-block-group:first-child {
  gap: .48rem;
  margin-block-end: .42rem;
}

.kai-portal-tool__icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--kai-portal-primary-strong) 22%, transparent);
  border-radius: 10px;
  color: var(--kai-portal-primary-strong);
  background: color-mix(in srgb, var(--kai-portal-primary-strong) 12%, transparent);
}

.kai-portal-tool p,
.kai-portal-tool__meta {
  margin-block: 0;
  color: var(--kai-portal-muted);
  font-size: .8rem;
  line-height: 1.55;
}

.kai-portal-tool__meta a {
  color: var(--kai-portal-link-color);
}

.kai-portal-clock__time {
  margin-block-start: .1rem;
  color: var(--kai-portal-ink);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: 760;
  line-height: 1;
  direction: ltr;
  text-align: right;
}

.kai-portal-clock__date {
  margin-block-start: .38rem;
  color: var(--kai-portal-muted);
  font-size: .78rem;
}

.kai-portal-weather .kai-portal-tool__meta {
  margin-block-start: .25rem;
  font-size: .62rem;
  line-height: 1.4;
  opacity: .82;
}

.kai-portal-links-section {
  margin-block: .55rem 1rem;
}

.kai-portal-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  margin-block-end: .55rem;
}

.kai-portal-section-heading h2,
.kai-portal-result-count {
  margin-block: 0;
}

.kai-portal-section-heading h2 {
  color: var(--kai-portal-ink);
  font-size: .98rem;
  font-weight: 850;
}

.kai-portal-result-count {
  color: var(--kai-portal-muted);
  font-size: .74rem;
}

.kai-portal-link-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .72rem;
}

.kai-portal-link {
  --kai-portal-card-accent: var(--kai-portal-primary-strong);
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 172px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .58rem;
  padding: .85rem .8rem 2.8rem;
  overflow: hidden;
  border: 1px solid var(--kai-portal-border);
  border-radius: var(--kai-portal-radius-sm);
  color: var(--kai-portal-ink);
  background: var(--kai-portal-surface);
  box-shadow: var(--kai-portal-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .13);
  backdrop-filter: blur(28px) saturate(136%);
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.kai-portal-link[hidden] {
  display: none;
}

.kai-portal-link::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--kai-portal-card-accent) 17%, transparent), transparent 45%);
  opacity: .68;
}

.kai-portal-link--primary { --kai-portal-card-accent: #c52647; }
.kai-portal-link--gold { --kai-portal-card-accent: #e5a936; }
.kai-portal-link--blue { --kai-portal-card-accent: #4f86e8; }
.kai-portal-link--green { --kai-portal-card-accent: #36ad78; }
.kai-portal-link--violet { --kai-portal-card-accent: #9e5ed8; }
.kai-portal-link--slate { --kai-portal-card-accent: #4aa7bd; }

.kai-portal-link:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--kai-portal-card-accent) 48%, var(--kai-portal-border));
  background: var(--kai-portal-surface-hover);
  box-shadow: var(--kai-portal-shadow), 0 0 24px color-mix(in srgb, var(--kai-portal-card-accent) 10%, transparent);
}

.kai-portal-link__icon {
  position: relative;
  z-index: 1;
  display: inline-grid;
  width: 58px;
  height: 58px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--kai-portal-card-accent) 50%, white);
  border-radius: 17px;
  color: white;
  background: color-mix(in srgb, var(--kai-portal-card-accent) 78%, #17304d);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--kai-portal-card-accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
  font-size: 1.45rem;
}

.kai-portal-link__icon--logo {
  padding: .45rem;
  border-color: var(--kai-portal-border);
  background: color-mix(in srgb, var(--kai-portal-surface) 82%, white 18%);
}

html[data-kai-theme="dark"] .kai-portal-link__icon--logo {
  background: rgba(255, 255, 255, .88);
}

.kai-portal-link__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.kai-portal-link__body {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: .16rem;
}

.kai-portal-link__body strong {
  overflow-wrap: anywhere;
  color: var(--kai-portal-ink);
  font-size: .96rem;
  line-height: 1.35;
}

.kai-portal-link__body small {
  color: color-mix(in srgb, var(--kai-portal-card-accent) 78%, var(--kai-portal-ink));
  font-size: .65rem;
  font-weight: 850;
}

.kai-portal-link__body > span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--kai-portal-muted);
  font-size: .75rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.kai-portal-link__arrow {
  position: absolute;
  z-index: 2;
  inset-inline-end: .72rem;
  inset-block-end: .7rem;
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--kai-portal-card-accent) 42%, white);
  border-radius: 999px;
  color: white;
  background: color-mix(in srgb, var(--kai-portal-card-accent) 62%, #17304d);
  font-size: .92rem;
  transition: transform .18s ease;
}

.kai-portal-link:hover .kai-portal-link__arrow {
  transform: translateX(-3px);
}

.kai-portal-empty {
  display: grid;
  justify-items: center;
  gap: .28rem;
  max-width: 34rem;
  margin-inline: auto;
  padding: .9rem 1rem;
  border: 1px dashed var(--kai-portal-border);
  border-radius: var(--kai-portal-radius-sm);
  color: var(--kai-portal-muted);
  background: var(--kai-portal-surface);
  backdrop-filter: blur(26px);
  text-align: center;
}

.kai-portal-empty[hidden] {
  display: none;
}

.kai-portal-empty strong {
  color: var(--kai-portal-ink);
}

.kai-portal-empty span {
  font-size: .78rem;
}

.kai-portal-values.wp-block-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-block: .55rem .9rem;
  overflow: hidden;
  border: 1px solid var(--kai-portal-border);
  border-radius: var(--kai-portal-radius);
  background: var(--kai-portal-surface);
  box-shadow: var(--kai-portal-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .13);
  backdrop-filter: blur(28px) saturate(136%);
}

.kai-portal-values > .wp-block-column {
  min-width: 0;
}

.kai-portal-value {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding: .72rem .7rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
}

.kai-portal-value::before {
  display: grid;
  width: 34px;
  height: 34px;
  margin: 0 auto .32rem;
  place-items: center;
  border: 1px solid var(--kai-portal-border-soft);
  border-radius: 999px;
  color: var(--kai-portal-primary-strong);
  background: color-mix(in srgb, var(--kai-portal-surface) 80%, transparent);
  content: "✦";
  font-size: .9rem;
}

.kai-portal-values > .wp-block-column:nth-child(1) .kai-portal-value::before { content: "◎"; color: #5b8fe8; }
.kai-portal-values > .wp-block-column:nth-child(2) .kai-portal-value::before { content: "⌕"; color: #42b7a5; }
.kai-portal-values > .wp-block-column:nth-child(3) .kai-portal-value::before { content: "◇"; color: #dfa337; }
.kai-portal-values > .wp-block-column:nth-child(4) .kai-portal-value::before { content: "♡"; color: #c94b74; }

.kai-portal-value h3 {
  margin-block: 0 .12rem;
  color: var(--kai-portal-ink);
  font-size: .86rem;
}

.kai-portal-value p {
  margin: 0;
  color: var(--kai-portal-muted);
  font-size: .71rem;
  line-height: 1.4;
}

.kai-portal-help-wrap {
  margin-block: 0 .8rem;
  padding: .75rem .9rem;
  border-color: var(--kai-portal-border);
  background: var(--kai-portal-surface);
}

.kai-portal-help {
  display: grid;
  align-items: center;
  gap: .6rem;
}

.kai-portal-help h2 {
  margin-block: 0 .12rem;
  font-size: .96rem;
}

.kai-portal-help p {
  margin: 0;
  color: var(--kai-portal-muted);
  font-size: .76rem;
  line-height: 1.45;
}

.kai-portal-help__cta {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: .46rem .82rem;
  border: 1px solid color-mix(in srgb, var(--kai-portal-primary-strong) 44%, transparent);
  border-radius: 999px;
  color: #16120b;
  background: linear-gradient(135deg, #f2d58e, #e6ad45);
  box-shadow: 0 8px 20px rgba(191, 137, 39, .16);
  font-size: .78rem;
  font-weight: 900;
  text-decoration: none;
}

@media (min-width: 620px) {
  .kai-portal-shell {
    --kai-portal-gutter: 22px;
  }

  .kai-portal-tools,
  .kai-portal-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kai-portal-values.wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kai-portal-values > .wp-block-column:nth-child(odd) {
    border-inline-end: 1px solid var(--kai-portal-border-soft);
  }

  .kai-portal-values > .wp-block-column:nth-child(n+3) {
    border-block-start: 1px solid var(--kai-portal-border-soft);
  }

  .kai-portal-help {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .kai-portal-help__cta {
    justify-self: end;
  }
}

@media (min-width: 900px) {
  .kai-portal-shell {
    --kai-portal-gutter: 30px;
  }

  .kai-portal-link-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kai-portal-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .kai-portal-page {
    display: grid;
    grid-template-columns: minmax(220px, .78fr) minmax(500px, 1.8fr) minmax(220px, .78fr);
    column-gap: clamp(.9rem, 1.6vw, 1.4rem);
    align-items: start;
  }

  .kai-portal-welcome {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-block: .55rem .75rem;
  }

  .kai-portal-shell .kai-portal-page > .kai-portal-tools.wp-block-group {
    display: contents;
    margin: 0;
  }

  .kai-portal-announcement {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    min-height: 150px;
    margin-block-start: .55rem;
  }

  .kai-portal-clock {
    grid-column: 1;
    grid-row: 1;
    min-height: 150px;
    margin-block-start: .55rem;
  }

  .kai-portal-weather {
    grid-column: 1;
    grid-row: 2;
    margin-block-start: .5rem;
  }

  .kai-portal-links-section,
  .kai-portal-values.wp-block-columns,
  .kai-portal-help-wrap {
    grid-column: 1 / -1;
  }

  .kai-portal-links-section {
    grid-row: 3;
    margin-block: .45rem .85rem;
  }

  .kai-portal-link-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .kai-portal-values.wp-block-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    direction: ltr;
  }

  .kai-portal-values > .wp-block-column {
    border-block-start: 0;
    border-inline-end: 1px solid var(--kai-portal-border-soft);
  }

  .kai-portal-values > .wp-block-column:last-child {
    border-inline-end: 0;
  }

  .kai-portal-value {
    direction: rtl;
  }
}

@media (max-width: 619px) {
  .kai-portal-page {
    width: min(calc(100% - 24px), 1360px);
  }

  .kai-portal-welcome {
    margin-block: .75rem .9rem;
  }

  .kai-portal-shell .kai-portal-title {
    font-size: clamp(1.95rem, 10vw, 2.7rem);
  }

  .kai-portal-intro {
    font-size: .88rem;
  }

  .kai-portal-search-wrap {
    padding-inline: .55rem;
  }

  .kai-portal-tool {
    padding: .78rem;
  }

  .kai-portal-link {
    min-height: 166px;
  }

  .kai-portal-values > .wp-block-column + .wp-block-column {
    border-block-start: 1px solid var(--kai-portal-border-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kai-portal-link,
  .kai-portal-link__arrow {
    scroll-behavior: auto;
    transition: none;
  }
}