/* ============================================================
   CHILDHOOD — WEBSITE BUILDER
   website-builder.css

   Phase 1
   - Builder shell
   - V1.47 public-site styling
   - No carousels
   - Edit / Preview modes
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  background: #000;
}

body {
  background: #000;
  color: #fff;
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

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

img,
video {
  display: block;
}

[hidden] {
  display: none !important;
}


/* ============================================================
   VARIABLES
   ============================================================ */

:root {
  --builder-height: 42px;

  --site-bg: #000;
  --site-fg: #fff;
  --site-muted: #929292;

  --pad: 22px;
  --gap: 14px;

  --content-width: min(78vw, 1100px);

  --builder-border: #292929;
  --builder-muted: #777;
  --builder-hover: #171717;
}


/* ============================================================
   BUILDER ROOT
   ============================================================ */

#websiteBuilder {
  width: 100%;
  min-height: 100vh;
  background: var(--site-bg);
}


/* ============================================================
   BUILDER TOOLBAR
   ============================================================ */

.builder-toolbar {
  position: sticky;
  top: 0;
  z-index: 10000;

  width: 100%;
  min-height: var(--builder-height);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 0 14px;

  background: #0b0b0b;
  border-bottom: 1px solid var(--builder-border);

  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
}

.builder-toolbar-left,
.builder-toolbar-right,
.builder-mode-switch {
  display: flex;
  align-items: center;
}

.builder-toolbar-left {
  gap: 14px;
  min-width: 0;
}

.builder-toolbar-right {
  gap: 8px;
}

.builder-mode-switch {
  gap: 2px;
  margin-right: 8px;
}

.builder-title {
  white-space: nowrap;
}

.builder-status {
  position: relative;

  padding-left: 10px;

  color: var(--builder-muted);
  white-space: nowrap;
}

.builder-status::before {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;

  width: 4px;
  height: 4px;

  border-radius: 50%;
  background: currentColor;

  transform: translateY(-50%);
}

.builder-status.is-saved {
  color: #777;
}

.builder-status.is-unsaved {
  color: #fff;
}

.builder-status.is-saving {
  color: #aaa;
}

.builder-status.is-error {
  color: #fff;
}


/* ============================================================
   BUILDER BUTTONS
   ============================================================ */

.builder-button {
  appearance: none;

  min-height: 25px;

  padding: 0 9px;

  border: 1px solid #303030;
  border-radius: 0;

  background: transparent;
  color: #aaa;

  font-size: 9px;
  line-height: 23px;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    color 120ms ease,
    background 120ms ease,
    border-color 120ms ease;
}

.builder-button:hover {
  color: #fff;
  background: var(--builder-hover);
  border-color: #555;
}

.builder-button.is-active {
  color: #fff;
  border-color: #666;
}

.builder-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.builder-button:disabled:hover {
  background: transparent;
  border-color: #303030;
}

.builder-save,
.builder-publish {
  color: #fff;
}


/* ============================================================
   WEBSITE SURFACE
   ============================================================ */

.site-surface {
  position: relative;

  width: 100%;
  min-height: calc(100vh - var(--builder-height));

  overflow: hidden;

  background: var(--site-bg);
  color: var(--site-fg);
}


/* ============================================================
   LOADING / EMPTY / ERROR STATES
   ============================================================ */

.builder-message {
  width: 100%;
  min-height: 50vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;

  color: #777;

  font-size: 9px;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
}

.builder-message-error {
  color: #aaa;
}


/* ============================================================
   PUBLIC SITE SHELL — V1.47
   ============================================================ */

.childhood-site {
  position: relative;

  width: 100%;
  min-height: calc(100vh - var(--builder-height));

  background: var(--site-bg);
  color: var(--site-fg);
}


/* ============================================================
   PUBLIC HEADER
   ============================================================ */

.site-header {
  position: relative;
  z-index: 100;

  width: 100%;
  min-height: 58px;

  padding: var(--pad);
}

.site-logo {
  position: fixed;
  z-index: 102;

  top: var(--pad);
  left: var(--pad);

  display: block;

  width: 116px;
  max-width: 22vw;
}

.site-logo img {
  width: 100%;
  height: auto;
}

.site-nav {
  --nav-pad-x: 14px;

  position: fixed;
  z-index: 101;

  top: 14px;
  left: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  padding: 8px var(--nav-pad-x);

  background: #000;

  transform: translateX(-50%);

  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;

  white-space: nowrap;
}

.site-nav button,
.site-nav a {
  position: relative;

  appearance: none;
  padding: 0;
  border: 0;

  background: transparent;
  color: #fff;

  font: inherit;
  text-transform: inherit;

  cursor: pointer;
}

.site-nav button::after,
.site-nav a::after {
  content: "";

  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;

  height: 1px;

  background: currentColor;

  transition: right 160ms ease;
}

@media (hover: hover) {
  .site-nav button:hover::after,
  .site-nav a:hover::after {
    right: 0;
  }
}


/* ============================================================
   EDITORS DROPDOWN
   ============================================================ */

.editors-menu {
  position: relative;
}

.editors-dropdown {
  position: absolute;

  top: calc(100% + 7px);
  left: calc(var(--nav-pad-x) * -1);

  min-width: 170px;

  padding:
    8px
    var(--nav-pad-x)
    10px;

  background: #000;

  text-align: left;
}

.editors-dropdown[hidden] {
  display: none;
}

.editors-dropdown button {
  display: block;

  width: 100%;

  padding: 4px 0;

  text-align: left;

  white-space: nowrap;
}

.editors-dropdown button::after {
  bottom: 1px;
}


/* ============================================================
   SITE PAGES
   ============================================================ */

.site-page {
  display: none;

  width: 100%;

  padding:
    42px
    0
    80px;
}

.site-page.is-active {
  display: block;
}

.page-title {
  width: var(--content-width);
  max-width: 100%;

  margin:
    0
    auto
    24px;

  padding: 0;

  font-size: 10px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
}

.editor-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}


/* ============================================================
   PROJECT SECTIONS
   ============================================================ */

.section-label {
  width: var(--content-width);
  max-width: 100%;

  margin:
    24px
    auto
    7px;

  padding: 0;

  border: 0;

  font-size: 9px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
}

/*
   With the carousels removed, the first section needs a little
   separation from the editor title.
*/

.editor-sections > .website-section:first-child .section-label {
  margin-top: 6px;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-toggle {
  appearance: none;

  display: flex;
  align-items: center;
  gap: 5px;

  width: max-content;

  padding: 0;
  border: 0;

  background: transparent;
  color: var(--site-fg);

  font-size: inherit;
  line-height: inherit;
  text-transform: uppercase;

  cursor: pointer;
}

.section-toggle .chev {
  display: inline-block;

  transform: rotate(90deg);

  transition: transform 180ms ease;
}

.section-toggle[aria-expanded="false"] .chev {
  transform: rotate(0deg);
}

.collapsible-grid[hidden] {
  display: none !important;
}


/* ============================================================
   PROJECT GRID
   ============================================================ */

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  column-gap: var(--gap);
  row-gap: 4px;

  width: var(--content-width);
  max-width: 100%;

  margin: 0 auto;
}

.project {
  position: relative;

  min-width: 0;

  cursor: pointer;
}

.thumb {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #191919;
}

.thumb img,
.thumb video {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 350ms ease,
    opacity 250ms ease;
}

.project-meta {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  min-width: 0;

  padding: 2px 0 0;

  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}

.project-client {
  flex: 1 1 auto;

  min-width: 0;

  overflow: hidden;

  white-space: nowrap;

  text-align: left;
}

.project-client.is-clipped {
  -webkit-mask-image:
    linear-gradient(
      to right,
      #000 0%,
      #000 84%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to right,
      #000 0%,
      #000 84%,
      transparent 100%
    );
}

.project-name {
  flex: 0 0 auto;

  white-space: nowrap;

  text-align: right;
}


/* ============================================================
   PUBLIC PROJECT HOVER
   ============================================================ */

@media (hover: hover) {

  .project:hover .thumb img,
  .project:hover .thumb video {
    transform: scale(1.015);
  }

}


/* ============================================================
   MUSIC VIDEOS
   ============================================================ */

.music-grid {
  margin-top: 22px;
}


/* ============================================================
   CONTACT
   ============================================================ */

.contact-page {
  min-height: 72vh;

  display: none;

  padding:
    52px
    0
    34px;
}

.contact-page.is-active {
  display: block;
}

.contact-info {
  width: max-content;
  max-width: 90vw;

  margin: 0 auto;
}

.contact-row {
  display: grid;
  grid-template-columns: 210px max-content;
  gap: 20px;

  padding: 5px 0;

  text-align: left;
}

.contact-label {
  color: var(--site-muted);

  font-size: 8px;
  text-transform: uppercase;
}

.contact-value {
  font-size: 8px;
}

.contact-value a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
   EDIT MODE CONTROLS
   ============================================================ */

.edit-control {
  appearance: none;

  padding: 0;
  border: 0;

  background: transparent;
  color: #777;

  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;

  cursor: pointer;

  transition: color 120ms ease;
}

.edit-control:hover {
  color: #fff;
}

.edit-controls-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ============================================================
   PROJECT EDIT OVERLAY
   ============================================================ */

.project-edit-controls {
  position: absolute;
  z-index: 10;

  top: 6px;
  right: 6px;

  display: flex;
  gap: 3px;

  opacity: 0;

  transition: opacity 120ms ease;
}

.project:hover .project-edit-controls {
  opacity: 1;
}

.project-edit-button {
  appearance: none;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.35);

  background: rgba(0, 0, 0, 0.8);
  color: #fff;

  font-size: 11px;
  line-height: 1;

  cursor: pointer;
}

.project-edit-button:hover {
  background: #000;
  border-color: #fff;
}


/* ============================================================
   ADD PROJECT / ADD SECTION
   ============================================================ */

.add-project-row,
.add-section-row {
  width: var(--content-width);
  max-width: 100%;

  margin-left: auto;
  margin-right: auto;
}

.add-project-row {
  padding-top: 9px;
}

.add-section-row {
  padding-top: 28px;
}

.add-project-button,
.add-section-button {
  appearance: none;

  padding: 0;
  border: 0;

  background: transparent;
  color: #777;

  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;

  cursor: pointer;

  transition: color 120ms ease;
}

.add-project-button:hover,
.add-section-button:hover {
  color: #fff;
}


/* ============================================================
   EDITOR CONTROLS
   ============================================================ */

.editor-page-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ============================================================
   EDIT MODE / PREVIEW MODE
   ============================================================ */

body.is-preview .builder-toolbar {
  display: none;
}

body.is-preview .site-surface {
  min-height: 100vh;
}

body.is-preview .childhood-site {
  min-height: 100vh;
}

/*
   Anything marked builder-only disappears completely
   in Preview.
*/

body.is-preview .builder-only {
  display: none !important;
}


/* ============================================================
   PREVIEW EXIT
   ============================================================ */

.preview-exit {
  position: fixed;
  z-index: 20000;

  top: 12px;
  right: 12px;

  appearance: none;

  padding: 8px 10px;

  border: 1px solid #444;

  background: rgba(0, 0, 0, 0.88);
  color: #fff;

  font-family: inherit;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;

  cursor: pointer;
}

.preview-exit:hover {
  border-color: #888;
}


/* ============================================================
   MODAL
   ============================================================ */

.builder-modal-backdrop {
  position: fixed;
  z-index: 30000;

  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(0, 0, 0, 0.78);
}

.builder-modal {
  width: min(380px, 100%);

  padding: 22px;

  border: 1px solid #333;

  background: #080808;
  color: #fff;

  font-size: 10px;
}

.builder-modal-title {
  margin-bottom: 16px;

  font-size: 11px;
  text-transform: uppercase;
}

.builder-modal-copy {
  color: #aaa;

  font-size: 9px;
  line-height: 1.6;
}

.builder-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;

  margin-top: 22px;
}


/* ============================================================
   NOTICE
   ============================================================ */

.builder-notice {
  position: fixed;
  z-index: 40000;

  right: 14px;
  bottom: 14px;

  max-width: 340px;

  padding: 10px 12px;

  border: 1px solid #333;

  background: #090909;
  color: #fff;

  font-size: 9px;
  line-height: 1.4;
  text-transform: uppercase;
}


/* ============================================================
   EMPTY SECTION
   ============================================================ */

.empty-section {
  width: var(--content-width);
  max-width: 100%;

  margin: 0 auto;

  padding: 18px 0;

  color: #555;

  font-size: 9px;
  line-height: 1.3;
  text-transform: uppercase;
}


/* ============================================================
   DRAGGING — FOUNDATION FOR NEXT PHASE

   No drag/drop behavior is enabled yet.
   These classes are here so JS can use them later without
   restructuring the stylesheet.
   ============================================================ */

.project.is-dragging {
  opacity: 0.35;
}

.project-grid.is-drag-target {
  outline: 1px dashed #555;
  outline-offset: 5px;
}

.website-section.is-dragging {
  opacity: 0.45;
}


/* ============================================================
   RESPONSIVE — V1.47
   ============================================================ */

@media (max-width: 800px) {

  :root {
    --pad: 14px;
    --gap: 8px;
    --content-width: 90vw;
  }

  .builder-toolbar {
    align-items: flex-start;
    flex-direction: column;

    gap: 7px;

    padding:
      9px
      10px;
  }

  .builder-toolbar-left,
  .builder-toolbar-right {
    width: 100%;
  }

  .builder-toolbar-right {
    flex-wrap: wrap;
  }

  .builder-mode-switch {
    margin-right: auto;
  }

  .site-header {
    min-height: 48px;
  }

  .site-logo {
    width: 95px;
  }

  .site-nav {
    --nav-pad-x: 11px;

    top: 6px;

    gap: 6px 11px;

    padding:
      7px
      var(--nav-pad-x);

    font-size: 9px;
  }

  .project-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .contact-row {
    grid-template-columns:
      180px
      max-content;
  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

  .site-logo {
    max-width: 26vw;
  }

  .site-nav {
    max-width: calc(100vw - 20px);

    flex-wrap: wrap;

    row-gap: 8px;

    white-space: normal;
  }

  .site-page {
    padding-top: 55px;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .editor-title-row {
    align-items: flex-start;
  }

  .contact-info {
    width: 90vw;
  }

  .contact-row {
    grid-template-columns: 1fr;

    gap: 3px;

    padding: 7px 0;
  }

}

/* ============================================================
   BUILDER TOOLBAR OFFSET
   Keep the V1.47 website header below the builder toolbar
   while editing.
   ============================================================ */

body:not(.is-preview) .site-logo {
  top: calc(var(--builder-height) + var(--pad));
}

body:not(.is-preview) .site-nav {
  top: calc(var(--builder-height) + 14px);
}


/* Preview returns to exact public-site positioning */

body.is-preview .site-logo {
  top: var(--pad);
}

body.is-preview .site-nav {
  top: 14px;
}


/* ============================================================
   WEBSITE BUILDER UI COLOR
   Anything builder-only = orange.
   Public website UI remains white.
   ============================================================ */

:root {
  --builder-orange: #ff6a00;
}


/* Builder toolbar */

.builder-toolbar {
  color: var(--builder-orange);
  border-bottom-color: var(--builder-orange);
}

.builder-title,
.builder-status,
.builder-status.is-saved,
.builder-status.is-unsaved,
.builder-status.is-saving,
.builder-status.is-error {
  color: var(--builder-orange);
}


/* Builder buttons */

.builder-button,
.builder-save,
.builder-publish {
  color: var(--builder-orange);
  border-color: var(--builder-orange);
}

.builder-button:hover,
.builder-save:hover,
.builder-publish:hover,
.builder-button.is-active {
  color: #000;
  background: var(--builder-orange);
  border-color: var(--builder-orange);
}


/* Builder-only inline controls */

.edit-control,
.add-project-button,
.add-section-button {
  color: var(--builder-orange);
}

.edit-control:hover,
.add-project-button:hover,
.add-section-button:hover {
  color: var(--builder-orange);
  opacity: 0.7;
}


/* Project editing controls */

.project-edit-button {
  color: var(--builder-orange);
  border-color: var(--builder-orange);
  background: rgba(0, 0, 0, 0.88);
}

.project-edit-button:hover {
  color: #000;
  background: var(--builder-orange);
  border-color: var(--builder-orange);
}


/* Builder notices */

.builder-notice {
  color: var(--builder-orange);
  border-color: var(--builder-orange);
}


/* Builder modals */

.builder-modal {
  border-color: var(--builder-orange);
}

.builder-modal-title {
  color: var(--builder-orange);
}


/* Editor picker */

.editor-picker-option {
  color: var(--builder-orange) !important;
}

.editor-picker-option:hover {
  background: var(--builder-orange) !important;
  color: #000 !important;
}


/* Section editing */

.section-builder-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-name-input {
  width: min(320px, 60vw);

  padding: 3px 5px;

  border: 1px solid var(--builder-orange);
  border-radius: 0;

  outline: none;

  background: #000;
  color: var(--builder-orange);

  font-family: inherit;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
}

.section-name-input:focus {
  border-color: var(--builder-orange);
  box-shadow: none;
}


/* Builder-specific empty messages */

.builder-only.empty-section,
.empty-section.builder-only {
  color: var(--builder-orange);
}


/* Preview must contain zero orange editing UI */

body.is-preview .builder-only {
  display: none !important;
}