/*
Theme Name: Fan Chen Studios
Theme URI: https://fanchenstudios.com
Author: Fan Chen Studios
Description: Custom block theme for Fan Chen Studios (梵晨) — interior design and build, Singapore. Atmospheres made tangible.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fanchen-studios
*/

/* Small helpers the block editor can't express on its own. Colours and fonts live in theme.json. */

html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { -webkit-font-smoothing: antialiased; }

.fcs-eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
.fcs-hanzi { font-family: var(--wp--preset--font-family--brand-hanzi); letter-spacing: 0.04em; line-height: 1; }
.fcs-hanzi-big { font-size: 150px; }

/* Remove the gap WordPress adds between header, main and footer */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Accessible hidden text (used by social icons and menus) */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background: #fff; clip: auto !important; clip-path: none; height: auto; left: 5px; padding: 12px 20px; top: 5px; width: auto; z-index: 100000; color: #23271F; }

/* Links in header title and footer read as plain text until hovered */
.fcs-header .wp-block-site-title a, .fcs-footer a { text-decoration: none; }
.fcs-footer a:hover { text-decoration: underline; }

/* Header */
.fcs-header .wp-block-navigation a { text-decoration: none; }
.fcs-header .wp-block-navigation .fcs-nav-cta a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
  border-radius: 999px; background: var(--wp--preset--color--forest); color: var(--wp--preset--color--mist) !important; font-weight: 600;
}
.fcs-logo img { width: 58px; height: 48px; object-fit: contain; }
.fcs-footer .fcs-logo img { filter: invert(1) brightness(0.95); }

/* Mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open { padding: 24px 20px !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--bodoni-moda); font-size: 30px; line-height: 1.25;
}
.wp-block-navigation__responsive-container.is-menu-open .fcs-nav-cta a {
  font-family: var(--wp--preset--font-family--work-sans); font-size: 16px; background: var(--wp--preset--color--mist) !important; color: var(--wp--preset--color--forest-deep) !important; margin-top: 12px;
}

/* Images with a set shape fill their column */
.wp-block-image img[style*="aspect-ratio"] { width: 100%; }

/* Numbered mini steps keep their number on one line */
.fcs-mini-step > p:first-child { flex-shrink: 0; min-width: 2.2em; }

/* Cards and panels */
.fcs-card { overflow: hidden; }
.fcs-card > .wp-block-image, .fcs-card > figure { margin: 0 !important; }
.fcs-card img, .fcs-cover-img img { width: 100%; object-fit: cover; }
.fcs-list-ruled { list-style: none; padding-left: 0 !important; }
.fcs-list-ruled li { border-top: 1px solid var(--wp--preset--color--line); padding-top: 8px; }

/* Numbered process */
.fcs-step-num { font-family: var(--wp--preset--font-family--bodoni-moda); line-height: 1 !important; }
.fcs-process .fcs-step { border-top: 1px solid #4A5046; }

/* Process in two panels: stages 1–3 and 4–6 */
.fcs-process .fcs-panel { border: 1px solid #4A5046; border-radius: 14px; background: rgba(244, 246, 241, 0.035); padding: 34px 38px 8px; }
.fcs-process .fcs-panel-head { border-bottom: 1px solid #4A5046; }
.fcs-process .fcs-panel-head h3 { margin: 0; }
.fcs-process .fcs-pstep + .fcs-pstep { border-top: 1px solid #4A5046; }
.fcs-process .fcs-panel > * { margin-block-start: 0 !important; }
.fcs-process .fcs-pstep .fcs-step-num { min-width: 2.4ch; margin: 0; }
.fcs-process .fcs-pstep h3, .fcs-process .fcs-pstep p { margin: 0; }

/* Portfolio filter tabs */
.fcs-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.fcs-filters a { display: inline-block; padding: 8px 18px; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; text-decoration: none; color: var(--wp--preset--color--ink); font-size: 14px; }
.fcs-filters a:hover { border-color: var(--wp--preset--color--ink); }
.fcs-filters a.is-active { background: var(--wp--preset--color--forest); border-color: var(--wp--preset--color--forest); color: var(--wp--preset--color--mist); }
.fcs-portfolio-filters { display: flex; flex-direction: column; gap: 12px; }
.fcs-filters-sub a { padding: 6px 14px; font-size: 13px; }
.fcs-filters-sub a.is-active { background: transparent; color: var(--wp--preset--color--forest); border-color: var(--wp--preset--color--forest); }
.fcs-style-filter { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.fcs-style-filter label { color: var(--wp--preset--color--muted); }
.fcs-style-filter select { font: inherit; padding: 8px 34px 8px 14px; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; background: transparent; color: var(--wp--preset--color--ink); }

/* Photo viewer (project pages) */
.fcs-lb-thumb { cursor: zoom-in; }
.fcs-lb-thumb:focus-visible { outline: 2px solid var(--wp--preset--color--forest); outline-offset: 3px; }
html.fcs-lb-open { overflow: hidden; }
.fcs-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(20, 23, 19, 0.98); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); }
.fcs-lb[hidden] { display: none; }
.fcs-lb-fig { grid-column: 2; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100vh; }
.fcs-lb-fig img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; }
.fcs-lb-fig figcaption { color: #D8DBD2; font-size: 14px; text-align: center; }
.fcs-lb button { background: none; border: 0; color: #F4F6F1; cursor: pointer; font-size: 44px; line-height: 1; padding: 12px; }
.fcs-lb button:focus-visible { outline: 2px solid #D2B070; outline-offset: 2px; }
.fcs-lb-close { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 14px; font-size: 36px !important; }
.fcs-lb-prev { grid-column: 1; }
.fcs-lb-next { grid-column: 3; }
.fcs-lb.is-single .fcs-lb-prev, .fcs-lb.is-single .fcs-lb-next { visibility: hidden; }
.fcs-lb-count { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; color: #B7BAB0; font-size: 13px; letter-spacing: 0.1em; }
@media (max-width: 600px) { .fcs-lb { grid-template-columns: 0 1fr 0; } .fcs-lb-prev, .fcs-lb-next { position: absolute; bottom: 4px; } .fcs-lb-prev { left: 12px; } .fcs-lb-next { right: 12px; } }

.fcs-card-tag { letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px !important; font-weight: 600; }
.fcs-card-tag a { color: inherit; text-decoration: none; }

/* Project cards (query loop) */
.fcs-projects .wp-block-post-featured-image img { border-radius: 4px; transition: transform .4s ease; }
.fcs-projects .wp-block-post-featured-image { overflow: hidden; border-radius: 4px; }
.fcs-projects .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.02); }
.fcs-projects .wp-block-post-title a { text-decoration: none; }

/* Placeholder boxes (press logos, floor plan) */
.fcs-placeholder { border: 1px dashed #B9BBB0; border-radius: 4px; display: flex; align-items: center; justify-content: center; }

/* Swatches */
.fcs-swatch { height: 120px; border-radius: 3px; border: 1px solid var(--wp--preset--color--line); }

/* Payment milestone boxes */
.fcs-milestone { border: 1px solid var(--wp--preset--color--line); border-radius: 4px; }

/* ----- Enquiry form ----- */
.fcs-form { display: grid; gap: 18px; }
.fcs-form .fcs-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fcs-form .fcs-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fcs-form label { display: grid; gap: 6px; font-size: 13.5px; color: var(--wp--preset--color--muted); }
.fcs-form input[type=text], .fcs-form input[type=email], .fcs-form input[type=tel], .fcs-form select, .fcs-form textarea {
  font: inherit; font-size: 16px; color: var(--wp--preset--color--ink); background: #FFFFFF;
  border: 1px solid #C9CBBF; border-radius: 4px; padding: 12px 14px; width: 100%; box-sizing: border-box;
}
.fcs-form textarea { min-height: 120px; resize: vertical; }
.fcs-form input:focus-visible, .fcs-form select:focus-visible, .fcs-form textarea:focus-visible, .fcs-form button:focus-visible {
  outline: 2px solid var(--wp--preset--color--forest); outline-offset: 2px;
}
.fcs-form fieldset { border: 0; margin: 0; padding: 0; }
.fcs-form legend { font-size: 13.5px; color: var(--wp--preset--color--muted); padding: 0; margin-bottom: 8px; }
.fcs-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.fcs-pills label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid #C9CBBF; border-radius: 999px; color: var(--wp--preset--color--ink); font-size: 14.5px; cursor: pointer; }
.fcs-pills label:has(input:checked) { background: var(--wp--preset--color--forest); border-color: var(--wp--preset--color--forest); color: var(--wp--preset--color--mist); }
.fcs-pills input { accent-color: var(--wp--preset--color--forest); margin: 0; }
.fcs-upload { border: 1px dashed #B9BBB0; border-radius: 4px; padding: 16px 18px; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fcs-upload strong { color: var(--wp--preset--color--ink); display: block; }
.fcs-consent { display: flex !important; align-items: flex-start; gap: 10px; }
.fcs-consent input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--wp--preset--color--forest); }
.fcs-form .fcs-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.fcs-form button[type=submit] { font: inherit; font-weight: 600; min-height: 54px; padding: 0 34px; border: 0; border-radius: 999px; background: var(--wp--preset--color--forest); color: var(--wp--preset--color--mist); cursor: pointer; }
.fcs-form button[type=submit]:hover { background: var(--wp--preset--color--forest-deep); }
.fcs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.fcs-notice { padding: 16px 18px; border-radius: 4px; font-size: 15px; }
.fcs-notice.is-success { background: #E2EDE7; color: #1F3F35; border: 1px solid #9DC0AF; }
.fcs-notice.is-error { background: #F6E4DF; color: #7A2E1D; border: 1px solid #E0A999; }
.fcs-form .fcs-help { font-size: 13.5px; color: var(--wp--preset--color--muted); }

/* ----- Responsive ----- */
@media (max-width: 781px) {
  /* Grids stack on phones (older WordPress versions keep a fixed column count) */
  .wp-block-group.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .wp-block-group.is-layout-grid.fcs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wp-block-group.is-layout-grid.fcs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .fcs-form .fcs-row, .fcs-form .fcs-row-3 { grid-template-columns: 1fr; }
  .fcs-hero-title { font-size: 48px !important; }
  .fcs-hanzi-big { font-size: 104px !important; }
  .fcs-hero-media { margin-left: 0 !important; }
  .fcs-hide-mobile { display: none !important; }
  .fcs-process .fcs-step { border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .fcs-process .fcs-panel { padding: 24px 22px 6px; }
  .fcs-process .fcs-pstep { gap: 16px !important; }
  .fcs-facts > .wp-block-group { border-left: 0 !important; padding-left: 0 !important; }
  .fcs-press { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fcs-projects .wp-block-post-featured-image img { transition: none; }
}