/* ============================================================
   CloudTech Oman — Hexagon Theme
   Logo-derived hexagonal motif: turns circular icon "marks"
   into flat-top hexagons and adds a subtle hex-grid backdrop
   across the suite/service heroes.
   Loaded AFTER main.css / services.css / solutions.css so it
   composes on top of the existing geometry.
   ============================================================ */

:root {
    /* Flat-top hexagon clip path — height ratio is 1 : 0.8660 */
    --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    --hex-ring: 1px;           /* outer border thickness for the ring effect */
    --hex-ring-color: var(--line-strong);
    --hex-fill: var(--surface-1);
}

/* =========================================================
   1.  Reusable hex-mark utility
   ========================================================= */
.hex-mark {
    position: relative;
    background: var(--hex-ring-color);
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    overflow: hidden;
    isolation: isolate;
    display: grid;
    place-items: center;
    transition: background .5s var(--ease-soft), color .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.hex-mark::before {
    content: '';
    position: absolute;
    inset: var(--hex-ring);
    background: var(--hex-fill);
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    z-index: -1;
    transition: background .5s var(--ease-soft);
}

/* =========================================================
   2.  Promote existing icon containers to hex
       (override border-radius: 50% set in main.css/services.css)
   ========================================================= */
.info-icon,
.service-icon,
.contact-icon:not(.footer-contact .contact-icon),
.feature-icon,
.team-avatar,
.manifest-mark,
.solution-mark,
.suite-hero-eyebrow .dot,
.solution-badge-dot {
    /* Keep their existing size & color; just swap shape. */
    border-radius: 0 !important;
    border: 0 !important;
    background: var(--line-strong);
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Small dots stay round-ish but using mini hex */
.suite-hero-eyebrow .dot,
.solution-badge-dot {
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    box-shadow: none;
}

/* Inner fill layer — gives the 1px ring effect */
.info-icon::before,
.service-icon::before,
.feature-icon::before,
.team-avatar::before,
.manifest-mark::before,
.solution-mark::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--surface-1);
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    z-index: -1;
    transition: background .5s var(--ease-soft);
}

/* Hex-shaped containers in feature cards in the contact section have a different parent.
   The hero contact icons in .contact-item are smaller — leave their fill in place. */
.contact-item .contact-icon {
    width: 40px; height: 40px;
    display: grid; place-items: center;
}
.contact-item .contact-icon::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--surface-1);
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    z-index: -1;
}

/* The SVGs inside must sit above the inner fill */
.info-icon svg,
.service-icon svg,
.feature-icon svg,
.team-avatar svg,
.manifest-mark svg,
.solution-mark svg,
.contact-icon svg {
    position: relative;
    z-index: 1;
}

/* =========================================================
   3.  Hover states — repaint the inner fill, keep ring
       crisp so it feels like the hex outline lights up.
   ========================================================= */
.info-item:hover .info-icon,
.service-card:hover .service-icon,
.feature-card:hover .feature-icon,
.team-card:hover .team-avatar,
.manifest-link:hover .manifest-mark {
    background: var(--blue-bright);    /* outer ring brightens */
    transform: rotate(-6deg);          /* gentler than the previous -10deg, hex tilts nicely */
}
.info-item:hover .info-icon::before,
.service-card:hover .service-icon::before,
.feature-card:hover .feature-icon::before,
.team-card:hover .team-avatar::before,
.manifest-link:hover .manifest-mark::before {
    background: var(--blue);
}

/* The solution-mark uses --solution-accent which is set per page */
.solution-detail .solution-mark {
    background: color-mix(in srgb, var(--solution-accent, var(--blue-bright)) 55%, transparent);
}
.solution-detail .solution-mark::before {
    background: var(--surface-1);
}

/* =========================================================
   4.  Floating hex decorations in heroes
       (replaces the soft circular .floating-element blobs)
   ========================================================= */
.hex-deco {
    position: absolute;
    aspect-ratio: 1 / 0.866;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background: linear-gradient(135deg, rgba(91, 125, 255, 0.20), rgba(42, 79, 214, 0.05));
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}
.hex-deco::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--paper);
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    opacity: 0.92;
}

/* =========================================================
   5.  Hexagonal grid background texture
       Drop on any section by adding .has-hex-bg.
   ========================================================= */
.has-hex-bg {
    position: relative;
}
.has-hex-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 96 84'><g fill='none' stroke='rgba(125,153,255,0.10)' stroke-width='1'><polygon points='24,2 47,15 47,42 24,55 1,42 1,15'/><polygon points='72,2 95,15 95,42 72,55 49,42 49,15'/><polygon points='48,44 71,57 71,84 48,97 25,84 25,57'/></g></svg>");
    background-size: 96px 84px;
    background-position: 0 0;
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
}

/* Hero containers get the texture automatically */
.hero-section,
.service-hero,
.suite-hero,
.solution-hero,
.suite-foundation {
    position: relative;
}
.hero-section::before,
.service-hero::before,
.suite-hero::before,
.solution-hero::before,
.suite-foundation::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='96' viewBox='0 0 110 96'><g fill='none' stroke='rgba(125,153,255,0.08)' stroke-width='1'><polygon points='27.5,2 53,16.5 53,45.5 27.5,60 2,45.5 2,16.5'/><polygon points='82.5,2 108,16.5 108,45.5 82.5,60 57,45.5 57,16.5'/><polygon points='55,50 80.5,64.5 80.5,93.5 55,108 29.5,93.5 29.5,64.5'/></g></svg>");
    background-size: 110px 96px;
    background-repeat: repeat;
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 92%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 92%);
}

/* The hero containers already have ::after gradients — make sure they stack
   correctly. hex texture sits at z-index 0; content uses .container at z-index 2. */
.hero-section > .container,
.service-hero > .container,
.suite-hero > .container,
.solution-hero > .container,
.suite-foundation > .container {
    position: relative;
    z-index: 2;
}

/* =========================================================
   6.  Floating hex decorations — drop-in elements
       (use in PHP: <span class="hex-float hex-float-1" aria-hidden="true"></span>)
   ========================================================= */
.hex-float {
    position: absolute;
    aspect-ratio: 1 / 0.866;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--blue-bright) 60%, transparent),
        color-mix(in srgb, var(--blue-deep) 30%, transparent));
    z-index: 1;
    pointer-events: none;
    opacity: 0.55;
    animation: hexDrift 16s ease-in-out infinite;
}
.hex-float::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--paper-deep);
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    opacity: 0.85;
}

.hex-float-1 { width: 160px; top:  18%; right:  6%; animation-delay: 0s; }
.hex-float-2 { width: 110px; top:  62%; left:   4%; animation-delay: -5s; }
.hex-float-3 { width:  64px; top:  10%; left:  12%; animation-delay: -9s; opacity: 0.40; }
.hex-float-4 { width:  84px; top:  78%; right:  18%; animation-delay: -12s; opacity: 0.35; }

@keyframes hexDrift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(6deg); }
}

[dir="rtl"] .hex-float-1 { right: auto; left:  6%; }
[dir="rtl"] .hex-float-2 { left: auto;  right: 4%; }
[dir="rtl"] .hex-float-3 { left: auto;  right: 12%; }
[dir="rtl"] .hex-float-4 { right: auto; left:  18%; }

@media (max-width: 700px) {
    .hex-float-3, .hex-float-4 { display: none; }
    .hex-float-1 { width: 110px; }
    .hex-float-2 { width: 80px; }
}

/* =========================================================
   7.  Logo mosaic chip — small homage block for accent spots
       Tiny tessellated hex group inspired by the logo cloud
   ========================================================= */
.hex-cluster {
    display: inline-grid;
    grid-template-columns: repeat(3, 14px);
    gap: 2px;
    vertical-align: middle;
}
.hex-cluster i {
    display: block;
    width: 14px;
    aspect-ratio: 1 / 0.866;
    clip-path: var(--hex-clip);
    -webkit-clip-path: var(--hex-clip);
    background: var(--blue-bright);
}
.hex-cluster i:nth-child(1) { background: #2a4fd6; }
.hex-cluster i:nth-child(2) { background: #7d99ff; }
.hex-cluster i:nth-child(3) { background: #c5cee6; }
.hex-cluster i:nth-child(4) { background: #5b7dff; }
.hex-cluster i:nth-child(5) { background: #ffffff; opacity: 0.9; }
.hex-cluster i:nth-child(6) { background: #2a3a78; }

/* =========================================================
   8.  Reduced-motion + print
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .hex-float { animation: none; }
}
@media print {
    .hex-float, .has-hex-bg::before,
    .hero-section::before, .service-hero::before, .suite-hero::before,
    .solution-hero::before, .suite-foundation::before { display: none !important; }
}