/*-------------------------------------------------*/
/* Theme Name: Hexalot Box
/* Theme URI:
/* Author: Hexastyle.com.au
/* Author URI:
/* Description: Neat and Tidy, practical consistent efficient streamlined functionality and sophisticated. 
/* Version: 1.0
/* Requires at least: 5.8
/* Tested up to: 5.8
/* Requires PHP: 7.4
/* License: GNU General Public License v2 or later
/* License URI: http://www.gnu.org/licenses/gpl-2.0.html
/* Text Domain: hexalot-box
/*-------------------------------------------------*/

/*-------------------------------------------------*/
/*  Font Options
/*-------------------------------------------------*/
@font-face {font-family:googleSF;  src: url('font/GoogleSF.ttf'); font-weight: 100 900;}
@font-face {font-family:jost;  src: url('font/jost.ttf'); font-weight: 100 900;}
@font-face {font-family:inter;  src: url('font/inter.ttf'); font-weight: 100 900;}
/* Display	*/
@font-face {font-family:digital;  src: url('font/DSEG7ClassicMini-Regular.ttf'); font-weight: 100 900;}
@font-face {font-family:lib3;	src: url('font/Library3amsoft.otf');	font-weight: 100 900;}
@font-face {font-family:rubikDoo;	src:url('font/RubikDoodleShadow-Regular.ttf'); font-weight: 100 900;}
@font-face {font-family:glitch;	src:url('font/RubikGlitch-Regular.ttf'); font-weight: 100 900;}
@font-face {font-family:shantell;	src:url('font/ShantellSans-VariableFont_BNCE,INFM,SPAC,wght.ttf'); font-weight: 100 900;}
/* handwriting	*/
@font-face {font-family:playwrite; src: url('font/PlaywriteCU-VariableFont_wght.ttf');font-weight: 100 900;}
/*	bilinguals		*/
@font-face {font-family:mp2; src: url('font/MPLUS2-Regular.ttf');	font-weight: 100 900;}
@font-face {font-family:murecho; src: url('font/Murecho-Regular.ttf'); font-weight: 100 900;}
/*	bilingual + bold	*/
@font-face {font-family:mocPop;	src: url('font/MochiyPopPOne-Regular.ttf');	font-weight: 100 900;}

/*-------------------------------------------------*/
/*  Debug: Show all boxes
/*-------------------------------------------------*/
/* {
  outline: 1px solid red !important;
} */

/*-------------------------------------------------*/
/*  大項目
/*-------------------------------------------------*/
html, body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  background-color: var(--hexlb-body-background);
  color:darkorange; 
  font-family:var(--hexlb-font-body),'murecho','mp2', sans-serif; 
  font-size: 1rem;
  background-blend-mode: overlay;
}
.grecaptcha-badge { visibility: hidden;}

/*-------------------------------------------------*/
/*  Admin Bar
/*-------------------------------------------------*/
.admin-bar .fixed-top,
.admin-bar .offcanvas { 
  top: 32px; 
}

@media (max-width: 768px) {
  .admin-bar .fixed-top,
  .admin-bar .offcanvas { 
    top: 46px; 
  }
}

/*-------------------------------------------------*/
/*  ディスプレイサイズ 表示/非表示	スイッチ  pc: mob:
/*-------------------------------------------------*/
.pc { display:inline-block;} 
.mob { display:none;}

/*-------------------------------------------------*/
/*  テキスト <h1> - <h6> <p> <a> <i> <span>
/*-------------------------------------------------*/
.front-title {
  letter-spacing: -0.07em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
}

p {
  font-size: 1rem;   
  line-height: 1.7; 
  margin-bottom: 1.5rem; 
}

p:last-child {
  margin-bottom: 0;
}

a {
  text-decoration: none;
  transition: color 0.3s ease, filter 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
  filter: brightness(1.2);
  text-shadow: 0 0 8px color-mix(in srgb, var(--hexlb-text-p), transparent 50%);
}


li { list-style-type: none; }
/*-------------------------------------------------*/
/*  Logos
/*-------------------------------------------------*/
.top-logo {
	display: flex;
	justify-content: center;
	/*background-image:url('image/icon/toplogo_bg.png');*/
	/*background-position: center; /* Center the image */
	/*background-repeat: repeat;  /*Do not repeat the image */
	/*background-size: cover;  /*Do not repeat the image */
}

.top-logo img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding:4px;
	width: 80%;
	height:auto;
}

.logo-name {
	display:block;
	text-align:center;
	font-weight:600;
  font-size:175%;
  color:var(--hexlb-brand-primary);
}

.logo-desc {
	display:block;
	text-align:center;
  color:var(--hexlb-brand-accent);
}

/*-------------------------------------------------*/
/*  Top Menu Navigation
/*-------------------------------------------------*/
.navbar {
  background-color: color-mix(in srgb, var(--hexlb-menu-background), transparent 15%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  box-shadow: 0 4px 20px rgba(247, 141, 167, 0.15);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 2. Main List: Flex layout */
.navbar ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
}

/* 3. List Item: Needed for dropdown positioning relative to parent */
.navbar li {
  position: relative;
}

/* 4. Links: Typography and Spacing */
.navbar li a {
  padding: 8px 15px;
  
  /* Flexbox for perfect alignment of text and icons */
  display: flex;
  align-items: center;
  white-space: nowrap; /* Prevents text wrapping */
  
  font-weight: 500;
  font-size: 1rem;
  color: var(--hexlb-top-menu-p);
  text-decoration: none;
  /*border-bottom:2px dotted rgba(0, 0, 0, 0.5);*/
  transition: all 0.3s ease;
}

/* Specific styling for manual icons (e.g., <i class="fa-solid...">) */
.navbar li a i {
  color: var(--hexlb-brand-primary); /* Brand color */
  margin-right: 8px;
  transition: color 0.3s ease;
}

/* 5. Hover state: The Glow effect */
.navbar li a:hover {
  color: white;
  
  /* Icy Silver Glow effect */
  text-shadow: 
    0 0 5px rgba(255, 255, 255, 0.8),
    0 0 10px var(--hexlb-text-p),
    0 0 20px var(--hexlb-text-p);
}

/* Make manual icons glow on hover */
.navbar li a:hover i {
  color: white;
  filter: drop-shadow(0 0 5px var(--hexlb-text-p));
}

/* 6. Automatic Dropdown Chevron */
/* Top-level menu chevron */
.navbar li.menu-item-has-children > a::after {
  content: '\f078'; /* FontAwesome Chevron Down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
  font-size: 0.75rem;
  color: var(--hexlb-brand-primary);
  border: none;
  transition: color 0.3s ease;
}

/* Hover state for chevron */
.navbar li.menu-item-has-children:hover > a::after {
  color: white;
  text-shadow: 0 0 5px var(--hexlb-text-p);
}

/* Sub-menu Right Chevron */
.navbar ul.sub-menu li.menu-item-has-children > a::after {
  content: '\f054'; /* FontAwesome Chevron Right */
}

/* 7. Sub-menu: Hidden vertical list (2nd Level) */
.navbar ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none; 
  flex-direction: column;
  min-width: 220px;
  
  /* Glassmorphism background */
  background-color: color-mix(in srgb, var(--hexlb-menu-background), transparent 5%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* Borders: Removed top border for seamless integration */
  border-top: none; 
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  
  /* Reset padding */
  padding: 0;
}

/* Sub-menu links spacing (Adjusted for compactness) */
.navbar ul.sub-menu li a {
  padding: 8px 15px;
  font-size: 0.95rem;
}

/* Sub-menu Right Chevron */
.navbar ul.sub-menu li.menu-item-has-children > a::after {
  content: '\f054'; /* FontAwesome Chevron Right */
  color: var(--hexlb-brand-primary);
  /* Push the arrow to the far right */
  margin-left: auto; 
}

/* 8. 3rd Level Sub-menu (Appears to the right) */
.navbar ul.sub-menu li ul.sub-menu {
  top: 0; 
  left: 100%;  
  margin-left: 0;   
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 9. Show sub-menu logic */
/* Show the direct child ul when hovering the parent li */
.navbar li:hover > ul.sub-menu {
  display: flex;
}

/*-------------------------------------------------*/
/*  Exstra Mobile Menu css
/*-------------------------------------------------*/
@media (max-width: 768px) {  
	.pc { display:none;}
	.mob { display:block;	}

  .navbar.mob #menu-mobile_menu li a {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    justify-content: center;
  }
	#menu-mobile_menu i.fa-solid {
		text-align:center;
		font-size:2rem;
	}

  #menu-mobile_menu p.mob-menu-desc {
    font-size:75%;
    margin: 0 auto;
		text-align:center;
		text-transform: uppercase;
		white-space:nowrap;
  }
}

/*-------------------------------------------------*/
/*  Widget Navigation Menu Reset
/*-------------------------------------------------*/

/* Reset the unordered list container */
.widget_nav_menu ul {
  padding: 0;
  margin: 0.75rem 1rem 0 1.25rem;
}

/* Reset individual list items */
.widget_nav_menu li {
  margin: 0;             /* Remove item spacing */
  padding: 0;            /* Remove item padding */
  list-style-type: none; /* Ensure no markers */
}

/* Reset links within the menu to fill the block */
.widget_nav_menu a {
  display: block;        /* Make the entire area clickable */
  box-shadow: none;      /* Remove any shadows */
}

/*-------------------------------------------------*/
/*  offcanvas menu	
/*-------------------------------------------------*/
.sponsors {
	padding:2px;
	text-align:center;
	font-size:90%;
	line-height:1.2rem;
	border-radius:10px;
	background-color:var(--hexlb-cool-accent) ;
}

/*-------------------------------------------------*/
/*  サイドバー＆メインパネル	
/*-------------------------------------------------*/
.main-container { display: grid; }

.resp-sidebar-a,
.resp-sidebar-b,
.resp-main,
.resp-sidebar-c {
  margin-top:0.6%;
  min-height:100%;
  overflow-x: hidden;
	overflow-y: auto;
  padding:5px;
}

.resp-sidebar-a {
	margin-left: 0.4px;
	width: 7%;
}

.resp-sidebar-b {
	left: 7%;
	width:15%;
  border-top-left-radius:4px;
  border-top-right-radius:4.5px;  /*  錯覚分  */
  box-shadow: inset -10px 0 2px -4px rgba(0, 0, 0, 0.4);
  /*border-right: 6px solid var(--hexlb-body-background);*/
  background-color:var(--hexlb-panel-background);
}

.resp-main {
	left:22%;
	width:62%;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	z-index: 0;
  background-color:var(--hexlb-panel-background);
}

.resp-sidebar-c {
	position: fixed;
  right: 0;
	width:16%;
	border-top-left-radius:4px;
	z-index: 1;
}

@media (max-width: 768px) {
  .resp-main {
    /* Restore the full width for mobile view */
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

/*-------------------------------------------------*/
/*  Widget
/*-------------------------------------------------*/
.widget-title {
  position: relative;
  padding:8px;
}

/*-------------------------------------------------*/
/*  Posts Arrow Previous & Next Nav
/*-------------------------------------------------*/
.post-arrows {
	position: relative;
	font-size: 95%;
	line-height:1.2;
	white-space:nowrap;
	color:var(--hexlb-text-a);
}

/*-------------------------------------------------*/
/*  テーブル
/*-------------------------------------------------*/
.table { 
	max-width:100%;
 }
.table th {
	text-align:center;
	vertical-align:middle;
	font-weight:600;
}
.table th, .table td {
	background-color:transparent;
}

/*-------------------------------------------------*/
/*  コンタクトフォーム
/*-------------------------------------------------*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
	padding:8px;
	background-color:transparent;
    color:var(--hexlb-text-p);
	border:2px solid var(--hexlb-brand-primary);
    width: 100%;
}
.wpcf7-not-valid-tip {
	color:var(--hexlb-brand-accent
  );
}

/*-------------------------------------------------*/
/*  Comment Area
/*-------------------------------------------------*/

/*  不要要素の非表示  */
span.says,
.comment-reply-title,
.required-field-message,
.comment-form-comment label,
span.required,
.comment-meta,
h3#comments,
.comment-form-url 
{	display:none; }

.comment-body p {
	margin:-1rem 0 0 4rem;
	padding:0 1rem 2rem 1rem;
	border-radius: 12px;
	font-size:90%;
	line-height:1.3;
	background-color:#493941;
}

.comment-body p:before {
	margin-left:-1.6rem;
	font-size:1.5rem;
	font-family:fontawesome;
	content: "\f0d9\f0d9\f0d9";
	color:#493941;
}

ol.comment-list{
	margin:0; padding:0;
}

li.comment{
	margin-bottom:2rem;
}

.fn a {
  color:var(--hexlb-text-p);
	font-style:normal;
}
.reply {
	float:right;
	margin-top:-2.3rem;
	margin-right:0.5rem;
	font-size:90%;
}

.comment-author img,
img.avatar {
	border-radius:50%;
}

textarea#comment {
	width:100%;
  	padding:14px;
  	color:var(--hexlb-text-p);
	background-color:transparent;
	border-radius:10px;
}

input[type="submit"],
input[type="button"] {
  display: block;      /* 中央寄せのためにブロック化 */
  margin-left: auto;   /* 左の余白を自動（中央へ） */
  margin-right: auto;  /* 右の余白を自動（中央へ） */

  min-width:50%;
  background: transparent;
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

input[type="submit"]:hover {
  border-color: whitesmoke;
  color: whitesmoke;
  background: rgba(255, 255, 255, 0.1);
}

.logged-in-as {
	color:var(--hexlb-brand-primary);
	padding-top:1.5rem;
	font-size:1.1em;
}

.comment-form-author input[type=text],
.comment-form-email input[type=text] {
	max-width:90%;
}

/*-------------------------------------------------*/
/*  Archive Page Styles 
/*-------------------------------------------------*/
.vel-archive-card {
  background-color: transparent;
  border-bottom: 2px solid rgba(239, 239, 239, 0.1);
  border-radius: 4px;
  transition: all 0.3s ease;
}
.vel-archive-card:hover {
  background-color: #1a1b3a;
  border-color: rgba(99, 179, 237, 0.4);
  transform: translateY(-2px); /* ホバー時に少し浮き上がる効果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.vel-archive-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  text-shadow: 2px 2px 5px gray;
}
.vel-archive-title {
  font-size: 1.3rem;
  color: #63b3ed;
  margin: 0;
  transition: color 0.2s;
}
.vel-archive-card:hover .vel-archive-title {
  color: #90cdf4;
}
.vel-archive-excerpt {
  color: #a0aec0;
  font-size: 0.9rem;
}
/* ページネーションの微調整 */
.vel-pagination .page-numbers {
  padding: 8px 12px;
  margin: 0 4px;
  background: #11122a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  text-decoration: none;
  border-radius: 4px;
}
.vel-pagination .page-numbers.current {
  background: #63b3ed;
  color: #11122a;
  border-color: #63b3ed;
}

/*-------------------------------------------------*/
/*  Footer
/*-------------------------------------------------*/
footer {
  margin-top: 4rem;
  padding: 3rem 0;
  text-align: center;
  position: relative;
  background-color:var(--hexlb-body-background);
  z-index:999;
}

footer::before {
  content: "";
  position: absolute;
  top: 2rem;
  left: 10%; 
  width: 80%;
  background: radial-gradient(circle, var(--hexlb-brand-accent) 0%, transparent 100%);
  opacity: 0.6;
}

/*-------------------------------------------------*/
/*  Placeholder Reset
/*-------------------------------------------------*/
input::placeholder,
textarea::placeholder {
    color: #adb5bd !important;
    opacity: 0.8 !important; 
}

::-webkit-input-placeholder { color: #adb5bd !important; opacity: 0.6 !important; }
:-ms-input-placeholder      { color: #adb5bd !important; opacity: 0.6 !important; }
::-moz-placeholder          { color: #adb5bd !important; opacity: 0.6 !important; }