/*
	Theme Name: Archagel Defense
	Theme URL: http://archangeldefense.world
	Description: This is a is a child theme for Primer. 
	Author: World Web Wizards
	Author URI: http://www.worldwebwizards.com/
	Version: 1.0.0
 	License: GPL-2.0
	
	Template: primer
 	Tags: custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, left-sidebar, one-column, right-sidebar, rtl-language-support, sticky-post, threaded-comments, three-columns, translation-ready, two-columns
 
	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * 														    *       
 * 						 Project Start Date: 01/01/2025	    *
 *                       Publication Date:             	    * 
 * 						 Last Modification Date: 08/12/2025	*
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Animation 
 
     USAGE: 
     -webkit-animation: fadein 2s;
        -moz-animation: fadein 2s;
         -ms-animation: fadein 2s;
          -o-animation: fadein 2s;
             animation: fadein 2s;
*/



@keyframes fadein { from { opacity: 0; } to   { opacity: 1; }}
@-moz-keyframes fadein { from { opacity: 0; } to   { opacity: 1; }} /* Firefox < 16 */
@-webkit-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */
@-ms-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Internet Explorer */
@-o-keyframes fadein { from { opacity: 0; } to   { opacity: 1; } } /* Opera < 12.1 */

/* Global */
body {overflow-x: hidden}
object {pointer-events: none;}
html {scroll-behavior: smooth;} /* USAGE: <a href="#"></a> */
h1, h2, h3, h4, h5, h6, .site-title, .page-title {color:white}


/* ======================= */
/* =  GLOBAL STYLES     = */
/* ======================= */

.site-header,
.site-header-wrapper {
  background-color: rgba(0, 0, 0, 1) !important;
  max-width: inherit;
  margin: 0;
}

.main-navigation-container {
  background-color: transparent;
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  gap: 30px;
  width: auto;
}

#menu-no-mega {max-width: 333px}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
	height: 35px;
	line-height: normal;
}
.main-navigation a, .main-navigation .expand { padding: 0}

.main-navigation li {
	height:35px;
	line-height:normal;
	padding:.6rem 1rem;
}
.main-navigation ul li a:hover, .main-navigation ul li a:focus {background-color: transparent !important;}

.main-navigation ul li a {
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
}

.main-navigation ul li a:hover,
.main-navigation ul li a:focus {
  background-color: rgba(255, 255, 240, 0.3);
  text-decoration: none;
}

.custom-logo-link img {
  max-width: 180px;
  float: left;
}

.site-text-group {padding-top:21px}

.site-title-wrapper {
  padding: 0;
  display: flex;
  gap: 10px;
  flex-shrink: 1;
  min-width: 0;
  width: auto;
  flex-wrap: wrap; /* allow wrapping to new lines */
  align-items: flex-start;
}

.site-title {
  clear: inherit;
  font-size: 2em;
  width: 100%;
  line-height: .81;
  padding-left: 21px;
}

.site-title a:hover,
.site-title a:focus {
  text-decoration: none;
}

.site-description{font-style:italic}

a:visited {
  color: white;
}

.hentry,
.page-content,
.entry-content,
.entry-summary {
  margin: 0;
  padding: 0;
  background-color:#222;
}

.site-content {
  max-width: inherit;
}

/* ======================= */
/* =  ADMIN BAR FIXES    = */
/* ======================= */

body.admin-bar {
  margin-top: 32px;
}

#wpadminbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

/* ======================= */
/* =  HEADER STRUCTURE   = */
/* ======================= */

#masthead {
  overflow: visible;
  background-color: #f1f1f1;
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
  padding: 9px;
}

.custom-logo-link {
  transition: 0.4s;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 20px;
}


/* ======================= */
/* =  HEADER BUTTONS     = */
/* ======================= */

.header-buttons {
  padding-right: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header-buttons .header-btn {
  background-color: #FFC000;
  color: rgba(104, 0, 122, 0.8);
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 1px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease;
  text-transform: uppercase;
}

.header-buttons .header-btn:hover {
 
}

/* ======================= */
/* =  HOME SPLASH STYLES = */
/* ======================= */

#splash-container {
  position: relative;
  min-height: 100vh;
}

#splash-top {
  position: relative;
  width: 100%;
}

#splash-bottom {
  position: absolute;
  bottom: 27%;
}

/* ======================= */
/* =  INNER PAGE MENU    = */
/* ======================= */

/* Style the tab container */
.tab {
  box-sizing: border-box;
  float: left;
  border: 1px solid #444; /* Darker border */
  background-color: #222;  /* Dark background */
  height: 300px;
  color: white;  /* White text inside the tab container */
}

/* Style the buttons that are used to open the tab content */
.tab button {
  box-sizing: border-box;
  display: block;
  background-color: inherit;
  color: white; /* White text on buttons */
  padding: 9px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  border-bottom: 1px solid #444; /* Light border separating buttons */
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #555;  /* Lighter gray on hover */
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #333;  /* Darker background for active tab */
  border-bottom: 2px solid #bbb; /* Light border at the bottom of active tab */
}

/* Style the tab content */
.tabcontent {
  box-sizing: border-box;
  float: left;
  padding: 0px 12px;
  border: 1px solid #444; /* Darker border for content */
  width: auto;
  border-left: none;
  height: auto;
  display: none;
  background-color: #333; /* Dark background for content */
  color: white; /* White text inside the content */
}

/* Show the first tab by default */
.tabcontent:first-of-type {
    display: block;
}



/* ======================= */
/* =  FOOTER	         = */
/* ======================= */
.site-info-text{
	color:white;
	text-align:center;
	padding: 40px 0 40px 0;
}
.site-info-wrapper{display:none}

/* ======================= */
/* =  MOBILE STYLES      = */
/* ======================= */

@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .site-title-wrapper {
    order: 1;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .menu-toggle {
    order: 2;
    align-self: center;
    font-size: 2rem;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .main-navigation-container {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .main-navigation {
    display: none;
    flex-direction: column;
    align-items: center;
    background-color: #1a1a1a;
    padding: 10px 0;
    width: 100%;
  }

  body.toggled-on .main-navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }

  .main-navigation .menu {
    flex-direction: column;
    gap: 15px;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
  }

  .main-navigation .menu li,
  .main-navigation .menu a {
    width: 100%;
    text-align: center;
  }

  .main-navigation .menu a {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 16px;
    background-color: #333;
    border-radius: 6px;
    margin: 0 auto;
    transition: background-color 0.3s;
  }

  .main-navigation .menu a:hover,
  .main-navigation .menu a:focus {
    background-color: #555;
  }

  .header-buttons {
    width: 100%;
    padding: 15px 20px;
    gap: 12px;
    align-items: stretch;
  }

  .header-buttons .header-btn {
    font-size: 1.25rem;
    padding: 14px;
    font-weight: bold;
  }
  
  
}

/* ======================= */
/* =  RESPONSIVE TWEAKS  = */
/* ======================= */
@media only screen and (min-width: 61.063em) {
.layout-one-column-wide .content-area,
.layout-one-column-wide #secondary,
.layout-one-column-wide #tertiary,
.layout-one-column-narrow .content-area,
.layout-one-column-narrow #secondary,
.layout-one-column-narrow #tertiary {
	width: 100%;
	margin:0;
	}
}

/* JOHNS LAPTOP */
@media only screen and (max-width: 992px) {
  .site-title-wrapper {
    max-width: 100%;
  }

  .site-title {
    clear: both;
    float: none;
    margin: 0;
    text-align: center;
    padding-left: 9px;
}

  .expand,
  .header-buttons{display:none}
  
  #menu-no-mega {max-width: none}
  
  .main-navigation li {height:auto}  
  
  .menu-toggle {padding: 5.5px}
  
  #splash-top {top:250px}
  #splash-bottom {bottom: 11%}
  
}

/* Johns Phone*/
@media screen and (max-width: 718px) and (max-height: 469px) and (orientation: landscape) {
	#splash-top {top:0}
}
@media screen and (max-width: 320px) and (max-height: 685px) and (orientation: portrait) {}
@media screen and (max-width: 597px) and (max-height: 586px) and (orientation: landscape) {
	#splash-top {top:0}
}
/* Johns Computer */
@media screen and (max-width: 960px) and (max-height: 452px) and (orientation: landscape) {}
/* My Phone Landscape */
@media screen and (max-width: 832px) and (max-height: 334px) and (orientation: landscape) {
	#splash-top {top:0}
}


/************ CELL PHONES ************/
@media only screen and (max-width: 736px) {
	/* Apply padding-top: 80px to all pages except the homepage */
	body:not(.home) .hentry,
	body:not(.home) .page-content,
	body:not(.home) .entry-content,
	body:not(.home) .entry-summary {
	  padding-top: 80px;
	}

}



/* ======================= */
/* =  DEBUG WIDGET       = */
/* ======================= */

#debug-widget {
  position: fixed;
  top: 10px;
  left: 10px;
  background: #121212cc;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 10px;
  z-index: 9999;
  width: 220px;
  box-shadow: 0 0 10px #0006;
  user-select: none;
  cursor: grab;
}

#debug-widget:active {
  cursor: grabbing;
}

#drag-header {
  font-weight: bold;
  border-bottom: 1px solid #555;
  margin-bottom: 5px;
  padding-bottom: 3px;
}

#debug-info {
  line-height: 1.4em;
}