/* ForceVPS visual layer for Grav. It mirrors the public WHMCS footer
 * structure while keeping Quark2's light / dark content modes. */
:root { --forcevps-blue:#0667ed; --forcevps-blue-hover:#0057d9; --forcevps-header-border:#e7ecf3; --forcevps-header-shadow:0 5px 22px rgba(16,45,80,.06); --forcevps-footer-text:#fff; --forcevps-footer-muted:#9ba5b5; --forcevps-footer-border:rgba(255,255,255,.15); }
:root[data-theme="dark"] { --forcevps-header-border:#1d2633; --forcevps-header-shadow:none; }

#header { background:var(--pico-background-color); border-bottom:1px solid var(--forcevps-header-border); box-shadow:var(--forcevps-header-shadow); }
.navbar-brand img,.forcevps-header-logo { display:block; width:auto; max-width:190px; max-height:42px; }
:root[data-theme="dark"] .forcevps-header-logo { content:url("../images/forcevps/logo-text.svg"); }

.forcevps-header-links { display:flex; align-items:center; gap:1.1rem; margin-right:.35rem; }
.forcevps-header-links a { color:var(--pico-color); font-size:.86rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.forcevps-header-links a:hover { color:var(--forcevps-blue); }
.forcevps-header-links .forcevps-header-login { padding:.48rem .85rem; color:#fff; background:var(--forcevps-blue); border-radius:999px; }
.forcevps-header-links .forcevps-header-login:hover { color:#fff; background:var(--forcevps-blue-hover); }
.forcevps-language-switcher { position:relative; margin:0; padding-left:.85rem; border-left:1px solid var(--forcevps-header-border); }
.forcevps-language-switcher summary { display:flex; align-items:center; gap:.42rem; padding:.5rem .65rem; color:var(--pico-color); background:var(--q2-bg-elev); border:1px solid transparent; border-radius:999px; box-shadow:0 4px 14px rgba(17,24,39,.08); cursor:pointer; font-size:.82rem; font-weight:700; line-height:1; list-style:none; }
.forcevps-language-switcher summary::-webkit-details-marker { display:none; }
.forcevps-language-switcher[open] summary { border-color:var(--forcevps-header-border); }
.forcevps-language-switcher nav { position:absolute; z-index:20; top:calc(100% + .55rem); right:0; display:grid; min-width:112px; padding:.35rem; background:var(--q2-bg-elev); border:1px solid var(--forcevps-header-border); border-radius:18px; box-shadow:0 14px 30px rgba(17,24,39,.16); }
.forcevps-language-switcher a { display:flex; align-items:center; gap:.55rem; padding:.62rem .7rem; color:var(--pico-color); border-radius:12px; font-size:.82rem; font-weight:700; text-decoration:none; }
.forcevps-language-switcher a:hover { color:var(--forcevps-blue); background:var(--q2-bg-muted); }
.forcevps-language-switcher a[aria-current="page"] { color:var(--forcevps-blue); background:color-mix(in srgb,var(--forcevps-blue) 10%,transparent); }
:root[data-theme="dark"] .forcevps-language-switcher summary,:root[data-theme="dark"] .forcevps-language-switcher nav { box-shadow:0 10px 28px rgba(0,0,0,.42); }
.theme-toggle { border-radius:9px; }

/* This component intentionally stays dark in both colour schemes, matching
 * the main ForceVPS CMS instead of becoming a separate light footer design. */
.forcevps-footer#footer { position:relative; isolation:isolate; margin-top:4rem; padding:3.75rem 0 2.2rem; color:var(--forcevps-footer-text); background:#1d1d1d; border:0; overflow:hidden; text-align:left; transition:background-color .2s ease,border-color .2s ease,color .2s ease; }
.forcevps-footer#footer::before { position:absolute; z-index:0; inset:0; background:radial-gradient(900px 420px at 15% 0%,#3d3d3d 0%,#2d2d2d 48%,#1d1d1d 100%); content:""; opacity:1; transition:opacity .2s ease; }
.forcevps-footer#footer > .container { position:relative; z-index:1; }
:root[data-theme="dark"] .forcevps-footer#footer { background:var(--q2-bg); border-top:1px solid var(--q2-divider); }
:root[data-theme="dark"] .forcevps-footer#footer::before { opacity:0; }
.forcevps-footer__top { display:grid; grid-template-columns:minmax(230px,1.25fr) repeat(3,minmax(155px,1fr)); gap:2.5rem 3rem; }
.forcevps-footer__block { min-width:0; }
.forcevps-footer__logo img { display:block; width:auto; max-width:185px; max-height:42px; }
.forcevps-footer__description { max-width:270px; margin:1.15rem 0 0; color:#d3d6dc; font-size:.92rem; line-height:1.5; }
.forcevps-footer#footer .forcevps-footer__title { margin:.25rem 0 1.35rem; color:#fff; font-size:1rem; font-weight:750; }
.forcevps-footer__list { display:grid; gap:.82rem; margin:0; padding:0; list-style:none; }
.forcevps-footer__list > li { margin:0; padding:0; list-style:none; }
.forcevps-footer__list > li::marker { content:''; }
.forcevps-footer#footer .forcevps-footer__list a { color:#b6beca; font-size:.92rem; line-height:1.35; text-decoration:none; transition:color .2s ease; }
.forcevps-footer#footer .forcevps-footer__list a:hover,.forcevps-footer#footer .forcevps-footer__legal a:hover { color:#fff; }
.forcevps-footer__list--contacts { gap:1.05rem; }
.forcevps-footer__list--contacts a { display:grid; gap:.12rem; }
.forcevps-footer#footer .forcevps-footer__list--contacts strong { color:#fff; font-size:.9rem; }
.forcevps-footer#footer .forcevps-footer__list--contacts small { color:#b6beca; font-size:.78rem; }
.forcevps-footer__telegram { display:flex !important; align-items:center; gap:.75rem !important; }
.forcevps-footer__telegram-icon { display:grid; flex:0 0 2.65rem; width:2.65rem; height:2.65rem; place-items:center; color:#fff; background:#25a6e9; border-radius:50%; font-size:1.25rem; transform:rotate(-25deg); }

.forcevps-footer__bottom { display:flex; justify-content:space-between; gap:1rem; margin-top:3.25rem; padding-top:2.1rem; color:#89919d; border-top:1px solid var(--forcevps-footer-border); font-size:.82rem; }
.forcevps-footer__legal { display:flex; gap:1.5rem; }
.forcevps-footer#footer .forcevps-footer__legal a { color:#d7d9de; text-decoration:none; }
.forcevps-footer__description,.forcevps-footer__list a,.forcevps-footer__list--contacts strong,.forcevps-footer__list--contacts small,.forcevps-footer__bottom { transition:color .2s ease,border-color .2s ease; }
@media (prefers-reduced-motion:reduce) { .forcevps-footer#footer,.forcevps-footer#footer::before,.forcevps-footer__description,.forcevps-footer__list a,.forcevps-footer__list--contacts strong,.forcevps-footer__list--contacts small,.forcevps-footer__bottom { transition:none; } }

@media (max-width:980px) { .forcevps-header-links { display:none; } .forcevps-language-switcher { margin-right:.25rem; padding-left:0; border-left:0; } .forcevps-footer__top { grid-template-columns:repeat(2,minmax(0,1fr)); } .forcevps-footer__brand { grid-column:1 / -1; } }
@media (max-width:560px) { .forcevps-footer#footer { padding:3rem 0 1.5rem; } .forcevps-footer__top { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.25rem; } .forcevps-footer__brand,.forcevps-footer__block:last-child { grid-column:1 / -1; } .forcevps-footer__bottom { align-items:flex-start; flex-direction:column; margin-top:2.25rem; padding-top:1.5rem; } }

/* Contextual blog navigation: follows the same desktop / mobile behaviour as
 * the source WHMCS floating navigation, but its entries come from Grav pages. */
.forcevps-section-nav { position:fixed; z-index:45; top:50%; right:24px; width:min(220px,calc(100vw - 48px)); transform:translateY(-50%); }
.forcevps-section-nav__inner { display:flex; flex-direction:column; gap:.35rem; padding:.75rem; background:color-mix(in srgb,var(--q2-bg-elev) 96%,transparent); border:1px solid var(--q2-divider); border-radius:20px; box-shadow:0 18px 40px color-mix(in srgb,var(--q2-color) 12%,transparent); }
.forcevps-section-nav__tree,.forcevps-section-nav__children { display:grid; gap:.35rem; margin:0; padding:0; list-style:none; }
.forcevps-section-nav__children { margin:.1rem 0 .1rem 1rem; padding-left:.5rem; border-left:1px solid var(--q2-divider); }
.forcevps-section-nav__item { margin:0; padding:0; }
.forcevps-section-nav__link { display:flex; align-items:center; gap:.65rem; min-height:38px; padding:.5rem .65rem; color:var(--pico-color); border-radius:12px; font-size:.82rem; font-weight:700; line-height:1.2; text-decoration:none; white-space:normal; overflow-wrap:anywhere; transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.forcevps-section-nav__link:hover { color:var(--forcevps-blue); background:color-mix(in srgb,var(--forcevps-blue) 7%,transparent); }
.forcevps-section-nav__link.is-active { color:var(--pico-color); background:color-mix(in srgb,var(--forcevps-blue) 15%,var(--q2-bg-elev)); }
.forcevps-section-nav__icon { display:grid; flex:0 0 22px; width:22px; height:22px; place-items:center; color:var(--q2-text-muted); background:var(--q2-bg-muted); border-radius:8px; font-size:.68rem; transition:background-color .2s ease,color .2s ease; }
.forcevps-section-nav__link:hover .forcevps-section-nav__icon,.forcevps-section-nav__link.is-active .forcevps-section-nav__icon { color:var(--forcevps-blue); background:color-mix(in srgb,var(--forcevps-blue) 12%,transparent); }
.forcevps-section-nav__link--root { margin-bottom:.15rem; border-bottom:1px solid var(--q2-divider); border-radius:12px 12px 8px 8px; }
.forcevps-section-nav__link:focus-visible { outline:2px solid color-mix(in srgb,var(--forcevps-blue) 45%,transparent); outline-offset:2px; }
.forcevps-section-nav__all { position:relative; margin:0; padding:0; border:0; }
.forcevps-section-nav__all > summary { margin:0; list-style:none; cursor:pointer; }
.forcevps-section-nav__all[open] > summary { margin-bottom:0; }
.forcevps-section-nav__all > summary::-webkit-details-marker,.forcevps-section-nav__all > summary::marker,.forcevps-section-nav__all > summary::after { display:none; content:none; }
.forcevps-section-nav__all-indicator { display:grid; width:1.25rem; height:1.25rem; margin-left:auto; place-items:center; color:var(--q2-text-muted); font-size:.72rem; transition:transform .18s ease,color .18s ease; }
.forcevps-section-nav__all:hover .forcevps-section-nav__all-indicator,.forcevps-section-nav__all:focus-within .forcevps-section-nav__all-indicator,.forcevps-section-nav__all[open] .forcevps-section-nav__all-indicator { color:var(--forcevps-blue); transform:translateX(-.18rem); }
.forcevps-section-nav__all-panel { position:absolute; top:0; right:calc(100% + .75rem); display:grid; width:min(300px,calc(100vw - 300px)); max-height:min(70vh,620px); padding:.75rem; overflow:auto; background:color-mix(in srgb,var(--q2-bg-elev) 98%,transparent); border:1px solid var(--q2-divider); border-radius:20px; box-shadow:0 18px 40px color-mix(in srgb,var(--q2-color) 16%,transparent); opacity:0; pointer-events:none; transform:translateX(.5rem); transition:opacity .18s ease,transform .18s ease; }
.forcevps-section-nav__all:hover .forcevps-section-nav__all-panel,.forcevps-section-nav__all:focus-within .forcevps-section-nav__all-panel,.forcevps-section-nav__all[open] .forcevps-section-nav__all-panel { opacity:1; pointer-events:auto; transform:translateX(0); }
.forcevps-section-nav__all-panel .forcevps-section-nav__tree { width:100%; }

@media (max-width:1199px) {
  body:has(.forcevps-section-nav) #page-wrapper { padding-bottom:88px; }
  .forcevps-section-nav { top:auto; right:0; bottom:0; left:0; width:auto; transform:none; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg,color-mix(in srgb,var(--q2-bg) 0%,transparent) 0%,color-mix(in srgb,var(--q2-bg) 92%,transparent) 24%,var(--q2-bg) 100%); }
  .forcevps-section-nav::before { position:absolute; z-index:2; top:10px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); width:3.5rem; background:linear-gradient(90deg,transparent,var(--q2-bg) 72%); content:''; pointer-events:none; }
  .forcevps-section-nav::after { position:absolute; z-index:3; top:50%; right:1.1rem; display:grid; width:1.5rem; height:1.5rem; place-items:center; color:var(--forcevps-blue); background:color-mix(in srgb,var(--q2-bg-elev) 88%,transparent); border:1px solid var(--q2-divider); border-radius:50%; content:'›'; font-size:1.25rem; line-height:1; pointer-events:none; transform:translateY(-50%); box-shadow:0 3px 10px color-mix(in srgb,var(--q2-color) 12%,transparent); }
  .forcevps-section-nav__inner { display:flex; flex-direction:row; gap:.5rem; padding:.5rem .5rem .7rem; overflow-x:auto; border-radius:16px; scroll-behavior:smooth; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--forcevps-blue) 65%,transparent) transparent; }
  .forcevps-section-nav__inner::-webkit-scrollbar { display:block; height:4px; }
  .forcevps-section-nav__inner::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--forcevps-blue) 65%,transparent); border-radius:999px; }
  .forcevps-section-nav__inner::-webkit-scrollbar-track { background:transparent; }
  .forcevps-section-nav__tree,.forcevps-section-nav__children { display:contents; }
  .forcevps-section-nav__item { display:contents; }
  .forcevps-section-nav__all { position:static; display:block; flex:0 0 auto; margin:0; padding:0; border:0; }
  .forcevps-section-nav__all > summary { display:flex; }
  .forcevps-section-nav__all-panel { position:fixed; z-index:46; top:auto; right:12px; bottom:82px; left:12px; display:grid; width:auto; max-height:min(58vh,520px); padding:.75rem; transform:translateY(.5rem); }
  .forcevps-section-nav__all[open] .forcevps-section-nav__all-panel { transform:translateY(0); }
  .forcevps-section-nav__link { flex:0 0 auto; min-height:42px; padding:.62rem .85rem; background:var(--q2-bg-elev); border:1px solid var(--q2-divider); box-shadow:0 8px 18px color-mix(in srgb,var(--q2-color) 5%,transparent); scroll-snap-align:center; white-space:nowrap; }
  .forcevps-section-nav__all-panel .forcevps-section-nav__link { white-space:normal; overflow-wrap:anywhere; }
  .forcevps-section-nav__link--root { margin:0 .25rem 0 0; border-radius:12px; }
  .forcevps-section-nav__link.is-active { border-color:color-mix(in srgb,var(--forcevps-blue) 32%,var(--q2-divider)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--forcevps-blue) 14%,transparent),0 10px 20px color-mix(in srgb,var(--forcevps-blue) 8%,transparent); }
}

@media (prefers-reduced-motion:reduce) { .forcevps-section-nav__link,.forcevps-section-nav__icon,.forcevps-section-nav__all-panel { transition:none; } .forcevps-section-nav__inner { scroll-behavior:auto; } }

/* While the full list is open, it is the only active navigation action. */
.forcevps-section-nav__inner:has(.forcevps-section-nav__all[open]) .forcevps-section-nav__link.is-active:not(.forcevps-section-nav__all-trigger) { color:var(--pico-color); background:transparent; border-color:transparent; box-shadow:none; }
.forcevps-section-nav__inner:has(.forcevps-section-nav__all[open]) .forcevps-section-nav__all-trigger { color:var(--pico-color); background:color-mix(in srgb,var(--forcevps-blue) 15%,var(--q2-bg-elev)); border-color:color-mix(in srgb,var(--forcevps-blue) 32%,var(--q2-divider)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--forcevps-blue) 14%,transparent),0 10px 20px color-mix(in srgb,var(--forcevps-blue) 8%,transparent); }

/* Keep blog previews aligned even when article titles and summaries differ. */
.blog-grid > .card { height:31rem; }
.blog-grid > .card .card-body { overflow:hidden; }
@media (max-width:559px) { .blog-grid > .card { height:34rem; } }
@media (min-width:1200px) {
  .blog-grid,
  .columns.has-sidebar .blog-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}