/*
Theme Name: Fence Post Tools Child
Theme URI: https://fencepostdepthcalculator.com/
Author: FencePostDepthCalculator.com
Author URI: https://fencepostdepthcalculator.com/
Description: Child theme for GeneratePress, for FencePostDepthCalculator.com. Presentation only. No calculator logic lives in this theme. All tool functionality lives in the Fence Post Tools plugin.
Version: 0.4.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fence-post-tools-child
Template: generatepress
*/

/*
 * Fence Post Depth Calculator design system, version 0.2.3-m1.1, Module 1 site shell
 * shell. Pine and cedar visual system on warm paper. Sora for
 * headings, Inter for body text, IBM Plex Mono for calculator
 * results. Mobile first, base layout for 360px, then 768px, then
 * 1280px. No horizontal overflow at any of the three widths.
 * Contrast pairs used for text, all computed against warm paper
 * #fffdf8. Pine #2e4a34 at 9.63 to 1, cedar dark #6f4a2f at
 * 7.66 to 1, muted #5c655c at 5.95 to 1, focus blue
 * #1d5fa8 at 6.35 to 1, and white on pine #2e4a34 at 9.79 to 1.
 * Mid cedar #9a6a45 is used only for borders and large
 * display accents, never for body text, because it sits at
 * 4.57 to 1 on paper. Calculator scoped styles from the plugin keep
 * working, and this sheet only adds site wide rules and a mono
 * result face on top of them.
 */

:root {
  --fpt-pine: #2e4a34;
  --fpt-pine-dark: #1f3524;
  --fpt-pine-light: #e7ede7;
  --fpt-cedar: #9a6a45;
  --fpt-cedar-dark: #6f4a2f;
  --fpt-cedar-light: #f3e8dc;
  --fpt-paper: #fffdf8;
  --fpt-cream: #f7f3ea;
  --fpt-ink: #22271f;
  --fpt-muted: #5c655c;
  --fpt-line: #d8d2c2;
  --fpt-focus: #1d5fa8;
  --fpt-error-bg: #fdf0ec;
  --fpt-error-ink: #7a2e1d;
  --fpt-radius: 8px;
  --fpt-font-head: "Sora", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fpt-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fpt-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Base, mobile first at 360px. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: var(--fpt-paper);
  color: var(--fpt-ink);
  font-family: var(--fpt-font-body);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--fpt-pine);
  font-family: var(--fpt-font-head);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.75rem 0;
  overflow-wrap: break-word;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1rem 0;
}

a {
  color: var(--fpt-pine-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--fpt-cedar-dark);
}

:focus-visible {
  outline: 3px solid var(--fpt-focus);
  outline-offset: 2px;
}

img,
svg,
video,
iframe {
  height: auto;
  max-width: 100%;
}

table {
  max-width: 100%;
}

pre,
code {
  font-family: var(--fpt-font-mono);
  overflow-x: auto;
}

ul,
ol {
  margin: 0 0 1rem 0;
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.35rem;
}

/* Header and primary navigation. */

#masthead {
  background: var(--fpt-pine-dark);
  color: #ffffff;
}

#masthead .inside-header {
  padding: 0.75rem 1rem;
}

#masthead .site-branding .main-title {
  font-family: var(--fpt-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

#masthead .site-branding .main-title a {
  color: #ffffff;
  text-decoration: none;
}

#masthead .site-branding .main-title a:hover,
#masthead .site-branding .main-title a:focus {
  color: var(--fpt-cedar-light);
}

#masthead .site-description {
  color: var(--fpt-pine-light);
  font-size: 0.9rem;
}

#site-navigation {
  background: var(--fpt-pine-dark);
}

#site-navigation .main-nav ul li a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

#site-navigation .main-nav ul li a:hover,
#site-navigation .main-nav ul li a:focus,
#site-navigation .main-nav ul li.current-menu-item a {
  background: var(--fpt-pine);
  color: #ffffff;
}

#site-navigation button.menu-toggle {
  background: transparent;
  border: 1px solid var(--fpt-pine-light);
  border-radius: 4px;
  color: #ffffff;
  font-family: var(--fpt-font-body);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
}

#site-navigation button.menu-toggle:hover,
#site-navigation button.menu-toggle:focus {
  background: var(--fpt-pine);
}

/* Content layout. */

.site-content {
  overflow-wrap: break-word;
}

.site-content .inside-article {
  padding: 1rem;
}

.entry-content {
  overflow-wrap: break-word;
}

.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content table {
  display: block;
  overflow-x: auto;
}

/* Page components used by the setup content. */

.fpt-callout {
  background: var(--fpt-cream);
  border: 1px solid var(--fpt-line);
  border-left: 4px solid var(--fpt-cedar);
  border-radius: var(--fpt-radius);
  margin: 0 0 1.5rem 0;
  padding: 1rem;
}

.fpt-callout p:last-child {
  margin-bottom: 0;
}

.fpt-draft-note {
  background: var(--fpt-cedar-light);
  border: 1px solid var(--fpt-cedar);
  border-radius: var(--fpt-radius);
  color: var(--fpt-cedar-dark);
  margin: 0 0 1.5rem 0;
  padding: 1rem;
}

.fpt-draft-note p:last-child {
  margin-bottom: 0;
}

.fpt-placeholder {
  background: var(--fpt-cream);
  border: 2px dashed var(--fpt-line);
  border-radius: var(--fpt-radius);
  margin: 0 0 1.5rem 0;
  padding: 1rem;
}

.fpt-placeholder p:last-child {
  margin-bottom: 0;
}

.fpt-tool-list {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

.fpt-tool-list li {
  background: var(--fpt-paper);
  border: 1px solid var(--fpt-line);
  border-radius: var(--fpt-radius);
  margin: 0 0 0.75rem 0;
  padding: 0.9rem 1rem;
}

.fpt-tool-list li a {
  color: var(--fpt-pine-dark);
  display: block;
  font-family: var(--fpt-font-head);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.fpt-tool-list li span {
  color: var(--fpt-muted);
  display: block;
  font-size: 0.95rem;
}

.fpt-steps {
  counter-reset: fpt-step;
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}

.fpt-steps li {
  counter-increment: fpt-step;
  border-left: 4px solid var(--fpt-pine);
  margin: 0 0 0.75rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
}

.fpt-steps li::before {
  color: var(--fpt-cedar-dark);
  content: counter(fpt-step) ". ";
  font-family: var(--fpt-font-head);
  font-weight: 700;
}

/* Buttons and forms, site wide. */

button,
input[type="button"],
input[type="submit"],
.button {
  background: var(--fpt-pine);
  border: 1px solid var(--fpt-pine-dark);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  font-family: var(--fpt-font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  text-decoration: none;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
.button:focus {
  background: var(--fpt-pine-dark);
  color: #ffffff;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
textarea,
select {
  border: 1px solid var(--fpt-line);
  border-radius: 4px;
  font-family: var(--fpt-font-body);
  font-size: 1rem;
  max-width: 100%;
  padding: 0.5rem 0.6rem;
  width: 100%;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Calculator results use the mono face, on top of the plugin scoped
   styles. The plugin sheet loads first, so this rule wins. */

.fpt-tool .fpt-result,
.fpt-tool .fpt-result output {
  font-family: var(--fpt-font-mono);
}

.fpt-tool .fpt-result p {
  font-family: var(--fpt-font-mono);
}

/* Visualizer controls must stay hidden when the fallback is active.
   The plugin sets hidden on the controls, and the flex display rule
   in the visualizer sheet overrides the browser default for hidden,
   so this scoped rule restores it. */

.fpt-tool [hidden] {
  display: none !important;
}

/* Footer. */

.site-info {
  background: var(--fpt-pine-dark);
  color: #ffffff;
}

.site-info .inside-site-info {
  padding: 1rem;
}

.site-info a {
  color: #ffffff;
}

.site-info a:hover,
.site-info a:focus {
  color: var(--fpt-cedar-light);
}

.fpt-footer-nav ul {
  list-style: none;
  margin: 0 0 0.75rem 0;
  padding: 0;
}

.fpt-footer-nav ul li {
  display: inline-block;
  margin: 0 1rem 0.35rem 0;
}

.fpt-footer-nav ul li a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.fpt-footer-nav ul li a:hover,
.fpt-footer-nav ul li a:focus {
  color: var(--fpt-cedar-light);
  text-decoration: underline;
}

.site-info .copyright-bar {
  color: var(--fpt-pine-light);
  font-size: 0.9rem;
}

/* Tablet layout, 768px and up. */

@media (min-width: 48rem) {
  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  #masthead .inside-header {
    padding: 1rem 1.5rem;
  }

  #masthead .site-branding .main-title {
    font-size: 1.5rem;
  }

  .site-content .inside-article {
    padding: 1.5rem;
  }

  .fpt-tool-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }

  .fpt-tool-list li {
    margin-bottom: 0;
  }

  .fpt-footer-nav ul li {
    margin-bottom: 0;
  }
}

/* Desktop layout, 1280px and up. */

@media (min-width: 80rem) {
  .site-content .inside-article {
    margin-left: auto;
    margin-right: auto;
    max-width: 76rem;
    padding: 2rem 1.5rem;
  }

  #masthead .inside-header,
  .site-info .inside-site-info {
    margin-left: auto;
    margin-right: auto;
    max-width: 76rem;
  }

  .fpt-callout,
  .fpt-draft-note,
  .fpt-placeholder {
    padding: 1.25rem;
  }
}

/* Reduced motion. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none;
  }
}

/* Print. */

@media print {
  #site-navigation,
  .fpt-footer-nav,
  #masthead button.menu-toggle {
    display: none;
  }

  body {
    background: #ffffff;
  }
}