/*
Theme Name: Coffeecinno
Theme URI: https://example.com/
Author: Maurits-Jan Seriese
Description: Custom WordPress theme for Coffeecinno.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Coffeecinno
*/

/*-----------------------------------
  :root — All Variables
-----------------------------------*/
:root {
  --scroll-top-margin: 0px;

  /* Navigation widths */
  --nav-width-mobile: 280px;
  --nav-width-tablet: 320px;
  --nav-width-desktop: 240px;

  /* Breakpoints */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;

  /* Color Palette */
  --color-background:   #511b00;
  --color-text:         #ffffff;
  --color-heading:      #ffffff;
  --color-link:         #dddddd;
  --color-link-hover:   #aaaaaa;
  --color-muted:        #666666;

  /* Typography */
  --font-body:          'Barlow', sans-serif;
  --font-heading:       'Caveat', sans-serif;
  --slider-heading:     'Caveat', sans-serif;

  /* Spacing */
  --spacing-base:       1rem;
  --spacing-lg:         2rem;
  --spacing-sm:         0.5rem;

  /* Transitions */
  --transition-speed:   0.3s;
}

@media (min-width: 768px) {
	:root {
	  --scroll-top-margin: 210px;
	}
}

/*-----------------------------------
  Global Reset & Base Styles
-----------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 16px */
  line-height: 1.5;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-background);
  overflow-x: hidden;
}

/* Elements */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration: none;
}

/*-----------------------------------
  Headings
-----------------------------------*/
h1, h2, h3, h4, h5, h6 {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-base);
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.2;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
h5 { font-size: .875rem; }
h6 { font-size: .75rem; }

/*-----------------------------------
  Paragraphs & Lists
-----------------------------------*/
p {
  margin-bottom: var(--spacing-base);
}

ul, ol {
  margin: 0 0 var(--spacing-base) 1.5rem;
}

/*-----------------------------------
  Muted Text
-----------------------------------*/
.small,
.muted,
caption,
footer .site-info {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/*-----------------------------------
  Buttons (example)
-----------------------------------*/
.button,
button,
input[type="submit"] {
  background-color: var(--color-link);
  color: #fff;
  border: none;
  padding: var(--spacing-sm) var(--spacing-base);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
}

/*-----------------------------------
  Layout Containers
-----------------------------------*/
.site-container {
  padding: var(--spacing-base);
  max-width: 1140px;
  margin: 0 auto;
}

.site-header,
.site-footer {
  width: 100%;
}

.site-content {
  width: 100%;
}