/* =====================================================================
   Tbilisi Architecture Forum — site styles

   Ported from the <helmet> block of "Tbilisi Architecture Forum.dc.html".
   Everything that used to be a state-driven inline style ({{ menuStyle.* }},
   {{ showBurger }}, tab colours, ...) now lives here as a class or a media
   query, so the PHP templates stay static and site.js only toggles classes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Fonts
   PP Mondwest / PP Neue Bit are licensed (Pangram Pangram). Drop the files
   into /fonts at the project root and the pixel type switches over on its
   own; until then the Google pixel font picked in Settings is used.
   --------------------------------------------------------------------- */
@font-face{font-family:'PP Mondwest';font-style:normal;font-weight:400;font-display:swap;src:url('../../fonts/PPMondwest-Regular.woff2') format('woff2'),url('../../fonts/PPMondwest-Regular.woff') format('woff'),url('../../fonts/PPMondwest-Regular.otf') format('opentype');}
@font-face{font-family:'PP Mondwest';font-style:normal;font-weight:700;font-display:swap;src:url('../../fonts/PPMondwest-Bold.woff2') format('woff2'),url('../../fonts/PPMondwest-Bold.woff') format('woff'),url('../../fonts/PPMondwest-Bold.otf') format('opentype');}
@font-face{font-family:'PP Neue Bit';font-style:normal;font-weight:400;font-display:swap;src:url('../../fonts/PPNeueBit-Regular.woff2') format('woff2'),url('../../fonts/PPNeueBit-Regular.woff') format('woff'),url('../../fonts/PPNeueBit-Regular.otf') format('opentype');}
@font-face{font-family:'PP Neue Bit';font-style:normal;font-weight:700;font-display:swap;src:url('../../fonts/PPNeueBit-Bold.woff2') format('woff2'),url('../../fonts/PPNeueBit-Bold.woff') format('woff'),url('../../fonts/PPNeueBit-Bold.otf') format('opentype');}
@font-face{font-family:'PP NeueBit';src:url('../../uploads/ppneuebit-bold.otf') format('opentype');font-weight:100 900;font-style:normal;font-display:block;}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#0c0b0a;}
body{overflow-x:hidden;}
::selection{background:#ff4d00;color:#0c0b0a;}

/* ---------------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------------- */
@keyframes taf-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes taf-mqr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes taf-kb{0%{transform:scale(1.06)}100%{transform:scale(1.18)}}
@keyframes taf-scan{0%{transform:translateY(-130%)}100%{transform:translateY(460%)}}
@keyframes taf-blink{0%,46%{opacity:1}48%,100%{opacity:.15}}
@keyframes taf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes taf-glow{0%,100%{box-shadow:0 0 0 0 rgba(171,247,52,.9)}50%{box-shadow:0 0 26px 5px rgba(171,247,52,.65)}}

[data-theme-card]:hover [data-px]{opacity:1 !important;transform:translateY(0) !important;}

/* ---------------------------------------------------------------------
   Accent chip inside CMS headings — editors write <em>word</em> and it
   renders the way the original hard-coded <span> did.
   --------------------------------------------------------------------- */
.taf-title em{
  font-style:normal;
  background:var(--chipBg);
  color:var(--chipInk);
  padding:0 .08em;
}

/* ---------------------------------------------------------------------
   Menu overlay  (was {{ menuStyle.* }})
   --------------------------------------------------------------------- */
#taf-menu{
  opacity:0;
  visibility:hidden;
  transform:translateY(-22px);
  pointer-events:none;
}
#taf-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

/* ---------------------------------------------------------------------
   Video modal  (was {{ videoStyle.* }})
   --------------------------------------------------------------------- */
#taf-video{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#taf-video.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
#taf-video .taf-video-frame{
  transform:translateY(14px) scale(.98);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
#taf-video.is-open .taf-video-frame{
  transform:translateY(0) scale(1);
}

/* ---------------------------------------------------------------------
   About overlay  (was <sc-if value="{{ aboutOpen }}">)
   --------------------------------------------------------------------- */
#taf-about-view{
  display:none;
}
#taf-about-view.is-open{
  display:block;
}

/* ---------------------------------------------------------------------
   Responsive nav  (was {{ showDesktopNav }} / {{ showBurger }} driven by
   the isMobile state; the breakpoint is the original 760px)
   --------------------------------------------------------------------- */
.taf-nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,42px);}
.taf-burger{display:none;}
@media (max-width:760px){
  .taf-nav-links{display:none;}
  .taf-burger{display:flex;}
}

/* ---------------------------------------------------------------------
   Program day tabs  (was {{ d.tabStyle.* }})
   --------------------------------------------------------------------- */
.taf-day-tab{
  background:transparent;
  color:var(--ink);
}
.taf-day-tab.is-active{
  background:var(--orange);
  color:#0c0b0a;
}

/* ---------------------------------------------------------------------
   Program day panels — only the active day's paragraphs are shown
   --------------------------------------------------------------------- */
.taf-day-panel{display:none;}
.taf-day-panel.is-active{display:block;}

/* ---------------------------------------------------------------------
   Ticket cards  (was {{ t.cardBg }} / {{ t.nameFont }} / {{ t.btnPos }})
   The highlighted card's background follows the day/night theme, which is
   why it reads from a variable the theme switch sets on #taf-root.
   --------------------------------------------------------------------- */
.taf-ticket{border:1px solid var(--line);background:var(--bg);}
.taf-ticket.is-highlight{border-color:var(--orange);background:var(--ticketHi);}
.taf-ticket .taf-ticket-name{color:var(--ink);}
.taf-ticket.is-highlight .taf-ticket-name{color:var(--orange);}
.taf-ticket-cta{background-position:100% 0;color:var(--ink);}
.taf-ticket.is-highlight .taf-ticket-cta{background-position:0 0;color:#0c0b0a;}

/* ---------------------------------------------------------------------
   FAQ accordion  (was {{ f.bodyStyle }} / {{ f.signStyle }})
   --------------------------------------------------------------------- */
.taf-faq-body{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.taf-faq.is-open .taf-faq-body{
  max-height:320px;
  opacity:1;
}
.taf-faq-sign{
  transform:rotate(0deg);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.taf-faq.is-open .taf-faq-sign{
  transform:rotate(45deg);
}

/* ---------------------------------------------------------------------
   Loader — hidden outright when disabled in Settings
   --------------------------------------------------------------------- */
#taf-loader.is-hidden{display:none;}

/* ---------------------------------------------------------------------
   Reduced motion: kill the marquees and reveal everything immediately.
   site.js does the same for JS-driven motion.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  [style*="taf-mq"],[style*="taf-float"],[style*="taf-glow"],[style*="taf-blink"]{
    animation:none !important;
  }
  [data-reveal],[data-hero-reveal]{
    opacity:1 !important;
    transform:none !important;
  }
}