/* ============================================================
   HOOHUI Focus Mode 🧒
   focus-mode.css — child theme: kadence-child
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --hfm-navy:   #1B3A6B;
  --hfm-coral:  #FF6B4A;
  --hfm-beige:  #F5F2ED;
  --hfm-white:  #ffffff;
  --hfm-text:   #222222;
  --hfm-radius: 20px;
  --hfm-shadow: 0 20px 60px rgba(27,58,107,0.25);
}

/* ══════════════════════════════════════════════════════════════
   FOCUS MODE ACTIVE — κρύβει στοιχεία
   ══════════════════════════════════════════════════════════════ */
body.hoohui-focus-mode .site-header,
body.hoohui-focus-mode header.site-header,
body.hoohui-focus-mode #masthead,
body.hoohui-focus-mode .kadence-top-header-wrap,
body.hoohui-focus-mode .main-navigation,
body.hoohui-focus-mode nav.main-navigation,
body.hoohui-focus-mode #mobile-menu-wrap,
body.hoohui-focus-mode .hoohui-mobile-nav,
body.hoohui-focus-mode .bottom-nav-bar {
  display: none !important;
}

body.hoohui-focus-mode footer,
body.hoohui-focus-mode .site-footer,
body.hoohui-focus-mode #colophon,
body.hoohui-focus-mode .footer-hoohui {
  display: none !important;
}

body.hoohui-focus-mode .hoohui-companion,
body.hoohui-focus-mode #hoohui-companion,
body.hoohui-focus-mode .hoohui-help-bubble,
body.hoohui-focus-mode .cmplz-cookiebanner,
body.hoohui-focus-mode #cookie-notice,
body.hoohui-focus-mode .wpadminbar {
  display: none !important;
}

/* Κρύψε sidebar */
body.hoohui-focus-mode .widget-area,
body.hoohui-focus-mode aside.widget-area,
body.hoohui-focus-mode .sidebar {
  display: none !important;
}

/* Κρύψε breadcrumbs, related posts, comments */
body.hoohui-focus-mode .breadcrumb-trail,
body.hoohui-focus-mode .related-posts,
body.hoohui-focus-mode #comments,
body.hoohui-focus-mode .post-navigation,
body.hoohui-focus-mode .entry-meta {
  display: none !important;
}

/* ── CALM INTERFACE ────────────────────────────────────────── */
body.hoohui-focus-mode {
  background: var(--hfm-beige) !important;
  font-size: 1.2em !important;
}

body.hoohui-focus-mode * {
  animation-duration: 0.1ms !important;
  transition-duration: 0.1ms !important;
}

body.hoohui-focus-mode .entry-content,
body.hoohui-focus-mode .site-content,
body.hoohui-focus-mode main {
  padding-top: 30px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* Μεγαλύτερα κουμπιά */
body.hoohui-focus-mode button,
body.hoohui-focus-mode .button,
body.hoohui-focus-mode a.wp-block-button__link {
  min-height: 54px !important;
  font-size: 1.1em !important;
  padding: 14px 28px !important;
}

/* Μεγαλύτερα γράμματα */
body.hoohui-focus-mode p,
body.hoohui-focus-mode li {
  font-size: 1.15em !important;
  line-height: 1.8 !important;
}

body.hoohui-focus-mode h1 { font-size: 2em !important; }
body.hoohui-focus-mode h2 { font-size: 1.7em !important; }
body.hoohui-focus-mode h3 { font-size: 1.4em !important; }

/* Accessibility bar — μόνο το 🔒 κουμπί φαίνεται */
body.hoohui-focus-mode .hoohui-accessibility-bar .hoohui-acc-btn:not(#hoohui-focus-btn) {
  display: none !important;
}

body.hoohui-focus-mode .hoohui-accessibility-bar,
body.hoohui-focus-mode .accessibility-toolbar {
  justify-content: center !important;
  background: var(--hfm-navy) !important;
}

/* ── FOCUS BUTTON ACTIVE STATE ─────────────────────────────── */
#hoohui-focus-btn.hfm-active {
  background: var(--hfm-coral) !important;
  color: white !important;
  border-radius: 50% !important;
  animation: hfm-pulse 2s infinite !important;
}

@keyframes hfm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,74,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(255,107,74,0); }
}

/* ══════════════════════════════════════════════════════════════
   MODALS — ΒΑΣΗ
   ══════════════════════════════════════════════════════════════ */
#hoohui-focus-modal,
#hoohui-exit-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
}

#hoohui-focus-modal.hfm-visible,
#hoohui-exit-modal.hfm-visible {
  display: flex;
}

.hfm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27,58,107,0.7);
  backdrop-filter: blur(4px);
}

.hfm-panel {
  position: relative;
  z-index: 1;
  background: var(--hfm-white);
  border-radius: var(--hfm-radius);
  box-shadow: var(--hfm-shadow);
  padding: 40px 36px 32px;
  width: 90%;
  max-width: 520px;
  text-align: center;
  animation: hfm-slide-up 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes hfm-slide-up {
  from { opacity:0; transform: translateY(40px) scale(0.95); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* ── MODAL HEADER ──────────────────────────────────────────── */
.hfm-header {
  margin-bottom: 28px;
}

.hfm-logo {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 8px;
  animation: hfm-bounce 0.6s ease both 0.2s;
}

@keyframes hfm-bounce {
  0%   { transform: scale(0); opacity:0; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity:1; }
}

.hfm-header h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.7rem;
  color: var(--hfm-navy);
  margin: 0 0 6px;
  font-weight: 700;
}

.hfm-header p {
  font-family: 'Nunito Sans', sans-serif;
  color: #666;
  font-size: 1rem;
  margin: 0;
}

/* ── PIN INPUTS ────────────────────────────────────────────── */
.hfm-pin-label {
  font-family: 'Nunito Sans', sans-serif;
  color: var(--hfm-navy);
  font-size: 0.95rem;
  margin-bottom: 16px;
  font-weight: 600;
}

.hfm-pin-inputs {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 12px;
}

.hfm-pin-digit {
  width: 60px;
  height: 60px;
  border: 2.5px solid #ddd;
  border-radius: 14px;
  font-size: 1.8rem;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  color: var(--hfm-navy);
  background: var(--hfm-beige);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  caret-color: var(--hfm-coral);
}

.hfm-pin-digit:focus {
  border-color: var(--hfm-coral);
  box-shadow: 0 0 0 3px rgba(255,107,74,0.2);
}

.hfm-pin-hint {
  font-size: 0.8rem;
  color: #999;
  margin: 0;
}

.hfm-pin-error {
  color: #e74c3c;
  font-size: 0.9rem;
  margin: 12px 0 0;
  font-weight: 600;
}

/* ── ACTIVITIES GRID ───────────────────────────────────────── */
.hfm-act-label {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  color: var(--hfm-navy);
  font-weight: 700;
  margin-bottom: 20px;
}

.hfm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

.hfm-activity-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--hfm-beige);
  border: 2.5px solid transparent;
  border-radius: 18px;
  padding: 24px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Nunito Sans', sans-serif;
}

.hfm-activity-btn:hover,
.hfm-activity-btn:focus {
  border-color: var(--hfm-coral);
  background: #fff5f3;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255,107,74,0.18);
  outline: none;
}

.hfm-act-icon {
  font-size: 2.8rem;
  line-height: 1;
}

.hfm-activity-btn .hfm-act-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hfm-navy);
  margin: 0;
}

/* ── CANCEL BUTTON ─────────────────────────────────────────── */
.hfm-cancel {
  background: none;
  border: none;
  color: #999;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 10px 20px;
  margin-top: 16px;
  font-family: 'Nunito Sans', sans-serif;
  transition: color 0.2s;
}

.hfm-cancel:hover { color: var(--hfm-navy); }

/* ── EXIT PANEL ────────────────────────────────────────────── */
.hfm-exit-panel {
  max-width: 380px;
}

/* ══════════════════════════════════════════════════════════════
   FOCUS INDICATOR — μικρό badge πάνω δεξιά
   ══════════════════════════════════════════════════════════════ */
#hfm-indicator {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99998;
  background: var(--hfm-navy);
  color: white;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

#hfm-indicator.hfm-ind-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════
   BRAVO SCREEN 🏆
   ══════════════════════════════════════════════════════════════ */
#hfm-bravo {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: linear-gradient(135deg, var(--hfm-navy) 0%, #2a5298 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#hfm-bravo.hfm-bravo-visible {
  opacity: 1;
  pointer-events: all;
}

.hfm-bravo-content {
  text-align: center;
  color: white;
  animation: hfm-slide-up 0.5s ease both;
}

.hfm-bravo-emoji {
  font-size: 6rem;
  margin-bottom: 16px;
  animation: hfm-spin 0.6s ease both 0.2s;
}

@keyframes hfm-spin {
  from { transform: rotate(-30deg) scale(0); }
  to   { transform: rotate(0deg) scale(1); }
}

.hfm-bravo-content h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--hfm-coral);
}

.hfm-bravo-content p {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1.3rem;
  opacity: 0.9;
  margin-bottom: 32px;
}

#hfm-bravo-close {
  background: var(--hfm-coral);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 16px 40px;
  font-size: 1.1rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

#hfm-bravo-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hfm-panel {
    padding: 30px 20px 24px;
    border-radius: 20px 20px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    animation: hfm-slide-up-mobile 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
  }

  @keyframes hfm-slide-up-mobile {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .hfm-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .hfm-activity-btn {
    padding: 18px 12px;
  }

  .hfm-act-icon { font-size: 2.2rem; }

  .hfm-pin-digit {
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
  }
}