/*
  rules.css — Styles for YiroSoft Rules page
  Purpose: provide consistent dark/light theme styling matching the main site design
  Based on site.css, dark.css, and white.css
*/

/* ============ BASE DARK THEME (DEFAULT) ============ */
:root{
  --bg-1:#0c1016; 
  --bg-2:#121722;
  --bg: #0f1419;
  --surface: #1a1f28;
  --surface-hover: #242933;
  --muted-surface: #242933;
  --muted-surface-dark: #1a1f28;
  --text:#e9ecf1; 
  --text-secondary: #d1d5db;
  --muted:#b6bcc6;
  --muted-light: #6b7280;
  --gold:#d8bf7a; 
  --gold-2:#a78e52;
  --line:rgba(255,255,255,.12);
  --line-light: #252a35;
  --accent: #4a9eff;
  --accent-weak: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-contrast: #0f1419;
  --success: #34d399;
  --danger: #f87171;
  --shadow: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-hover: 0 4px 16px rgba(0,0,0,0.35);
  --radius: 8px;
  --radius-sm: 6px;
  --glass: rgba(26,31,40,0.7);
  --nav-h:56px; 
  --brand-w:150px;
  
  /* UA form elemek dark színsémája */
  color-scheme: dark;
}

html, body{
  height:100%;
  margin:0;
}

body{
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2)); 
  color:var(--text);
}

.text-muted{
  color:var(--muted)!important;
}

/* ============ NAVBAR ============ */
.navbar.navbar-dark{
  min-height:var(--nav-h);
  background: rgba(14, 19, 27, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(216, 191, 122, 0.15);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.navbar.scrolled{
  background: rgba(14, 19, 27, 0.95);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.navbar .nav-link{
  color:var(--muted);
  transition: all 0.3s ease;
  position: relative;
}

.navbar .nav-link::after{
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active{
  color:var(--gold);
}

.navbar .nav-link:hover::after{
  width: 80%;
}

.navbar .container{
  display:flex;
  align-items:center;
}

.navbar-brand{
  flex:0 0 auto;
  width:var(--brand-w);
  height:var(--nav-h);
  display:flex;
  align-items:center;
  padding:0;
  margin:0;
  overflow:hidden;
  transition: all 0.3s ease;
}

.navbar-brand:hover{
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(216, 191, 122, 0.3));
}

.navbar-brand img{
  transition: all 0.3s ease;
}

.navbar-brand:hover img{
  filter: brightness(1.2);
}

.brand-box{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
}

.brand-logo{
  max-height:calc(var(--nav-h) + 24px);
  max-width:100%;
  object-fit:contain;
  display:block;
  margin-top:6px;
}

/* ============ CARDS & PANELS ============ */
.card{
  background: rgba(26, 31, 40, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color:var(--text);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover{
  box-shadow: 
    0 12px 48px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(216, 191, 122, 0.2);
  border-color: rgba(216, 191, 122, 0.3);
  transform: translateY(-2px);
}

.card-header{
  background: linear-gradient(135deg, 
    rgba(216, 191, 122, 0.08) 0%, 
    rgba(167, 142, 82, 0.08) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(216, 191, 122, 0.15);
  padding: 20px 24px;
  position: relative;
}

.card-header::after{
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(216, 191, 122, 0.5) 50%, 
    transparent 100%
  );
}

.card-header h5{
  color: #ffffff;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-header h5::before{
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(216, 191, 122, 0.5);
}

.card-body{
  background: rgba(26, 31, 40, 0.3);
  padding: 28px;
}

/* ============ FORMS & INPUTS ============ */
.form-control,
.form-select,
input[type="search"],
textarea,
select{
  background: rgba(26, 31, 40, 0.6) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text);
  caret-color: var(--gold);
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.form-control:focus,
.form-select:focus,
input[type="search"]:focus,
textarea:focus,
select:focus{
  background: rgba(26, 31, 40, 0.8) !important;
  border-color: rgba(216, 191, 122, 0.5) !important;
  color: var(--text);
  box-shadow: 
    0 0 0 3px rgba(216, 191, 122, 0.15),
    0 4px 16px rgba(216, 191, 122, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
  outline: none;
}

.form-control::placeholder,
input[type="search"]::placeholder{
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Search input specific styling */
#ruleSearch,
input[type="search"]{
  background-color: rgba(26, 31, 40, 0.6) !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgba(216,191,122,0.5)" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 16px 16px !important;
  padding-left: 40px !important;
}

#ruleSearch:focus,
input[type="search"]:focus{
  background-color: rgba(26, 31, 40, 0.8) !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgba(216,191,122,0.9)" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 16px 16px !important;
}

/* ============ LIST GROUP ============ */
.list-group-item{
  background: rgba(26, 31, 40, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(255, 255, 255, 0.08);
  color:rgba(255, 255, 255, 0.85);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px !important;
  margin-bottom: 6px;
  padding: 12px 16px;
}

.list-group-item:hover{
  background: rgba(26, 31, 40, 0.65);
  border-color: rgba(216, 191, 122, 0.3);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.list-group-item.active{
background: linear-gradient(135deg, 
    rgba(216, 191, 122, 0.35) 0%, 
    rgba(167, 142, 82, 0.35) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(216, 191, 122, 0.7);
  color: #ffffff;
  font-weight: 700;
   /* box-shadow: 
    0 6px 24px rgba(216, 191, 122, 0.4),
    0 0 20px rgba(216, 191, 122, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transform: translateX(6px) scale(1.02); */
  position: relative;
   /* overflow: hidden;*/
}

.list-group-item.active::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  box-shadow: 0 0 12px rgba(216, 191, 122, 0.8);
}
/*
.list-group-item.active::after{
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(216, 191, 122, 0.1) 50%,
    transparent 70%
  );
  animation: shimmer 3s infinite;
}
*/

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.list-group-item.active small{
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.list-group-item-action{
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.list-group-item-action:active{
  transform: scale(0.98);
}

.list-group-flush .list-group-item{
  border-width: 1px;
  border-radius: 8px !important;
}

/* ============ RULES SPECIFIC STYLES ============ */
.rules-list{
  max-height:calc(100vh - 200px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color: rgba(216, 191, 122, 0.3) rgba(255, 255, 255, 0.05);
  padding: 8px;
  background: rgba(10, 14, 20, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.rules-list::-webkit-scrollbar{
  width:10px;
}

.rules-list::-webkit-scrollbar-track{
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  margin: 4px;
}

.rules-list::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, 
    rgba(216, 191, 122, 0.4), 
    rgba(167, 142, 82, 0.4)
  );
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease;
}

.rules-list::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, 
    rgba(216, 191, 122, 0.6), 
    rgba(167, 142, 82, 0.6)
  );
}

/* ============ PROSE CONTENT STYLING ============ */
.prose{
  line-height: 1.75;
  font-size: 0.975rem;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6{
  color: #ffffff;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.75em;
  line-height: 1.3;
  position: relative;
  padding-left: 16px;
}

.prose h1::before,
.prose h2::before,
.prose h3::before,
.prose h4::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(216, 191, 122, 0.4);
}

.prose h1{
  font-size: 2em;
  color: var(--gold);
}

.prose h2{
  font-size: 1.6em;
}

.prose h3{
  font-size: 1.35em;
}

.prose h4{
  font-size: 1.15em;
  color: rgba(216, 191, 122, 0.9);
}

.prose p{
  margin-bottom: 1.25em;
  color: rgba(255, 255, 255, 0.85);
}

.prose ul,
.prose ol{
  padding-left: 1.75em;
  margin-bottom: 1.25em;
}

.prose li{
  margin-bottom: 0.6em;
  color: rgba(255, 255, 255, 0.85);
}

.prose li::marker{
  color: var(--gold);
}

.prose a{
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 191, 122, 0.3);
  transition: all 0.3s ease;
}

.prose a:hover{
  color: #ffffff;
  border-bottom-color: var(--gold);
  text-shadow: 0 0 8px rgba(216, 191, 122, 0.4);
}

.prose code{
  background: rgba(10, 14, 20, 0.6);
  color: var(--gold);
  padding: 0.25em 0.5em;
  border-radius: 6px;
  font-size: 0.9em;
  border: 1px solid rgba(216, 191, 122, 0.2);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.prose pre{
  background: rgba(10, 14, 20, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  padding: 1.25em;
  border-radius: 12px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1.5em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.prose pre code{
  background: transparent;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
}

.prose blockquote{
  border-left: 3px solid var(--gold);
  padding-left: 1.25em;
  margin-left: 0;
  margin-bottom: 1.5em;
  opacity: 0.95;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(216, 191, 122, 0.05);
  padding: 1em 1em 1em 1.25em;
  border-radius: 0 8px 8px 0;
}

.prose strong{
  color: #ffffff;
  font-weight: 700;
}

.prose em{
  font-style: italic;
  color: rgba(216, 191, 122, 0.9);
}

.prose hr{
  border: none;
  border-top: 1px solid rgba(216, 191, 122, 0.2);
  margin: 2.5em 0;
  position: relative;
}

.prose hr::after{
  content: '◆';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  padding: 0 12px;
  color: var(--gold);
  font-size: 0.8rem;
}

/* ============ LIGHT MODE THEME ============ */
:root.light-mode,
[data-theme="light"]{
  --bg: #f8f9fa;
  --bg-1: #ffffff;
  --bg-2: #f5f7fa;
  --surface: #ffffff;
  --surface-hover: #f5f7fa;
  --muted-surface: #f1f3f4;
  --muted-surface-dark: #e8eaed;
  --text: #202124;
  --text-secondary: #3c4043;
  --muted: #5f6368;
  --muted-light: #80868b;
  --line: #dadce0;
  --line-light: #e8eaed;
  --accent: #1a73e8;
  --accent-weak: rgba(26, 115, 232, 0.1);
  --accent-contrast: #ffffff;
  --success: #34a853;
  --danger: #ea4335;
  --shadow: 0 1px 3px rgba(60,64,67,.3);
  --shadow-hover: 0 4px 6px rgba(60,64,67,.3);
  --gold: #b8860b;
  --gold-2: #9a7210;
  
  color-scheme: light;
}

.light-mode body,
[data-theme="light"] body{
  background:linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color:var(--text);
}

.light-mode .navbar.navbar-dark,
[data-theme="light"] .navbar.navbar-dark{
  background:#ffffff;
  border-bottom:1px solid var(--line);
}

.light-mode .card,
[data-theme="light"] .card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.light-mode .card:hover,
[data-theme="light"] .card:hover{
  box-shadow:var(--shadow-hover);
  border-color:var(--accent);
}

.light-mode .card-header,
[data-theme="light"] .card-header{
  background:var(--muted-surface);
  border-bottom:1px solid var(--line);
}

.light-mode .form-control,
.light-mode .form-select,
.light-mode input,
.light-mode textarea,
.light-mode select,
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select{
  background-color:var(--surface) !important;
  border:1px solid var(--line) !important;
  color:var(--text);
}

.light-mode .form-control:focus,
.light-mode input:focus,
[data-theme="light"] .form-control:focus,
[data-theme="light"] input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-weak);
}

.light-mode .list-group-item,
[data-theme="light"] .list-group-item{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text);
}

.light-mode .list-group-item:hover,
[data-theme="light"] .list-group-item:hover{
  background:var(--surface-hover);
}

.light-mode .list-group-item.active,
[data-theme="light"] .list-group-item.active{
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
  border-color:var(--gold);
  color:#ffffff;
}

/* ============ RESPONSIVE ============ */
@media (max-width:991.98px){ 
  :root{ 
    --nav-h:56px; 
    --brand-w:140px; 
  }
  
  .card-header{
    padding: 16px 20px;
  }
  
  .card-body{
    padding: 20px;
  }
}

@media (max-width:768px){
  .rules-list{
    max-height: 350px;
    margin-bottom: 20px;
  }
  
  .list-group-item{
    padding: 10px 14px;
  }
  
  .card{
    border-radius: 12px;
  }
  
  .card-header h5{
    font-size: 1.1rem;
  }
  
  input[type="search"]{
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
}

@media (max-width: 575.98px){
  .card-header{
    padding: 14px 16px;
  }
  
  .card-body{
    padding: 16px;
  }
  
  .navbar-brand{
    width: 120px;
  }
}

/* ============ UTILITIES ============ */
.shadow-sm{
  box-shadow:var(--shadow) !important;
}

.border-secondary{
  border-color:var(--line) !important;
}

.bg-black{
  background:var(--surface) !important;
}

.bg-dark{
  background:var(--bg) !important;
}

.text-light{
  color:var(--text) !important;
}

.text-secondary{
  color:var(--muted) !important;
}

.bg-body-tertiary{
  background:var(--muted-surface) !important;
}

/* ============ LANGUAGE SWITCHER ============ */
.dropdown-menu{
  background: rgba(26, 31, 40, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(216, 191, 122, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
}

.dropdown-item{
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 4px;
}

.dropdown-item:last-child{
  margin-bottom: 0;
}

.dropdown-item:hover{
  background: rgba(216, 191, 122, 0.15);
  color: #ffffff;
  transform: translateX(4px);
}

.dropdown-item.active{
  background: linear-gradient(135deg, 
    rgba(216, 191, 122, 0.3) 0%, 
    rgba(167, 142, 82, 0.3) 100%
  ) !important;
  border: 1px solid rgba(216, 191, 122, 0.4);
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 
    0 2px 8px rgba(216, 191, 122, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-outline-light{
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(26, 31, 40, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 500;
}

.btn-outline-light:hover{
  background: rgba(216, 191, 122, 0.15);
  border-color: rgba(216, 191, 122, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(216, 191, 122, 0.2);
}

/* Light mode language switcher */
.light-mode .dropdown-menu,
[data-theme="light"] .dropdown-menu{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-hover);
}

.light-mode .dropdown-item,
[data-theme="light"] .dropdown-item{
  color:var(--text);
}

.light-mode .dropdown-item:hover,
[data-theme="light"] .dropdown-item:hover{
  background:var(--surface-hover);
  color:var(--text);
}

.light-mode .dropdown-item.active,
[data-theme="light"] .dropdown-item.active{
  background:linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  color:#ffffff !important;
}

.light-mode .btn-outline-light,
[data-theme="light"] .btn-outline-light{
  border-color:var(--line);
  color:var(--text);
}

.light-mode .btn-outline-light:hover,
[data-theme="light"] .btn-outline-light:hover{
  background:var(--surface-hover);
  border-color:var(--accent);
}
#ruleContent h4 { scroll-margin-top: 80px; }
.toc { list-style: disc; }
.toc li { margin-bottom: .25rem; }
/* Rejtse a bal menüben a tos-* elemeket, kivéve az "ÁSZF (egyben)"-t */
#rulesList .list-group-item[data-id^="tos-"]:not([data-id="tos-all"]) { display: none !important; }