/*
Theme Name:   Gadgethjem (Tech-Test Child)
Theme URI:    https://gadgethjem.tech-test.dk
Description:  Video-first child theme til MH Theme (MH Magazine). Bygget til et gadget-til-hjemmet subdomæne under Tech-Test.dk – kaffemaskiner, robotstøvsugere, robotplæneklippere og smart home.
Author:       Blackbelt Communications
Template:     mh-magazine
Version:      1.0.5
Text Domain:  gadgethjem-child

VIGTIGT: "Template:" skal matche mappenavnet på din installerede MH Theme
under wp-content/themes/ PRÆCIST (fx "mh-magazine" eller "mh-magazine-lite").
Tjek det i /wp-content/themes/ på serveren og ret linjen ovenfor hvis nødvendigt,
ellers vil WordPress ikke kunne aktivere child temaet.
*/

/* ===========================================================
   1. DESIGN TOKENS – Tech-Test's grønne farvetema
   Primær grøn: #0b9444 (jeres eksakte farve). De øvrige grønne
   nuancer herunder er afledt af den (mørkere til baggrunde,
   lidt mørkere til hover) for at holde paletten sammenhængende.
   =========================================================== */
:root{
  --gh-navy:        #0a3320;
  --gh-navy-light:  #0f5c33;
  --gh-orange:      #0b9444;
  --gh-orange-dark: #087a38;
  --gh-bg:          #f5f6f8;
  --gh-card:        #ffffff;
  --gh-text:        #1c2430;
  --gh-text-muted:  #6b7280;
  --gh-radius:      14px;
  --gh-shadow:      0 6px 20px rgba(11,31,58,0.08);
  --gh-max-width:   1180px;
}

body{ background: var(--gh-bg); color: var(--gh-text); }
a{ color: var(--gh-orange-dark); }
a:hover{ color: var(--gh-orange); }

.gh-container{ max-width: var(--gh-max-width); margin: 0 auto; padding: 0 20px; }

/* ===========================================================
   2. HERO / FEATURED VIDEO
   Rent, fuldbredt billede/video – ingen tekst ovenpå.
   En afrundet bjælke "hænger" centreret ned over kanten i bunden.
   =========================================================== */
.gh-hero{
  position: relative;
  margin: 0 0 64px;
}
.gh-hero__frame{
  display:block;
  position:relative;
  text-decoration:none;
  /* OBS: intet overflow:hidden her — det ville klippe bjælken,
     som bevidst skal hænge ud over kanten af billedet nedenfor. */
}
.gh-hero__media{
  position:relative;
  padding-top: 46%; /* bredt, filmisk format */
  background: linear-gradient(135deg, var(--gh-navy) 0%, var(--gh-navy-light) 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--gh-shadow);
}
@media (max-width: 700px){ .gh-hero__media{ padding-top: 76%; } }
.gh-hero__media img,
.gh-hero__media iframe,
.gh-hero__media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
}
.gh-hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(11,31,58,0) 55%, rgba(11,31,58,.5) 100%);
}
.gh-hero__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.gh-hero__play span{
  width:72px; height:72px; border-radius:50%;
  background: rgba(255,255,255,.92); color: var(--gh-navy);
  display:flex; align-items:center; justify-content:center; font-size:26px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Den svævende bjælke */
.gh-hero__badge{
  position:absolute; left:50%; bottom:0;
  transform: translate(-50%, 50%);
  display:inline-flex; align-items:center; gap:12px;
  background: var(--gh-navy);
  color:#fff;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(11,31,58,.3);
  max-width: 88%;
  white-space: nowrap;
}
.gh-hero__badge-label{
  flex-shrink:0;
  background: var(--gh-orange); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.gh-hero__badge-title{
  font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 600px){
  .gh-hero__badge{ padding:10px 18px; gap:8px; }
  .gh-hero__badge-title{ display:none; } /* kun label på små skærme, undgår klemt tekst */
}

.gh-btn{
  display:inline-flex; align-items:center; gap:8px; background: var(--gh-orange);
  color:#fff; font-weight:600; padding:11px 20px; border-radius:999px;
  text-decoration:none; transition: background .15s ease;
}
.gh-btn:hover{ background: var(--gh-orange-dark); color:#fff; }

/* ===========================================================
   3. KATEGORI-FLISER
   =========================================================== */
.gh-categories{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin: 0 0 48px; }
@media (max-width: 860px){ .gh-categories{ grid-template-columns:repeat(2,1fr); } }
.gh-category-tile{
  background: var(--gh-card); border-radius: var(--gh-radius); padding:22px 18px;
  text-align:center; box-shadow: var(--gh-shadow); text-decoration:none; color:var(--gh-text);
  transition: transform .15s ease;
}
.gh-category-tile:hover{ transform: translateY(-4px); color:var(--gh-text); }
.gh-category-tile__icon{ font-size:32px; display:block; margin-bottom:10px; }
.gh-category-tile__name{ font-weight:700; }
.gh-category-tile__count{ font-size:13px; color: var(--gh-text-muted); }

/* ===========================================================
   4. VIDEO-GRID
   =========================================================== */
.gh-section-title{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:20px;
}
.gh-section-title h2{ font-size:22px; margin:0; border-left:4px solid var(--gh-orange); padding-left:12px; }
.gh-section-title a{ font-size:14px; font-weight:600; }

.gh-video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:48px; }
@media (max-width: 900px){ .gh-video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .gh-video-grid{ grid-template-columns:1fr; } }

.gh-video-card{
  background: var(--gh-card); border-radius: var(--gh-radius); overflow:hidden;
  box-shadow: var(--gh-shadow); text-decoration:none; color: var(--gh-text); display:block;
}
.gh-video-card__thumb{ position:relative; padding-top:56.25%; background:#0002; }
.gh-video-card__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gh-video-card__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.gh-video-card__play span{
  width:54px; height:54px; border-radius:50%; background: rgba(11,31,58,.75);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px;
}
.gh-video-card__body{ padding:16px 16px 18px; }
.gh-video-card__cat{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--gh-orange-dark); }
.gh-video-card__title{ font-size:16px; margin:6px 0 0; line-height:1.35; color: var(--gh-text); }

/* ===========================================================
   5. FRA TECH-TEST + TIPS & TRICKS
   To smalle, tekst-baserede bokse side om side, over videogrid'et.
   =========================================================== */
.gh-duo{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:48px; }
@media (max-width: 860px){ .gh-duo{ grid-template-columns:1fr; } }

.gh-panel{ background: var(--gh-card); border-radius: var(--gh-radius); padding:24px; box-shadow: var(--gh-shadow); }

.gh-section-title--compact{ margin-bottom:8px; }
.gh-section-title--compact h2{ font-size:17px; }
.gh-section-title--compact a{ font-size:13px; }

.gh-mini-list{ display:flex; flex-direction:column; }
.gh-mini-list__item{
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid #eee;
  text-decoration:none; color: var(--gh-text);
}
.gh-mini-list__item:last-child{ border-bottom:none; }
.gh-mini-list__item:hover .gh-mini-list__title{ color: var(--gh-orange-dark); }
.gh-mini-list__badge{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background: rgba(11,148,68,.12); color: var(--gh-orange-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.gh-mini-list__thumb{
  flex-shrink:0; width:44px; height:44px; border-radius:8px;
  overflow:hidden; background: rgba(11,148,68,.12);
  display:flex; align-items:center; justify-content:center;
}
.gh-mini-list__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gh-mini-list__thumb-fallback{ font-size:16px; }
.gh-mini-list__title{ font-size:14px; font-weight:600; line-height:1.4; }

/* ===========================================================
   6. SINGLE VIDEO / PRODUKT-SPECS
   =========================================================== */
.gh-single-video__player{ position:relative; padding-top:56.25%; border-radius: var(--gh-radius); overflow:hidden; box-shadow: var(--gh-shadow); margin-bottom:22px; }
.gh-single-video__player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.gh-specs{ background:#fff; border-radius: var(--gh-radius); padding:20px 22px; box-shadow: var(--gh-shadow); margin:24px 0; }
.gh-specs table{ width:100%; border-collapse:collapse; }
.gh-specs td{ padding:8px 0; border-bottom:1px solid #eee; font-size:14px; }
.gh-specs td:first-child{ color: var(--gh-text-muted); width:40%; }