/*
Theme Name: Lunet Glass
Theme URI: https://lunetcomputers.com/
Author: Lunet Computers
Author URI: https://lunetcomputers.com/
Description: Dark glassmorphism theme for Lunet Computers - managed IT, cybersecurity, cloud and software in Dubai. Converted from the approved design with exact colours, copy and components.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lunet-glass
Tags: business, dark, one-column, custom-menu, featured-images, blog
*/

/* =========================================================
   1. Design system CSS (verbatim from the approved design)
   ========================================================= */
html,body{margin:0;padding:0;background:#060b16;scroll-behavior:smooth}
*{box-sizing:border-box}
a{color:#4fc3ff;text-decoration:none}a:hover{color:#8fd4ff}
summary::-webkit-details-marker{display:none}
details[open] summary span[data-plus]{transform:rotate(45deg)}
details[open] summary{color:#8fd4ff}
[data-nav]{position:relative}
[data-nav]::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,#0a6cf1,#1fb6ff);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
[data-nav]:hover::after{transform:scaleX(1)}
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-parallax]{will-change:transform}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes pulseRing{0%{transform:scale(.8);opacity:.8}100%{transform:scale(2);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes growPct{from{width:0}}
@keyframes gridMove{from{background-position:0 0}to{background-position:0 56px}}
@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-50px) scale(1.15)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,60px) scale(1.1)}}
@keyframes beamA{0%,100%{transform:translateX(-10%) rotate(-18deg) scaleY(1)}50%{transform:translateX(12%) rotate(-14deg) scaleY(1.15)}}
@keyframes beamB{0%,100%{transform:translateX(8%) rotate(22deg) scaleY(1.1)}50%{transform:translateX(-14%) rotate(18deg) scaleY(.95)}}
@keyframes beamC{0%,100%{transform:translateX(0) rotate(-30deg);opacity:.35}50%{transform:translateX(-6%) rotate(-26deg);opacity:.6}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.2)}}
@keyframes rackFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ringPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes barUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes travel{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes typeIn{from{width:0}to{width:100%}}
@keyframes wave{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes cableFlow{to{stroke-dashoffset:-40}}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes morphA{0%{border-radius:58% 42% 63% 37%/45% 55% 45% 55%;transform:rotate(0) scale(1)}33%{border-radius:40% 60% 45% 55%/60% 40% 60% 40%}66%{border-radius:55% 45% 35% 65%/40% 60% 50% 50%;transform:rotate(12deg) scale(1.06)}100%{border-radius:58% 42% 63% 37%/45% 55% 45% 55%;transform:rotate(0) scale(1)}}
@keyframes morphB{0%{border-radius:45% 55% 60% 40%/55% 45% 55% 45%;transform:rotate(0) scale(1)}50%{border-radius:60% 40% 40% 60%/40% 60% 40% 60%;transform:rotate(-14deg) scale(1.08)}100%{border-radius:45% 55% 60% 40%/55% 45% 55% 45%;transform:rotate(0) scale(1)}}
@keyframes hueShift{from{filter:hue-rotate(0) blur(0)}50%{filter:hue-rotate(-25deg) blur(1px)}to{filter:hue-rotate(0) blur(0)}}
@keyframes riseDot{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-140px);opacity:0}}
@keyframes ledBlink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes dataUp{0%{stroke-dashoffset:120}100%{stroke-dashoffset:0}}
@keyframes ringSpin{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes orbitRev{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes nodePulse{0%,100%{r:5;opacity:.75}50%{r:8;opacity:1}}
@keyframes flow{to{stroke-dashoffset:-60}}
@keyframes packetPass{0%{left:4%;opacity:0}8%{opacity:1}100%{left:calc(96% - 10px);opacity:1}}
@keyframes packetBlock{0%{left:4%;opacity:0;transform:scale(1)}8%{opacity:1}46%{left:calc(50% - 14px);transform:scale(1)}50%{transform:scale(2.2);background:#ff6b6b;box-shadow:0 0 24px #ff6b6b}62%{opacity:0;left:calc(50% - 14px);transform:scale(.4)}100%{opacity:0;left:calc(50% - 14px)}}
@keyframes wallGlow{0%,100%{box-shadow:0 0 30px rgba(31,182,255,.25),inset 0 0 20px rgba(31,182,255,.15)}50%{box-shadow:0 0 60px rgba(31,182,255,.55),inset 0 0 30px rgba(31,182,255,.3)}}
@keyframes scan{from{top:-10%}to{top:110%}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@media (max-width:1100px){[data-heroaside]{transform:none!important}[data-herobadge]{display:none!important}}
@media (max-width:900px){[data-desktop]{display:none!important}[data-mobile]{display:flex!important}[data-blogside]{position:static!important}}
@media (max-width:980px){[data-bloggrid]{grid-template-columns:1fr!important}}
@keyframes typingDot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* =========================================================
   2. Theme additions (WordPress integration + JS-driven state)
   ========================================================= */

/* Panels that React used to mount conditionally. */
[data-mega][hidden],
[data-mobilemenu][hidden],
[data-aipanel][hidden] { display: none !important; }

[data-mobilemenu] { display: flex; }

/* Mobile menu only ever shows under the desktop breakpoint. */
@media (min-width: 901px) {
  [data-mobilemenu] { display: none !important; }
}

/* WordPress admin bar keeps the floating header clear. */
.admin-bar [data-header] { top: 46px; }
@media screen and (min-width: 783px) {
  .admin-bar [data-header] { top: 46px; }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Editor / block content inside the dark shell. */
.lunet-prose { color: #c9d6ea; font-size: 16.5px; line-height: 1.8; }
.lunet-prose h2, .lunet-prose h3, .lunet-prose h4 { font-family: Sora, sans-serif; color: #e6eefb; line-height: 1.25; margin: 34px 0 12px; }
.lunet-prose h2 { font-size: 30px; } .lunet-prose h3 { font-size: 22px; } .lunet-prose h4 { font-size: 18px; }
.lunet-prose p { margin: 0 0 18px; }
.lunet-prose ul, .lunet-prose ol { margin: 0 0 18px; padding-left: 22px; }
.lunet-prose li { margin: 0 0 8px; }
.lunet-prose img { max-width: 100%; height: auto; border-radius: 16px; }
.lunet-prose blockquote { margin: 24px 0; padding: 16px 22px; border-left: 3px solid #1fb6ff; background: rgba(143,212,255,.06); border-radius: 0 14px 14px 0; }
.lunet-prose code { background: rgba(143,212,255,.1); padding: 2px 6px; border-radius: 6px; font-size: .92em; }
.lunet-prose pre { background: rgba(8,14,28,.8); border: 1px solid rgba(143,212,255,.14); padding: 18px; border-radius: 14px; overflow: auto; }
.lunet-prose a { color: #4fc3ff; text-decoration: underline; text-underline-offset: 3px; }
.lunet-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.lunet-prose th, .lunet-prose td { border: 1px solid rgba(143,212,255,.14); padding: 10px 12px; text-align: left; }

/* Accessibility: visible focus on the dark palette. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #4fc3ff; outline-offset: 2px; border-radius: 6px;
}
.lunet-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #0a6cf1; color: #fff; padding: 12px 18px; border-radius: 0 0 12px 0; font-weight: 700;
}
.lunet-skip:focus { left: 0; }

/* Form states used by the contact handler. */
.lunet-note { border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.lunet-note-ok { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.35); color: #4ade80; }
.lunet-note-err { background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.35); color: #ff8a8a; }
.lunet-field-err { color: #ff8a8a; font-size: 12.5px; margin-top: 6px; display: block; }

/* Pagination for the blog archive. */
.lunet-pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 46px 0 0; }
.lunet-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px;
  padding: 0 14px; border-radius: 12px; border: 1px solid rgba(143,212,255,.16);
  background: rgba(255,255,255,.04); color: #c9d6ea; font-weight: 700; font-size: 14px;
}
.lunet-pagination .page-numbers.current,
.lunet-pagination .page-numbers:hover { background: linear-gradient(135deg,#0a6cf1,#1fb6ff); color: #fff; border-color: transparent; }

/*
 * Last-row balancing.
 * An auto-fit card grid with a count that does not divide by the column count
 * strands a single card on the final row beside empty cells. Where that
 * happens, let the stranded card fill the row so the block still reads as a
 * finished grid. Scoped to the widths where the orphan actually occurs; at
 * narrower breakpoints the column count changes and the row is already full.
 */
@media (min-width: 1101px) {
  [data-fillrow] > :last-child { grid-column: 1 / -1; }
}

/*
 * Tablet and phone behaviour.
 *
 * The design is a desktop composition: the alternating sections pair a column
 * of copy with a wide illustrative panel, and those panels need roughly 480px
 * before they read as anything other than a crush of clipped cards. Their
 * track minimums are set so the pair stacks rather than splitting a tablet in
 * half. The rules below handle what a track minimum cannot, and carry
 * !important only where they have to beat an inline style the design shipped.
 */

/* Phone gutters. 24px a side on a 390px screen leaves the copy in a ribbon. */
@media (max-width: 600px) {
  #lunet-main section { padding-left: 18px !important; padding-right: 18px !important; }
}

/* The closing call to action is three tracks wide: mark, copy, action. Below a
   tablet there is no room for three, and the middle one clips. */
@media (max-width: 900px) {
  [data-ctaband] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 30px 24px !important;
  }
}

/* Touch targets. The design's text links sit at 19 to 22px tall, under the
   24px minimum in WCAG 2.5.8 and well under a comfortable thumb. Padding them
   out on small screens costs nothing on desktop. Inline links inside prose are
   unaffected, since min-height does not apply to inline boxes. */
@media (max-width: 900px) {
  footer a[href] { display: inline-flex; align-items: center; min-height: 34px; }
  #lunet-main a[href] { min-height: 34px; }
}

/*
 * Orphan rows below a laptop.
 *
 * Every card block in the design is repeat(auto-fit, minmax(...)). That is
 * fine on a desktop but on the way down it passes through every intermediate
 * column count, so a four card row becomes three plus one stranded card and a
 * six card row becomes four plus two. Below 1100px those blocks switch to
 * flex wrapping, where the final row grows to fill the width instead of
 * leaving a hole. Flex also ignores the absolutely positioned decorations
 * some of these blocks contain, which a column count cannot account for.
 *
 * The copy-and-visual sections are excluded by their 480px track minimum:
 * they are already a single column at these widths and must stay that way.
 */
@media (max-width: 1100px) {
  #lunet-main div[style*="repeat(auto-fit"]:not([style*="minmax(min(480px"]),
  footer div[style*="repeat(auto-fit"] {
    display: flex !important;
    flex-wrap: wrap;
  }
  #lunet-main div[style*="repeat(auto-fit"]:not([style*="minmax(min(480px"]) > *,
  footer div[style*="repeat(auto-fit"] > * {
    flex: 1 1 280px;
    min-width: 0;
  }
}

/* Phones: one card per row, whatever the design asked for. */
@media (max-width: 600px) {
  #lunet-main div[style*="repeat(auto-fit"]:not([style*="minmax(min(480px"]) > *,
  footer div[style*="repeat(auto-fit"] > * {
    flex: 1 1 100%;
  }
}

/*
 * Headline scale on phones.
 *
 * The display sizes are clamped with a vw middle term, but the lower bounds
 * were chosen for a desktop composition: the home page H1 floors at 40px and
 * the page heroes at 36px, both of which run past the right edge of a 390px
 * screen. The section clips rather than scrolls, so nothing shows up as page
 * overflow, the words simply disappear. Re-floor them for small screens.
 */
@media (max-width: 600px) {
  #lunet-main h1 {
    font-size: clamp(26px, 7.4vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }
  #lunet-main h2 {
    font-size: clamp(23px, 6.2vw, 34px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.02em !important;
  }
  #lunet-main h3 { font-size: clamp(17px, 4.6vw, 22px) !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  #lunet-main h1 { font-size: clamp(34px, 5.6vw, 52px) !important; }
}