/*
Theme Name: Fonyódi Kormoránok
Theme URI: https://kormoranok-fonyod.hu
Author: Gábor
Author URI: https://kormoranok-fonyod.hu
Description: Modern, prémium WordPress téma a Fonyódi Kormoránok Vitorlás Egyesület számára. Teljes Elementor támogatással, dark mode funkcióval, és reszponzív dizájnnal.
Version: 2.9.10
Requires at least: 6.0
Tested up to: 6.4
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: kormoranok
Tags: sailing, sports, club, elementor, dark-mode, responsive, custom-colors, custom-menu, featured-images, full-width-template, one-column, two-columns, threaded-comments, translation-ready
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (Elementor-friendly)
   ============================================================ */
:root {
  /* Brand colors from logo */
  --navy: #1a1f5e;
  --navy-deep: #0e1240;
  --navy-dark: #080b2a;
  --ocean: #1a3a6e;
  --ocean-light: #2563a8;
  --sky: #4a90d9;
  --sky-pale: #a8ccee;
  --gold: #c5a44e;
  --gold-bright: #dbb94e;
  --gold-light: #f0d87a;
  --sand: #f5e6ca;
  --sand-light: #fdf6ec;
  --white: #ffffff;
  --text: #1a1a2e;
  --text-light: #4a4a6a;
  --text-muted: #8888aa;
  --bg: #f7f5f0;
  --card-bg: #ffffff;
  --border: #e4e0d8;
  --success: #27ae60;
  --danger: #e74c3c;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(10,15,40,0.06);
  --shadow: 0 4px 24px rgba(10,15,40,0.08);
  --shadow-lg: 0 16px 48px rgba(10,15,40,0.12);
  --shadow-xl: 0 24px 64px rgba(10,15,40,0.16);
  
  /* Spacing & Sizing */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --max-w: 1320px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s ease;
  
  /* Dark mode vars */
  --dm-bg: #0c1025;
  --dm-card: #141830;
  --dm-text: #e0e0f0;
  --dm-border: #252a45;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

html { 
  scroll-behavior: smooth; 
  font-size: 16px; 
  scroll-padding-top: 80px; 
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
}

img { 
  max-width: 100%; 
  display: block; 
}

a { 
  text-decoration: none; 
  color: inherit; 
}

/* WordPress Core alignment classes */
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/* Text meant only for screen readers */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Dark mode body */
body.dark{background: var(--dm-bg);
  color: var(--dm-text);
}

body.dark .about-section, body.dark .gallery-section{background: var(--dm-card);
}

body.dark .card-bg, body.dark .news-card, body.dark .membership-card{background: var(--dm-card);
  border-color: var(--dm-border);
}

body.dark .section-title{color: var(--dm-text); 
}

body.dark .leadership-table{background: rgba(255, 255, 255, 0.04); 
}

body.dark .leadership-row{border-color: var(--dm-border); 
}

body.dark .sponsors-bar{background: var(--dm-card); 
  border-color: var(--dm-border); 
}

body.dark .news-card-title, body.dark .membership-card h3{color: var(--dm-text);
}

body.dark .about-text h3{
  color: var(--dm-text);
}

body.dark .doc-card{background: var(--dm-card); border-color: var(--dm-border); }
body.dark .doc-card-title{color: var(--dm-text); }
body.dark .doc-card-desc{color: rgba(224, 224, 240, 0.5); }
body.dark .doc-card-soon{color: rgba(224, 224, 240, 0.4); }
body.dark .membership-note{background: var(--dm-card); border-color: var(--dm-border); color: rgba(224, 224, 240, 0.5); }
body.dark .contact-card-label{color: rgba(224, 224, 240, 0.5); }
body.dark .contact-card-icon{color: var(--gold); }
body.dark .race-card-organizer{color: rgba(224, 224, 240, 0.5); }
body.dark .pagination a, body.dark .pagination span{background: var(--dm-card); color: var(--dm-text); }
body.dark .pagination .current{background: var(--ocean); color: var(--white); }
body.dark .wp-caption{background: var(--dm-card); border-color: var(--dm-border); }
body.dark .comment-meta{color: rgba(224, 224, 240, 0.4); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.gradient-text {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}

/* Scroll reveal animations */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left {
  transform: translateX(-40px);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal.visible, 
.reveal-left.visible, 
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ============================================================
   WORDPRESS SPECIFIC
   ============================================================ */
/* Gutenberg blocks */
.wp-block-image {
  margin-bottom: 1.5em;
}

.wp-block-gallery {
  margin-bottom: 1.5em;
}

/* Comments */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-body {
  margin-bottom: 2em;
  padding: 1.5em;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.comment-author {
  font-weight: 600;
  margin-bottom: 0.5em;
}

.comment-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1em;
}

.comment-content {
  margin-bottom: 1em;
}

.reply {
  margin-top: 1em;
}

.reply a {
  color: var(--ocean);
  font-weight: 600;
  font-size: 0.875rem;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 3rem 0;
}

.pagination a,
.pagination span {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-weight: 600;
  transition: var(--transition);
}

.pagination a:hover {
  background: var(--ocean);
  color: var(--white);
  transform: translateY(-2px);
}

.pagination .current {
  background: var(--ocean);
  color: var(--white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
  
  html {
    font-size: 15px;
  }
}