/*
Theme Name: 1980 Static
Theme URI: https://www.1980-games.com/
Author: 1980-games
Description: Classic theme to match the legacy 1980-games static layout.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: games1980
*/

/* CSS Document */
html,body {
  background-color : #000000;
  scrollbar-track-color : #000000;
  scrollbar-shadow-color : #3D5D76;
  scrollbar-highlight-color : #dbfbfb;
  scrollbar-face-color : #395F77;
  scrollbar-darkshadow-color : #000000;
  scrollbar-3dlight-color : #3D5D76;
  scrollbar-arrow-color : #C1FFFF;
}

.pub { background-color : #FFFFCC; }

.scroll {
  overflow: auto;
  position: relative;
  left:0%;
  top: 0%;
  width: 152px;
  height: 266px;
  margin-top: 0;
  margin-left: 0;
}
.scrol10 {
  overflow: auto;
  position: relative;
  left:0%;
  top: 0%;
  width: 298px;
  height: 858px;
  margin-top: 0;
  margin-left: 0;
}

.scrol11 {
  overflow: auto;
  position: relative;
  left:0%;
  top: 0%;
  width: 185px;
  height: 878px;
  margin-top: 0;
  margin-left: 0;
}

.scroll-8 {
  overflow: auto;
  position: relative;
  left:0%;
  top: 0%;
  width: 126px;
  height: 360px;
  margin-top: 0;
  margin-left: 0;
}

.scroll-7 {
  overflow: auto;
  position: relative;
  left:0%;
  top: 0%;
  width: 336px;
  height: 820px;
  margin-top: 0;
  margin-left: 0;
}

.scroll-9 {
  overflow: auto;
  position: relative;
  left:0%;
  top: 0%;
  width: 152px;
  height: 212px;
  margin-top: 0;
  margin-left: 0;
}

.linkVideo {
  font-family: Times New Roman, Times, serif;
  font-size: 14px;
  font-weight: bold;
  color: #dbfbfb;
  text-decoration: none;
}

.img { border-color : #3D5D76; }

/* ===== Typography / legacy ===== */
.bleu14 {
  color: #CCFFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
}

.orange13P {
  color: #FFFFCC;
  font-family: Times New Roman, Times, serif;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
}

.bleu13P {
  color: #65C2BE;
  font-family: Times New Roman, Times, serif;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
}

.link14 {
  font-family: Times New Roman, Times, serif;
  font-size: 14px;
  font-weight: bold;
  color: #C1FFFF;
  text-decoration: none;
}
.link14:hover {
  font-family: Times New Roman, Times, serif;
  font-size: 14px;
  font-weight: bold;
  color: #FF6600;
  text-decoration: underline overline blink;
  background-color:#C1FFFF;
}

.link14bis {
  font-family: Times New Roman, Times, serif;
  font-size: 14px;
  font-weight: bold;
  color: #C1FFFF;
  text-decoration: none;
}
.link14bis:hover {
  font-family: Times New Roman, Times, serif;
  font-size: 14px;
  font-weight: bold;
  color: #FF6600;
  background-color:#C1FFFF;
}

.orange15 {
  color: #FF6600;
  font-family: Times New Roman, Times, serif;
  font-size: 15px;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}

.orange17 {
  color: #FF6600;
  font-family: Times New Roman, Times, serif;
  font-size: 17px;
  font-style: normal;
  font-weight: bold;
}

.orange15N {
  color: #FF6600;
  font-family: Times New Roman, Times, serif;
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
}

.orange13 {
  color: #FF6600;
  font-family: Times New Roman, Times, serif;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
}

.bleu13 {
  color: #C1FFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
}

.bleu12 {
  color: #C1FFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
}

.bleu16N {
  color: #C1FFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
}

.bleu22 {
  color: #C1FFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 22px;
  font-style: normal;
  font-weight: bold;
}

.bleu20 {
  color: #C1FFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
}

.bleu18 {
  color: #C1FFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 18px;
  font-style: normal;
  font-weight: bold;
}

.bleu15 {
  color: #C1FFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 15px;
  font-style: normal;
  font-weight: bold;
}

.bleu16 {
  color: #C1FFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
}

.titre15 {
  color: #85F1F1;
  font-family: Times New Roman, Times, serif;
  font-size: 15px;
  font-style: normal;
  font-weight: bold;
}

.blanc13 {
  color: #FFFFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
}

.blanc13NBis {
  color: #FFFFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
}

.blanc15N {
  color: #FFFFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
}

.blanc15 {
  color: #FFFFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 15px;
  font-style: normal;
  font-weight: bold;
}

.blanc14 {
  color: #FFFFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
}

.blanc17 {
  color: #FFFFFF;
  font-family: Times New Roman, Times, serif;
  font-size: 17px;
  font-style: normal;
  font-weight: bold;
}

.blanc13N {
  color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
}

.textfield1 {
  color: #000000;
  font-family: Times New Roman, Times, serif;
  border-width: 2px;
  font-size: 13px;
  border-color: #3D5D76;
}

.bouton1 {
  color: #dbfbfb;
  font-family: Times New Roman, Times, serif;
  border-width: 2px;
  font-size: 13px;
  border-color: #dbfbfb;
  background-color : #3D5D76;
}

.foooter {
  color: #666666;
  font-family: Times New Roman, Times, serif;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

/* --- WP compatibility tweaks --- */
img { max-width: none; height: auto; }

/* =========================
   HEADER: dropdown tab (no new images)
   ========================= */
.header-tabs { white-space: nowrap; }

.text-tab-dd{
  position:relative;
  display:inline-block;
  vertical-align:bottom;
  height:25px;
  line-height:25px;
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  font-weight:bold;
}
.text-tab-dd > a{
  display:inline-block;
  width:91px;
  height:25px;
  line-height:25px;
  text-align:center;
  text-decoration:none;
  color:#000;
  background:#d8d8d8;
  border:1px solid #666;
  border-bottom:0;
}
.text-tab-dd > a:hover,
.text-tab-dd > a:focus{
  background:#c6c6c6;
  text-decoration:none;
  outline:none;
}
.text-tab-dd-menu{
  display:none;
  position:absolute;
  left:0;
  top:25px;
  min-width:160px;
  background:#d8d8d8;
  border:1px solid #666;
  z-index:99999;
}
.text-tab-dd-menu a{
  display:block;
  padding:7px 10px;
  text-decoration:none;
  color:#000;
  font-weight:normal;
  font-size:12px;
  border-bottom:1px solid #666;
}
.text-tab-dd-menu a:hover,
.text-tab-dd-menu a:focus{
  background:#c6c6c6;
  outline:none;
}
.text-tab-dd:hover .text-tab-dd-menu,
.text-tab-dd:focus-within .text-tab-dd-menu{
  display:block;
}

/* =========================
   MOBILE BURGER MENU (matches your header.php)
   ========================= */
.nav-mobile{ display:none; }
.nav-desktop{ display:block; }

/* Put menu relative so dropdown positions correctly */
.nav-mobile{
  position:relative;
}

/* Button styled like a legacy tab, but clear "MENU" label */
.mobile-nav-btn{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:91px;
  height:25px;
  padding:0 6px;
  background:#d8d8d8;
  border:1px solid #666;
  border-bottom:0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color:#000;
  text-transform: uppercase;
}

.mobile-nav-btn:focus{
  outline:2px solid #99FFFF;
  outline-offset:2px;
}

/* Burger icon used by <span class="mobile-nav-icon"> */
.mobile-nav-icon{
  position:relative;
  width:18px;
  height:12px;
  display:inline-block;
}
.mobile-nav-icon::before,
.mobile-nav-icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#000;
}
.mobile-nav-icon::before{
  top:0;
  box-shadow: 0 5px 0 #000; /* middle line */
}
.mobile-nav-icon::after{
  bottom:0;
}

/* Dropdown panel */
.mobile-nav-menu{
  position:absolute;
  left:0;
  top:25px;
  min-width:220px;
  background:#d8d8d8;
  border:1px solid #666;
  z-index:99999;
}

/* Links inside panel */
.mobile-nav-link{
  display:block;
  padding:10px 12px;
  text-decoration:none;
  color:#000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-bottom:1px solid #666;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus{
  background:#c6c6c6;
  outline:none;
}

/* Divider */
.mobile-nav-sep{
  height:1px;
  background:#666;
}

/* Details dropdown inside mobile menu */
.mobile-nav-details{ margin:0; padding:0; }
.mobile-nav-summary{
  cursor:pointer;
  padding:10px 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  border-bottom:1px solid #666;
}
.mobile-nav-summary::-webkit-details-marker{ display:none; }
.mobile-nav-sub{ margin:0; padding:0; }

/* =========================
   RESPONSIVE FIXES
   ========================= */
@media (max-width: 768px){

  /* Let fixed-width legacy tables fit the screen */
  center{ display:block; }
  table[width="532"],
  table[width="813"]{
    width:100% !important;
    max-width:813px;
  }
  img[width="813"],
  img[width="728"]{
    max-width:100%;
    height:auto;
  }

  /* Swap desktop tabs for burger menu */
  .nav-desktop{ display:none !important; }
  .nav-mobile{
    display:inline-block !important;
    position:relative;
    padding:0 6px;
  }

  /* Prevent header overflow */
  .header-tabs{ white-space: normal; }

  /* Logo scaling */
  img[alt="1980-games.com"]{ max-width:220px; height:auto; }
}