/*
Theme Name: Portfolio
Theme URI: https://guadalupecruz.com
Author: Guadalupe Cruz
Author URI: https://guadalupecruz.com
Description: A custom theme for my portfolio site
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: portfolio
*/

:root {
  /* Color Variables */
  --text-100: #f0f2ed;
  --text-200: #3d5246;
  --text-300: #7e906a;
  --bg-100: #10120d;

  /* Font Variables */
  --font-primary: "Montserrat", "Poppins", "Open Sans", sans-serif;
  --font-secondary: "Satoshi", sans-serif;
  --font-backup: system-ui;

  /* Font Sizing */
  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

  /* Section Padding */
  --section-pad: clamp(4rem, 6vw, 8rem);
  --section-pad-lg: clamp(6rem, 9vw, 12rem);
}

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  line-height: 2vw;
  text-align: left;
  color: var(--text-100);
  background-color: var(--bg-100);
  font-family: var(--font-primary), var(--font-secondary), var(--font-backup);
  font-size: var(--fs-400);
  text-transform: uppercase;
}

p {
  line-height: 2.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
  font-weight: 100;
}

.App-main img {
  max-width: 100%;
}

.App-main * {
  box-sizing: border-box;
}

.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 1400px;
  --breakout-max-width: 1800px;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid !important;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;
  /* Taken out because it would not allow flexbox */
  /* display: grid; */
  /* Taken out because woud only apply to bg */
  /* grid-template-columns: inherit; */
}

.global-container {
  padding: 48px 0;
}

/* Section wrapper */
.section {
  padding-block: var(--section-pad);
  scroll-margin-top: var(--anchor-offset);
  background: var(--bg-100);
  color: var(--text-100);
}

/* Section feels “hero-sized” without 100svh */
.section--large {
  padding-block: var(--section-pad-lg);
}

.hollow-btn {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--text-100);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-300);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
    transform 0.25s ease;
}

.hollow-btn:hover {
  background: var(--text-100);
  color: var(--bg-100);
  border-color: var(--text-100);
  transform: translateY(-1px);
}