/*
Theme Name:   Angelina Coscuna
Theme URI:    https://angelinacoscuna.com
Description:  Bespoke portfolio theme for Angelina Coscuna, commercial fashion stylist. Designed and built by Lockwood.
Author:       Lockwood
Author URI:   https://ryanlockwood.is
Version:      1.0.0
Text Domain:  coscuna
*/

/* ===========================
   RESET & BASE
   =========================== */
@font-face {
    font-family: 'HIPO';
    src: url('/wp-content/uploads/fonts/HIPO.woff2') format('woff2'),
        url('/wp-content/uploads/fonts/HIPO.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Enable OpenType ligatures only on name/logo elements */
.site-logo,
.logo-line-1,
.logo-line-2,
.the-title,
.the-title-second,
.page-template-about .the-title {
    font-feature-settings: "liga" 1, "dlig" 1;
    -webkit-font-feature-settings: "liga" 1, "dlig" 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures;
}

/* Disable ligatures on UI elements */
.home-filter button,
.overlay-title,
.overlay-meta {
    font-feature-settings: "liga" 0, "dlig" 0;
    -webkit-font-feature-settings: "liga" 0, "dlig" 0;
    font-variant-ligatures: no-common-ligatures no-discretionary-ligatures;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hanken Grotesk', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

main#primary.site-main,
.site-main,
.page-content,
.entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ===========================
   PER-PAGE COLOR SCHEME
   Drives header logo, menu icon, corner labels, and footer so the floating
   chrome always matches the page it's on. Override per template by setting
   these three vars (see home.php / about.php / page-personal-styling.php).
   =========================== */
body {
  --pg-bg: #ffffff;   /* page background the chrome sits on */
  --pg-ink: #0000FF;  /* primary chrome color (logo, icon, labels, footer text) */
  --pg-accent: #FF31FF; /* hover / emphasis */
}
/* home / about / personal-styling color now comes from the per-page Color
   Scheme field (seeded to blue / pink / blue). See ac_schemes(). */

/* ===========================
   HEADER
   =========================== */
header#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  max-width: none !important;
  z-index: 100;
  padding: 28px 36px !important;
  background: transparent;
  transition: background 0.4s ease;
}

.admin-bar header#site-header {
  top: 32px;
}

header#site-header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: none !important;
  width: 100% !important;
}

.site-logo,
.site-logo:visited,
.site-logo:active {
  display: block;
  font-family: 'HIPO', Helvetica, sans-serif;
  font-weight: 400;
  color: var(--pg-ink);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 0.8;
  transition: color 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.site-logo:hover,
.site-logo.is-hovered {
  color: var(--pg-accent) !important;
}

/* Homepage logo: solid white. Confident, lets the work do the talking. */
body.home .site-logo,
body.home .site-logo:visited,
body.home .site-logo:active {
  color: #fff;
}

.logo-line-1,
.logo-line-2 {
  display: block;
  font-size: clamp(48px, 7vw, 110px);
  letter-spacing: 0;
}

.logo-line-2 {
  padding-left: clamp(60px, 8vw, 140px);
}

.site-tagline {
  margin: 18px 0 0 0;
  font-family: 'HIPO', 'Hanken Grotesk', Helvetica, Arial, sans-serif;
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  max-width: clamp(280px, 32vw, 480px);
  line-height: 1.6;
  /* Delayed reveal — name lands first, title arrives a beat later */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 1.4s,
              transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 1.4s;
}
body.home .site-tagline.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.site-tagline .primary,
.site-tagline .secondary { display: block; }
.site-tagline .secondary {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.18em;
  margin-top: 2px;
}
.site-tagline .loc { display: none; }

/* About link — hanger icon */
a.about-link {
  display: block;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

a.about-link:hover,
a.about-link.is-hovered {
  transform: rotate(-15deg) scale(1.08) !important;
}

a.about-link:hover .hanger-icon,
a.about-link.is-hovered .hanger-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(100%) saturate(7482%) hue-rotate(295deg) brightness(101%) contrast(105%) !important;
}

.hanger-icon {
  width: clamp(50px, 5.5vw, 90px);
  height: auto;
  display: block;
  /* Color comes from the SVG's stroke=currentColor, which inherits the page
     scheme ink on .menu-toggle. No invert filter (that forced it white and
     broke scheme matching). No drop shadows on icons/type anywhere, per direction. */
  transition: color 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Back-home link — glasses icon (about page) */
a.back-home-link {
  display: block;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

a.back-home-link:hover,
a.back-home-link.is-hovered {
  transform: rotate(-15deg) scale(1.08) !important;
}

.glasses-icon {
  width: clamp(50px, 5.5vw, 90px);
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

a.back-home-link:hover .glasses-icon,
a.back-home-link.is-hovered .glasses-icon {
  filter: brightness(0) saturate(100%) invert(11%) sepia(100%) saturate(7500%) hue-rotate(244deg) brightness(100%) contrast(152%) !important;
}


/* ===========================
   FOOTER
   =========================== */
footer#site-footer {
  background: transparent;  /* inherits the page's own bg so it always matches */
  padding: 18px 32px 22px;
  max-width: 100%;
  position: relative;
}

/* Above 768px the fixed rotated corner labels (.page-chrome__bl/__br) float
   ~28-45px in from each edge; 32px side padding put Client Login / Instagram
   underneath them at footer scroll depth. Match the content container's
   --pad-x so the footer row clears the labels. */
@media (min-width: 769px) {
  footer#site-footer { padding-left: var(--pad-x); padding-right: var(--pad-x); }
}

.home footer#site-footer {
  display: none;
}

footer#site-footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--pg-ink);
  padding-top: 14px;
}

footer#site-footer .footer-inner a,
footer#site-footer .footer-inner span {
  margin: 0;
  font-family: 'HIPO', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: var(--pg-ink);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: color 0.25s ease;
  white-space: nowrap;
}

footer#site-footer .footer-inner a:hover { color: var(--pg-accent); }
footer#site-footer .footer-tagline { text-align: center; white-space: normal; }

/* Legal fine print — quiet line below the main footer row. */
footer#site-footer .footer-legal {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px;
  margin-top: clamp(18px, 3vh, 32px);
  font-family: 'HIPO', Helvetica, sans-serif;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pg-ink); opacity: 0.5;
}
footer#site-footer .footer-legal a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
footer#site-footer .footer-legal a:hover { color: var(--pg-accent); }
footer#site-footer .footer-legal .sep { opacity: 0.6; }

@media (max-width: 700px) {
  footer#site-footer .footer-inner { flex-direction: column; gap: 10px; text-align: center; }
}

/* ===========================
   PORTFOLIO CHILD / FEATURED CHILD - PROJECT PAGES
   =========================== */
.page-template-portfolio-child main#primary,
.page-template-featured-child main#primary {
  max-width: 1394px !important;
  padding: 340px 15px 40px 15px !important;
}

.the-title, .the-title-second {
  font-family: 'HIPO', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 100px;
  line-height: 1;
  margin-bottom: 0;
}

.the-title-second {
  padding-left: 120px;
}

.new-potfilio-image .the-title {
  line-height: 80px;
}

/* Gallery masonry — fast in, expo settle (matches the .ed-fade language) */
.wp-block-gallery .wp-block-image {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-block-gallery .wp-block-image.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Content blocks */
.wp-block-heading {
  font-family: 'Hanken Grotesk', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 64px;
  line-height: 1.15;
  max-width: 824px;
  color: #000;
}

.inside-content {
  font-family: 'Hanken Grotesk', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.15;
  padding: 40px 0;
  color: #000;
}

.page-template-portfolio-child .inside-content {
  padding: 20px 0 30px 0;
}

.page-template-featured-child .inside-content {
  padding: 20px 0;
}

.page-template-featured-child .the-main-content {
  padding-bottom: 34px;
  padding-top: 20px;
}

.inside-content:empty,
.page-template-portfolio-child figure.wp-block-gallery:empty {
  display: none !important;
}

.page-template-portfolio-child figure.wp-block-gallery.has-nested-images {
  padding-top: 20px;
}

.featured-child {
  padding-top: 40px;
}

/* ===========================
   ABOUT PAGE
   =========================== */
.page-template-about {
  background: #FF31FF;
  color: #0000FF;
}

.page-template-about main#primary {
  max-width: 1354px !important;
  padding: 142px 15px 0 15px !important;
}

.page-template-about .the-title {
  font-family: 'HIPO', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 140px;
  color: #0000FF;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

/* About page — override header hovers (pink-on-pink invisible) */
.page-template-about .site-logo:hover,
.page-template-about .site-logo.is-hovered {
  color: #0000FF !important;
}

.page-template-about a.about-link:hover .hanger-icon,
.page-template-about a.about-link.is-hovered .hanger-icon {
  filter: brightness(0) saturate(100%) invert(11%) sepia(100%) saturate(7500%) hue-rotate(244deg) brightness(100%) contrast(152%) !important;
}

.page-template-about footer#site-footer,
.page-template-portfolio-child footer#site-footer,
.page-template-portfolio footer#site-footer {
  position: static;
}

/* ===========================
   PAGE-SPECIFIC COLORS — now driven by the per-page Color Scheme field
   (see ac_schemes() in functions.php). The old hardcoded per-page-ID rules
   were removed; choose a scheme in the page editor and it stays in sync.
   =========================== */

.page-template-portfolio-child svg rect { fill: #FFAE01; }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1200px) {
  .the-title, .the-title-second {
    font-size: 100px !important;
  }
}

@media (max-width: 1024px) {
  .the-title, .the-title-second {
    font-size: 72px !important;
  }
  .wp-block-heading {
    font-size: 50px !important;
  }
  .inside-content {
    font-size: 26px !important;
    padding: 32px 0;
  }
  .the-main-content {
    padding: 0 30px 81px 30px !important;
  }
  .page-template-about .the-title {
    font-size: 104px;
  }
}

@media (max-width: 767px) {
  .the-title, .the-title-second {
    font-size: 35px !important;
  }
  .the-title-second {
    padding-left: 51px;
  }
  .the-main-content {
    padding: 20px 0 5px 0 !important;
  }
  .wp-block-heading {
    font-size: 29px !important;
    margin: 0;
  }
  .inside-content {
    font-size: 18px !important;
    padding: 29px 0 !important;
  }
  .new-potfilio-image .the-title {
    line-height: 38px;
  }
  .project-hero-media {
    margin: 20px 0;
    margin-top: 50px;
  }
  .page-template-portfolio-child main#primary,
  .page-template-featured-child main#primary {
    padding-top: 140px !important;
  }
  footer#site-footer {
    padding: 15px;
  }
  footer#site-footer .footer-inner p {
    font-size: 11px;
  }

  /* Nav / About responsive */
  .logo-line-1,
  .logo-line-2 {
    font-size: 32px;
  }
  .logo-line-2 {
    padding-left: 40px;
  }
  header#site-header {
    padding: 18px 20px !important;
  }
  .hanger-icon {
    width: 36px;
  }

  /* About responsive */
  .page-template-about .the-title {
    font-size: 43px;
    padding-top: 5px;
  }
  .page-template-about main#primary {
    padding-top: 140px;
  }

  /* Gallery responsive */
  .wp-block-gallery figure.wp-block-image {
    margin-bottom: 16px !important;
  }
  figure.wp-block-gallery {
    column-gap: 15px !important;
  }
}