/*
Theme Name: Quebec IPTV Home
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: Minimal theme rendering Quebec IPTV homepage only.
Version: 1.0.0
License: GPL-2.0+
Text Domain: quebec-iptv-home
*/

:root{
  --background: 218 23% 7%;
  --foreground: 210 40% 98%;

  --card: 220 25% 10%;
  --card-foreground: 210 40% 98%;

  --popover: 220 25% 10%;
  --popover-foreground: 210 40% 98%;

  --primary: 15 100% 55%;
  --primary-foreground: 220 25% 10%;

  --secondary: 220 25% 15%;
  --secondary-foreground: 210 40% 98%;

  --muted: 220 25% 15%;
  --muted-foreground: 215 20% 65%;

  --accent: 15 100% 55%;
  --accent-foreground: 220 25% 10%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;

  --border: 220 25% 20%;
  --input: 220 25% 15%;
  --ring: 15 100% 55%;

  /* Brand tokens */
  --brand-orange: 15 100% 55%;
  --brand-orange-hover: 15 100% 60%;
  --brand-dark: 218 23% 7%;
  --brand-card: 220 25% 10%;
  --brand-border: 220 25% 20%;

  /* Effects */
  --shadow-card: 0 4px 20px hsl(0 0% 0% / 0.3);
  --shadow-glow: 0 0 30px hsl(15 100% 55% / 0.2);

  --radius: 8px;
}

html,body{
  margin:0;
  padding:0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  line-height:1.5;
}

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

.container{
  max-width: 72rem;
  margin-left:auto;
  margin-right:auto;
  padding-left:1rem;
  padding-right:1rem;
}
@media (min-width: 1536px){
  .container{max-width: 1400px;}
}

/* Utility equivalents used in Index.tsx */
.min-h-screen{min-height:100vh}
.bg-background{background: hsl(var(--background))}
.bg-card{background: hsl(var(--card))}
.text-foreground{color: hsl(var(--foreground))}
.text-muted-foreground{color: hsl(var(--muted-foreground))}
.text-primary{color: hsl(var(--primary))}
.text-primary-foreground{color: hsl(var(--primary-foreground))}
.border-brand-border{border-color: hsl(var(--brand-border))}
.border-t{border-top:1px solid}
.border{border:1px solid}
.rounded-lg{border-radius: var(--radius)}
.px-4{padding-left:1rem;padding-right:1rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.p-6{padding:1.5rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.mt-16{margin-top:4rem}
.text-left{text-align:left}
.text-center{text-align:center}
.max-w-4xl{max-width:56rem}
.max-w-2xl{max-width:42rem}
.mx-auto{margin-left:auto;margin-right:auto}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-5xl{font-size:3rem;line-height:1.1}
.text-6xl{font-size:3.75rem;line-height:1.1}
.leading-relaxed{line-height:1.625}
.list-disc{list-style:disc}
.list-inside{padding-left:1rem}
.space-y-2 > * + *{margin-top:0.5rem}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.space-x-2 > * + *{margin-left:0.5rem}
.space-x-3 > * + *{margin-left:0.75rem}
.h-12{height:3rem}
.w-12{width:3rem}
.object-contain{object-fit:contain}

/* Button styles (if needed later) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:0.75rem 1rem;
  font-weight:600;
  border-radius: calc(var(--radius));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  cursor:pointer;
  transition: filter .2s ease, opacity .2s ease;
}
.btn:hover{filter: brightness(1.05)}

/* Header */
.site-header{
  background:hsl(var(--background));
  border-bottom:1px solid hsl(var(--brand-border));
}
.brand{
  display:flex;align-items:center;gap:0.75rem;text-decoration:none;color:inherit;
}
.brand-title{font-size:1.25rem;font-weight:700;color:hsl(var(--primary))}

/* Cards */
.card{
  background:hsl(var(--card));
  border:1px solid hsl(var(--brand-border));
  border-radius: var(--radius);
  padding:1.5rem;
  box-shadow: var(--shadow-card);
}

/* Footer */
.site-footer{
  background:hsl(var(--card));
  border-top:1px solid hsl(var(--brand-border));
  padding-top:1.5rem;padding-bottom:1.5rem;
}

/* Links */
a{color:inherit;text-decoration:none}
a:hover{color:hsl(var(--primary))}

.header-nav{display:flex;align-items:center;justify-content:space-between}

/* Small dot used in country list (kept for potential reuse) */
.dot{width:0.5rem;height:0.5rem;background:hsl(var(--primary));border-radius:9999px}

/* Responsive grid helpers (not used on home, but handy) */
.grid{display:grid;gap:2rem}
@media (min-width: 768px){
  .md\:grid-cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (min-width: 1024px){
  .lg\:grid-cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns: repeat(4, minmax(0,1fr))}
}