/*
 * Theme Name: Artware Child
 * Theme URI: https://www.artware.gr/
 * Description: Artware Child is a child theme of Artware
 * Author: Artware Development Team
 * Author URI: https://www.artware.gr/
 * Template: artware
 * Version: 1.5
 * Text Domain: xlate
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

#dark-mode-toggle {position: absolute;width: 43px;height: 23px;border: 2px solid var(--tcolor);border-radius: 999px;cursor: pointer;right: 20px;top: 20px;}
#dark-mode-toggle::after {content:'';width:13px;height:13px;background-color:var(--tcolor);border-radius:99px;position:absolute;top: 3px;left: 3px;transform:translate(0,0);transition:all .3s ease-out;}
input#dark-mode:checked + #dark-mode-toggle::after {transform:translate(20px,0);transition:all .3s ease-out;}
[data-theme="light"] {--text-primary: #000;--bg-primary: #fff;--tcolor:#EE73FF;}
:root, [data-theme="dark"] {--text-primary: #fff;--bg-primary: #000;--tcolor:#89FD7A;}
::selection{color: var(--bg-primary);background-color: var(--text-primary);}
body {transition: all 0.3s ease;background-color:var(--bg-primary);accent-color:var(--text-primary);color:var(--text-primary);}
body a {color:var(--text-primary);}
body a:hover {color:var(--text-primary);}
body > header {border-bottom: 1px solid var(--text-primary);}
body > header .menu-main-container > ul.menu li:hover > a {color:var(--text-primary);}
body > header .header-wrapper {background-color:var(--bg-primary);transition: all .3s;padding-left:0;}
body > header .menu-main-container {margin-bottom: -20px;}
body > header .header-wrapper {padding-bottom:20px;border-bottom:1px solid var(--text-primary);}
body > header .header-wrapper .logo {align-items:flex-end;padding-bottom:3px;}
body > header .header-wrapper .header-rig {position:relative;}
body > header .menu-main-container > ul.menu {gap:0 80px;align-items: flex-end;}
body > header .menu-main-container > ul.menu > li {height: fit-content;}
#menu-main li:last-child a {padding-right:0;}
body > header .menu-main-container > ul.menu > li a {font-size:93px;line-height:110px;font-family:HelveticaMed;padding:0;align-items: flex-end;}
body > header .menu-main-container > ul.menu > li a span:empty {display:none;}
body > header .menu-main-container > ul.menu > li.current-menu-item a {color:var(--tcolor);}
body > header .menu-main-container > ul.menu > li:hover a {color:#999;}
main article {min-height: calc(100vh - 180px);}
#menu-main {gap:0px;}
#menu-main li a {padding: 0px 15px 0 15px;height: auto;justify-content: center;transition: all .3s;}

footer {background-color:var(--tcolor);color:#000;padding:20px;font-size:16px;line-height:19px;margin-top:60px;}
footer a {background-color:var(--tcolor);color:#000;font-size:16px;line-height:19px;max-width: fit-content;}
footer a:hover {color:#000;}
footer .footer-lis {gap:5px;}
footer .footer-lis:nth-child(3) {align-items: center;}
footer .footer-lis:nth-child(3) .footer-lis-sin {line-height: 24px;}
footer .footer-lis:nth-child(4) {align-items: flex-end;}

.tar {text-align:right;}
.main-tit {font-size:clamp(40px,8vw,80px);line-height:clamp(52px,8vw,98px);font-weight:500;font-family:HelveticaMed;}
.main-txt {font-size:clamp(22px,5vw,28px);line-height:clamp(32px,5vw,36px);font-family:Helvetica;}
.med-tit {font-size: clamp(42px,5vw,64px);line-height: clamp(54px,7vw,78px);font-family:HelveticaMed;}
.sml-tit {font-size:32px;line-height:39px;font-family:HelveticaMed;}

.fetcher-filter {justify-content:space-between;padding:10px 20px;position: sticky;top: 170px;z-index:9;background-color: var(--bg-primary);}
.fetcher-filter-item {position:relative;font-size:40px;line-height:48px;cursor:pointer;font-family:HelveticaMed;text-transform:uppercase;transition:color .3s;}
.fetcher-filter-item.active::before {content:'';width:14px;height:14px;background-color:var(--tcolor);position:absolute;left:-20px;border-radius:50px;bottom:16px;}
_::-webkit-full-page-media, _:future, :root .fetcher-filter-item.active::before {bottom:20px;}
.fetcher-filter-item:hover {color:#999;}
.fetcher-filter-item:nth-child(1) {order:1}
.fetcher-filter-item:nth-child(2) {order:2}
.fetcher-filter-item:nth-child(3) {order:4}
.fetcher-filter-item:nth-child(4) {order:5}
.fetcher-filter-item:nth-child(5) {order:3}
.fetcher-filter-item:nth-child(6) {order:6}
#project-grid .fetcher-sin {position:relative;}
#project-grid .fetcher-inf {opacity:0;font-size:48px;line-height:58px;font-family:HelveticaMed;padding:40px;color:var(--text-primary);position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;transition:opacity .3s;will-change:opacity;}
#project-grid .fetcher-inf::before {content:'';width:100%;height:100%;top:0;left:0;background-color:var(--bg-primary);opacity:.8;position:absolute;z-index: -1;}
#project-grid .fetcher-sin:hover .fetcher-inf {opacity:1;}
#project-grid .fetcher-inf-txt {margin-top: auto;align-self: flex-end;}

.row-01-top {order:1;}
.row-01-txt {order:2;}
.row-01-txt a {color:var(--tcolor)}
.row-01-dow {order:3;}
.row-01-dow a {text-decoration:underline;font-size:36px;line-height:44px;display: flex;gap: 13px;align-items: center;}
.row-01-dow a svg {width:30px;height:30px;}
.row-02 {order:4;}
.row-01-inf {order:5;font-size:16px;line-height:19px;}

.row-02-sin {position: relative;overflow: hidden;}
.blur-up-image {filter: blur(20px);transition: filter .4s ease-in-out;}
.blur-up-image.loaded {filter: blur(0);}

.row-03-tit {padding-bottom: 20px;}
.row-03-txt {font-size: clamp(16px,5vw,32px);line-height: clamp(23px,5vw,39px);}
.row-03-txt a {color:var(--tcolor);}
.row-03-txt a:hover {color:#999;}
.row-03-txt p:last-child {padding-bottom:0;margin-bottom:0;}
.row-03-lis {gap:20px 0;padding-top:60px;}
.row-03-lis-tit {padding-bottom: 20px;}
.row-03-lis-sin:last-child .row-03-lis-sin-tit {padding-bottom:20px;}
.row-03-lis-sin:last-child .row-03-lis-sin-txt {padding-bottom:100px;}
.row-03-lis-sin:last-child .row-03-lis-sin-txt:last-child {padding-bottom:20px;}
.row-03-lis-sin-sub {padding:40px 0 20px;}
.row-03-lis-inf-sin, .row-03-lis-sin-txt {font-size: clamp(14px,5vw,24px);line-height: clamp(16px,7vw,28px);}
.row-03-lis-inf-sin p, .row-03-lis-sin-txt p {padding:0;margin:0;}

.row-04-tit {font-size: clamp(120px,34vw,400px);line-height: clamp(160px,38vw,480px);}
.row-04-txt {font-size: clamp(28px,5vw,48px);line-height: clamp(34px,7vw,58px);}
.row-04-lis {padding:clamp(30px,8vw,60px) 0 clamp(50px,10vw,80px);}
.row-04-lis-sin {font-size: clamp(25px,6vw,40px);line-height: clamp(28px,7vw,48px);}
.row-04-lis-sin:hover {color:#999;}
.row-04-lis-sin::before {width: 60px;height: 100%;position: relative;left: 0;top: 0;}
.row-04-lis-sin-ema::before {content:'E. ';}
.row-04-lis-sin-tel::before {content:'T. ';}
.row-04-lis-sin-map::before {content:'A. ';}
.row-04-sub {font-size:32px;line-height:39px;}

@media (min-width:1501px){
  #menu-main {gap:40px;}
  _::-webkit-full-page-media, _:future, :root body > header .menu-main-container > ul.menu > li a { line-height:100px; }
}

@media (max-width:1500px){
  :root {--header-height: 72px!important;--header-height-scroll: 72px!important;}
  body > header .header-wrapper {padding-bottom:0;}
  body > header .header-wrapper .logo {align-items: center;}
  body > header .header-wrapper .logo svg {height: 38px;width:auto;}
  body > header #mobile-menu:checked + .primary-menu {background-color:var(--bg-primary);right: auto!important;top: 72px!important;}
  body > header .menu-main-container > ul.menu {background-color:var(--bg-primary);padding-top:0!important;}
  body > header .menu-main-container > ul.menu > li a {font-size: 53px;line-height: normal;height:fit-content;padding: 10px 0;text-align: center;display: flex;justify-content: center;}
  #dark-mode-toggle {position:relative;top: 23px;}
  body > header .primary-menu {right: auto!important;transition: top .3s!important;top: -300px!important;z-index: -1!important;height: fit-content!important;width: 100%!important;left: 0!important;}
  body > header .mobile-menu {background-color: var(--bg-primary);transition: all .3s;}
  body > header .mobile-menu svg {transform:rotate(0deg);transition:transform .3s ease-out;position: relative;right: -17px;}
  body > header #mobile-menu:checked ~ .mobile-menu svg {transform:rotate(45deg);}
  .fetcher-filter {top: 72px;}
  #menu-main {height: fit-content;}
  body > header .menu-main-container > ul.menu li {padding: 15px 0;}
  _::-webkit-full-page-media, _:future, :root body > header .menu-main-container > ul.menu li { padding: 20px 0 10px; }
}

@media (max-width:1300px){
  .fetcher-filter-item {font-size:30px;line-height:38px;}
  .fetcher-filter-item.active::before {bottom:12px;}
  _::-webkit-full-page-media, _:future, :root .fetcher-filter-item.active::before {bottom:15px;}
}

@media (max-width:1100px){
  #project-grid {gap:60px 0;}
  #project-grid .fetcher-inf {opacity:1;position:static;padding:0;flex-direction: row;justify-content: space-between;font-size:clamp(16px,5vw,22px);line-height:clamp(26px,5vw,32px);gap:0 40px;width:100%;align-self: center;}
  #project-grid .fetcher-inf::before {display:none;}
  #project-grid .fetcher-inf-txt {text-align:right;margin-top: 0;align-self: flex-start;text-align: right;}
  .row-01-txt {order:3;}
  .row-01-dow {order:4;}
  .row-02 {order:2;}
  .row-01-top {gap:10px;}
  .row-01-top h1.main-tit {font-size:32px;line-height:29px;font-weight:500;}
  .row-01-top-cat {text-align:left;font-size:18px;line-height:22px;}
  .row-01-txt.main-txt {font-size:16px;line-height:19px;}
  footer .footer-lis:nth-child(2) {align-items: flex-end;}
  footer .footer-lis:nth-child(3) {align-items: flex-start;}
  footer .footer-lis:nth-child(3) .footer-lis-sin {line-height: 24px;}
  .fetcher-filter-item:hover {color: var(--text-primary);}
}

@media (max-width:1000px){
  .fetcher-filter-item {font-size:20px;line-height:28px;}
  .fetcher-filter-item.active::before {width: 10px;height: 10px;left: -13px;bottom:9px;}
  _::-webkit-full-page-media, _:future, :root .fetcher-filter-item.active::before {bottom:11px;}
}

@media (max-width:768px){
  .fetcher-filter {padding: 10px 0px 20px;}
  .row-04-sub {font-size: 22px;line-height: 29px;}
}

@media (max-width:600px){
  footer .footer-lis:nth-child(4) {align-items: flex-start;}
}

@media (max-width:414px){
  body > header .header-wrapper .logo svg {height:35px;width:auto;}
  body > header .mobile-menu {width:70px!important;}
}