/*
Theme Name: Toolbox Design — Coming Soon
Theme URI: https://toolboxdesign.net/
Author: Toolbox Design
Author URI: https://toolboxdesign.net/
Description: A single-page "coming soon" theme for Toolbox Design. Displays the responsive double-lime-border landing page for every route. Content is hardcoded for a fixed launch announcement.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toolbox-coming-soon
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
*/

/* ---------- Web fonts (extracted from HelveticaNeue.ttc) ---------- */
@font-face {
  font-family: 'Helvetica Neue';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/HelveticaNeue-Thin.woff2') format('woff2'),
       url('assets/fonts/HelveticaNeue-Thin.woff') format('woff');
}
@font-face {
  font-family: 'Helvetica Neue';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/HelveticaNeue-Bold.woff2') format('woff2'),
       url('assets/fonts/HelveticaNeue-Bold.woff') format('woff');
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --lime: #BFD730;
  --ink: #1A1A1A;
  --hairline: #DADADA;

  /* The frame fills the viewport (margins aside) and scales with both axes.
     clamp() keeps the chrome proportional from desktop down to mobile. */
  --outer-margin: clamp(12px, 4vmin, 56px);  /* gap from viewport edge to the outer lime frame */
  --green-outer:  clamp(3px, 0.8vmin, 10px); /* outer lime frame (1/4 of the old thick border) */
  --frame-gap:    clamp(6px, 2vmin, 22px);   /* white gap between the two lime frames */
  --inner-pad:    clamp(16px, 5.2vmin, 64px);/* padding inside the inner lime frame */
}

html, body { height: 100%; }

body {
  background: #FFFFFF;
  color: var(--ink);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;            /* belt-and-braces: no horizontal scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- The frame ----------
   Fills the viewport minus the outer margin on every side — a rectangle that
   scales with both screen width AND height (not a fixed square). */
.frame {
  width:  calc(100vw - var(--outer-margin) * 2);
  height: calc(100vh - var(--outer-margin) * 2);
  height: calc(100dvh - var(--outer-margin) * 2);
  padding: var(--frame-gap);          /* inset around the content */
  background: #FFFFFF;
}

/* The inner content area. */
.inner {
  width: 100%;
  height: 100%;
  padding: var(--inner-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* content block centered; even 50px gaps above + below the logo */
}

/* ---------- Logo ---------- */
.logo-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  order: 2;            /* sits BELOW the headline (visual reorder) */
  margin-bottom: 50px; /* 50px gap down to the icons (even with headline-to-logo) */
}
.logo-wrap img {
  width: clamp(66px, 13vmin, 100px);
  height: auto;
  display: block;
}

/* ---------- Headline (left-aligned block, vertically centered) ---------- */
.headline {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;         /* headline block centered horizontally */
  text-align: center;
  width: 100%;
  order: 1;            /* top of the centered block */
  margin-bottom: 50px; /* 50px gap down to the logo (even with logo-to-icons) */
}
.headline .line {
  line-height: 1.04;
  white-space: nowrap;          /* each line is one row, like the reference */
}
.headline .l1 {
  font-weight: 100;
  color: var(--ink);
  font-size: clamp(44px, 19.02vmin, 209px);  /* sized so "A NEW" ~ matches line 2 width */
  letter-spacing: 0.06em;
  margin-right: 1px;   /* optical nudge */
}
.headline .l2 {
  font-weight: 700;
  color: var(--lime);
  font-size: clamp(23px, 9.54vmin, 104px);  /* −10%; heaviest line */
  letter-spacing: 0.015em;
  margin: 0.02em 0;
  margin-left: -5px;   /* optical nudge left to align with the other lines */
}
.headline .l3 {
  font-weight: 100;
  color: var(--ink);
  font-size: clamp(21px, 8.46vmin, 92px);     /* −10%; width still matches line 2 */
  letter-spacing: 0.05em;
}

/* ---------- Social row ---------- */
.social {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.4vmin, 22px);
  width: 100%;
  order: 3;
}
.social img {
  height: clamp(16px, 3vmin, 24px);
  width: auto;
  display: block;
}
/* Mail: envelope inlined as SVG + the email as real HTML text so it
   renders in Helvetica Neue (an <img> SVG can't use the page @font-face). */
.social .mail {
  align-items: center;
  gap: 0.55em;
  color: #231F20;
  text-decoration: none;
}
.social .mail-icon {
  height: clamp(10.4px, 1.92vmin, 15.36px);   /* ~0.64x the other social icons (20% smaller, twice) */
  width: auto;
  display: block;
}
.social .mail-text {
  font-weight: 100;
  font-size: clamp(9px, 1.6vmin, 13px);
  letter-spacing: 0.01em;
  color: #231F20;
  white-space: nowrap;
  line-height: 1;
}
.social .divider {
  width: 2px;
  align-self: stretch;
  min-height: clamp(16px, 3vmin, 24px);
  background: var(--hairline);
}
.social a { display: inline-flex; }

/* ---------- Mobile (narrow / portrait) ---------- */
@media (max-width: 600px) {
  /* Social: icons get the full 22px inter-icon gap; the email wraps to its own
     line below the icon row so the row doesn't overflow a narrow screen.
     (Centering + the 50px logo gaps are handled by the base rules.) */
  .social {
    flex-wrap: wrap;
    column-gap: 22px;
    row-gap: clamp(16px, 5vmin, 26px);
  }
  .social .divider:last-of-type { display: none; }
  .social .mail { flex-basis: 100%; justify-content: center; }

  /* Logo + icons enlarged on mobile only (~1.44x the desktop base) */
  .logo-wrap img { width: clamp(95px, 18.7vmin, 144px); }
  .social img { height: clamp(23px, 4.3vmin, 35px); }
  .social .mail-icon { height: clamp(14.72px, 2.752vmin, 22.4px); }   /* ~0.64x the other icons (20% smaller, twice) */
  .social .mail-text { font-size: 13px; }   /* email text enlarged on mobile only */
}