/*
Theme Name: Stratosphynx
Theme URI: https://stratosphynx.com/
Author: Williwaw Studios OOD
Description: Free casino game simulations: seventy boards in five families, five languages, virtual points only. The pages, guides and boards ship inside the theme, so the site is complete as soon as the theme is activated.
Version: 2.2.0
Requires at least: 5.8
Requires PHP: 7.4
License: Proprietary
Text Domain: stratosphynx
*/

/* The site's own styles live in assets/css/. Only WordPress-specific adjustments belong here. */

/* The Stratosphynx wordmark is longer than the bar was first drawn for. */
@media (max-width:1320px){ .logo-img{height:28px} }
@media (max-width:520px){ .logo-img{height:23px} }
@media (max-width:400px){ .logo-img{height:19px} }
.f-logo{max-width:100%;height:auto;max-height:30px}

/* Keep the sticky bar and the mobile menu clear of the WordPress admin bar. */
.admin-bar nav{top:32px}
.admin-bar .mobile-menu{top:102px}
@media (max-width:980px){ .admin-bar .mobile-menu{top:94px} }
@media screen and (max-width:782px){
  .admin-bar nav{top:46px}
  .admin-bar .mobile-menu{top:108px}
}
@media screen and (max-width:600px){ .admin-bar nav{top:0} }

/* Ordinary WordPress posts and pages, if any are published. */
.sz-entry{margin-bottom:44px}
.sz-entry img{height:auto;border-radius:10px;margin:12px 0}
.sz-pager{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* =========================================================================
   Lapis and gold: the Egyptian look. Colours in assets/css were remapped at
   build time; this block sets the palette, the type and the ornament.
   ====================================================================== */
:root{
  --sz-bg:#0a1330;
  --sz-bg2:#0f1b40;
  --sz-bg3:#16254f;
  --sz-blue:#1f8f88;
  --sz-blue-hi:#3fcfc4;
  --sz-blue-dim:#14504d;
  --sz-amber:#d8b055;
  --sz-amber-hi:#efd28a;
  --sz-amber-dim:#7c6427;
  --sz-ink:#f6eedb;
  --sz-mute:rgba(246,238,219,0.62);
  --sz-line:rgba(216,176,85,0.30);
  --sz-line2:rgba(246,238,219,0.10);
  --sz-edge:rgba(216,176,85,0.34);
  --sz-edge-hi:rgba(239,210,138,0.92);
  --sz-edge-soft:rgba(216,176,85,0.10);
  --sz-danger:#d9573f;
  --sz-carnelian:#b8452f;
  --sz-collar:repeating-linear-gradient(90deg,
    var(--sz-amber) 0 22px,var(--sz-bg) 22px 26px,
    var(--sz-blue) 26px 48px,var(--sz-bg) 48px 52px,
    var(--sz-carnelian) 52px 62px,var(--sz-bg) 62px 66px);
}
html{background:var(--sz-bg)}
body{
  background:
    radial-gradient(ellipse 60% 38% at 50% -6%,rgba(216,176,85,0.16),transparent 70%),
    radial-gradient(ellipse 45% 34% at 96% 4%,rgba(31,143,136,0.16),transparent 70%),
    linear-gradient(135deg,rgba(246,238,219,0.022) 25%,transparent 25%) 0 0/46px 46px,
    linear-gradient(225deg,rgba(246,238,219,0.022) 25%,transparent 25%) 0 0/46px 46px,
    linear-gradient(180deg,#0a1330,#070d24 1400px) ;
  font-size:1.02rem;
}
h1,h2,h3,h4{font-weight:700;letter-spacing:0}
.hero-band h1,.sec h2{letter-spacing:0.005em}

/* Collar band: gold, turquoise and carnelian beads, as on a broad collar. */
nav{background:var(--sz-collar) top left/auto 4px repeat-x,var(--sz-bg);border-bottom:1px solid var(--sz-amber-dim);
  box-shadow:0 3px 0 -1px var(--sz-bg),0 4px 0 -1px rgba(216,176,85,0.28)}
footer{background:var(--sz-collar) top left/auto 4px repeat-x,linear-gradient(180deg,rgba(15,27,64,0.6),#060b1f);
  border-top:none;padding-top:60px}
footer::before{display:none}
.nav-links a{text-transform:uppercase;font-size:0.78rem;letter-spacing:1.6px;font-weight:500}
.nav-links a::after{height:1px}
.logo-sub{letter-spacing:2.4px;color:rgba(216,176,85,0.7)}
.lang-btn.active{background:var(--sz-amber);color:#0a1123}

/* A small pyramid in place of the dash. */
.kicker{letter-spacing:3.2px}
.kicker::before{width:0;height:0;background:none;border-radius:0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--sz-amber)}

.btn{text-transform:uppercase;letter-spacing:1.3px;font-size:0.74rem;font-weight:600}
.btn-lg{font-size:0.84rem;padding:15px 30px}
.btn-solid,.mini.primary{background:linear-gradient(180deg,#efd28a,#d8b055 55%,#b98f3a);color:#1a1204;border-color:#b98f3a;font-weight:700}
.btn-solid:hover,.mini.primary:hover{background:linear-gradient(180deg,#f7e0a4,#e3bf68 55%,#c79c44);color:#1a1204}
.btn-ghost{border-color:var(--sz-edge)}
.mini{text-transform:uppercase;letter-spacing:1px;font-size:0.72rem}

/* Panels read as cut stone: square, a gold cap line, a faint inner frame. */
.card,.form-card,.fam,.gt,.step,.claim{border-top:2px solid var(--sz-amber);
  background:linear-gradient(180deg,rgba(22,37,79,0.9),rgba(15,27,64,0.92));
  box-shadow:0 0 0 1px var(--sz-edge-soft) inset,0 14px 30px -18px rgba(0,0,0,0.7)}
.card:hover,.fam:hover,.gt:hover{background:linear-gradient(180deg,rgba(28,46,96,0.95),rgba(18,31,72,0.95))}
.prose h2,.sec h2{position:relative}
.prose h2::after{content:'';display:block;width:54px;height:2px;margin-top:10px;
  background:linear-gradient(90deg,var(--sz-amber),transparent)}
.legal h2::after{display:none}
.prose th{background:rgba(216,176,85,0.10);border-bottom-color:var(--sz-amber-dim)}
.note{border-left-width:3px}
.field input,.field textarea,.field select,.chat-in input{background:#081027}
.fab{border-radius:50%}
::selection{background:rgba(216,176,85,0.35)}