/*
Theme Name: Canales DSGN Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: Canales Design
*/

/* ==============================
TYPOGRAPHY
============================== */

@font-face {
  font-family: "Camphor";
  src: url("fonts/camphor_regular.eot");
  src:
    url("fonts/camphor_regular.eot?#iefix") format("embedded-opentype"),
    url("fonts/camphor_regular.woff2") format("woff2"),
    url("fonts/camphor_regular.woff") format("woff"),
    url("ffonts/camphor_regular.ttf") format("truetype"),
    url("fonts/camphor_regular.svg#webfont") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Camphor";
  src: url("fonts/camphor_medium.eot");
  src:
    url("fonts/camphor_medium.eot?#iefix") format("embedded-opentype"),
    url("fonts/camphor_medium.woff2") format("woff2"),
    url("fonts/camphor_medium.woff") format("woff"),
    url("ffonts/camphor_medium.ttf") format("truetype"),
    url("fonts/camphor_medium.svg#webfont") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Camphor";
  src: url("fonts/camphor_bold.eot");
  src:
    url("fonts/camphor_bold.eot?#iefix") format("embedded-opentype"),
    url("fonts/camphor_bold.woff2") format("woff2"),
    url("fonts/camphor_bold.woff") format("woff"),
    url("ffonts/camphor_bold.ttf") format("truetype"),
    url("fonts/camphor_bold.svg#webfont") format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Camphor";
  src: url("fonts/camphor_heavy.eot");
  src:
    url("fonts/camphor_heavy.eot?#iefix") format("embedded-opentype"),
    url("fonts/camphor_heavy.woff2") format("woff2"),
    url("fonts/camphor_heavy.woff") format("woff"),
    url("ffonts/camphor_heavy.ttf") format("truetype"),
    url("fonts/camphor_heavy.svg#webfont") format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-regular.eot");
  src:
    url("fonts/ibmplexmono-regular.eot?#iefix") format("embedded-opentype"),
    url("fonts/ibmplexmono-regular.woff2") format("woff2"),
    url("fonts/ibmplexmono-regular.woff") format("woff"),
    url("fonts/ibmplexmono-regular.ttf") format("truetype"),
    url("fonts/ibmplexmono-regular.svg#ibm_plex_monoregular") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibmplexmono-medium.eot");
  src:
    url("fonts/ibmplexmono-medium.eot?#iefix") format("embedded-opentype"),
    url("fonts/ibmplexmono-medium.woff2") format("woff2"),
    url("fonts/ibmplexmono-medium.woff") format("woff"),
    url("fonts/ibmplexmono-medium.ttf") format("truetype"),
    url("fonts/ibmplexmono-medium.svg#ibm_plex_monomedium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==============================
DESIGN SYSTEM
============================== */

:root {
  --color-primary: #f2f2f2;
  --color-secondary: #323232;
  --color-secondary-light: #808080;
  --color-secondary-lighter: #979797;
  --color-secondary-lightest: #e6e6e6;
  --color-accent: #ff6319;

  --font-primary: "Camphor", system-ui, -apple-system, sans-serif;
  --font-secondary: "IBM Plex Mono", system-ui, -apple-system, mono;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-heavy: 900;

  --font-size-base: 1rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.45rem;
  --font-size-xl: clamp(1.5rem, 5vw, 2rem);
  --font-size-2xl: clamp(2rem, 5vw, 3.5rem);
  --font-size-3xl: clamp(2.5rem, 5vw, 5rem);

  --line-height-base: 1;
  --line-height-tight: 0.8;
  --line-height-loose: 1.2;
  --line-height-xloose: 1.5;

  --color-border-default: var(--color-secondary-lightest);
}

/* ==============================
UNCODE HACKS
============================== */

/* Enable the portfolio shadow in this particular layout */
.homepage .isotope-wrapper.no-gutter {
  overflow: visible !important;
}

/* Removes link from titles of the portfolio elements*/
.homepage .portfolio_section .t-entry-text .t-entry-title {
  pointer-events: none !important;
}

.tooltip_plus {
  width: 90px !important;
  height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.5rem !important;
}

/* ==============================
GENERAL
============================== */

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  font-family: var(--font-primary) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.overline p {
  font-weight: var(--font-weight-heavy) !important;
  font-size: var(--font-size-base) !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
}

a {
  color: var(--color-accent) !important;
}

.logo-container,
.menu-horizontal {
  border-bottom: solid 1px var(--color-border-default);
}

.menu-item a {
  color: var(--color-secondary-lighter) !important;
  transition: all 0.3s ease-in-out !important;
}

.menu-item a:hover {
  color: var(--color-accent) !important;
}

.btn_underline a {
  margin-left: 3rem !important;
  height: auto !important;
  color: var(--color-accent) !important;
  padding-bottom: 1rem !important;
  padding-top: 1rem !important;
  font-weight: var(--font-weight-heavy) !important;
  text-transform: uppercase !important;
}

.btn_underline a:hover {
  opacity: 0.8 !important;
}

.text_block p {
  font-family: var(--font-secondary) !important;
  text-wrap: balance !important;
}

/* ==============================
HOMEPAGE
============================== */

/* ** Hero Section * **/

.hero_section h1 {
  font-size: var(--font-size-3xl) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: var(--line-height-base) !important;
  letter-spacing: -0.05em !important;
}

/* ** Manifesto Section * **/

.manifesto_section h2 {
  font-size: var(--font-size-xl) !important;
  text-transform: uppercase !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-base) !important;
  letter-spacing: -0.05em !important;
}

.manifesto_section .text_block--large p {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: var(--line-height-xloose) !important;
}

/* ** Portfolio Section * **/

.portfolio_section--text-block .t-entry-meta a {
  color: var(--color-primary) !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.portfolio_section .t-entry-title {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.portfolio_section--text-block h2 a {
  color: var(--color-secondary) !important;
  font-size: var(--font-size-2xl) !important;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: -0.05em !important;
}
.portfolio_section--text-block .t-entry-excerpt p {
  color: var(--color-secondary) !important;
  font-size: var(--font-size-md) !important;
  line-height: var(--line-height-xloose) !important;
}

.portfolio_section .t-entry-visual:hover {
  transition: all 0.3s ease-in-out !important;
  opacity: 0.85 !important;
}

.portfolio_section
  .tmb-shadowed-darker-xl.tmb-shadowed.tmb-no-bg.tmb
  > .t-inside
  .t-entry-visual {
  box-shadow: 0px 55px 80px -20px rgba(0, 0, 0, 0.3) !important;
}

/* ** Logos Section * **/

.logos_section h2 {
  font-size: var(--font-size-xl) !important;
  text-transform: uppercase !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-base) !important;
  letter-spacing: -0.03em !important;
}

.logos_section .text_block--large p {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: var(--line-height-xloose) !important;
}

.logos_section .t-overlay-text.single-block-padding {
  padding: 3rem 36px 1.5rem 36px !important;
}

.logos_section
  .tmb-dark.tmb
  .t-entry-visual
  .t-entry-meta
  span:not(.add_to_cart_text):not(.view-cart) {
  color: #9e9c9c !important;
}

/* ** Articles Section ** */

.articles_section h3 {
  font-size: var(--font-size-xl) !important;
  line-height: var(--line-height-base) !important;
  letter-spacing: -0.025em !important;
}

.articles_section h3 a {
  color: var(--color-primary) !important;
}

.articles_section h3 a:hover {
  color: var(--color-accent) !important;
}

.articles_section .t-entry-excerpt {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.articles_section .t-entry-excerpt p {
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-xloose) !important;
}

/* ** About Section * **/

.about_section h2 {
  font-size: var(--font-size-xl) !important;
  text-transform: uppercase !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-base) !important;
}

.about_section .text_block--large p {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-regular) !important;
  line-height: var(--line-height-xloose) !important;
}

/* ==============================
FOOTER SECTION
============================== */

.footer_menu li {
  margin-bottom: 0.25rem !important;
}

.footer_menu a {
  font-size: 18px !important;
  padding-bottom: 0 !important;
  color: var(--color-primary) !important;
  letter-spacing: -0.05em !important;
}

.footer_menu a:hover {
  color: var(--color-secondary) !important;
}

.footer_contact span,
.footer_contact a,
.footer_social i {
  color: var(--color-primary) !important;
  transition: all 0.3s ease-in-out !important;
}

.footer_social i:hover,
.footer_social .skin-links a:hover {
  color: var(--color-secondary) !important;
  opacity: 1 !important;
}