/*
  inject-style.css
*/

@font-face {
  font-family: 'Suisse Int';
  src: url('https://mobileivdrip.com.au/wp-content/themes/Divi-child/fonts/Suisse-Int.woff2') format('woff2'),
       url('https://mobileivdrip.com.au/wp-content/themes/Divi-child/fonts/Suisse-Int.woff') format('woff'),
       url('https://mobileivdrip.com.au/wp-content/themes/Divi-child/fonts/Suisse-Int.svg#Suisse-Int') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HK Grotesk';
  src: url('fonts/HKGrotesk-Regular.woff2') format('woff2'),
       url('fonts/HKGrotesk-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'GentlemensScript';
  src: url('/wp-content/themes/Divi-child/fonts/GentlemensScript.woff2') format('woff2'),
       url('/wp-content/themes/Divi-child/fonts/GentlemensScript.woff') format('woff'),
       url('/wp-content/themes/Divi-child/fonts/GentlemensScript.svg#GentlemensScript') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Base */
:root {
  --white: #ffffff; 
  --black: #1E1E1E;
  --primary: #F1F9FC;
  --secondary: #302221;
  --tertiary: #463d3a;
  --quartiary:#120d0c;
}
.white, .white p { color: var(--white);}
.whitebg { background: var(--white);}
.black, .black p { color: var(--black);}
.blackbg { background: var(--black);}
.primary, .primary p { color: var(--primary);}
.primarybg { background: var(--primary);}
.secondary, .secondary p { color: var(--secondary);}
.secondarybg { background: var(--secondary);}
.tertiary, .tertiary p { color: var(--tertiary);}
.tertiarybg { background: var(--tertiary);}
.quartiary, .quartiary p { color: var(--quartiary);}
.quartiarybg { background: var(--quartiary);}

a, a:visited, a:hover, a:active {
    color: lightblue !important;
    text-decoration: none !important;
}

html{scroll-behavior:smooth; -webkit-font-smoothing:antialiased!important;}
body{margin:0; padding:0}
::selection{background:var(--primary); color:var(--black)}
img{width:100%;}
li,ul{list-style:none; padding:0;}
iframe{border:0; display:block;}
a,button,.text-link{cursor:pointer;}
a:hover{text-decoration:none;}
a:visited{color:var(--black);}

/* Typography */
h1,h2,h3,h4,h5,h6{z-index:2; margin:0; line-height:1}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration:none; color:inherit;}
h1{font-size:var(--xxlarge); font-family:'freightbigcmp-pro',serif; letter-spacing:-2px; font-weight:normal}
h2{font-size:var(--large); font-family:'freightbigcmp-pro',serif; letter-spacing:-1px; font-weight:normal}
h3{font-size:var(--medium); font-family:'freightbigcmp-pro',serif; letter-spacing:-1px; font-weight:normal}
h4{font-size:var(--xmedium); font-family:'freightbigcmp-pro'; font-weight:normal}
h5{font-size:var(--xxmedium); font-family:'freightbigcmp-pro'; font-weight:normal}
h6{font-size:var(--xxsmall); font-family:'Suisse Int'; font-weight:normal}
body,p{font-size:var(--xxsmall); font-family:'Suisse Int'; font-weight:300}
.sm-text{display:block; font-size:var(--xxsmall); line-height:1.3; font-weight:normal;}

/* Layout utilities actually used by the template */
.container{position:relative; height:100%; max-width:100%!important; width:100%;}
.row{height:100%; position:relative;}
.row-width-80,.row-width{width:80%; margin:0 auto;}
.row-width-90{width:90%; max-width:90%; margin:0 auto;}
.full-width{width:100%; margin:0 auto;}
.fullwidth{width:100%; margin:0 auto;} /* alias for markup */
.col8{width:66.66%;}
.col11{width:91.66%;}
.col12{width:100%;}
.flex-column{display:flex; flex-direction:column;}
.align-center{align-items:center;}
.align-right{align-items:flex-end;}
.justify-center{display:flex; align-items:center; justify-content:center;}
.gap-20{gap:20px;}
.padding-b-20{padding-bottom:20px}
.padding-b-60{padding-bottom:60px}
.padding-b-100{padding-bottom:100px}
.padding-t-40{padding-top:40px}
.padding-t-60{padding-top:60px}
.margin-t-20{margin-top:20px}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.overflow-visible{overflow:visible;} /* used in section */

/* Colour helpers used on the page */
.white,.white p{color:var(--white);}
.black,.black p{color:var(--black);}
.blue,.blue p{color:#BFDCEA;}
.tertiarybg{background:var(--tertiary);}
.secondarybg{background:var(--secondary);}

/* Headline helper seen in markup (kept simple) */
.h4-style{font-size:var(--xmedium); font-family:'freightbigcmp-pro'; line-height:1}

/* HERO */
.hero-module-inject{position:relative;}
.hero-container-pen{
  position:relative;
  min-height:100svh;
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  overflow:hidden;
  z-index:1;
}
.hero-container-pen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: none !important;
}

.hero-container-pen.top-hero{overflow:visible;}
.hero-container-pen.top-hero .hero-content-pen{
  position:absolute;
  top:50% !important;
  left:50%;
  transform:translate(-50%,-40%);
  text-align:center;
  width:100%;
  max-width:90vw;
  z-index:2;
  color:#463d3a;
}

/* INTRODUCTION */
.introduction{}
.introduction-container{position:relative;}
/* Optional variant class names used in markup */
.introduction-row-inject,
.introduction-row-why{display:flex;}
.introduction-content-why{display:flex; flex-direction:column;}

/* AFTERCARE / FAQ (used in BPC157 template) */
.faq-row{position:relative; z-index:2;}
.faq-wrapper{display:flex; flex-direction:column;}
.faq-group{display:flex; flex-direction:column; gap:20px;}
.faq-line{margin-bottom:20px; width:100%; display:flex; flex-direction:column; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--quartiary);}
.faq-line h4{position:relative; font-size:var(--xxmedium); padding-right:10%;}
.faq-line .sm-text{height:1px; transition:.3s ease; color:transparent; visibility:hidden;}
.faq-line .sm-text.active{height:auto; transition:1s ease; color:white; visibility:visible; text-align:justify;}

/* ACCORDION (SEO terms block on page bottom) */
.accordion-module{margin-bottom:-160px!important; padding-bottom:0!important;}
.accordion{width:100%; max-width:800px; margin:0 auto; border:none!important; border-radius:5px; overflow:hidden; padding-bottom:50px!important;}
.accordion-item{border:none!important; background:transparent!important; padding:10px 0; text-align:center;}
.accordion-header{
  font-size:var(--large);
  letter-spacing:1px;
  font-weight:400;
  background:transparent!important;
  border:none!important;
  padding:20px 20px;
  text-align:center;
  cursor:pointer;
}
.accordion-content{display:none; font-size:var(--small); color:var(--quartiary);}
.accordion-header.active + .accordion-content{display:block;}

/* BUTTONS (used by login/unlock CTAs) */
.button-wrapper{z-index:9; position:relative;}
.primary-button{
  cursor:pointer; background:var(--black); text-decoration:none; color:var(--white)!important;
  padding:11px 20px; border-radius:20px; box-sizing:border-box; transition:.3s ease all;
}
.primary-button:hover{background:var(--primary); color:var(--black)!important; text-decoration:none; transition:.3s}

/* VIP / portal variations used in template */
.vip-trigger{border:1px solid lightblue; color:lightblue!important; padding:11px 50px;}
.vip-trigger:focus,
.vip-trigger:hover{background-color:#abd6e420; color:lightblue!important;}
.vip-trigger:active{border:1px solid lightblue!important; box-shadow:none!important; outline:none!important;}

.portal-button{
  background-color:#191919; color:#fff; padding:14px 28px; border-radius:50px;
  text-decoration:none; font-weight:600; display:inline-block; transition:background-color .3s ease;
}
.portal-button:hover{background-color:#000000;}

/* IMAGE BANNER (optional conditional section) */
.image-banner img{display:block;}

/* Small mobile tweak referenced in original */
@media (max-width:768px){
  .introduction-content .description{padding-bottom:40px;}
}

/* Responsive type scale used by the page (optional but keeps headings sane on mobile) */
@media (max-width:1200px){
  :root{
    --xxlarge:70px; --large:50px; --medium:32px; --xmedium:22px;
    --xxmedium:18px; --small:15px; --xsmall:10px; --xxsmall:10px;
  }
}
