/*
Theme Name: Betting APK Review Custom
Theme URI: 
Author: Your Name
Author URI: 
Description: Lightweight custom theme for an independent APK review site (navy/amber palette).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jj77-custom
*/

/* ==========================================================================
   Design tokens (mirrors the original site's palette + typography)
   ========================================================================== */
:root{
  --color-accent:        #e0a020; /* palette1 - teal */
  --color-accent-dark:   #12233f; /* palette2 - dark teal */
  --color-white:         #ffffff; /* palette3/9 */
  --color-bg-light:      #f7fafc; /* palette4 */
  --color-bg-lighter:    #edf2f7; /* palette5 */
  --color-gray:          #718096; /* palette6 */
  --color-gray-dark:     #4a5568; /* palette7 */
  --color-deep-teal:     #0b1930; /* palette8 */
  --color-body-bg:       #0f1e38; /* page background */

  --font-body:    'Inter', sans-serif;
  --font-heading: 'Oswald', sans-serif;

  --content-width:        1290px;
  --content-width-narrow: 842px;
  --edge-padding:         1.5rem;
  --radius-pill:          100px;
  --radius-card:          16px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--color-body-bg);
  color: var(--color-bg-light);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--color-accent); text-decoration: none; }
a:hover{ color: var(--color-white); }
ul, ol{ padding-left: 1.25em; }
figure{ margin: 0 0 1em; }

/* ==========================================================================
   Hero banner
   ========================================================================== */
.hero-banner{
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 2rem;
  border: 1px solid rgba(224,160,32,0.18);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.55);
}
.hero-banner-img{
  width: 100%;
  display: block;
  aspect-ratio: 1290 / 420;
  object-fit: cover;
}
.hero-banner-tag{
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(15,30,56,0.85);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(224,160,32,0.35);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Editorial screenshot figures
   ========================================================================== */
.section-eyebrow{
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.4rem;
}
.review-figure-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}
.review-figure{
  background: linear-gradient(180deg, var(--color-deep-teal) 0%, #0a1729 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-card);
  padding: 0.85rem 0.85rem 1.1rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.review-figure:hover{
  transform: translateY(-4px);
  border-color: rgba(224,160,32,0.4);
  box-shadow: 0 16px 32px -18px rgba(0,0,0,0.6);
}
.review-figure .figure-frame{
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #0d1c33;
}
.review-figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.review-figure figcaption{
  margin-top: 0.85rem;
  font-size: 14px;
  color: var(--color-white);
  text-align: left;
  font-weight: 600;
}
.review-figure figcaption span{
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--color-gray);
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-white);
  margin: 1.5em 0 .5em;
}
h1{ font-size: 32px; }
h2{ font-size: 28px; }
h3{ font-size: 24px; }
h4{ font-size: 22px; }
h5{ font-size: 20px; }
h6{ font-size: 18px; color: var(--color-bg-lighter); }

.screen-reader-text{
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus{
  background: #fff; color: #000; display: block; height: auto; left: 5px; top: 5px;
  padding: 15px 23px; width: auto; z-index: 100000; clip-path: none;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.site-container{
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--edge-padding);
}
.content-width-narrow{ max-width: var(--content-width-narrow); margin: 0 auto; }

/* ==========================================================================
   Buttons (pill style, matches original)
   ========================================================================== */
.btn, .wp-block-button__link, button, input[type="submit"]{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white) !important;
  font-weight: 600;
  padding: .75em 1.75em;
  cursor: pointer;
  transition: all .2s ease;
}
.btn:hover, .wp-block-button__link:hover, button:hover{
  background: var(--color-white);
  color: var(--color-accent-dark) !important;
  border-color: var(--color-white);
  box-shadow: 0 15px 25px -7px rgba(0,0,0,.15);
}
.btn-outline{
  background: transparent;
  color: var(--color-accent) !important;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{ background: var(--color-body-bg); }
.site-header-inner{
  background: var(--color-white);
  border-bottom: 2px solid var(--color-accent);
}
.site-header-row{
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--edge-padding);
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-branding img{ max-width: 130px; }

.main-navigation ul{
  list-style: none;
  display: flex;
  gap: .25em;
  margin: 0;
  padding: 0;
}
.main-navigation li{ position: relative; }
.main-navigation a{
  display: block;
  padding: .6em .8em;
  color: var(--color-accent);
  font-weight: 600;
  border-radius: 6px;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a{
  background: var(--color-accent);
  color: var(--color-white);
}

.menu-toggle{
  display: none;
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 6px;
  padding: .5em .7em;
}
.menu-toggle svg{ width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 860px){
  .menu-toggle{ display: inline-flex; align-items: center; }
  .main-navigation{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 85vw);
    background: var(--color-white);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 200;
    padding: 2rem 1.5rem;
    overflow-y: auto;
  }
  .main-navigation.is-open{ transform: translateX(0); }
  .main-navigation ul{ flex-direction: column; gap: 0; }
  .main-navigation a{ padding: 1em .5em; border-bottom: 1px solid var(--color-bg-lighter); border-radius: 0; }
  .nav-overlay{
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 190;
  }
  .nav-overlay.is-open{ display: block; }
}

/* ==========================================================================
   Content area
   ========================================================================== */
.content-area{ margin: 3rem 0; }
.entry-content-wrap{
  background: var(--color-body-bg);
  border-radius: var(--radius-card);
  padding: 2rem;
}
.entry-content > * + *{ margin-top: 1em; }
.entry-content h2, .entry-content h3{
  background: var(--color-accent);
  color: var(--color-white);
  display: block;
  padding: .5em .5em .5em 1em;
  border-radius: var(--radius-card);
  border-left: 12px solid var(--color-deep-teal);
}

/* Hero heading row (logo/title + intro paragraph side-by-side) */
.hero-row{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2rem;
}
@media (max-width: 860px){ .hero-row{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Info-box cards (Version / Updated / Category / Size etc.)
   ========================================================================== */
.info-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin: 2rem 0;
  border-top: 3px solid var(--color-accent);
  border-bottom: 3px solid var(--color-accent);
  border-radius: var(--radius-card);
  padding: 1rem 0;
}
@media (max-width: 1024px){ .info-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px){ .info-grid{ grid-template-columns: repeat(2, 1fr); } }

.info-box{
  text-align: center;
  border: 3px solid var(--color-accent);
  border-radius: 10px;
  padding: 1rem .5rem;
}
.info-box .info-icon{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-deep-teal);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .5em;
}
.info-box .info-title{ color: var(--color-white); font-weight: 700; margin: 0; }
.info-box .info-text{ color: var(--color-white); margin: .25em 0 0; }

/* ==========================================================================
   Table of Contents
   ========================================================================== */
.toc{
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  box-shadow: 0 0 40px rgba(43,190,171,.25);
}
.toc summary{
  cursor: pointer;
  font-weight: 700;
  color: var(--color-white);
  list-style: none;
}
.toc summary::-webkit-details-marker{ display: none; }
.toc ul{ margin-top: .75em; }
.toc a{ text-decoration: underline; }

/* ==========================================================================
   Accordion / FAQ
   ========================================================================== */
.accordion-item{
  border: 5px solid var(--color-accent);
  border-radius: var(--radius-card);
  margin-bottom: 1rem;
  overflow: hidden;
}
.accordion-item summary{
  cursor: pointer;
  background: var(--color-white);
  color: var(--color-deep-teal);
  font-weight: 700;
  padding: .9em 1em;
  list-style: none;
}
.accordion-item summary::-webkit-details-marker{ display: none; }
.accordion-item[open] summary{
  background: var(--color-accent);
  color: #fff;
}
.accordion-item .accordion-body{ padding: 1em; background: var(--color-white); color: var(--color-deep-teal); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--color-white); color: var(--color-deep-teal); }
.footer-row{ max-width: var(--content-width); margin: 0 auto; padding: 1.5rem; }
.footer-top{ border-top: 2px solid var(--color-accent); text-align: center; padding: 1.5rem 0; }
.footer-social{ display: flex; gap: .5rem; justify-content: center; }
.social-button{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.social-button:hover{ background: var(--color-accent-dark); color: #fff; }
.footer-nav ul{ list-style: none; display: flex; gap: 1rem; justify-content: center; padding: 0; flex-wrap: wrap; }
.footer-nav a{ color: var(--color-accent); }
.site-info{ text-align: center; color: var(--color-accent); padding: .75rem 0 1.25rem; font-size: 14px; }

/* Back to top */
#scroll-up{
  position: fixed; right: 30px; bottom: 30px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-accent); color: #fff; border: 2px solid #fff;
  display: none; align-items: center; justify-content: center;
}
#scroll-up.is-visible{ display: flex; }

/* ==========================================================================
   Added for static conversion: components referenced in page content but
   not originally defined in style.css (badges, tables, risk boxes, etc.)
   ========================================================================== */

.text-muted{ color: rgba(247,250,252,.7); font-size: .95em; }

/* Inline status badges */
.badge-inline{
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: .3em .9em;
  border-radius: var(--radius-pill);
  margin-bottom: 1em;
}
.badge-classified{ background: var(--color-accent); color: var(--color-white); }
.badge-pending{ background: #d97706; color: var(--color-white); }

/* Classification / claims data tables */
.classification-table, .claims-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  color: var(--color-deep-teal);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin: 1rem 0;
}
.classification-table th, .classification-table td,
.claims-table th, .claims-table td{
  text-align: left;
  padding: .75em 1em;
  border-bottom: 1px solid var(--color-bg-lighter);
  vertical-align: top;
}
.classification-table th{
  background: var(--color-deep-teal);
  color: var(--color-white);
  width: 220px;
  font-family: var(--font-heading);
}
.claims-table th{
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-heading);
}
.classification-table tr:last-child td, .claims-table tr:last-child td{ border-bottom: none; }
.status-verified{ color: #0d7a4a; font-weight: 700; }
.status-unverified{ color: #b45309; font-weight: 700; }
.status-pending{ color: #b45309; font-weight: 700; font-style: italic; }

/* Pending / Risk callout boxes */
.pending-box, .risk-box{
  background: var(--color-white);
  color: var(--color-deep-teal);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}
.pending-box{ border-left: 8px solid var(--color-accent); }
.risk-box{ border-left: 8px solid #dc2626; }
.risk-box strong{ color: #dc2626; display: block; margin-bottom: .35em; }
.pending-box .badge-pending{ margin-bottom: .5em; }

/* Pros & Cons */
.pros-cons-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1rem 0;
}
.pros-cons-grid h4{ margin-top: 0; }

/* Entry meta / thumbnail / tags (kept for any future post pages) */
.entry-title{ margin-top: 0; }
.entry-meta{ color: rgba(247,250,252,.65); font-size: 14px; margin-top: -.5em; }
.entry-thumbnail{ border-radius: var(--radius-card); overflow: hidden; margin: 1.5rem 0; }
.entry-tags{ font-size: 14px; }
.entry-tags a{ background: var(--color-deep-teal); padding: .3em .8em; border-radius: var(--radius-pill); margin-right: .4em; display: inline-block; }
.page-links{ margin-top: 1.5rem; font-weight: 600; }

/* Footer widgets */
.footer-widget-title{ color: var(--color-deep-teal); }

/* Static-site 404 search box (simple site-search redirect, no backend) */
.static-search{ display: flex; gap: .5rem; max-width: 420px; margin: 1.5rem auto; }
.static-search input[type="search"]{
  flex: 1;
  padding: .7em 1em;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-accent);
  font-family: var(--font-body);
  font-size: 15px;
}

@media (max-width: 700px){
  .pros-cons-grid{ grid-template-columns: 1fr; }
}

/* Mobile tweaks (from homepage) */
@media (max-width: 640px) {
	.hero-row{display:flex;flex-direction:column-reverse;gap:12px}
	.hero-row h1{font-size:1.4rem;line-height:1.3}
	.hero-row .btn{width:100%;justify-content:center;display:inline-flex}
	.hero-row img, .hero-row svg{max-width:120px;height:auto}
	.info-grid{grid-template-columns:repeat(2, 1fr) !important;gap:8px}
	.info-box{padding:8px}
	.info-title{font-size:.75rem}
	.info-text{font-size:.9rem;word-break:break-word}
	.classification-table, .claims-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
	.classification-table tr, .claims-table tr{display:table-row}
	.pros-cons-grid{grid-template-columns:1fr !important;gap:16px}
	.toc ul{padding-left:1.1rem}
	.toc li{margin-bottom:4px}
	.risk-box{padding:12px;font-size:.9rem}
	table{font-size:.85rem}
}