/* Native American Name Generator Styles */

:root {
--primary: #6D4C41;
--secondary: #8D6E63;
--accent: #A1887F;
--light: #EFEBE9;
--dark: #4E342E;
--text: #333;
--white: #FFFFFF;
--highlight: #D7CCC8;
--vibrant1: #FF7043;
--vibrant2: #5D4037;
--vibrant3: #8D6E63;
--vibrant4: #A1887F;
--vibrant5: #BCAAA4;
}

* {
box-sizing: border-box;
}

.native-name-generator-wrapper {
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
color: var(--text);
background-color: #f5f5f5;
background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-attachment: fixed;
background-position: center;
padding: 20px;
min-height: 100vh;
}

.native-name-generator-wrapper .container {
max-width: 1200px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.97);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
}

.native-name-generator-wrapper .tool-header {
background: linear-gradient(135deg, var(--vibrant2), var(--vibrant1));
color: var(--white);
padding: 30px 0;
text-align: center;
margin-bottom: 0;
}

.native-name-generator-wrapper h1 {
font-family: 'Playfair Display', serif;
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.native-name-generator-wrapper .subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
}

.native-name-generator-wrapper .generator-section {
padding: 30px;
}

.native-name-generator-wrapper .form-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 25px;
}

.native-name-generator-wrapper .form-group {
flex: 1;
min-width: 200px;
}

.native-name-generator-wrapper label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--vibrant2);
}

.native-name-generator-wrapper select,
.native-name-generator-wrapper input[type="number"],
.native-name-generator-wrapper input[type="text"] {
width: 100%;
padding: 12px 15px;
border: 2px solid var(--vibrant5);
border-radius: 8px;
background-color: var(--white);
font-size: 1rem;
transition: all 0.3s;
}

.native-name-generator-wrapper select:focus,
.native-name-generator-wrapper input[type="number"]:focus,
.native-name-generator-wrapper input[type="text"]:focus {
outline: none;
border-color: var(--vibrant1);
box-shadow: 0 0 0 3px rgba(255, 112, 67, 0.2);
}

.native-name-generator-wrapper .gender-options {
display: flex;
gap: 15px;
flex-wrap: wrap;
}

.native-name-generator-wrapper .gender-option {
display: flex;
align-items: center;
background-color: var(--light);
padding: 10px 15px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
}

.native-name-generator-wrapper .gender-option:hover {
background-color: var(--highlight);
}

.native-name-generator-wrapper .gender-option input {
margin-right: 8px;
}

.native-name-generator-wrapper .btn {
background: linear-gradient(135deg, var(--vibrant1), var(--vibrant2));
color: white;
border: none;
padding: 14px 28px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
}

.native-name-generator-wrapper .btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, var(--vibrant2), var(--vibrant1));
}

.native-name-generator-wrapper .btn:active {
transform: translateY(0);
}

.native-name-generator-wrapper .results {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}

.native-name-generator-wrapper .name-card {
background-color: var(--white);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-left: 5px solid var(--vibrant1);
transition: transform 0.3s;
background: linear-gradient(to bottom right, #FFFFFF, #F5F5F5);
}

.native-name-generator-wrapper .name-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.native-name-generator-wrapper .name {
font-size: 1.4rem;
font-weight: 600;
color: var(--vibrant2);
margin-bottom: 5px;
}

.native-name-generator-wrapper .meta {
display: flex;
gap: 15px;
margin-bottom: 10px;
font-size: 0.9rem;
color: var(--vibrant1);
}

.native-name-generator-wrapper .meaning {
font-style: italic;
color: var(--dark);
line-height: 1.5;
}

.native-name-generator-wrapper .copy-btn {
background: linear-gradient(135deg, var(--vibrant3), var(--vibrant4));
color: white;
border: none;
padding: 8px 16px;
font-size: 0.9rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
display: inline-block;
}

.native-name-generator-wrapper .copy-btn:hover {
background: linear-gradient(135deg, var(--vibrant4), var(--vibrant3));
}

.native-name-generator-wrapper .name-table-container {
margin-top: 40px;
background-color: var(--white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.native-name-generator-wrapper .table-header {
background: linear-gradient(135deg, var(--vibrant2), var(--vibrant1));
color: var(--white);
padding: 15px 20px;
font-weight: 600;
font-size: 1.2rem;
}

.native-name-generator-wrapper .name-table {
width: 100%;
border-collapse: collapse;
}

.native-name-generator-wrapper .name-table th {
background-color: var(--vibrant3);
color: var(--white);
padding: 12px 15px;
text-align: left;
}

.native-name-generator-wrapper .name-table td {
padding: 12px 15px;
border-bottom: 1px solid var(--light);
}

.native-name-generator-wrapper .name-table tr:nth-child(even) {
background-color: rgba(239, 235, 233, 0.5);
}

.native-name-generator-wrapper .name-table tr:hover {
background-color: var(--highlight);
}

.native-name-generator-wrapper .tool-footer {
text-align: center;
padding: 30px;
color: var(--white);
font-size: 0.9rem;
background: linear-gradient(135deg, var(--vibrant2), var(--vibrant1));
margin-top: 30px;
border-radius: 0 0 12px 12px;
}

.native-name-generator-wrapper .tool-footer p {
margin: 5px 0;
}

@media (max-width: 768px) {
.native-name-generator-wrapper .form-row {
flex-direction: column;
gap: 15px;
}

.native-name-generator-wrapper .results {
grid-template-columns: 1fr;
}

.native-name-generator-wrapper h1 {
font-size: 2.2rem;
}

.native-name-generator-wrapper .name-table-container {
overflow-x: auto;
}

.native-name-generator-wrapper .name-table {
font-size: 0.9rem;
}

.native-name-generator-wrapper .name-table th,
.native-name-generator-wrapper .name-table td {
padding: 8px 10px;
}
}

@media (max-width: 480px) {
.native-name-generator-wrapper {
padding: 10px;
}

.native-name-generator-wrapper h1 {
font-size: 1.8rem;
}

.native-name-generator-wrapper .subtitle {
font-size: 1rem;
}

.native-name-generator-wrapper .generator-section {
padding: 20px;
}

.native-name-generator-wrapper .btn {
width: 100%;
padding: 12px 20px;
}
}

/* Hide pagination */
.native-name-generator-wrapper .pagination {
display: none !important;
}

.pagination {
display: none !important;
}

/* Fix Table of Contents - Remove sticky positioning */
#ez-toc-container,
.ez-toc-container,
.ez-toc-sticky-fixed {
position: static !important;
position: relative !important;
left: auto !important;
top: auto !important;
z-index: auto !important;
}

/* Remove fixed positioning from TOC */
.ez-toc-container.ez-toc-sticky-fixed {
position: static !important;
}

/* Move main navigation menu to RIGHT side of header */
.main-navigation,
.site-header .main-navigation,
#site-navigation,
.primary-menu,
nav.main-nav {
margin-left: auto !important;
margin-right: 0 !important;
}

/* If using flex layout */
.site-header,
.site-branding-container,
header.site-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}

/* Force navigation to right */
.site-header nav,
.site-header .menu,
header nav {
margin-left: auto !important;
}

/* Specific for your theme */
.inside-navigation {
display: flex;
justify-content: flex-end;
margin-left: auto;
}

/* ========================================
NAVIGATION MENU - Move to Right Side
======================================== */

/* Force main navigation to right side */
body .main-navigation,
body .site-header .main-navigation,
body #site-navigation,
body .primary-menu,
body nav.main-nav {
margin-left: auto !important;
margin-right: 0 !important;
}

/* Header flex layout */
body .site-header,
body .site-branding-container,
body header.site-header,
body .inside-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
}

/* Navigation container */
body .site-header nav,
body .site-header .menu,
body header nav {
margin-left: auto !important;
margin-right: 0 !important;
}

/* Inside navigation wrapper */
body .inside-navigation {
display: flex !important;
justify-content: flex-end !important;
margin-left: auto !important;
}

/* Grid container fix if using GeneratePress */
body .site-header .grid-container {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}

/* Menu items alignment */
body .main-navigation ul {
display: flex !important;
gap: 20px !important;
}

/* ========================================
FIX NAVIGATION - Move to Right Side
======================================== */

/* Force grid-container to use flexbox */
.inside-navigation.grid-container {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
width: 100% !important;
}

/* Main navigation container */
#primary-menu.main-nav,
.main-nav {
margin-left: auto !important;
margin-right: 0 !important;
}

/* Menu list */
#menu-generators,
#primary-menu ul {
display: flex !important;
justify-content: flex-end !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Override any width constraints */
.inside-navigation {
max-width: 100% !important;
}