/*
Theme Name: Blank theme
Version: 1.0
Author: David Costa Mano
Author URI: https://dcm-works.com
*/

/* -------------------------
   Design tokens / variables
   -------------------------
   Centralized color, font and RGB variables for easy theming.
   Use the -rgb variants for rgba() or filter/processing that requires numeric channels.
*/
:root {
  --headings-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;

  --aqua: #7FDBFF;
  --aqua-rgb: 127, 219, 255;

  --black: #111111;
  --black-rgb: 17, 17, 17;

  --blue: #0074D9;
  --blue-rgb: 0, 116, 217;

  --fuchsia: #F012BE;
  --fuchsia-rgb: 240, 18, 190;

  --gray: #AAAAAA;
  --gray-rgb: 170, 170, 170;

  --green: #2ECC40;
  --green-rgb: 46, 204, 64;

  --lime: #01FF70;
  --lime-rgb: 1, 255, 112;

  --maroon: #85144B;
  --maroon-rgb: 133, 20, 75;

  --navy: #001F3F;
  --navy-rgb: 0, 31, 63;

  --olive: #3D9970;
  --olive-rgb: 61, 153, 112;

  --orange: #FF851B;
  --orange-rgb: 255, 133, 27;

  --purple: #B10DC9;
  --purple-rgb: 177, 13, 201;

  --red: #FF4136;
  --red-rgb: 255, 65, 54;

  --silver: #DDDDDD;
  --silver-rgb: 221, 221, 221;

  --teal: #39CCCC;
  --teal-rgb: 57, 204, 204;

  --white: #FEFEFE;
  --white-rgb: 254, 254, 254;

  --yellow: #FFDC00;
  --yellow-rgb: 255, 220, 0;
}

/* -------------------------
   Global reset & box-sizing
   -------------------------
   Use border-box to make width/height calculations predictable.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* -------------------------
   Base layout: html, body
   -------------------------
   Full height and zero default margins/padding.
*/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* -------------------------
   Body defaults
   -------------------------
   Sets fonts, base colors, and text rendering optimizations.
*/
body {
  font-family: var(--body-font);
  background: var(--white);
  color: var(--black);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* -------------------------
   Dark mode class toggle
   -------------------------
   Switching 'body.dark' swaps the primary colors.
   This lets the JS toggle dark mode by adding/removing the class.
*/
body.dark {
  --black: #FEFEFE;
  --black-rgb: 254, 254, 254;

  --white: #111111;
  --white-rgb: 17, 17, 17;
}

/* -------------------------
   System preference for dark mode
   -------------------------
   Respect user's OS color-scheme setting.
*/
@media (prefers-color-scheme: dark) {
  :root {
    --black: #FEFEFE;
    --black-rgb: 254, 254, 254;

    --white: #111111;
    --white-rgb: 17, 17, 17;
  }
}

/* -------------------------
   Base typography scale
   -------------------------
   Root font-size and responsive heading sizes below.
*/
html {
  font-size: 16px;
}

/* -------------------------
   Media elements
   -------------------------
   Make images, video, svg responsive by default.
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  height: auto;
  max-width: 100%;
}

/* -------------------------
   Form control inheritence
   -------------------------
   Controls inherit font and color for visual consistency.
*/
input,
button,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
  background: inherit;
  color: inherit;
  font: inherit;
}

/* Remove default button visuals and make them behave like controls */
button,
input[type="submit"] {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* -------------------------
   Lists used for styled navigation or utility lists
   -------------------------
   Remove default margins and reset list presentation.
*/
ul,
ol {
  margin: 0;
  padding-left: 16px;
}

.styled-list {
  padding-left: 0;
}

.styled-list li {
  list-style-type: none;
}

/* -------------------------
   Headings & paragraph defaults
   -------------------------
   Use dedicated heading font stack and consistent margins.
*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--headings-font);
}

h1, h2, h3, h4, h5, h6,
p {
  color: inherit;
  margin-bottom: 8px;
  margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* H1 responsive sizing */
h1 {
  font-size: 2rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}

/* H2 responsive sizing */
h2 {
  font-size: 1.5rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  h2 {
    font-size: 2.25rem;
  }
}

/* H3 responsive sizing */
h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}

@media (min-width: 768px) {
  h3 {
    font-size: 1.5rem;
  }
}

/* H4 responsive sizing */
h4 {
  font-size: 1rem;
  line-height: 1.25;
}

@media (min-width: 768px) {
  h4 {
    font-size: 1.125rem;
  }
}

/* H5 responsive sizing */
h5 {
  font-size: .875rem;
  line-height: 1.25;
}

@media (min-width: 768px) {
  h5 {
    font-size: 1rem;
  }
}

/* H6 responsive sizing */
h6 {
  font-size: .8125rem;
  line-height: 1.25;
}

@media (min-width: 768px) {
  h6 {
    font-size: .875rem;
  }
}

/* Paragraph and inline text sizing */
p, span {
  font-size: .95rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  p, span {
    font-size: 1rem;
  }
}

/* -------------------------
   Links and utility helpers
   -------------------------
   Links inherit color and remove default underline.
*/
a {
  color: inherit;
  text-decoration: none;
}

/* Utility hidden class */
.hidden {
  display: none !important;
}

/* Responsive visibility helpers */
@media (max-width: 767px) {
  .hidden-for-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-for-desktop {
    display: none !important;
  }
}

/* Utility to center inline and block text horizontally. */
.text-center {
  text-align: center;
}

/* -------------------------
   Vertical spacing utilities
   -------------------------
   Reusable margin utilities for consistent spacing.
*/
.vertical-spacer-1 {
  padding: 16px 0;
}

.vertical-spacer-2 {
  padding: 32px 0;
}

.vertical-spacer-3 {
  padding: 64px 0;
}

/* -------------------------
   Layout containers
   -------------------------
   Centered container with max-width and mobile-first padding.
*/
.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1200px;
  padding: 16px;
}

/* Row / Column flex system */
.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex-basis: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .column {
    flex-basis: auto;
    width: auto;
  }
}

/* Inner spacing wrapper */
.wrapper {
  padding: 16px;
}

/* -------------------------
   Responsive media wrapper
   -------------------------
   Preserves aspect ratio and crops overflow using object-fit.
*/
.media-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.media-wrapper img,
.media-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------
   Form styles
   -------------------------
   Basic accessible form layout and spacing.
*/
label {
  display: block;
  margin-bottom: 8px;
}

input[type="checkbox"] {
  margin: 0;
}

/* Checkbox / radio label pairing */
input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-block;
}

/* Full-width inputs for mobile-first layout */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
}

/* Default input padding */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  padding: 8px 16px;
}

/* Space between inputs */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  margin-bottom: 16px;
}

textarea {
  resize: none;
}

/* Remove default focus padding in Firefox */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* HR styles */
hr {
  border: none;
  border-top: 1px solid var(--silver);
  margin: 16px 0;
}

/* Code block handling */
code {
  white-space: pre-wrap;
  word-break: break-all;
}

/* -------------------------
   Buttons
   -------------------------
   Basic button styles, primary/alt variants and disabled state.
*/
button,
.button {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  border: solid 2px var(--black);
  padding: 8px 16px;
  font-size: .85rem;
  font-weight: 700;
  transition: opacity .25s ease;
}

button[disabled] {
  opacity: .25;
  cursor: not-allowed;
}

/* Hover dim effect for interactive buttons */
button:not([disabled]):hover,
.button:not([disabled]):hover {
  opacity: .5;
}

/* Alternate button (inverted) */
button.button-alt,
.button.button-alt {
  background: var(--white);
  color: var(--black);
}

/* -------------------------
   Table styles
   -------------------------
   Responsive table wrapper and accessible cell spacing.
*/
.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}

table caption {
  margin-bottom: 16px;
}

th,
td {
  border: 1px solid var(--silver);
  padding: 8px;
}

th {
  background: rgba(var(--silver-rgb), .5);
  font-weight: 700;
}

td {
  font-weight: 400;
}

/* Zebra striping for readability */
tr:nth-child(even) td {
  background: rgba(var(--silver-rgb), .15);
}

/* Smaller table font on narrow viewports */
@media (max-width: 767px) {
  table {
    font-size: .85rem;
  }
}

/* -------------------------
   Header styles
   -------------------------
   Responsive header layout with stacked mobile navigation.
*/
.header a > p {
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0;
}

.header .container {
  padding: 12px 16px;
}

/* Align items in header row and space-between for logo/nav */
.header .container > .row {
  align-items: center;
  justify-content: space-between;
}

.header img {
  max-width: 160px;
}

/* Larger logo on wider screens */
@media screen and (min-width: 768px) {
  .header img {
    max-width: 200px;
  } 
}

/* Mobile-first stacked list items for header navigation */
.header li {
  flex: 0 0 100%;
  list-style-type: none;
}

.header li a {
  display: inline-block;
  position: relative;
}

/* Spacing between stacked nav items on mobile */
.header li:not(:last-child) {
  margin-bottom: 16px;
}

/* Main nav uses a flex row on wider viewports */
.header nav > ul {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
}

/* Hover/active underline styling for header links */
.header li.active > a,
.header li a:hover {
    text-decoration: underline;
  text-decoration-color: rgba(var(--black-rgb), .5);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* Expanded state reveals hidden mobile nav items */
.header.expanded .hidden-for-mobile {
  display: block !important;
}

/* Header columns sizing */
.header .column {
  width: auto;
}

/* -------------------------
   Header responsive behavior (mobile)
   -------------------------
   Control header column ordering and collapsed nav transitions.
*/
@media screen and (max-width: 767px) {
  .header .column:first-child {
    flex: 0 0 70%;
    width: 70%;
    order: 0;
    overflow: hidden;
  }

  .header .hidden-for-desktop {
    flex: 0 0 30%;
    width: 30%;
    order: 1;
    text-align: end;
    overflow: hidden;
  }

  /* Collapsible mobile nav area */
  .header .hidden-for-mobile {
    order: 2;
        display: block !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
  }

  /* When header is expanded set a large max-height for reveal */
  .header.expanded .column.hidden-for-mobile {
      max-height: 512px;
  }

  .header .column.hidden-for-mobile nav {
    padding: 16px 0;
  }

  /* Make submenus inline and stacked on mobile */
  .header li > ul {
    background: transparent;
    box-shadow: none;
    display: block !important;
    margin-top: 16px;
    min-width: auto;
    position: static;
  }
}

/* -------------------------
   Header responsive behavior (desktop)
   -------------------------
   Desktop dropdown menus and spacing adjustments.
*/
@media screen and (min-width: 768px) {
  .header a > p {
    font-size: 2.5rem;
  }

  .header nav {
    position: relative;
  }

  .header li {
    flex: 0 0 auto;
  }

  .header li:not(:last-child) {
    margin: 0;
    margin-inline-end: 16px;
  }

  /* Desktop dropdown: hidden by default, shown on hover */
  .header li > ul {
    display: none;
    padding: 8px 16px;
    position: absolute;
    min-width: 192px;
    z-index: 10;
  }

  /* Background layer for dropdowns */
  .header li > ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
  }

  .header li:hover > ul {
    display: block;
  }

  .header li > ul > li {
    flex: 0 0 100%;
    padding: 8px 0;
    margin: 0 !important;
  }
}

/* -------------------------
   Footer styles
   -------------------------
   Consistent footer list layout and responsive ordering.
*/
.footer p {
  margin: 0;
}

.footer .styled-list {
  display: flex;
  flex-flow: row wrap;
}

.footer li {
  flex: 0 0 100%;
  list-style-type: none;
}

.footer li a {
  display: inline-block;
  position: relative;
}

/* Spacing between footer items on mobile */
.footer li:not(:last-child) {
  margin-bottom: 16px;
}

/* Footer column order adjustments on narrow screens */
@media screen and (max-width: 767px) {
  .footer .column:first-child {
    order: 2;
  }

  .footer .column:last-child {
    order: 1;
    margin-bottom: 32px;
  }
}

/* Footer layout for larger screens */
@media screen and (min-width: 768px) {
  .footer .row {
    justify-content: space-between;
    align-items: center;
  }

  .footer li {
    flex: 0 0 auto;
  }

  .footer li:not(:last-child) {
    margin: 0;
    margin-inline-end: 16px;
  }
}