/*
Theme Name: Themify Ultra Child
Theme URI: https://themify.me/themes/ultra
Description: Child theme for Themify Ultra
Author: The Viking
Author URI: https://theviking.info
Template: themify-ultra
Version: 1.1.0
*/

/* =========================================
   01) FONTS – NORSE (SELF-HOSTED)
   ========================================= */

@font-face{
  font-family:'Norse';
  src:url('fonts/Norse.woff2') format('woff2'),
      url('fonts/Norse.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Norse';
  src:url('fonts/Norse-Bold.woff2') format('woff2'),
      url('fonts/Norse-Bold.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* =========================================
   02) DESIGN TOKENS – VIKING COLORS
   ========================================= */

:root{
  --viking-blue:#006AA7;
  --viking-yellow:#FECC00;
  --viking-orange:#FF6200;
  --viking-dark-blue:#004670;
  --viking-dark:#1a1a1a;
  --viking-card:#343438;
  --viking-gray:#2c2c2c;

  /* Logo colors (handy) */
  --logo-gold:#FFB347;
  --logo-brown:#8B4513;
}

/* =========================================
   03) GLOBAL TYPOGRAPHY – APPLY NORSE
   ========================================= */

.uagb-heading-text,
.uagb-desc-text{
  font-family:'Norse', system-ui, sans-serif;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Norse', system-ui, sans-serif;
}

.module-title,
.module-title-text{
  font-family:'Norse', system-ui, sans-serif;
}

/* =========================================
   04) HEADER LOGO – THE VIKING.info (TEXT LOGO)
   Bank Gothic fallback (non-round)
   ========================================= */

#site-logo a span{
  font-size:0 !important;
  color:transparent !important;
  width:0;
  height:0;
  overflow:hidden;
  display:block;
}

#site-logo{
  position:relative !important;
  display:inline-block !important;
  overflow:visible !important;
}

#site-logo a{
  display:inline-flex !important;
  align-items:flex-end;
  gap:10px;
  font-size:0;
  line-height:1;
  position:relative;
  text-decoration:none !important;
}

#site-logo a::before{
  content:'THE';
  align-self:flex-start;
  margin-top:0;
  font-family:'Norse','Bank Gothic',system-ui,sans-serif !important;
  font-weight:700;
  font-size:16px;
  letter-spacing:5px;
  text-transform:uppercase;
  color:var(--logo-brown);
  text-shadow:1px 1px 0 rgba(0,0,0,.35);
  opacity:.9;
}

#site-logo a::after{
  content:'VIKING';
  font-family:'Norse','Bank Gothic',system-ui,sans-serif !important;
  font-weight:700;
  font-size:40px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--logo-gold);
  position:relative;
  text-shadow:
    3px 3px 0 var(--logo-brown),
    6px 6px 0 rgba(139,69,19,.5),
    0 0 20px rgba(255,179,71,.6);
  animation:vikingGlow 3s ease-in-out infinite;
}

#site-logo::after{
  content:'.info';
  position:absolute;
  bottom:-18px;
  left:calc(100% + 6px);
  font-family:'Norse','Bank Gothic',system-ui,sans-serif !important;
  font-weight:700;
  font-size:16px;
  letter-spacing:1px;
  text-transform:lowercase;
  color:var(--logo-brown);
  text-shadow:1px 1px 0 rgba(0,0,0,.25);
  pointer-events:none;
}

#site-logo a:hover::before{
  letter-spacing:6px;
  color:#654321;
  transition:.3s;
}

#site-logo a:hover::after{
  color:#ff8c00;
  transform:translateX(3px);
  text-shadow:
    4px 4px 0 var(--logo-brown),
    7px 7px 0 rgba(139,69,19,.5),
    0 0 25px rgba(255,179,71,.8);
  animation:none;
  transition:.3s;
}

#site-logo:hover::after{
  color:#654321;
  transition:.3s;
}

@keyframes vikingGlow{
  0%,100%{
    text-shadow:
      3px 3px 0 var(--logo-brown),
      6px 6px 0 rgba(139,69,19,.5),
      0 0 20px rgba(255,179,71,.6);
  }
  50%{
    text-shadow:
      3px 3px 0 var(--logo-brown),
      6px 6px 0 rgba(139,69,19,.5),
      0 0 30px rgba(255,179,71,.8);
  }
}

@media (max-width:400px){
  #site-logo a{ gap:8px; }
  #site-logo a::before{ font-size:12px; letter-spacing:4px; }
  #site-logo a::after{ font-size:26px; letter-spacing:2px; }
  #site-logo::after{ font-size:13px; }
}

@media (min-width:401px) and (max-width:680px){
  #site-logo a{ gap:9px; }
  #site-logo a::before{ font-size:13px; letter-spacing:4px; }
  #site-logo a::after{ font-size:28px; letter-spacing:2px; }
  #site-logo::after{ font-size:14px; }
}

@media (min-width:681px) and (max-width:768px){
  #site-logo a::before{ font-size:15px; }
  #site-logo a::after{ font-size:34px; }
  #site-logo::after{ font-size:15px; }
}

@media (min-width:769px) and (max-width:1024px){
  #site-logo a::before{ font-size:15px; }
  #site-logo a::after{ font-size:36px; }
  #site-logo::after{ font-size:15px; }
}

@media (min-width:1920px){
  #site-logo a{ gap:12px; }
  #site-logo a::before{ font-size:18px; letter-spacing:6px; }
  #site-logo a::after{ font-size:46px; letter-spacing:4px; }
  #site-logo::after{ font-size:18px; }
}

/* =========================================
   05) FOOTER – CLEAN + CUSTOM COPYRIGHT
   ========================================= */

.footer-text,
.back-top,
#footerwrap .footer-text,
.themify_builder_footer_text,
.powered-by,
.site-info,
.themify-footer-credits{
  display:none !important;
}

#footer,
#footerwrap{
  background:var(--viking-dark) !important;
  color:#fff;
  padding:40px 20px 20px;
}

#footer .footer-widgets,
#footer .widget,
#footerwrap .footer-widgets,
#footerwrap .widget{
  text-align:center;
}

#footer h3,
#footer .widgettitle,
#footerwrap h3,
#footerwrap .widgettitle{
  font-family:'Norse', system-ui, sans-serif;
  color:var(--viking-yellow);
  font-size:20px;
  margin-bottom:15px;
  font-weight:700;
  text-align:center;
}

#footer p,
#footer li,
#footerwrap p,
#footerwrap li{
  color:#fff;
  line-height:1.8;
  font-size:15px;
  text-align:center;
}

#footer a,
#footerwrap a{
  color:var(--viking-orange);
  text-decoration:none;
  transition:color .3s ease;
}

#footer a:hover,
#footerwrap a:hover{
  color:var(--viking-yellow);
}

/* ================================
   FOOTER WIDGET 3 – IMAGE SCALING
   (Visible on PC, tablet, phone)
   ================================ */

/* Desktop/tablet: keep widgets in a row and center nicely */
#footer .footer-widgets{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

/* Widget 3 container */
#footer .footer-widgets .widget:nth-child(3){
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Widget 3 image: responsive + round + always visible */
#footer .footer-widgets .widget:nth-child(3) img{
  width:100%;
  max-width:180px;      /* desktop max */
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

/* Remove default paragraph spacing if image is wrapped in <p> */
#footer .footer-widgets .widget:nth-child(3) p{
  margin:0;
}

/* Mobile: stack widgets so it never breaks */
@media (max-width:768px){
  #footer .footer-widgets{
    flex-direction:column;
    align-items:center;
    gap:25px;
  }

  #footer .footer-widgets .widget:nth-child(3) img{
    max-width:140px; /* phone/tablet small */
  }
}

.custom-copyright{
  display:block !important;
  text-align:center;
  padding:30px 20px;
  background:#E5E5E5;
  color:#2C2C2C;
  font-size:14px;
  border-top:1px solid #D0D0D0;
  width:100%;
  box-sizing:border-box;
  margin:0;
  line-height:1.8;
  clear:both;
}

.custom-copyright a{
  color:#2C2C2C;
  text-decoration:none;
  margin:0 5px;
  transition:color .3s ease;
}

.custom-copyright a:hover{
  color:var(--viking-blue);
  text-decoration:underline;
}

.custom-copyright .built-by{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:#666;
}

.custom-copyright .built-by a{
  color:#666;
  font-weight:600;
}

.custom-copyright .built-by a:hover{
  color:var(--viking-orange);
}

/* =========================================
   06) BUTTONS – VIKING STYLE
   ========================================= */

.button,
.btn,
a.button,
input[type="submit"],
.themify_builder .module-buttons a{
  background:var(--viking-orange);
  color:#fff;
  border-radius:6px;
  padding:12px 30px;
  font-weight:700;
  transition:all .3s ease;
  border:none;
}

.button:hover,
.btn:hover,
a.button:hover,
input[type="submit"]:hover,
.themify_builder .module-buttons a:hover{
  background:var(--viking-yellow);
  color:var(--viking-dark);
}

/* =========================================
   07) RESPONSIVE – FOOTER
   ========================================= */

@media (max-width:768px){
  .custom-copyright{
    font-size:12px;
    padding:20px 15px;
  }

  .custom-copyright .built-by{
    font-size:11px;
  }

  #footer,
  #footerwrap{
    padding:30px 15px 15px;
  }

  #footer h3,
  #footer .widgettitle,
  #footerwrap h3,
  #footerwrap .widgettitle{
    font-size:18px;
  }
}

/* =========================================
   08) PRINT
   ========================================= */

@media print{
  #site-logo a::after,
  #site-logo::after{
    color:#000 !important;
    text-shadow:none !important;
    animation:none !important;
  }
}