/*
Theme Name: 365 Breaking
Theme URI: https://example.com
Author: Claude
Author URI: https://example.com
Description: Magasin-tema til nyheds- og underholdningssites. Forsiden viser farvede teaser-kort i et grid, mens indlæg/sider bruger en renere artikel-opsætning med fremhævet billede og billedtekst.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bn365
*/

/* -------------------------------------------------
   0. Variabler / farvepalet
------------------------------------------------- */
:root{
  --color-white:  #fff;
  --color-black:  #000;
  --color-red:    #b90e16;
  --color-yellow: #fbe100;
  --color-blue:   #1a446c;
  --color-grey-200: #eeeeee;
  --color-grey-400: #333333;
  --color-grey-450: #595959;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --grid-width: 960px;
  --gap: 10px;
}

/* -------------------------------------------------
   1. Reset / base
------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--color-black);
  background:var(--color-grey-200);
  line-height:1.5;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);font-weight:700;}
p{margin:0 0 1em;}

.wrap{max-width:var(--grid-width);margin:0 auto;padding:0 10px;}
.bg-white{background:var(--color-white);}

/* -------------------------------------------------
   2. Header / navigation
------------------------------------------------- */
.screen-reader-text{
  position:absolute !important;
  height:1px;width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

.site-header{
  position:sticky;
  top:-1px;
  z-index:50;
  background:var(--color-black);
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
}
.site-header__inner{
  max-width:var(--grid-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:72px;
  padding:0 10px;
}

/* Logo – lidt større end tidligere, men uden at dominere headeren */
.site-logo{
  display:flex;
  align-items:center;
  height:48px;
  max-width:220px;
  flex-shrink:0;
}
.site-logo img{
  max-height:48px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.site-logo-text{
  display:block;
  color:var(--color-white);
  font-family:var(--font-display);
  font-size:26px;
  font-weight:700;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Burger-knap – altid synlig, uanset skærmstørrelse */
.menu-toggle{
  position:relative;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:44px;
  height:44px;
  background:none;
  border:0;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  width:26px;
  height:3px;
  background:var(--color-white);
  transition:transform .25s ease, opacity .2s ease;
}
.menu-toggle.is-active span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.menu-toggle.is-active span:nth-child(2){opacity:0;}
.menu-toggle.is-active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* Menu-panel der folder ned under headeren, når man klikker på burger-ikonet */
.site-menu-panel{
  position:absolute;
  left:0;right:0;top:100%;
  background:var(--color-black);
  color:var(--color-white);
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.site-menu-panel.is-open{
  max-height:85vh;
  overflow-y:auto;
}
.site-menu-panel__inner{
  max-width:var(--grid-width);
  margin:0 auto;
  padding:20px 20px 30px;
}

/* Søgefelt i menuen */
.search-form{
  display:flex;
  margin-bottom:20px;
}
.search-form .search-field{
  flex:1;
  min-width:0;
  border:0;
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:16px;
}
.search-form .search-submit{
  flex-shrink:0;
  border:0;
  padding:0 20px;
  background:var(--color-red);
  color:var(--color-white);
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  cursor:pointer;
}
.search-form .search-submit:hover{background:var(--color-yellow);color:var(--color-black);}

/* Selve menulinkene i panelet */
.site-menu-panel__nav ul{display:flex;flex-direction:column;}
.site-menu-panel__nav > ul > li{border-bottom:1px solid rgba(255,255,255,.15);}
.site-menu-panel__nav a{
  display:block;
  padding:14px 2px;
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:20px;
  color:var(--color-white);
}
.site-menu-panel__nav a:hover{color:var(--color-yellow);}
.site-menu-panel__nav ul ul{padding-left:15px;}
.site-menu-panel__nav ul ul a{font-size:16px;font-weight:500;padding:10px 2px;}

body.has-open-menu{overflow:hidden;}

/* -------------------------------------------------
   3. Forside – grid med teaser-kort
------------------------------------------------- */
.front-grid{
  max-width:var(--grid-width);
  margin:0 auto;
  padding:20px 10px 40px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
}

.teaser{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:var(--color-black);
  background:var(--color-white);
}
.teaser--yellow{background:var(--color-yellow);color:var(--color-black);}
.teaser--red{background:var(--color-red);color:var(--color-white);}
.teaser--blue{background:var(--color-blue);color:var(--color-white);}
.teaser--black{background:var(--color-black);color:var(--color-white);}

/* størrelser (12-kolonne grid) */
.teaser--full{grid-column:span 12;}
.teaser--two-thirds{grid-column:span 8;}
.teaser--half{grid-column:span 6;}
.teaser--third{grid-column:span 4;}
.teaser--quarter{grid-column:span 3;}

@media (max-width:999px){
  .teaser--two-thirds,.teaser--half,.teaser--third,.teaser--quarter{grid-column:span 6;}
}
@media (max-width:640px){
  .teaser--two-thirds,.teaser--half,.teaser--third,.teaser--quarter,.teaser--full{grid-column:span 12;}
}

.teaser__label{
  display:inline-block;
  align-self:flex-start;
  background:var(--color-red);
  color:var(--color-white);
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:14px;
  padding:5px 10px 3px;
}
.teaser--yellow .teaser__label,
.teaser--red .teaser__label{background:var(--color-black);color:var(--color-white);}
.teaser--blue .teaser__label,
.teaser--black .teaser__label{background:var(--color-yellow);color:var(--color-black);}

.teaser__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--color-grey-200);}
.teaser__media img{width:100%;height:100%;object-fit:cover;}

.teaser__body{padding:15px;flex:1;display:flex;flex-direction:column;}
.teaser__pretitle{
  align-self:flex-start;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:15px;
  margin-bottom:6px;
}
.teaser--yellow .teaser__pretitle,
.teaser--white .teaser__pretitle{color:var(--color-red);}
.teaser--red .teaser__pretitle,
.teaser--blue .teaser__pretitle,
.teaser--black .teaser__pretitle{color:var(--color-yellow);}

.teaser__title{
  font-family:var(--font-display);
  font-weight:700;
  line-height:.95;
  font-size:28px;
}
.teaser--full .teaser__title{font-size:44px;}
.teaser--two-thirds .teaser__title{font-size:34px;}
.teaser--quarter .teaser__title{font-size:22px;}
.teaser__title strong{color:var(--color-red);}
.teaser--red .teaser__title strong,
.teaser--blue .teaser__title strong,
.teaser--black .teaser__title strong{color:var(--color-yellow);}

.teaser__excerpt{margin-top:8px;font-size:15px;line-height:1.35;}

/* annonce-placeholder mellem grid-rækker */
.ad-slot{
  grid-column:1/-1;
  text-align:center;
  padding:20px 0;
}
.ad-slot span{
  display:block;
  font-size:12px;
  color:#666;
  margin-bottom:8px;
}
.ad-slot .ad-box{
  min-height:250px;
  background:repeating-linear-gradient(45deg,#eee,#eee 10px,#e2e2e2 10px,#e2e2e2 20px);
  display:flex;align-items:center;justify-content:center;
  color:#999;font-size:13px;
}

/* -------------------------------------------------
   4. Enkelt indlæg / side
------------------------------------------------- */
.article{
  max-width:700px;
  margin:0 auto;
  padding:40px 20px 0;
  background:var(--color-white);
}
.article__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-bottom:20px;
  color:var(--color-grey-450);
  font-size:14px;
}
.article__meta a{
  text-transform:uppercase;font-weight:700;color:var(--color-red);
}
.article__title{
  font-size:42px;
  line-height:46px;
  font-weight:700;
  margin-bottom:15px;
}
@media (min-width:1024px){
  .article__title{font-size:50px;line-height:55px;}
}
.article__lead{
  font-size:20px;
  line-height:26px;
  font-weight:700;
  margin-bottom:20px;
  font-family:var(--font-body);
}
.article__byline{
  display:flex;align-items:center;flex-wrap:wrap;margin-bottom:20px;font-size:14px;
}
.article__byline a{color:var(--color-blue);}
.article__byline-date{color:var(--color-grey-450);}

/* Fremhævet billede + billedtekst (obligatorisk på post/page) */
.article__media{
  margin:0 0 40px;
  background:var(--color-grey-200);
}
.article__media img{width:100%;}
.article__caption{
  padding:10px 20px;
  font-size:15px;
  line-height:19px;
  background:var(--color-grey-200);
}
.article__caption .credit{color:var(--color-grey-450);}

.article__body{
  padding-bottom:40px;
  font-size:1.165rem;
  line-height:1.813rem;
}
@media (min-width:768px){
  .article__body{font-size:1.25rem;line-height:1.875rem;}
}
.article__body p{margin-bottom:20px;}
.article__body h2{font-size:1.375rem;margin-bottom:10px;line-height:1.625rem;}
.article__body h3{font-size:1.125rem;margin-bottom:5px;line-height:1.688rem;}
.article__body a{color:var(--color-black);text-decoration:underline;}
.article__body a:hover{color:var(--color-red);}
.article__body ul,.article__body ol{margin-bottom:20px;padding-left:20px;}
.article__body ul li{
  display:flex;align-items:flex-start;margin-bottom:15px;
}
.article__body ul li::before{
  content:"";
  display:inline-block;
  border-radius:9999px;
  background:var(--color-red);
  width:8px;height:8px;
  margin:8px 15px 0 0;
  flex-shrink:0;
}
.article__body figure{margin:0 0 25px;background:var(--color-white);}
.article__body figcaption{
  padding:10px 20px;font-size:15px;line-height:19px;background:var(--color-grey-200);
}

.article__tags{padding:20px 0 40px;border-top:1px solid #e5e5e5;margin-top:20px;}
.article__tags a{
  display:inline-block;
  margin:0 8px 8px 0;
  padding:5px 12px;
  background:var(--color-grey-200);
  font-size:13px;
  text-transform:uppercase;
  font-weight:700;
}

/* Read-also / relateret boks */
.read-also{
  display:flex;
  align-items:center;
  background:var(--color-grey-400);
  color:var(--color-white);
  margin:20px auto;
  max-width:700px;
  padding:10px;
}
.read-also img{width:100px;height:100px;object-fit:cover;margin-right:20px;}
.read-also__label{
  display:block;font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--color-white);
}
.read-also__title{font-size:16px;line-height:22px;}

/* Sideskabelon (page.php) – lidt smallere/roligere */
.page-content{max-width:700px;margin:0 auto;padding:40px 20px;background:var(--color-white);}
.page-content .article__title{margin-bottom:25px;}

/* -------------------------------------------------
   5. Footer
------------------------------------------------- */
.site-footer{
  background:var(--color-black);
  color:var(--color-white);
  text-align:center;
  font-size:14px;
  line-height:18px;
}
.site-footer__social{
  display:flex;justify-content:center;gap:26px;
  border-bottom:1px solid #707070;
  padding:26px 14px;
}
.site-footer__social a{
  width:20px;height:20px;display:block;
}
.site-footer__social svg{width:100%;height:100%;fill:var(--color-white);}
.site-footer__info{padding:26px 10px 0;}
.site-footer__info strong{display:block;}
.site-footer__links{
  display:flex;flex-wrap:wrap;justify-content:center;
  padding:35px 10px;gap:10px;
}
.site-footer__links a{
  color:#a8c1ff;text-transform:uppercase;font-size:13px;font-weight:700;
}