/*
 * custom.css — Canuckle Answer v4
 * All Bootstrap/icons loaded via CDN in header.php.
 * This file: design enhancements + comprehensive mobile fixes.
 */

/* ── Fonts (preloaded in header) ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&family=Roboto:wght@300;400;500&family=Poppins:wght@400;500;600&display=swap');

/* ── Design tokens ───────────────────────────────────────── */
:root {
  --accent-color:  #ef4444;
  --accent-dark:   #dc2626;
  --heading-color: #101f0c;
  --badge-bg:      #fff3f3;
  --badge-color:   #ef4444;
  --card-radius:   16px;
  --shadow-sm:     0 2px 12px rgba(0,0,0,.07);
  --shadow-md:     0 8px 40px rgba(0,0,0,.12);
  --transition:    .25s ease;
}

/* ── Globals ──────────────────────────────────────────────── */
img { max-width: 100%; height: auto; }

/* ── Badge pill ─────────────────────────────────────────── */
.hero-badge .badge-pill {
  display: inline-flex;
  align-items: center;
  background: var(--badge-bg);
  color: var(--badge-color);
  font-family: var(--nav-font, 'Poppins', sans-serif);
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,.2);
  letter-spacing: .02em;
}

/* ── Hero title ─────────────────────────────────────────── */
.hero-title {
  font-family: var(--heading-font, 'Raleway', sans-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--heading-color);
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* ── Hero intro ──────────────────────────────────────────── */
.hero-intro {
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.75;
  text-align: left;
}

/* ── Hero img ────────────────────────────────────────────── */
.hero-img { width: 100%; height: auto; border-radius: 16px; }

/* ── Hints ───────────────────────────────────────────────── */
.hints-box {
  background: #f8fff8;
  border: 1px solid rgba(16,31,12,.1);
  border-radius: var(--card-radius);
  padding: 1.25rem 1.5rem;
}
.hints-heading { font-size: 1rem; font-weight: 700; color: var(--heading-color); margin-bottom: .75rem; }
.hints-list    { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.hints-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: #374151; }
.hint-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-color); color: #fff;
  font-size: .72rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}

/* ── Reveal / answer box ─────────────────────────────────── */
/* FIX: 24px gap between reveal box and buttons */
.reveal-box { margin-top: 1rem; margin-bottom: 0; }
.hero-btn-row { margin-top: 1.5rem; }

.answer-details {
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 2px solid rgba(239,68,68,.3);
}
.answer-details summary.btn-get-started {
  list-style: none; cursor: pointer; user-select: none;
  border-radius: calc(var(--card-radius) - 2px);
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; width: 100%;
}
.answer-details summary::-webkit-details-marker { display: none; }
.answer-details[open] summary { border-radius: calc(var(--card-radius) - 2px) calc(var(--card-radius) - 2px) 0 0; }
.answer-details[open] .chevron-icon { transform: rotate(180deg); }
.chevron-icon { transition: transform .3s ease; flex-shrink: 0; }

.answer-reveal-content {
  background: #fff;
  padding: 1.5rem;
  border-top: 1px solid rgba(239,68,68,.15);
}
.answer-word-display {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
}
.word-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--accent-color); color: #fff;
  font-family: var(--heading-font, 'Raleway', sans-serif);
  font-size: 1.5rem; font-weight: 800; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(239,68,68,.35);
  animation: tile-pop .4s ease forwards;
}
@keyframes tile-pop {
  0%   { transform:scale(.6); opacity:0; }
  70%  { transform:scale(1.1); }
  100% { transform:scale(1);   opacity:1; }
}
.answer-explanation {
  font-size: .97rem; color: #374151; line-height: 1.7;
  background: #f9fafb; border-radius: 10px; padding: 1rem 1.25rem;
}

/* ── Button row ──────────────────────────────────────────── */
/* Consistent spacing above: always 1.5rem regardless of screen size */
.hero-btn-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.btn-outline-started {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .65rem 1.5rem; border-radius: 50px;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  font-family: var(--nav-font, 'Poppins', sans-serif);
  font-weight: 600; font-size: .9rem;
  transition: var(--transition); background: transparent;
  text-decoration: none; white-space: nowrap;
}
.btn-outline-started:hover { background: var(--accent-color); color: #fff; }

/* ── Service cards (Recent Answers) ──────────────────────── */
.service-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
.service-item {
  transition: transform var(--transition), box-shadow var(--transition);
  border-radius: var(--card-radius) !important;
  overflow: hidden;
}
.service-card-link:hover .service-item { transform: translateY(-6px); box-shadow: var(--shadow-md); }
/* Override main.css huge padding */
.services .service-item { padding: 32px 24px !important; }
.service-item-img { width:100%; height:160px; overflow:hidden; margin-bottom:.75rem; border-radius:10px; }
.service-item-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.service-card-link:hover .service-item-img img { transform:scale(1.05); }
.service-date { font-size: .8rem; color: #9ca3af; margin-top: .5rem; }

/* ── Archive cards ───────────────────────────────────────── */
.archive-card-link { text-decoration:none; color:inherit; display:block; height:100%; }
.archive-card {
  background:#fff; border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm); overflow:hidden; height:100%;
  transition: transform var(--transition), box-shadow var(--transition);
}
.archive-card-link:hover .archive-card { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.archive-card-img { width:100%; height:170px; overflow:hidden; }
.archive-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.archive-card-link:hover .archive-card-img img { transform:scale(1.05); }
.archive-card-placeholder { width:100%; height:170px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f1f6f1,#e9f5e9); font-size:2.5rem; color:#9ca3af; }
.archive-card-body { padding:1rem 1.25rem 1.25rem; }
.archive-card-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.archive-date { font-size:.78rem; color:#9ca3af; }
.archive-puzzle-num { font-size:.75rem; font-weight:700; color:var(--accent-color); background:var(--badge-bg); padding:.15rem .5rem; border-radius:4px; }
.archive-card-title { font-size:.92rem; font-weight:600; color:var(--heading-color); line-height:1.35; margin-bottom:.6rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.archive-word-badge { display:flex; gap:4px; }
.archive-word-badge span { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; background:var(--accent-color); color:#fff; font-size:.8rem; font-weight:800; border-radius:5px; }

/* ── CTA section ─────────────────────────────────────────── */
.cta-section { padding: 60px 0; }
.cta-card {
  background: linear-gradient(135deg, #101f0c 0%, #1a3a10 100%);
  color: #fff; border-radius: 24px; padding: 3rem 2.5rem; box-shadow: var(--shadow-md);
}
.cta-card h2 { color:#fff; font-size:2rem; font-weight:800; margin-bottom:.75rem; }
.cta-card p  { color:rgba(255,255,255,.8); max-width:560px; margin:0 auto 1.5rem; font-size:1rem; }
.cta-icon { font-size:2.5rem; color:#ef4444; }
.cta-card .btn-get-started { background:var(--accent-color); border-color:var(--accent-color); }
.cta-card .btn-get-started:hover { background:#dc2626; }

/* ── Guide section ───────────────────────────────────────── */
.guide-section { padding: 60px 0; }
.guide-title { font-size: clamp(1.3rem,3vw,2rem); font-weight:800; color:var(--heading-color); }
.guide-section h3 { font-size:1.15rem; font-weight:700; color:var(--heading-color); margin:1.5rem 0 .6rem; }
.color-guide-grid { display:flex; flex-wrap:wrap; gap:1rem; }
.color-guide-item { display:flex; align-items:center; gap:.75rem; background:#f9fafb; border-radius:10px; padding:.75rem 1rem; flex:1; min-width:180px; }
.tile-demo { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:6px; color:#fff; font-weight:800; font-size:1.1rem; flex-shrink:0; }
.tile-red    { background:#ef4444; }
.tile-yellow { background:#eab308; }
.tile-grey   { background:#9ca3af; }

/* ── Feature boxes ───────────────────────────────────────── */
.feature-box { background:#f9fafb; border-radius:var(--card-radius); padding:1.75rem; text-align:center; height:100%; transition:box-shadow var(--transition); }
.feature-box:hover { box-shadow:var(--shadow-md); }
.feature-box i  { font-size:2.5rem; color:var(--accent-color); display:block; margin-bottom:1rem; }
.feature-box h4 { font-weight:700; font-size:1.05rem; color:var(--heading-color); margin-bottom:.5rem; }

/* ── Footer links ────────────────────────────────────────── */
.footer-links {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:.25rem .5rem; padding:.75rem 1rem;
}
.footer-links a   { color:#6b7280; font-size:.875rem; transition:color var(--transition); white-space:nowrap; }
.footer-links a:hover { color:var(--accent-color); }
.footer-links .sep { color:#d1d5db; font-size:.8rem; }

/* ── Pagination ──────────────────────────────────────────── */
.pagination .page-link { border-radius:8px !important; border:1px solid rgba(0,0,0,.1); color:var(--heading-color); font-weight:500; margin:0 2px; min-width:36px; text-align:center; }
.pagination .page-item.active .page-link { background:var(--accent-color); border-color:var(--accent-color); color:#fff; }
.pagination .page-link:hover { background:var(--badge-bg); color:var(--accent-color); }

/* ── Canuckle Unlimited ──────────────────────────────────── */
.unlimited-hero { padding-bottom:0; }
.game-section   { padding-top:2rem; }
.stats-bar      { margin-bottom:1rem; }
.stat-item .stat-num   { font-size:1.75rem; font-weight:800; color:var(--heading-color); line-height:1; }
.stat-item .stat-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#9ca3af; font-weight:600; }
.game-message  { min-height:2rem; padding:.5rem 1rem; border-radius:8px; background:#fef3c7; color:#92400e; font-weight:600; font-size:.95rem; display:none; }

/* Board */
.game-board  { display:flex; flex-direction:column; gap:6px; margin:0 auto; max-width:330px; }
.board-row   { display:flex; gap:6px; justify-content:center; }
.board-tile  { width:58px; height:58px; border:2px solid #d1d5db; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--heading-font,'Raleway',sans-serif); font-size:1.6rem; font-weight:800; color:var(--heading-color); text-transform:uppercase; background:#fff; user-select:none; transition:border-color .1s; }
.board-tile.tile-filled  { border-color:#6b7280; animation:tile-bounce .1s ease; }
.board-tile.tile-correct { background:#ef4444; border-color:#ef4444; color:#fff; }
.board-tile.tile-present { background:#eab308; border-color:#eab308; color:#fff; }
.board-tile.tile-absent  { background:#6b7280; border-color:#6b7280; color:#fff; }
@keyframes tile-bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.tile-flip               { animation:flip-tile .25s ease forwards; }
@keyframes flip-tile     { 0%{transform:scaleY(1)} 50%{transform:scaleY(0)} 100%{transform:scaleY(1)} }
.row-shake               { animation:row-shake .4s ease; }
@keyframes row-shake     { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-6px)} 45%{transform:translateX(6px)} 75%{transform:translateX(-4px)} }

/* Keyboard */
.keyboard-container { display:flex; flex-direction:column; gap:6px; align-items:center; max-width:500px; margin:0 auto; padding:0 4px; }
.key-row            { display:flex; gap:5px; justify-content:center; width:100%; }
.key { height:56px; min-width:38px; padding:0 4px; border:none; border-radius:6px; background:#e5e7eb; color:var(--heading-color); font-family:var(--nav-font,'Poppins',sans-serif); font-size:.85rem; font-weight:700; cursor:pointer; user-select:none; flex:1; transition:background var(--transition),transform .1s; }
.key:hover  { background:#d1d5db; transform:scale(1.05); }
.key:active { transform:scale(.95); }
.key-wide   { flex:1.6; font-size:.75rem; }
.key-spacer-half { flex:.5; }
.key.key-correct { background:#ef4444; color:#fff; }
.key.key-present { background:#eab308; color:#fff; }
.key.key-absent  { background:#6b7280; color:#fff; }

/* How-to-play */
.how-to-play-card { background:#f9fafb; border-radius:var(--card-radius); padding:1.75rem; position:sticky; top:90px; }
.how-to-play-card h3 { font-size:1rem; font-weight:700; margin-bottom:.75rem; color:var(--heading-color); }
.how-to-play-card ul { padding-left:1.25rem; font-size:.9rem; color:#374151; }
.example-tiles .board-tile { width:36px; height:36px; font-size:.95rem; border-radius:5px; }
.example-row { display:flex; gap:4px; }

/* ── Inner pages ─────────────────────────────────────────── */
.page-hero   { padding:50px 0 30px; }
.answer-hero { padding:60px 0; }
.about .content p { text-align:left; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* ── ≤1199px  Tablet landscape ───────────────────────────── */
@media (max-width:1199px) {
  .hero { padding:80px 0 0 !important; }
  .services .service-item { padding:28px 20px !important; }
}

/* ── ≤991px  Tablet portrait ─────────────────────────────── */
@media (max-width:991px) {
  .hero { padding:70px 0 0 !important; }
  .hero .row { --bs-gutter-y:2rem; }
  .hero-title { font-size:clamp(1.5rem,5vw,2rem); }
  .col-lg-6.order-1.order-lg-2 img.hero-img,
  .col-lg-6.order-1.order-lg-2 img.img-fluid { max-height:320px; object-fit:contain; width:auto; margin:0 auto; display:block; }
  .cta-card { padding:2.5rem 1.75rem; }
  .cta-card h2 { font-size:1.7rem; }
  .services .service-item { padding:24px 18px !important; }
  .section-title div { font-size:26px; }
  .faq .content h3 { font-size:26px; }
  .answer-hero { padding:48px 0; }
  .page-hero   { padding:40px 0 24px; }
}

/* ── ≤768px  Mobile landscape / large phone ──────────────── */
@media (max-width:768px) {
  /* Hero */
  .hero { padding:64px 0 0 !important; }
  .hero .row { --bs-gutter-y:1.5rem; }
  .hero-title  { font-size:1.5rem; line-height:1.25; }
  .hero-intro  { font-size:.95rem; text-align:left !important; }
  .col-lg-6.order-1.order-lg-2 img.hero-img,
  .col-lg-6.order-1.order-lg-2 img.img-fluid { max-height:260px; object-fit:contain; width:auto; margin:0 auto; display:block; }
  /* Hints */
  .hints-box { padding:1rem 1.125rem; }
  /* Answer reveal */
  .answer-reveal-content { padding:1.125rem; }
  .word-tile { width:48px; height:48px; font-size:1.25rem; }
  /* FIX: button row spacing responsive */
  .reveal-box  { margin-bottom:0; }
  .hero-btn-row {
    flex-direction: column;
    gap: .625rem !important;
    margin-top: 1.25rem;
  }
  .hero-btn-row .btn-get-started,
  .hero-btn-row .btn-outline-started { width:100%; justify-content:center; }
  /* Services */
  .services .service-item { padding:20px 16px !important; }
  .services .service-item h3 { font-size:18px; }
  /* Section titles */
  .section-title      { padding-bottom:40px; }
  .section-title div  { font-size:22px; }
  /* Sections */
  section,.section { padding:44px 0; }
  .cta-section     { padding:44px 0; }
  .guide-section   { padding:44px 0; }
  /* CTA */
  .cta-card   { padding:2rem 1.25rem; border-radius:18px; }
  .cta-card h2 { font-size:1.4rem; }
  .cta-card p  { font-size:.95rem; }
  .cta-icon    { font-size:2rem; }
  /* About */
  .about .content h3 { font-size:1.5rem; }
  .about .content p  { text-align:left !important; font-size:.95rem; }
  /* FAQ */
  .faq .content h3 { font-size:22px; }
  .faq .faq-container .faq-item h3 { font-size:15px; }
  /* Color guide */
  .color-guide-grid { flex-direction:column; gap:.75rem; }
  .color-guide-item { min-width:100%; }
  /* Archive */
  .archive-card-img         { height:150px; }
  .archive-card-placeholder { height:150px; }
  /* Pages */
  .answer-hero { padding:36px 0; }
  .page-hero   { padding:32px 0 20px; }
  /* Game board */
  .board-tile { width:50px; height:50px; font-size:1.35rem; }
  /* Keyboard */
  .keyboard-container { padding:0 2px; }
  .key      { height:48px; font-size:.78rem; min-width:0; }
  .key-wide { font-size:.7rem; }
  /* Stats */
  .stat-item .stat-num   { font-size:1.4rem; }
  .stat-item .stat-label { font-size:.65rem; }
  .stats-bar { gap:1rem !important; }
  /* Footer */
  .footer-links .sep  { display:none; }
  .footer-links a     { font-size:.8rem; }
  /* Guide */
  .guide-title  { font-size:1.3rem; }
  .guide-section h3 { font-size:1.05rem; }
  /* Remove justify everywhere on mobile */
  [style*="text-align:justify"],
  [style*="text-align: justify"],
  .fst-italic, p { text-align:left !important; }
}

/* ── ≤575px  Small phone ─────────────────────────────────── */
@media (max-width:575px) {
  .hero { padding:56px 0 0 !important; }
  .hero-title { font-size:1.35rem; }
  .hero-intro { font-size:.9rem; }
  .hero-badge .badge-pill { font-size:.72rem; padding:.3rem .75rem; }
  .col-lg-6.order-1.order-lg-2 img.hero-img,
  .col-lg-6.order-1.order-lg-2 img.img-fluid { max-height:200px; }
  /* Reveal + buttons spacing on small phones */
  .reveal-box  { margin-bottom:0; }
  .hero-btn-row { margin-top:1rem; gap:.5rem !important; }
  .hints-box { padding:.875rem 1rem; }
  .hints-list li { font-size:.88rem; }
  .word-tile { width:44px; height:44px; font-size:1.15rem; border-radius:8px; }
  .answer-reveal-content { padding:1rem .875rem; }
  .services .service-item { padding:18px 14px !important; }
  .services .service-item h3 { font-size:16px; }
  .services .service-item .icon { width:52px; height:52px; font-size:22px; }
  .archive-card-img { height:130px; }
  .archive-card-placeholder { height:130px; font-size:2rem; }
  .archive-word-badge span { width:26px; height:26px; font-size:.72rem; }
  .cta-card  { padding:1.5rem 1rem; border-radius:14px; }
  .cta-card h2 { font-size:1.25rem; }
  .cta-card p  { font-size:.9rem; }
  .cta-icon    { font-size:1.75rem; }
  .section-title { padding-bottom:32px; }
  .section-title div { font-size:20px; }
  section,.section { padding:36px 0; }
  .board-tile { width:44px; height:44px; font-size:1.15rem; }
  .game-board { gap:5px; } .board-row { gap:5px; }
  .key      { height:44px; font-size:.72rem; }
  .key-wide { font-size:.65rem; }
  .faq .content h3 { font-size:18px; }
  .faq .faq-container .faq-item { padding:16px; }
  .faq .faq-container .faq-item h3 { font-size:14px; line-height:1.4; }
  .feature-box { padding:1.25rem; }
  .feature-box i { font-size:2rem; }
  .answer-hero { padding:28px 0; }
  .page-hero   { padding:24px 0 16px; }
}

/* ── ≤400px  Very small phones ───────────────────────────── */
@media (max-width:400px) {
  .hero { padding:50px 0 0 !important; }
  .hero-title { font-size:1.25rem; }
  .hero-btn-row { margin-top:.875rem; gap:.4rem !important; }
  .board-tile { width:40px; height:40px; font-size:1rem; border-radius:6px; }
  .board-row  { gap:4px; }
  .game-board { gap:4px; max-width:220px; }
  .key        { height:40px; font-size:.65rem; padding:0 2px; }
  .key-wide   { font-size:.6rem; }
  .keyboard-container { padding:0; gap:4px; }
  .key-row    { gap:3px; }
  .word-tile  { width:38px; height:38px; font-size:1rem; border-radius:6px; }
  .cta-card   { padding:1.25rem .875rem; }
  .cta-card h2 { font-size:1.15rem; }
  .hints-box  { padding:.75rem .875rem; }
  .services .service-item { padding:16px 12px !important; }
}