/* 1. External CSS ← Best Practice */
<link rel="stylesheet" href="style.css">

/* 2. Internal CSS */
<style>
  body { background: pink; }
</style>

/* 3. Inline CSS ← ចៀសវាង */
<p style="color: red;">Text</p>

/* selector { property: value; } */
h1 { color: navy; font-size: 32px; }

/* Specificity ចំណាត់ (ខ្ពស់ → ចូចួល) */
/* !important    = ∞  (ចៀសវាង!)
   Inline style   = 1000
   ID #id         = 100
   Class .cls     = 10
   Element tag    = 1  */

#logo     { color: red;   }   /* wins: 100 */
.header   { color: blue;  }   /* score: 10 */
h1         { color: green; }   /* score: 1  */

/* Inheritance */
body { font-family: sans-serif; color: #333; }
/* Children inherit font-family, color etc. */

/* Universal */
*            { box-sizing: border-box; }

/* Type (element) */
p            { color: gray; }

/* Class */
.btn         { background: blue; }
.btn.primary { background: navy; } /* multi-class */

/* ID */
#hero        { height: 100vh; }

/* Attribute */
input[type="email"]    { border: 2px solid blue; }
a[href^="https"]       { color: green; }  /* starts with */
a[href$=".pdf"]        { color: red; }    /* ends with */
a[href*="example"]     { opacity: 0.8; }  /* contains */

/* Combinators */
nav a        { text-decoration: none; }   /* descendant */
ul > li      { list-style: none; }       /* direct child */
h1 + p       { margin-top: 0; }          /* adjacent sibling */
h1 ~ p       { color: gray; }           /* general sibling */

/* Grouping */
h1, h2, h3  { font-weight: 700; }

.box {
  /* Content */
  width:   300px;
  height:  200px;

  /* Padding — ចន្លោះខាងក្នុង */
  padding: 20px;              /* all sides */
  padding: 10px 20px;        /* top/bottom left/right */
  padding: 5px 10px 15px 20px;/* top right bottom left */

  /* Border */
  border:  2px solid #333;
  border-radius: 8px;

  /* Margin — ចន្លោះខាងក្រៅ */
  margin: 0 auto;             /* center horizontally */

  /* box-sizing ← ប្រើ border-box ជានិច្ច */
  box-sizing: border-box;
  /* padding+border included IN width — មិន overflow */
}

/* Reset box-sizing globally */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Overflow */
.container {
  overflow:   hidden;   /* លាក់ content ដែលហួស */
  overflow:   scroll;   /* scroll bar */
  overflow:   auto;     /* scroll if needed */
  overflow-x: hidden;   /* horizontal only */
}

.element {
  display: block;         /* ពេញបណ្ដោយ row */
  display: inline;        /* តាម content width */
  display: inline-block;  /* inline + width/height */
  display: none;          /* លាក់ + Remove space */
  display: flex;          /* Flexbox container */
  display: grid;          /* Grid container */
}

/* Position */
.pos {
  position: static;    /* default */
  position: relative;  /* relative to itself */
  position: absolute;  /* remove from flow */
  position: fixed;     /* relative to viewport */
  position: sticky;    /* scroll + fixed combo */
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
}

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family:    'Roboto', sans-serif;
  font-size:      16px;        /* base size */
  font-weight:    400;         /* normal=400, bold=700 */
  font-style:     normal;      /* italic, oblique */
  line-height:    1.6;         /* ×font-size (unitless) */
  letter-spacing: 0.01em;     /* ចន្លោះអក្សរ */
  word-spacing:   0.05em;     /* ចន្លោះពាក្យ */
}

h1 {
  font-size:      clamp(28px, 5vw, 56px); /* responsive! */
  font-weight:    900;
  text-transform: uppercase;  /* lowercase, capitalize */
  text-align:     center;     /* left, right, justify */
}

p {
  text-decoration: none;       /* underline, line-through */
  text-indent:     2em;        /* inti paragraph */
  white-space:     nowrap;     /* no wrap */
  overflow:        hidden;
  text-overflow:   ellipsis;   /* ... truncate */
}

.colors {
  color: red;                 /* Named */
  color: #e85d3a;             /* HEX */
  color: #e85d3a80;           /* HEX + 50% opacity */
  color: rgb(232, 93, 58);   /* RGB */
  color: rgba(232,93,58,0.5); /* RGBA */
  color: hsl(14, 79%, 57%);  /* HSL */
  color: oklch(0.65 0.18 30);/* Modern (P3) */
  opacity: 0.8;               /* Element + children */
}

/* Gradient */
.grad {
  background: linear-gradient(135deg, #e85d3a, #d97706);
  background: linear-gradient(to right, coral, gold);
  background: radial-gradient(circle at center, white, navy);
  background: conic-gradient(red, yellow, green, red);
}

/* Background Image */
.hero {
  background-image:    url('hero.jpg');
  background-size:     cover;     /* contain, auto */
  background-position: center;
  background-repeat:   no-repeat;
  background-attachment: fixed;  /* parallax */

  /* Overlay Gradient + Image */
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
               url('hero.jpg') center/cover;
}

/* ═ CONTAINER ═ */
.flex-container {
  display:         flex;

  /* Direction */
  flex-direction:  row;            /* row-reverse, column, column-reverse */

  /* Wrap */
  flex-wrap:       wrap;           /* nowrap, wrap-reverse */

  /* Main Axis (→ for row) */
  justify-content: flex-start;    /* flex-end, center */
  justify-content: space-between; /* space-around, space-evenly */

  /* Cross Axis (↓ for row) */
  align-items:     stretch;       /* flex-start, flex-end, center, baseline */

  /* Multi-line Cross Axis */
  align-content:   flex-start;

  /* Gap */
  gap:             16px;
  row-gap:         12px;
  column-gap:      20px;
}

/* ═ ITEMS ═ */
.flex-item {
  flex-grow:   1;    /* ចែករំលែក space ដែលនៅ */
  flex-shrink: 0;    /* 0 = មិន shrink */
  flex-basis:  200px;/* initial size */
  flex:        1 0 200px; /* shorthand */
  align-self:  center;    /* override align-items */
  order:       2;         /* ប្ដូរ order visual */
}

/* ═ GRID CONTAINER ═ */
.grid {
  display: grid;

  /* Columns */
  grid-template-columns: 1fr 2fr 1fr;       /* 3 columns */
  grid-template-columns: repeat(3, 1fr);    /* equal 3 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* ↑ Responsive: fit as many 200px cols as possible */

  /* Rows */
  grid-template-rows: auto 1fr auto;       /* header/main/footer */
  grid-auto-rows:     minmax(100px, auto);

  gap: 20px;
  place-items: center;                       /* align+justify */
}

/* Named Areas */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main   main"
    "footer footer footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows:    auto 1fr auto;
  min-height: 100vh;
}

.header  { grid-area: header;  }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main;    }
.footer  { grid-area: footer;  }

/* ═ GRID ITEMS ═ */
.item {
  grid-column: 1 / 3;     /* span 2 cols */
  grid-column: 1 / -1;   /* full width */
  grid-column: span 2;    /* span 2 from current pos */
  grid-row:    span 2;    /* span 2 rows */
}

/* Mobile-First approach ← Best Practice */
/* Base styles for mobile (no query) */
.container {
  padding:    16px;
  font-size:  15px;
}

/* Tablet ≥ 640px */
@media (min-width: 640px) {
  .container { padding: 24px; }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: auto; }
}

/* Print */
@media print { .no-print { display: none; } }

/* Orientation */
@media (orientation: landscape) { ... }

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

/* Responsive Typography with clamp() */
h1 {
  font-size: clamp(24px, 5vw, 64px);
  /* min=24px, preferred=5vw, max=64px */
}

/* Fluid spacing */
.section {
  padding: clamp(24px, 8vw, 96px);
}

/* Viewport Units */
.hero {
  width:  100vw;   /* viewport width */
  height: 100vh;   /* viewport height */
  height: 100svh;  /* small viewport (mobile browser bar) */
  height: 100dvh;  /* dynamic viewport */
}

/* transition: property duration easing delay */
.btn {
  background:  coral;
  transform:   scale(1);
  transition:  all 0.3s ease;
  /* Multiple */
  transition:  background 0.3s ease,
               transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:hover {
  background: crimson;
  transform:  scale(1.05);
}

/* Transform */
.element {
  transform: translateX(20px);
  transform: translateY(-10px);
  transform: translate(20px, -10px);
  transform: scale(1.5);
  transform: rotate(45deg);
  transform: skewX(10deg);
  transform: rotate(45deg) scale(1.2); /* chain */
  transform-origin: center; /* top left, 50% 50% */
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

.card {
  animation: fadeInUp 0.6s ease both;
  /* name duration timing fill-mode */
  animation: pulse 2s ease-in-out infinite;
  animation-delay:     0.2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-play-state: paused; /* paused on hover */
}

/* Stagger animation */
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

/* Define variables ក្នុង :root (global) */
:root {
  --color-primary:   #e85d3a;
  --color-secondary: #0d9488;
  --color-bg:        #faf7f2;
  --color-text:      #1a1f3a;

  --font-body:    'Noto Sans', sans-serif;
  --font-heading: 'Playfair Display', serif;

  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;

  --radius:   10px;
  --shadow:   0 4px 20px rgba(0,0,0,.1);
}

/* Use with var() */
.card {
  background:   var(--color-bg);
  color:        var(--color-text);
  padding:      var(--space-md);
  border-radius:var(--radius);
  box-shadow:   var(--shadow);
}

/* Fallback */
.btn {
  background: var(--btn-color, coral); /* fallback=coral */
}

/* Scoped Variable */
.dark-card {
  --color-bg:   #1a1f3a; /* override locally */
  --color-text: #ffffff;
  background:   var(--color-bg);
}

/* Dark Mode Theming */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:   #0f0e0c;
    --color-text: #f0ebe0;
  }
}

/* JS Integration */
// document.documentElement.style
//   .setProperty('--color-primary', '#ff6b35');
// getComputedStyle(el).getPropertyValue('--color-primary');

/* ─ User Action ─ */
a:hover        { color: coral; }
input:focus    { outline: 2px solid coral; }
button:active  { transform: scale(.97); }
input:disabled { opacity: .5; }
input:checked  { accent-color: coral; }
input:valid    { border-color: green; }
input:invalid  { border-color: red; }

/* ─ Structural ─ */
li:first-child     { margin-top: 0; }
li:last-child      { border-bottom: none; }
li:nth-child(2n)   { background: lightyellow; } /* even */
li:nth-child(odd)  { background: white; }
li:nth-child(3n+1) { color: coral; }

/* ─ Modern Selectors ─ */
:is(h1, h2, h3)    { font-weight: 700; }
:not(.active)      { opacity: .6; }
:where(.card) p    { color: gray; }  /* 0 specificity */
:has(img)          { border: 1px solid coral; }

/* ::before / ::after — content: required! */
.badge::before {
  content:    '★';
  color:      gold;
  margin-right: 4px;
}

.tooltip::after {
  content:    attr(data-tip); /* dynamic from HTML attribute */
  position:   absolute;
  background: #111;
  color:      #fff;
  padding:    4px 8px;
  border-radius: 4px;
  opacity:    0;
  transition: opacity .2s;
}
.tooltip:hover::after { opacity: 1; }

/* ::placeholder */
input::placeholder { color: #aaa; font-style: italic; }

/* ::selection — Text highlight */
::selection { background: #e85d3a; color: #fff; }

/* ::first-line / ::first-letter */
p::first-letter {
  font-size: 3em; float: left; line-height: 1;
  color: coral; margin-right: 4px;
}

/* BEM: block__element--modifier */

/* HTML */
/* <div class="card card--featured">
     <h2 class="card__title">Title</h2>
     <p class="card__body">Text</p>
     <button class="card__btn card__btn--primary">CTA</button>
   </div> */

/* CSS */
.card             { background: white;  border-radius: 8px; }
.card--featured   { border: 2px solid coral; }
.card__title      { font-size: 1.5rem; font-weight: 700; }
.card__body       { color: gray; }
.card__btn        { padding: 8px 16px; border-radius: 6px; }
.card__btn--primary{ background: coral; color: white; }

/* ─ CSS @layer (Cascade Layers) ─ */
@layer reset, base, components, utilities;

@layer reset       { *, *::before, *::after { box-sizing: border-box; } }
@layer base        { body { font-family: sans-serif; } }
@layer components  { .btn { padding: 8px 16px; } }
@layer utilities   { .mt-4 { margin-top: 16px; } }
/* utilities wins over components (declared last) */

/* ─ Logical Properties ─ */
.box {
  /* Writing-mode aware (RTL, vertical text) */
  margin-inline:  auto;     /* margin-left + right */
  padding-block:  16px;     /* padding-top + bottom */
  border-end-start-radius: 8px;
  inset-inline-start: 0;    /* left in LTR */
}

/* Container Query — Style ទៅតាម container width */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card { display: flex; gap: 16px; }
  .card img { width: 160px; }
}

/* Subgrid — align nested items to parent grid */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.card {
  grid-column: span 1;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* inherit parent rows */
}

/* Scroll Snap */
.slides {
  overflow-x:           scroll;
  scroll-snap-type:      x mandatory;
  scroll-behavior:      smooth;
  -webkit-overflow-scrolling: touch;
}
.slide {
  scroll-snap-align: start;
  flex-shrink:       0;
  width:             100%;
}

/* Aspect Ratio */
.video-wrap { aspect-ratio: 16 / 9; }
.avatar     { aspect-ratio: 1; width: 60px; }

/* Multi-column Layout */
.article {
  columns:      3 200px;  /* max 3, min 200px */
  column-gap:   32px;
  column-rule:  1px solid #ddd;
}

/* will-change — tell browser what will animate */
.modal   { will-change: transform, opacity; }
/* Remove after animation: el.style.willChange = 'auto' */

/* contain — isolate rendering scope */
.widget  { contain: layout paint; }
.card    { contain: strict; }

/* content-visibility — skip off-screen render */
.section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* GPU compositing: use transform/opacity over top/left */
/* ❌ */ 
.bad  { left: 100px; transition: left .3s; }
/* ✅ */
.good { transform: translateX(100px); transition: transform .3s; }

/* CSS Nesting (ដូច SASS!) */
.card {
  background: white;

  &:hover    { background: lightyellow; }
  & .title   { font-size: 1.5rem; }
  & .body    { color: gray; }

  @media (min-width: 640px) {
    display: flex;
  }
}

/* color-mix() */
:root {
  --btn-hover: color-mix(in oklch, coral 80%, black);
}

/* @scope */
@scope (.card) to (.card .inner) {
  p { color: navy; }
}

/* View Transition API */
::view-transition-old(root) {
  animation: slide-out 0.3s ease;
}
::view-transition-new(root) {
  animation: slide-in 0.3s ease;
}

/* text-wrap: balance / pretty */
h1 { text-wrap: balance; } /* even line lengths */
p  { text-wrap: pretty;  } /* no orphaned words */

/* Scroll-driven Animations */
@keyframes reveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll {
  animation:        reveal linear both;
  animation-timeline: view();
  animation-range:   entry 0% entry 40%;
}