/*
Theme Name: IMS
Author: AdResult
Description: Et specialbygget tema til WordPress
Version: 1.0
*/

/* =====================================
   1) Reset & Base Elements
   ===================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* Helpers */
.mob-show { display: none !important; }
.mob-hide { display: inline; }

.container { padding-left: 2rem; padding-right: 2rem; } 
.wrapper { max-width: 1400px; width: 100%; margin-left: auto !important; margin-right: auto !important; padding-top: 3rem; padding-bottom: 3rem; }

/* =====================================
   2) Typography & Global Body
   ===================================== */
body {
  background: #441817;
  background-size: 60vh auto;
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: "Ivar Display", "ivar-display", Georgia, "Times New Roman", serif; }
h1, h2.big {
  font-size: 72px;
  line-height: 1.15;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #fff;
  font-weight: 500;
}
h2, h3 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 500;	
}

h1 b { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
h3.mono { text-transform: uppercase; margin-bottom: 2rem; }

.uppercase { text-transform: uppercase; }

.mono {
  font-family: "Roboto Mono", monospace;
  line-height: 1.1;
  font-weight: 400 !important;
}

.white-color { color: rgba(255, 255, 255, 0.75) }
.white { color: rgba(0, 0, 0, 0.75); }

/* =====================================
   4) Layout – Top Bar
   ===================================== */
   
   
.top { height: 70px; min-height: 70px; display: flex; align-items: center; justify-content: space-between; padding-left: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.5); gap: 1rem; position: fixed; top: 0px; z-index: 99999; width: 100%; background: #441817; }
.top .left { flex: 1; display: flex; align-items: center; gap: 0.75rem; flex-wrap: nowrap; /* Evt. tilføj for at undgå wrap */ }
.top .left .menu { flex: 1; display: flex; justify-content: flex-end; /* Højrejuster menuen */ }
.top .left img.logo { height: 40px; width: auto; margin-right: 10px; }
.top .left .brand { margin-right: 5rem; text-transform: uppercase; color: #fff; }
.top .left .brand br { display: none; }
.top .right.orange { margin-left: auto; background: #ff4600; color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; height: 70px; max-width: 500px; padding: 0 3rem; text-align: center; font-weight: 500; white-space: nowrap; text-transform: uppercase; }
.top .right.orange a { color: #fff; margin-left: 8px; }


/* =====================================
   5) Section – Header (#hdr)
   ===================================== */
   
   
#hdr { padding-top: 5rem; padding-bottom: 3rem; color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
#hdr p { width: 600px; }
#hdr.frontpage { padding-top:5rem; padding-bottom: 5rem; background: #441817 url("https://cphconference2025.mediasupport.org/wp-content/uploads/2025/09/globus.png") no-repeat bottom right; background-size: 60vh auto; }
#hdr.frontpage h1 { padding-bottom: 2.5rem; }
#hdr.noborder { border-bottom: 0px; }


#speaker { display: flex; align-items: stretch; color: rgba(255, 255, 255, 0.75); }
#speaker a { color: #fff; }
#speaker .speaker-left { flex: 0 0 380px; padding: 5rem 2rem; padding-left: 0; display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
#speaker .speaker-left .speaker-img { max-height: 500px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#speaker .speaker-left .speaker-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
#speaker .speaker-left a { text-decoration: none; line-height: 1.4; display: inline-block; color: rgba(255, 255, 255, 0.75); }
#speaker .speaker-right { flex: 1; max-width: 800px; padding: 5rem 3rem 3rem 3rem; border-left: 1px solid rgba(255, 255, 255, 0.5); display: block; min-height: 600px; }
#speaker .speaker-right h1 { margin-bottom: 10px; }
#speaker .speaker-right .speaker-content { padding-bottom: 3rem; padding-top: 1rem; }
#speaker .speaker-right .speaker-linkedin {}
#speaker .speaker-right .speaker-linkedin a { color: rgba(255, 255, 255, 0.75); }

.speaker-img { background:rgba(0, 0, 0, 0.25); }
.speaker-img.no-thumb { padding:50px; }
.speaker-img.no-thumb img { max-height: 150px; width: auto !important; }
.speaker-img img { width:100%; height:auto; object-fit:cover; display:block; }



#footer { background: #f5f5f5; color: #222; padding-top: 5rem; padding-bottom: 3rem; width: calc(100% + 15px);}
#footer .text-left { max-width: 480px; float: left; }
#footer .text-left img { height: 60px; }
#footer .text-right { max-width: 100%; width: 540px; padding-right: 3rem; float: right; color: rgba(0, 0, 0, 0.75);  }
#footer .text-right .p-right { width: 50%; float: right; }
#footer .text-right .p-left { width: 50%; float: left;  }
#footer .logos { padding-top: 6rem;}
#footer .logos img { max-height: 30px; margin-right: 25px; margin-bottom: 25px; float: left; }


/* =====================================
   6) Component – Schedule Toggle
   ===================================== */

.ar-schedule-toggle .ar-toggle-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 0.75rem 0; border-top: 1px solid #ddd; }
.ar-schedule-toggle.last { border-bottom: 1px solid #ddd; }
.ar-schedule-toggle .ar-toggle-title { display: flex; align-items: center; gap: 1rem; margin: 0; flex: 1; font-family: "Roboto Mono", monospace; font-weight: 400; font-size: 16px; text-transform: uppercase; }
.ar-schedule-toggle .ar-col.ar-time { min-width: 100px; }
.ar-schedule-toggle .ar-col.ar-room { min-width: 100px; color: rgba(26, 26, 26, 0.5); }
.ar-schedule-toggle .ar-col.ar-title-text { flex: 1; }
.ar-schedule-toggle .ar-toggle-icon { position: relative; width: 16px; height: 16px; }
.ar-schedule-toggle .ar-toggle-icon::before,
.ar-schedule-toggle .ar-toggle-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); transition: transform 0.2s ease; }
.ar-schedule-toggle .ar-toggle-icon::after { width: 2px; height: 100%; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); }
.ar-schedule-toggle.is-open .ar-toggle-icon::after { transform: scaleY(0); }
.ar-schedule-toggle .ar-toggle-panel { overflow: hidden; transition: height 0.28s ease; }
.ar-schedule-toggle .ar-toggle-panel__inner { padding: 0.75rem 0; color: rgba(26, 26, 26, 0.75); }



/* =====================================
   7) Media Queries
   ===================================== */




    /* =====================================
       7) Media Queries
       ===================================== */
    
    /* <= 1600px */
    @media (max-width: 1600px) {
      body { }
    
      h1, h2.big { font-size: 62px; }
      h2, h3 {
        font-size: 40px;
        line-height: 1.15;
        font-weight: 500;	
      }
      
      h1 b { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
      h3.mono { text-transform: uppercase; margin-bottom: 2rem; }
      
    
      
      
      
      .top { height: 70px; min-height: 70px; display: flex; align-items: center; justify-content: space-between; padding-left: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.5); gap: 1rem; position: fixed; top: 0px; z-index: 99999; width: 100%; background: #441817; }
      .top .left { flex: 1; display: flex; align-items: center; gap: 0.75rem; flex-wrap: nowrap; /* Evt. tilføj for at undgå wrap */ }
      .top .left .menu { flex: 1; display: flex; justify-content: flex-end; /* Højrejuster menuen */ }
      .top .left img.logo { height: 40px; width: auto; margin-right: 10px; }
      .top .left .brand { margin-right: 5rem; text-transform: uppercase; color: #fff; }
      .top .left .brand br { display: none; }
      .top .right.orange { margin-left: auto; background: #ff4600; color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; height: 70px; max-width: 500px; padding: 0 3rem; text-align: center; font-weight: 500; white-space: nowrap; text-transform: uppercase; }
      .top .right.orange a { color: #fff; margin-left: 8px; }  
      
      #hdr { padding-top: 5rem; padding-bottom: 3rem; color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
      #hdr p { width: 600px; }
      #hdr.frontpage { padding-top:5rem; padding-bottom: 5rem; background: #441817 url("https://cphconference2025.mediasupport.org/wp-content/uploads/2025/09/globus.png") no-repeat bottom right; background-size: 60vh auto; }
      #hdr.frontpage h1 { padding-bottom: 2.5rem; }
      #hdr.noborder { border-bottom: 0px; }
      
      
      
    
    }
    
    /* <= 1360px */
    @media (max-width: 1160px) {
    
    
    .container { padding-left: 1.5rem; padding-right: 1.5rem; } 
    .wrapper { max-width: 1400px; width: 100%; margin-left: auto !important; margin-right: auto !important; padding-top: 3rem; padding-bottom: 3rem; }
    
      h1, h2.big { font-size: 32px; }
      h2, h3 {
        font-size: 32px;
        line-height: 1.15;
        font-weight: 500;	
      }
      
      h1 b { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
      h3.mono { text-transform: uppercase; margin-bottom: 2rem; }
    
    
    
      .top { height: 70px; min-height: 70px; padding-left: 1.5rem; }
      .top .left img.logo { height: 30px; width: auto; margin-right: 10px; }
      .top .left .brand { margin-right: 0rem; text-transform: uppercase; color: #fff; font-size: 15px; }
      .top .left .brand br { display: block; }
      
    
      #hdr { padding-top: 5rem; padding-bottom: 3rem; color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
      #hdr p { width: 600px; }
      #hdr.frontpage { padding-top:5rem; padding-bottom: 5rem; background: #441817 url("https://cphconference2025.mediasupport.org/wp-content/uploads/2025/09/globus.png") no-repeat top 100px right; background-size: 400px auto; }
      #hdr.frontpage h1 { padding-bottom: 2.5rem; }
      #hdr.noborder { border-bottom: 0px; }
      
      
    }
    
    
    
    @media (max-width: 960px) {
      
      .mob-hide { display: none !important; }
      .top .left .menu { display: none !important; }
      .mob-show { display: block !important; }
      
      
      h1, h2.big { font-size: 32px; }
      h2, h3 {
        font-size: 24px;
        line-height: 1.15;
        font-weight: 500;	
      }
      
      
      h1 b { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
      h3.mono { text-transform: uppercase; margin-bottom: 2rem; }
      
    
      .top .right.orange { height: 70px; width: 70px; padding: 0 0; text-align: center; font-weight: 500; white-space: nowrap; text-transform: uppercase; }
      
    
      #hdr { padding-top: 7rem; padding-bottom: 2rem; color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
      #hdr p { width: 100%; }
      #hdr.frontpage { padding-top:7rem; padding-bottom: 5rem; background: #441817 url("https://cphconference2025.mediasupport.org/wp-content/uploads/2025/09/globus.png") no-repeat top 100px right; background-size: 200px auto; }
      #hdr.frontpage h1 { padding-bottom: 1.5rem; padding-top: 8rem; }
      #hdr.noborder { border-bottom: 0px; }
    
      #speaker { flex-direction: column; }
      #speaker .speaker-left { flex: 0 0 auto; padding: 3rem 0 1.5rem 0; padding-top: 7rem; }
      #speaker .speaker-right { max-width: none; width: 100%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.5); padding: 2rem 0 3rem 0; }
    
    
    
      #footer { background: #f5f5f5; color: #222; padding-top: 3rem; padding-bottom: 3rem; }
      #footer .text-left { max-width: 100%; display: block; text-align: center;  margin-bottom: 2rem; }
      #footer .text-left img { height: 60px; }
      #footer .text-right { max-width: 100%; width: 740px; padding-right: 0rem; display: block; width: 100%; color: rgba(0, 0, 0, 0.75);  }
      #footer .text-right .p-right { width: 100%; max-width: 100%; display: block; margin-top: 1.5rem; }
      #footer .text-right .p-left { width: 100%; max-width: 100%; display: block; text-align: left; }
    
    
      #footer .logos { padding-top: 3.5rem; }
      #footer .logos img { max-height: 26px; margin-right: 18px; margin-bottom: 18px; }
    
    }
    


@media (max-width: 768px) {
  .ar-schedule-toggle .ar-toggle-header { padding: 0.5rem 0; }
  .ar-schedule-toggle .ar-toggle-title { flex-wrap: wrap; gap: 0.5rem; font-size: 14px; }
  .ar-schedule-toggle .ar-col.ar-time { min-width: auto; order: 1; }
  .ar-schedule-toggle .ar-col.ar-room { min-width: auto; order: 2; color: rgba(26, 26, 26, 0.55); }
  .ar-schedule-toggle .ar-col.ar-title-text { flex: 1 1 100%; order: 3; }
  .ar-schedule-toggle .ar-toggle-icon { width: 20px; height: 20px; }
  .ar-schedule-toggle .ar-toggle-panel__inner { padding: 0.5rem 0; }
  

  
}

@media (max-width: 480px) {
  .ar-schedule-toggle .ar-toggle-header { padding: 0.5rem 0; }
  .ar-schedule-toggle .ar-toggle-title { gap: 0.5rem; font-size: 13px; }
  .ar-schedule-toggle .ar-col.ar-room { display: none; }
  .ar-schedule-toggle .ar-col.ar-time { font-weight: 500; }
  .ar-schedule-toggle .ar-col.ar-title-text { flex: 1 1 100%; }
  .ar-schedule-toggle .ar-toggle-icon { width: 22px; height: 22px; }
  .ar-schedule-toggle .ar-toggle-panel__inner { padding: 0.5rem 0; }
  
  #footer .logos img { max-height: 20px; }
  
}

@media (prefers-reduced-motion: reduce) {
  .ar-schedule-toggle .ar-toggle-icon::before,
  .ar-schedule-toggle .ar-toggle-icon::after,
  .ar-schedule-toggle .ar-toggle-panel { transition: none; }
}
