@font-face {
	font-family: cabin;
	src: url(../font/Cabin-Medium.woff2);
}

:root {
  --background-dark: #dcdcdc;
  --blue: #224c6a;         /* seafarer */
  --blue-bright: #007bff;  /* azure radiance */
  --blue-dark: #113b59;    /* prussian blue */
  --blue-light: #4e7088;   /* jelly bean blue */
  --blue-lighter: #c8ceff; /* lavender blue */
  --green: #539d73;        /* sea cabbage */
  --green-dark: #318a62;   /* sulu */
  --pink: #e36f87;         /* candy pink */
  --purple: #800080;       /* fresh eggplant */
  --red: #cc3333;          /* persian red */
  --red-dark: #aa2222;     /* blood rush */
  --red-darker: #8a383d;   /* brandy */
  --red-darkest: #682919;  /* chocolate-hazelnut */
  --light-background: #f5f5f5; /* white smoke */
  --light-text: #f9f9f9;   /* doctor */

  --font-size-base: 1rem;  /* 16px base */
  --font-family-base: 'Cabin', sans-serif;

  /* Optional future spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  --min-mobile-size: 44px;
  --layout-max-width: 67.5rem;
  --mobile-layout-max-width: 18.75rem;
  --layout-side-padding: clamp(1rem, 4vw, 2rem);
  --section-spacing: var(--space-lg); /* e.g., 2rem */
}

body {
  color: var(--blue);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  height: 100vh;
  margin: 0;
  min-height: 100vh; /* good practice for flex layouts */
  padding: 0;
  align-items: center;
}

site-footer {
  width: 100%;
}

site-footer, footer {
	background-color: var(--blue);
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 2rem;
	padding-block: var(--space-sm);
}

footer a {
	border-radius: var(--space-sm);
  color: var(--light-text);
  font-size: 1.5rem;
  height: var(--space-lg);
  padding: var(--space-xs);
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3 {
	text-align: center;
	margin: 0;
	width: 100%;
}

header {
  background-color: var(--blue);
  box-sizing: border-box;
  width: 100%;
}

main {
  display: flex;
  flex-direction: column;
	width: 100%;
  flex-grow: 1;
}

nav {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: var(--space-md);
  justify-content: space-between;
  margin-inline: auto;
  max-width: var(--layout-max-width);
  padding-block: var(--space-sm);
  padding-inline: var(--layout-side-padding);
  width: 100%;
}

nav a, footer a {
  border-radius: var(--space-sm);
  color: var(--light-text);
  font-size: 1.5rem;
  height: var(--space-lg);
  padding: var(--space-xs);
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

nav a:hover, footer a:hover {
  background-color: var(--blue-light);
}

section, article {
	background-color: var(--light-background);
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--layout-max-width);
  padding-inline: var(--layout-side-padding);
  padding-block: var(--section-spacing);
  width: 100%;
}

article {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  gap: 1.5rem;
}

article div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--background-dark);
  padding: 1rem;
}

article p {
  margin: 0;
  font-size: 2rem;
}

#clear-all {
  flex-shrink: 0;
  height: 2.5rem;
}

#content {
	background-color: var(--light-background);
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  gap: var(--space-md); /* space between the two divs */
  justify-content: space-around;
  margin-inline: auto;
  max-width: var(--layout-max-width);
  padding-inline: var(--layout-side-padding);
  padding-block: var(--section-spacing);
  width: 100%;
}

#mobile-nav, #mobile-nav-show {
  display: none;
}

#mobile-nav-show {
  color: var(--blue);
}

#mobile-nav {
  margin-block: 0;
  padding: 0 2rem;
  position: absolute;
  z-index: 10001;
  background-color: var(--blue);
  width: 100%;
}

#mobile-nav button {
  height: var(--min-mobile-size);
  width: var(--min-mobile-size);
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

#mobile-nav ul {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 0;
  width: 100%;
}

#mobile-nav li {
  border: 1px solid var(--light-text);
  cursor: pointer;
  list-style-type: none;
  margin-inline: 2rem;
  width: 80%;
  height: var(--min-mobile-size);
  font-size: 2rem;
  text-align: center;
}

#mobile-nav a {
  color: var(--light-text);
  text-decoration: none;
}

#nav-links {
  display: flex;
  flex-grow: 1;
  gap: var(--space-md);
  min-width: 0; /* allows content to shrink when needed */
}

#transcend {
  display: flex;
  gap: 1rem;
}

#transcend img {
  height: 2.75rem;
  display: block;
}

#widgets {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-md);
	justify-content: space-around;
}

.attribution {
  padding-block: 0;
  text-align: right;
}

.blinking {animation: blinking 2s linear infinite;}
@keyframes blinking {50% {fill: #cc3333;}}

.button {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--space-sm);
	color: var(--light-text);
	cursor: pointer;
	display: flex;
	font-size: 1rem;
	font-weight: bold;
	justify-content: center;
	padding: var(--space-sm);
	transition: background-color 0.2s;
}

.button.blue {
	background-color: var(--blue);
	border-color: var(--blue-dark);
	color: var(--light-text);
}

.button.blue:hover {
	background-color: var(--blue-dark);
}

.button.clear {
	background: transparent;
	border: none;
}

.button.clear:hover {
	background-color: var(--background-dark);
}

.button.clear svg {
	fill: var(--blue) !important;
}

.button.green {
	background-color: var(--green);
	border-color: var(--green-dark);
}

.button.green:hover {
	background-color: var(--green-dark);
}

.button.red {
	background-color: var(--red);
	border-color: var(--red-dark);
}

.button.red:hover {
	background-color: var(--red-dark);
}

.button.red-dark {
	background-color: var(--red-darker);
	border-color: var(--red-darkest);
}

.button.red-dark:hover {
	background-color: var(--red-darkest);
}

.button.red-dark-outline {
	background-color: var(--light-text);
	border: 1px solid var(--red-darker);
	color: var(--red-darker);
}

button.red-dark-outline:hover {
	background-color: var(--red-darker);
	color: var(--light-text);
}

.button:disabled {
  background-color: var(--background-dark);
  border-color: var(--background-dark);
}

.button.wide {
	width: 100%;
}

.dialog-box {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.dialog-box button {
  padding: 0.5rem 1rem;
}

.dialog-box button:first-child {
  margin-right: 1rem;
}

.dialog-box div {
  background: white;
  border-radius: 8px;
  max-width: 400px;
  padding: 2rem;
  text-align: center;
}

.resource-image {
	margin: 1rem 0;
}

.widget {
	border: 2px solid var(--blue);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-height: 350px;
  overflow: hidden;
  padding: var(--space-sm);
  width: 30%;
}

.hidden {
	display: none !important;
}

.upsidedown {
	transform: rotate(180deg);
}

.widget-icon {
  height: 1.5rem;
  width: 1.5rem;
}

@media (max-width: 820px) {
  nav {
    justify-content: unset;
  }

  #mobile-nav, #mobile-nav-show {
    display: unset;
  }

  #nav-links {
    display: none !important;
  }

  #widgets {
    flex-direction: column;
    align-items: center;
  }

  .button {
    font-size: 1.125rem; /* larger text */
    height: var(--min-mobile-size) !important; 
    padding: var(--space-sm) var(--space-md); /* more padding for fingers */
  }

  .button.wide {
    width: 100%; /* especially for buttons like "submit" or "next" */
  }

  .widget {
    width: 100%;
    flex-shrink: 1;
    max-height: unset;
    min-width: var(--mobile-layout-max-width);
    padding: var(--space-md); /* slightly larger padding for touch */
  }

  .widget-icon {
  	height: 3rem;
  	width: 3rem;
  }
}