/*
Theme Name: Luminfra
Theme URI: https://example.com/
Author: Luminfra
Description: Block-based dark mid-tone theme for the Luminfra infrastructure support brand.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.2.0
License: GPL-2.0-or-later
Text Domain: luminfra
*/

:root {
  --luminfra-divider-bg: var(--wp--preset--color--slate-navy);
  /* or your most common surface */
}

body {
  background-color: #1B2430;
  color: #F0F2F4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.luminfra-hero h1 {
  margin-bottom: 1rem;
}

.luminfra-hero .first-part {
  color: #F0F2F4;
}

.luminfra-hero .second-part {
  color: #FFFFFF;
  position: relative;
  text-shadow:
    0 0 10px rgba(242, 143, 167, 0.6),
    0 0 20px rgba(242, 143, 167, 0.45),
    0 0 30px rgba(242, 143, 167, 0.35);
}

.luminfra-hero .second-part::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.16em;
  border-radius: 999px;
  background: linear-gradient(90deg,
      rgba(230, 106, 137, 0.9),
      rgba(242, 143, 167, 0.5));
}

.luminfra-header-nav .wp-block-navigation__container>.wp-block-navigation-item>a {
  color: #F0F2F4;
  font-weight: 500;
}

.luminfra-header-nav .wp-block-navigation__container>.wp-block-navigation-item>a:hover,
.luminfra-header-nav .wp-block-navigation__container>.wp-block-navigation-item>a:focus {
  color: #E66A89;
}

.luminfra-header-nav .wp-block-navigation-item__content[aria-current="page"] {
  color: #E66A89;
}

.luminfra-header-brand .wp-block-site-title a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 6px;
  background: linear-gradient(145deg, #2E3A48, #101621);
  position: relative;
  top: 3px;
}

.luminfra-sidebar .wp-block-group {
  background: #2E3A48;
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(201, 209, 216, 0.25);
  margin-bottom: 20px;
}

.luminfra-sidebar h2,
.luminfra-sidebar h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.luminfra-sidebar ul {
  margin: 0;
  padding-left: 1.2rem;
}

.luminfra-sidebar li {
  margin-bottom: 0.2rem;
}

/* Luminfra navigation styling */

.wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  padding-bottom: 4px;
  text-decoration: none;
  color: var(--wp--preset--color--cloud-gray);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--white);
}

.wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--wp--preset--color--lumin-pink);
  transition: width 0.18s ease-in-out;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after {
  width: 100%;
}

/* === Luminfra Navigation Spacing (Desktop) === */
.wp-block-navigation ul.wp-block-navigation__container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-block-navigation li.wp-block-navigation-item {
  margin: 0;
}

/* Give links a little breathing room for usability */
.wp-block-navigation a.wp-block-navigation-item__content {
  padding: 6px 0;
}

/* === Luminfra Navigation (Overlay / Mobile) === */

/* --- Mobile overlay: background + text color --- */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--soft-graphite) !important;
  color: var(--wp--preset--color--cloud-gray) !important;
}

/* --- Mobile overlay: link colors --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--wp--preset--color--cloud-gray) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--white) !important;
}

/* --- Mobile overlay: close (X) button --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--cloud-gray) !important;
}

/* --- Mobile overlay: submenu labels / parent items --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
  color: var(--wp--preset--color--cloud-gray) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus-visible {
  color: var(--wp--preset--color--white) !important;
}

/* --- Mobile overlay: layout --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Bigger tap targets in overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: inline-block;
  padding: 10px 6px;
}

/* Tighten site title + tagline stacking */
.wp-block-site-title {
  margin-bottom: 0;
}

.wp-block-site-tagline {
  margin-top: 2px;
  /* try 0–4px */
  margin-bottom: 0;
}

.wp-block-navigation {
  align-items: center;
}

.wp-block-separator.luminfra-divider {
  position: relative;
  margin: 14px 0;
  opacity: .35;
}

.wp-block-separator.luminfra-divider::after {
  content: "◉";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  padding: 0 10px;
  background: var(--wp--preset--color--soft-graphite, transparent);
  color: currentColor;
  opacity: .65;
  font-size: 14px;
  line-height: 1;
}

.luminfra-divider-signal {
  position: relative;
  display: block;
  height: 20px !important;
  margin: 14px 0;
  color: var(--wp--preset--color--cloud-gray);
  /* force visibility in editor */
  opacity: .55;
}

.luminfra-divider-signal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-top: 1px solid currentColor;
  opacity: .6;
}

.luminfra-divider-signal::after {
  content: "◉";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  padding: 0 10px;
  background: var(--luminfra-divider-bg, transparent);
  line-height: 1;
  font-size: 14px;
  opacity: .9;
  pointer-events: none;
}

.luminfra-divider-wrap {
  position: relative;
  margin: 14px auto;
  width: clamp(220px, 50%, 560px);
  height: 20px;
  color: var(--wp--preset--color--cloud-gray);
}

/* Draw the REAL line (full width, both sides) */
.luminfra-divider-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-top: 1px solid currentColor;
  opacity: .35;
}

/* Hide the theme's HR styling (keep block for editor UX only) */
.wp-block-separator.luminfra-divider-line {
  border: 0 !important;
  background: transparent !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Center dot + cutout */
.luminfra-divider-wrap::after {
  content: "◉";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  padding: 0 10px;
  background: var(--luminfra-divider-bg, var(--wp--preset--color--white));
  opacity: .75;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

/* Mask color for your right-card background */
.has-soft-graphite-background-color {
  --luminfra-divider-bg: var(--wp--preset--color--soft-graphite);
}

.has-slate-navy-background-color {
  --luminfra-divider-bg: var(--wp--preset--color--slate-navy);
}

.has-white-background-color {
  --luminfra-divider-bg: var(--wp--preset--color--white);
}

.has-cloud-gray-background-color {
  --luminfra-divider-bg: var(--wp--preset--color--cloud-gray);
}

/* Equal-height cards + CTA pinned to bottom */
.luminfra-card-grid {
  align-items: stretch;
  margin-top: 12px;
  margin-bottom: 12px;
}

.luminfra-card-grid .luminfra-service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  margin-bottom: 12px;
  position: relative;
  min-height: 250px;
}

.luminfra-card-grid .luminfra-service-card .wp-block-buttons {
  margin-top: auto;
}

/* Task archive cards: CTA row alignment */
.post-type-archive-task .lumin-card-cta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* left + right */
  align-items: center;
  gap: 12px;
}

/* "View details" block often has default margins */
.post-type-archive-task .lumin-card-cta .wp-block-read-more {
  margin: 0;
}

/* Keep the read-more link visually calm */
.post-type-archive-task .lumin-card-cta .wp-block-read-more a {
  text-decoration: none;
}

/* Ensure the buttons wrapper from your dynamic block doesn't add weird spacing */
.post-type-archive-task .lumin-card-cta .wp-block-buttons {
  margin: 0;
}

/* Hover glow for the Read More link when it's the <a> element itself */
.post-type-archive-task .lumin-card-cta a.wp-block-read-more {
  transition: color 0.2s ease, text-shadow 0.2s ease, box-shadow 0.2s ease;
}

.post-type-archive-task .lumin-card-cta a.wp-block-read-more:hover,
.post-type-archive-task .lumin-card-cta a.wp-block-read-more:focus-visible {
  color: var(--wp--preset--color--lumin-glow) !important;
  text-shadow: 0 0 8px rgba(242, 143, 167, 0.35);
  outline: none;
  box-shadow: 0 0 0 2px rgba(242, 143, 167, 0.65);
  border-radius: 6px;
  /* gives the focus ring a nice shape */
}

/* Order button hover — Luminfra glow */
.post-type-archive-task .wp-block-button__link:hover,
.single-task .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--lumin-glow);
  box-shadow: 0 0 0 1px rgba(242, 143, 167, 0.6),
    0 6px 18px rgba(242, 143, 167, 0.35);
  transform: translateY(-1px);
}

/* Smooth transition */
.post-type-archive-task .wp-block-button__link,
.single-task .wp-block-button__link {
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.post-type-archive-task .wp-block-button__link:focus-visible,
.single-task .wp-block-button__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(242, 143, 167, 0.8),
    0 0 0 6px rgba(242, 143, 167, 0.35);
}

.luminfra-card-grid .luminfra-service-card .wp-block-list {
  padding-left: 0;
  list-style-position: inside;
}

.luminfra-card-grid .luminfra-service-card .wp-block-list .wp-block-list {
  padding-left: 20px;
}

/* Fix submenu dropdown background */
.wp-block-navigation__submenu-container {
  background-color: var(--wp--preset--color--soft-graphite) !important;
  border: 1px solid rgba(138, 151, 165, 0.15);
  border-radius: 8px;
  padding: 8px 0;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--wp--preset--color--cloud-gray);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--white);
}



/* The badge sits in that padding space */
.luminfra-card-grid .luminfra-service-card .luminfra-tier-badge {
  margin-top: -26px;
}

/* === Luminfra Footer Nav Links === */
.luminfra-footer-nav {
  display: flex;
  gap: 24px;
  justify-content: flex-end;
  align-items: center;
}

.luminfra-footer-nav p {
  margin: 0;
  line-height: 1;
}

.luminfra-footer-link {
  position: relative;
  padding-bottom: 4px;
  text-decoration: none;
  color: var(--wp--preset--color--cloud-gray);
  transition: color 0.18s ease-in-out;
}

.luminfra-footer-link:hover,
.luminfra-footer-link:focus-visible {
  color: var(--wp--preset--color--white);
}

.luminfra-footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--wp--preset--color--lumin-pink);
  transition: width 0.18s ease-in-out;
}

.luminfra-footer-link:hover::after,
.luminfra-footer-link:focus-visible::after {
  width: 100%;
}

/* === Global Inline Link Styles === */
a {
  color: var(--wp--preset--color--lumin-pink);
  text-decoration: none;
  transition: color 0.18s ease-in-out;
}

a:hover,
a:focus-visible {
  color: var(--wp--preset--color--white);
}

/* === Luminfra Quote Line === */
/* Left-border accent for positioning/callout lines */
.luminfra-quote-line {
  border-left: 3px solid var(--wp--preset--color--lumin-glow);
  padding-left: 14px;
}

/* === Luminfra Cols Top — equal height cards, tops aligned === */
.luminfra-cols-top.are-vertically-aligned-top {
  align-items: stretch !important;
}

.luminfra-cols-top>.wp-block-column,
.luminfra-cols-top>.wp-block-column.is-vertically-aligned-top {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}

.luminfra-cols-top>.wp-block-column>.wp-block-group {
  flex: 1 !important;
}
 
 /* === Critical button — lumin-pink border, cloud-gray text === */
.luminfra-btn-critical .wp-block-button__link {
    color: var(--wp--preset--color--cloud-gray) !important;
    border-color: var(--wp--preset--color--lumin-pink) !important;
}
/* === Luminfra Card Flex — equal-height card with CTA pinned to bottom === */
/* Replaces inline height:100%;display:flex;flex-direction:column on group divs */
.luminfra-card-flex {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
}

/* === Luminfra Btn Push — pushes button row to card bottom === */
/* Replaces inline margin-top:auto on wp-block-buttons divs */
.luminfra-btn-push {
  margin-top: auto !important;
}


/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}