/*
Theme Name: Creative Foods — Coming Soon
Theme URI: https://creativefoods.com
Author: Creative Foods
Author URI: https://creativefoods.com
Description: Single-page "coming soon" landing theme for Creative Foods, built to match the approved design exactly. Full-bleed hero photography, bilingual language switch, and a live countdown to launch.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: creative-foods-coming-soon
*/

/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
  font-family: "Avenir Next Cyr";
  src: url("assets/fonts/AvenirNextCyr-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next Cyr";
  src: url("assets/fonts/AvenirNextCyr-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next Cyr";
  src: url("assets/fonts/AvenirNextCyr-Medium.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Arabic body copy: the supplied Avenir Next Cyr covers Latin + Cyrillic
   only, so the Arabic page uses Cairo (Google Fonts) as the closest
   geometric match in weight and proportion. Scoped to the Arabic page
   only — the English page is unaffected. */
html[lang="ar"] .cf-hero-copy,
html[lang="ar"] .cf-lang,
html[lang="ar"] .cf-unit .label{
  font-family:"Cairo","Avenir Next Cyr","Tahoma",sans-serif;
}
html[lang="ar"] .cf-hero-copy .line-1{ font-weight:700; }
html[lang="ar"] .cf-hero-copy .line-2{ font-weight:400; }
/* Countdown digits stay in Avenir Next Cyr on both pages, so the numbers
   read identically in English and Arabic — only the surrounding labels
   and copy switch typeface. */
html[lang="ar"] .cf-unit .num{
  font-family:"Avenir Next Cyr","Helvetica Neue",Arial,sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
:root{
  --black:#000000;
  --grid-line: rgba(255,255,255,0.08);
  --white:#ffffff;
  --dim:#8a8a8a;
  --dim-2:#5c5c5c;
}

*{ box-sizing:border-box; }
html,body{ height:100%; overflow:hidden; }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:"Avenir Next Cyr", "Helvetica Neue", Arial, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.cf-page{
  position:relative;
  height:100vh;
  height:100dvh; /* accounts for mobile browser chrome so nothing gets clipped under it */
  display:flex;
  flex-direction:column;
  background:var(--black);
  overflow:hidden;
}

/* Faint background grid, matching the approved design */
.cf-grid{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 14.28% 100%, 100% 20%;
}

/* ==========================================================================
   Header / language switch
   ========================================================================== */
.cf-header{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 2.2vh 3.4vw 0;
}
.cf-logo img{
  height: clamp(94px, 13vh, 152px);
  width:auto;
}
.cf-lang{
  display:flex;
  align-items:center;
  gap:14px;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing:.06em;
}
.cf-lang a{
  color:var(--dim-2);
  transition:color .2s ease;
}
.cf-lang a.is-active,
.cf-lang a:hover{
  color:var(--white);
}
.cf-lang .divider{
  color:var(--dim-2);
  opacity:.6;
}

/* ==========================================================================
   Hero copy
   ========================================================================== */
.cf-hero{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding: 3vh 3.4vw 3vh;
}
.cf-hero-copy{
  text-align:right;
  max-width:640px;
}
.cf-hero-copy .line-1{
  margin:0;
  font-weight:700;
  font-size: clamp(34px, 4.6vw, 74px);
  line-height:1.05;
  letter-spacing:-0.01em;
  color:var(--white);
}
.cf-hero-copy .line-2{
  margin:.15em 0 0;
  font-weight:400;
  font-size: clamp(26px, 3.4vw, 54px);
  line-height:1.1;
  color:var(--dim);
}

/* ==========================================================================
   Photo band
   ========================================================================== */
.cf-photo{
  position:relative;
  z-index:2;
  width:100%;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.cf-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ==========================================================================
   Countdown
   ========================================================================== */
.cf-countdown-section{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding: 3vh 3.4vw 4vh;
}
.cf-countdown{
  display:flex;
  align-items:flex-start;
  gap: clamp(10px, 1.6vw, 26px);
}
.cf-countdown .cf-sep{
  align-self:flex-start;
  margin-top: 0.15em;
  font-weight:300;
  font-size: clamp(22px, 2.6vw, 44px);
  color: var(--dim-2);
}
.cf-unit{
  text-align:center;
  min-width: 1.6em;
}
.cf-unit .num{
  display:block;
  font-weight:700;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height:1;
  font-variant-numeric: tabular-nums;
  color:var(--white);
}
.cf-unit .label{
  display:block;
  margin-top:.6em;
  font-weight:400;
  font-size: clamp(11px, 1vw, 15px);
  color: var(--dim);
  letter-spacing:.02em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 780px){
  .cf-grid{ background-size: 25% 100%, 100% 16.6%; }
  .cf-header{ padding: 18px 20px 0; }
  .cf-hero{ justify-content:flex-end; padding: 3vh 20px 2.4vh; }
  .cf-hero-copy{ max-width:100%; }
  .cf-countdown-section{ padding: 2.4vh 20px 3vh; justify-content:center; }
  .cf-countdown{ gap:14px; }
}

@media (max-width: 480px){
  .cf-hero-copy .line-1{ font-size:32px; }
  .cf-hero-copy .line-2{ font-size:22px; }
  .cf-countdown .cf-sep{ font-size:20px; }
  .cf-unit .num{ font-size:26px; }
}

/* Short viewports (landscape phones/tablets): trim the fixed-height
   chrome further so the elastic photo band always has room to render,
   keeping the whole page on screen with no scroll. */
@media (max-height: 640px){
  .cf-logo img{ height: clamp(64px, 11vh, 96px); }
  .cf-header{ padding-top:1.6vh; }
  .cf-hero{ padding-top:1.6vh; padding-bottom:1.6vh; }
  .cf-hero-copy .line-1{ font-size: clamp(26px, 4vh, 46px); }
  .cf-hero-copy .line-2{ font-size: clamp(18px, 3vh, 32px); }
  .cf-countdown-section{ padding-top:1.6vh; padding-bottom:2vh; }
  .cf-unit .num{ font-size: clamp(22px, 4vh, 36px); }
  .cf-countdown .cf-sep{ font-size: clamp(16px, 3vh, 26px); }
}

/* ==========================================================================
   RTL (Arabic)
   The composition mirrors: logo moves to the right, the language switch
   and hero copy move to the left, and the countdown units reverse order
   so the sequence still reads naturally right-to-left.
   ========================================================================== */
[dir="rtl"] .cf-header{ flex-direction: row-reverse; }
[dir="rtl"] .cf-lang{ flex-direction: row-reverse; }
[dir="rtl"] .cf-hero{ justify-content: flex-start; }
[dir="rtl"] .cf-countdown-section{ justify-content: flex-start; }
[dir="rtl"] .cf-countdown{ flex-direction: row-reverse; }

/* Arabic script is cursive/joined — letter-tracking breaks the joins,
   so it's switched off wherever the Latin version uses it. */
[dir="rtl"] .cf-hero-copy .line-1,
[dir="rtl"] .cf-lang,
[dir="rtl"] .cf-unit .label{
  letter-spacing: normal;
}

@media (max-width: 780px){
  [dir="rtl"] .cf-countdown-section{ justify-content:center; }
}