/*
Theme Name: TellezTec
Theme URI: https://telleztec.com/
Description: Child theme of Twenty Seventeen. Replaces the front page with a
  single-screen statement on the dark forest ground, and reduces the site header
  to the mark plus the wordmark. Generated content comes from content/front-page.md
  in the telleztec-infra repo -- edit there, not here.
Author: Juan Tellez
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: telleztec
*/

:root {
  --tt-ground: #12352A;
  --tt-ink:    #F2EFE6;
  --tt-muted:  #A9B8AE;
  --tt-accent: #F49A47;
  --tt-rule:   rgba(242, 239, 230, .14);
  --tt-navink: rgba(242, 239, 230, .72);
  --tt-serif:  "EB Garamond", Georgia, "Times New Roman", serif;
}

/* ---------------------------------------------------------------- header --
   Twenty Seventeen's markup is:

     header.site-header
       div.custom-header
         div.custom-header-media   <- the photo
         div.site-branding         <- logo + title  (NESTED INSIDE custom-header)
       div.navigation-top
         nav.main-navigation

   The branding lives inside .custom-header, so hiding .custom-header hides the
   logo and title too. Only the media element may be hidden. */

.site-header {
  background: var(--tt-ground);
  border-bottom: 1px solid var(--tt-rule);
  padding: 0 3.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.custom-header {
  min-height: 0;
  background: transparent;
  flex: 0 0 auto;
}
.custom-header-media { display: none; }

.site-branding { padding: 0; margin: 0; }
.site-branding .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
  max-width: none;
  width: auto;
}
.custom-logo-link { display: block; margin: 0; }
.custom-logo-link img,
.site-branding img {
  width: 34px;
  height: 34px;
  max-width: none;
  display: block;
}
.site-branding-text { margin: 0; }
.site-title {
  font-family: var(--tt-serif);
  font-size: 17px;
  line-height: 1;
  letter-spacing: .22em;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
}
.site-title a,
.site-title a:hover { color: var(--tt-ink); text-decoration: none; }

/* blogdescription is cleared by scripts/apply-site-config.sh, so Twenty
   Seventeen omits this element. Belt and braces for the customizer preview. */
.site-description { display: none; }

/* ------------------------------------------------------------- navigation --
   The parent hides the menu behind a JS toggle below 48em and reveals it above.
   With two items a plain row fits at every width, so the toggle is dropped and
   the menu is always shown. The `.js` prefixes match the parent's own
   specificity -- without them its rules win and the menu stays hidden. */

.menu-toggle,
.js .menu-toggle { display: none; }

.navigation-top {
  background: transparent;
  border: 0;
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
  width: auto;
}
.navigation-top .wrap { padding: 0; max-width: none; width: auto; }

.main-navigation,
.js .main-navigation { display: block; width: auto; }

.main-navigation ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
.main-navigation ul ul { display: none; }
.main-navigation li {
  margin: 0 0 0 28px;
  border: 0;
  display: block;
  width: auto;
}
.main-navigation a {
  font-family: var(--tt-serif);
  font-size: 14px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tt-navink);
  padding: 0;
  display: block;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: var(--tt-ink); }

/* ------------------------------------------------------------ front page -- */

.home.page .site-content-contain,
.home.page #content,
.home.page .site-content { background: var(--tt-ground); padding: 0; margin: 0; }


.tt-front {
  max-width: 730px;
  padding: 96px 3.5em 120px;
  color: var(--tt-ink);
  font-family: var(--tt-serif);
  font-size: 20px;
  line-height: 1.62;
}
.tt-hook {
  font-size: clamp(30px, 4.4vw, 49px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.005em;
  margin: 0 0 34px;
  color: var(--tt-ink);
  text-wrap: balance;
}
.tt-body { color: var(--tt-muted); margin: 0 0 26px; max-width: 62ch; }
.tt-pivot { color: var(--tt-ink); font-size: 22px; margin: 0 0 44px; }
.tt-pivot .quiet { color: var(--tt-muted); font-size: 20px; }
.tt-who {
  font-size: 16px;
  color: var(--tt-muted);
  border-top: 1px solid var(--tt-rule);
  padding-top: 24px;
  margin: 0 0 22px;
  max-width: 600px;
}
.tt-who a { color: var(--tt-muted); text-underline-offset: 3px; }
.tt-who a:hover { color: var(--tt-ink); }
.tt-email {
  display: inline-block;
  color: var(--tt-accent);
  font-size: 19px;
  border-bottom: 1px solid var(--tt-accent);
  padding-bottom: 2px;
  text-decoration: none;
}
.tt-email:hover { color: var(--tt-accent); }

a:focus-visible {
  outline: 2px solid var(--tt-accent);
  outline-offset: 4px;
}

/* ----------------------------------------------------------- inner pages --
   Deliberately NOT dark. The front page is a statement read in one glance;
   About and the blog are read at length, where a light ground is easier. The
   dark header bar carries the continuity between them.

   Twenty Seventeen's page markup is:

     div.single-featured-image-header   <- full-bleed banner, removed in PHP
     div.site-content-contain
       div.site-content > div.wrap > div.content-area > main.site-main
         article > header.entry-header > h1.entry-title
                 > div.entry-content

   The two-column float is switched off by dropping the page-two-column body
   class in functions.php, so nothing here has to fight it. */

.single-featured-image-header { display: none; }

.site-content-contain { background: #FFFFFF; }
.site-content { padding: 3.25em 0 4em; }

/* Left-aligned at the same 3.5em as the header and the front page, so the text
   column starts on the same vertical line as the logo above it. Centring it
   would read as a different page rather than the same site. box-sizing is
   border-box here, so 790px minus the padding leaves ~700px of measure, near 70
   characters at 19px. The parent's default 1000px is too wide for a serif. */
.site-content .wrap {
  max-width: 790px;
  margin-left: 0;
  margin-right: auto;
  padding-left: 3.5em;
  padding-right: 2em;
}

.entry-header,
.entry-content {
  float: none;
  width: auto;
}

.entry-title {
  font-family: var(--tt-serif);
  font-size: 38px;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--tt-ground);
  margin: 0 0 1em;
  text-wrap: balance;
}

.entry-content {
  font-family: var(--tt-serif);
  font-size: 19px;
  line-height: 1.68;
  color: #26332C;
}
.entry-content h2 {
  font-family: var(--tt-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tt-ground);
  margin: 2em 0 .6em;
}
.entry-content p { margin: 0 0 1.15em; }
.entry-content strong { font-weight: 600; color: var(--tt-ground); }
.entry-content a { color: #B4600B; text-underline-offset: 3px; }

/* Hidden site-wide. Twenty Seventeen's footer is a "Proudly powered by
   WordPress" credit and a widget area, neither of which this site uses; left
   alone it rendered as an unstyled default-blue link flush to the viewport
   edge. Nothing here needs a footer yet -- when something does (a copyright
   line, a contact link), style it rather than un-hiding this. */
.site-footer { display: none; }

@media screen and (max-width: 47.9375em) {
  .site-content .wrap { padding-left: 1.5em; padding-right: 1.5em; }
  .site-header { padding: 0 1.5em; flex-wrap: wrap; gap: 8px; }
  .site-branding .wrap { padding: 16px 0; }
  .navigation-top { margin-left: auto; }
  .main-navigation li { margin-left: 20px; }
  .tt-front { padding: 56px 1.5em 80px; font-size: 18px; }
  .tt-pivot { font-size: 19px; }
}