/*   
Theme Name: Gamma Imaging
Theme URI: 
Description: Custom Wordpress theme for Gamma Imaging
Author: Fahd Idaghdour
Author URI: http://fahdos.com
Version: 1.0
*/


@font-face {
    font-family: 'AkzidenzGroteskBQ-Reg';
    src: url('fonts/AkzidenzGroteskBQ-Reg.woff2') format('woff2'),
         url('fonts/AkzidenzGroteskBQ-Reg.woff') format('woff'),
         url('fonts/AkzidenzGroteskBQ-Reg.eot') format('embedded-opentype'),
         url('fonts/AkzidenzGroteskBQ-Reg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Reset 2020 ^^
   ========================================================================== */

*,*::before,*::after {box-sizing: border-box;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {margin: 0;}
ul, ol{list-style: none; padding: 0; margin: 0;}
html {scroll-behavior: smooth;}
body {min-height: 100vh;text-rendering: optimizeSpeed;line-height: 1.5;}
a:not([class]) {text-decoration-skip-ink: auto;}
img,picture {max-width: 100%;display: block; height: auto;}
input,button,textarea,select {font: inherit;}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}
a {text-decoration: none; color: var(--white); transition: var(--cubic); }
a:active, a:hover {outline: 0; transition: var(--cubic); outline:none}
:focus { outline: none; }
button {border: none; background: none; padding: 0;}
button:hover {cursor: pointer;} 
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
h1, h2, h3 {margin-bottom: 20px; font-weight: 600;}
p, ul {margin-bottom: 20px; color: var(--grey);}
li {margin-bottom: 5px;}

:root {
  --white: #ffffff;
  --grey: #b2b2b2 ;
  --dark: #000000;
  --times: "Times New Roman", Times, serif;
  --akz: 'AkzidenzGroteskBQ-Reg', sans-serif;
  --cubic: all .4s cubic-bezier(0.46, 0, 0.07, 1);
}

/* ==========================================================================
   General
   ========================================================================== */
html {}
body {font-family: var(--times); background: #000; font-weight: normal; font-style: normal; font-size: 16px; color: var(--dark); line-height: 1.45;}
section {width: 100%; padding: 25px;}
.row {width: 100%; max-width: 1200px; margin: 0 auto;}
.no-scroll {overflow: hidden;}


/* ==========================================================================
   Header
   ========================================================================== */
.header {position: fixed; left: 0; top:0; width: 100%; padding: 0 25px;z-index: 10; background: #000;}
.header .row {max-width: 100%; padding: 30px 0; display: flex; align-items: center; border-bottom:1px solid #fff; }
.page-template .header .row {border-bottom: 0;}
.page-template-pricing-php .header {width: 50%;}
.header .logo { margin-right:100px; }
.header .logo img { width: 100%; height: auto;}
.header .logo .fullimg {display: block;  max-width: 180px;}
.header .logo .smallimg {display: none; height: 34px;}
.header ul {margin-bottom: 0; display: flex; gap: 10px;}
.header ul li {margin-bottom: 0;}
.header ul li a {color: var(--grey); padding-bottom: 5px; border-bottom: 1px solid; border-color: transparent;}
.header ul li a:hover, .header ul li.current-menu-item a {border-color: initial;}
.home .header {background: transparent;}
.home .header .row {border-bottom: none;}

.header.mobilemenu {background: #000; width: 100%; height: 100%;}
.mobilemenu #menu-main {display: none; position: absolute; top: calc(50% - 80px); text-align: center; width: calc(100% - 50px);}
.mobilemenu #menu-main li {margin-bottom: 15px;}

.layoutburger { position: absolute; top: 13px; right:0; height: 52px; width: 52px; padding: 25px 25px 0 0; display: none;}
.burger-menu { position: relative; display: block; width: 26px; height: 28px; display: block; margin: 0 auto; transition: all 0.3s ease-out; cursor: pointer;}
.burger-menu .bar { transition: all 0.3s ease-out; height: 2px; width: 100%; display: block; background-color: var(--white);}
.burger-menu .bar:nth-of-type(2) { margin: 6px 0;}
.burger-menu--closed { transition-delay: 0.3s;}
.burger-menu--closed .bar:nth-of-type(2) { width: 20px; transition-property: margin, height, width; transition-delay: 0.3s, 0.3s, 0s;}
.burger-menu--closed .bar:nth-of-type(3) { width: 24px;}
.burger-menu--closed:hover .bar:nth-of-type(2) { width: 100%;}
.burger-menu--closed:hover .bar:nth-of-type(3) { width: 100%;}
.burger-menu--opened { padding-top: 8px;}
.burger-menu--opened .bar:nth-of-type(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg); transition-delay: 0.3s; height: 2px;}
.burger-menu--opened .bar:nth-of-type(2) { opacity: 0; height: 0; margin: -3px 0;}
.burger-menu--opened .bar:nth-of-type(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition-delay: 0.3s; height: 2px;}


/* ==========================================================================
   Home
   ========================================================================== */
.homesec {display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); padding: 0; position: fixed; left: 0; top: 0; height: 100vh;}
.homesec article { display:flex; align-items:center; padding:0 40px;}
.homesec article p {text-align: center;}
.homesec article p:last-child {margin-bottom: 0;}
.homesec .homeimg {height: 100vh;}
.homesec .homeimg img {width: 100%; height: 100%; object-fit: cover; object-position: top;}
.hometags {font-family: var(--akz   ); position: fixed; bottom: 30px; left: 20px; color: var(--white); font-size: 28px;}


/* ==========================================================================
   Listing
   ========================================================================== */
.list {padding-top: 103px;}
.list .listhead {display: flex; color: var(--white); font-family: var(--akz); font-size: 18px; padding-bottom: 25px;}
.list a {display: flex; color: var(--grey); gap: 10px; padding: 12px 0; border-bottom: 1px solid #5F5A5A; font-size: 14px}
.list a:hover, .post-link.active {border-bottom: 1px solid #fff; color: #fff;}
.list .listhead span, .list a span {width: calc(25% - 20px); pa}
.list .listhead span:nth-child(3), .list a span:nth-child(3) {width: calc(50% - 20px);}
.list .listhead span:last-child, .list a span:last-child {width: 60px; min-width:initial; margin-left:auto; text-align:right; }


/* ==========================================================================
   Single Post
   ========================================================================== */
.single-post {background: #ECEAEA; padding-top: 103px;}
.single-post .header .logo img {filter: invert();}
.single-post .header {background: transparent;}
.single-post .header .row {border-bottom: none;}
.single-post .header ul li a {color: var(--dark);}

.galimg {padding: 0 20px 65px 20px;}
.galimg .row {display:  flex; flex-direction: column ; align-items: center;}
.galimg img {width: auto; height: auto; max-width: 1000px; max-height: calc(100vh - 160px); margin-bottom: 50px; }

.singlemeta {width: 100%; position: fixed; bottom: 20px; left: 0; padding:0 20px; }
.singlemeta div { width: 100%; display: flex; color: var(--dark); gap: 10px; padding: 12px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; font-size: 14px}
.singlemeta span {width: calc(25% - 20px); pa}
.singlemeta span:nth-child(3) {width: calc(50% - 20px);}
.singlemeta span:last-child {width: 60px; min-width:initial; margin-left:auto; text-align:right;}
.fermer {font-family: var(--akz); transition: var(--cubic); position: fixed; z-index: 20; top:35px; right: 20px; border: 1px solid #000; color: var(--dark); border-radius: 5px; padding: 7px 15px; display: flex; gap: 10px; align-items: center; font-size: 14px;}
.fermer img {display: block; width: 16px; height: 16px;  transition: var(--cubic);}
.fermer:hover { background: #000; color: #fff;  transition: var(--cubic);}
.fermer:hover img {filter: invert();  transition: var(--cubic);}

.posttags {position: fixed; left: 20px; top: 50%; font-family: var(--akz);color: var(--grey); font-size: 20px; display: flex; gap: 10px;}
.posttags span.checked { color: var(--dark);}


/* ==========================================================================
   Single page
   ========================================================================== */

.pagesingle {padding-top: 100px; min-height: 100dvh; display: flex; align-items: center;}
.pagesingle .row { display: flex; flex-direction: column; justify-content: center; align-items: center;}
.pagesingle h1 {font-family: var(--times); color: var(--grey); font-weight: normal; font-size: 13px; margin-bottom: 0;}
.pagesingle p { margin-bottom:30px; font-family:var(--akz); color:var(--white); font-size:36px; text-align:center; max-width:820px; }
.pagesingle a {text-decoration: underline;}
.pagesingle ul { margin-bottom:30px; font-family:var(--akz); color:var(--white); font-size:36px; text-align:center; max-width:820px; }
.pagesingle li {display: inline-block; margin-bottom: 0;}


.pagecontact { padding : 0; min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden;}
.pagecontact article {padding: 100px 20px 20px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; transition: width 0.5s ease;}
.pagecontact h1 {font-family: var(--times); color: var(--grey); font-weight: normal; font-size: 13px; margin-bottom: 0;}
.pagecontact p { margin-bottom:30px; font-family:var(--akz); color:var(--white); font-size:36px; text-align:center; max-width:820px; }
.pagecontact article a {text-decoration: underline;}
.pagecontact ul { margin-bottom:30px; font-family:var(--akz); color:var(--white); font-size:36px; text-align:center; max-width:820px; }
.pagecontact li {display: inline-block; margin-bottom: 0;}
.pagecontact button {color: var(--grey); font-size:16px; border:1px solid var(--grey); border-radius:6px; padding:10px 20px; transition:var(--cubic); }
.pagecontact button:hover {background: var(--grey); color: var(--dark); transition: var(--cubic);}

.pagecontact .toggle-form {
   transition: opacity 0.5s ease;
}

.pagecontact .slideform {
   position: absolute;
   top: 0;
   right: -100%;
   width: 50%;
   height: 100%;
   background: #f5f5f5;
   transition: right 0.5s ease;
   display: flex;
   justify-content: center;
   align-items: center;
}

.pagecontact.open article {
   width: 50%;
}

.pagecontact.open .slideform {
   right: 0;
}

.pagecontact.open .toggle-form {
   opacity: 0;
   pointer-events: none;
}

.pricing { padding: 0; display:flex; min-height: 100vh; }
.pricing .group {flex: 0 0 50%; padding:110px 20px 100px 20px;}
.pricing .group h1 {font-family: var(--akz); font-weight: normal; font-size: 36px; margin-bottom: 60px;}
.pricing .group h2 {font-family: var(--akz); font-weight: normal; font-size: 20px; border-top: 1px solid; padding-top: 20px; margin-top: 40px; margin-bottom: 30px}
.pricing .group h2.half {width: calc(50% - 10px);}
.pricing .group h3 {font-weight: normal; font-size: 18px; color: var(--grey);}
.prgr {display: grid; gap: 20px; }
.prgr.half {grid-template-columns: repeat(2, 1fr);} 
.prgr.full {grid-template-columns: 1fr;}
.prgr ul {width: 100%;}
.prgr ul li {display: flex; justify-content: space-between; border-bottom: 1px solid var(--grey);}
.prgr ul li span:last-child {white-space: nowrap;}

.pricing .group.black {background: #000; color: var(--white);}
.pricing .group.black h2 { border-color:var(--white); }

.pricing .group.white {background: #ECEAEA; color: var(--black);}
.pricing .group.white h2 { border-color:var(--black); }
.pricing .group.white h3, .pricing .group.white .prgr ul li, .pricing .group.white .prgr ul { color: var(--black);}


/* Animation styles */
.site-content {
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother easing */
    will-change: opacity; /* Performance boost */
}

.fade-out {
    opacity: 0 !important;
    pointer-events: none; /* Prevent interactions during transition */
}

.header {
    transition: none !important; /* Force header and its children to stay visible */
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media only screen and (max-width: 1170px) {
   .header .logo {margin-right: 36px;}
}

@media only screen and (max-width: 1024px) {
   .home .header {background: #000;}
   .galimg img {max-width: 100%;}
   .layoutburger {display: block;}
   .single-post .layoutburger {display: none;}
   #menu-main {display: none;}
   .homesec {grid-template-columns: 1fr; position: initial; padding-top: 120px; gap: 60px;}
   .homesec .homeimg {height: initial;}
   .hometags {font-size: 18px; z-index: 999;}
   .homesec article {padding: 0 20px;}
   .mobilemenu #menu-main {display: block;}
   .header .logo .fullimg {display: none; width: 140px;}
   .header .logo .smallimg {display: block;}
   .home .header .logo .fullimg {display: block;}
   .home .header .logo .smallimg {display: none;}
   .list .listhead span:nth-child(3), .list a span:nth-child(3), .singlemeta div span:nth-child(3) {display: none;}
   .list .listhead span, .list a span, .singlemeta span {width: calc(50% - 30px);}
   .list .listhead span:nth-child(4), .list a span:nth-child(4) {width: 60px;}
   .singlemeta div span:last-child {width: 40px;}
   .list .listhead {font-size: 15px;}
   .posttags {font-size: 16px; top: initial; bottom: 80px; display: block;}
   .posttags span {margin-right: 15px;}
   .pagesingle ul, .pagesingle p {font-size: 16px;}
   .pricing {flex-direction: column;}
   .page-template-pricing-php .header {width: 100%;}
   .pricing .group h2.half {width: 100%; }
   .prgr.half {grid-template-columns:  1fr;}
   .pricing .group {flex: initial; padding: 40px 20px;}
   .pricing {padding-top: 80px;}
   .homesec article p  {font-size: 14px;}
}