/*
Theme Name: F SOFT
Theme URI: https://fsoft.biz
Author: F SOFT Development Company Limited
Description: ธีมบล็อกของ บริษัท เอฟ ซอฟต์ ดีเวลลอปเม้นท์ จำกัด — สีและตัวอักษรตั้งตามอัตลักษณ์บริษัท แก้เนื้อหาได้ทั้งหมดผ่าน Block Editor และ Site Editor
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fsoft
Tags: full-site-editing, blocks, business, one-column, block-patterns
*/

/* ------------------------------------------------------------------
   Thai typography
   Thai stacks vowels above and tone marks above those, so the default
   line-height clips diacritics. Everything below is about giving them room.
   ------------------------------------------------------------------ */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Thai has no inter-word spaces, so the browser can only break at
   dictionary boundaries — let it, and don't hyphenate. */
:lang(th),
body {
  line-break: normal;
  hyphens: none;
}

p, li, dd { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */

/* Every section carries its own vertical padding, so the root block gap only
   shows up as a stray white band between <main> and the footer. */
.wp-site-blocks > * + * { margin-block-start: 0; }

.fs-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #E3EDE6;
  background-color: rgba(255, 255, 255, .92);
}

/* The blur lives on a pseudo-element, NOT on .fs-header itself.
   backdrop-filter makes an element a containing block for its
   position:fixed descendants — put it on the header and the mobile
   navigation overlay gets trapped inside the header's box (~96px tall)
   instead of covering the viewport. A pseudo-element has no descendants,
   so the effect is safe here. */
.fs-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: saturate(150%) blur(8px);
}

.fs-header .wp-block-site-logo img {
  height: 52px;
  width: auto;
  display: block;
}

.fs-wordmark { line-height: 1.15; }

.fs-wordmark .fs-wordmark__name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.fs-wordmark .fs-wordmark__sub {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--slate);
  margin: 2px 0 0;
  text-transform: uppercase;
}

/* Navigation */
.fs-header .wp-block-navigation {
  font-size: 1rem;
  font-weight: 500;
}

.fs-header .wp-block-navigation .wp-block-navigation-item__content {
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}

.fs-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.fs-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--green-deep);
  border-bottom-color: var(--wp--preset--color--green);
}

/* On a phone the full wordmark pushes the header onto a second row, which
   costs ~70px of a sticky bar that is already on every screen. */
@media (max-width: 782px) {
  .fs-header .wp-block-site-logo img { height: 42px; }
  .fs-wordmark .fs-wordmark__sub { display: none; }
  .fs-wordmark .fs-wordmark__name { font-size: 1.05rem; }

  /* The manual line break in the hero headline only helps at desktop widths */
  .fs-hero h1 br { display: none; }
}

@media (max-width: 480px) {
  .fs-header .wp-block-button__link {
    padding: .5rem .9rem;
    font-size: .95rem;
  }
}

/* Mobile overlay menu.
   The desktop nav is right-justified and WordPress emits that as a generated
   `wp-container-core-navigation-is-layout-*` utility class, which the overlay
   inherits. !important is the override that survives that generated class
   changing its hash between releases. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #fff;
  font-size: 1.25rem;
  padding: .5rem 0;
  border-bottom: none;
}

/* The desktop "you are here" colour is dark green — invisible on the
   dark-green overlay. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--amber);
  border-bottom: none;
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */

.fs-hero {
  position: relative;
  overflow: hidden;
}

/* Faint isometric grid so the hero isn't a flat slab of green */
.fs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%);
}

.fs-hero > * { position: relative; }

/* Thai glyphs need more size than Latin at the same optical weight, and heavy
   letter-spacing pushes tone marks away from their base character. */
.fs-eyebrow {
  display: inline-block;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
}

.fs-eyebrow--light {
  background: var(--wp--preset--color--mist);
  border-color: #D3E6D8;
  color: var(--wp--preset--color--green-deep);
}

/* ------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------ */

.fs-card {
  background: #fff;
  border: 1px solid #E3EDE6;
  border-radius: 16px;
  padding: clamp(1.4rem, 3vw, 2rem);
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fs-card:hover {
  transform: translateY(-3px);
  border-color: #C6E3CE;
  box-shadow: var(--wp--preset--shadow--lift);
}

.fs-card h3, .fs-card h4 { margin-top: .35rem; }

.fs-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--wp--preset--gradient--green-flow);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .35rem;
}

.fs-card--flat:hover { transform: none; box-shadow: var(--wp--preset--shadow--soft); }

/* Numbered process steps */
.fs-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--wp--preset--color--mist);
  color: var(--wp--preset--color--green-deep);
  font-weight: 700;
  font-size: 1.05rem;
}

/* Stats */
.fs-stat__num {
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wp--preset--color--amber);
  margin: 0;
}
.fs-stat__label { margin: .35rem 0 0; opacity: .85; }

/* Tech chips */
.fs-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.fs-chips li {
  list-style: none;
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 1px solid #DCE7DF;
  background: #fff;
  font-size: .92rem;
  font-weight: 500;
}
.fs-chips.fs-chips--on-dark li {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}

/* ------------------------------------------------------------------
   Dark sections (hero, CTA band, footer)
   ------------------------------------------------------------------ */

.fs-on-dark,
.fs-on-dark h1, .fs-on-dark h2, .fs-on-dark h3,
.fs-on-dark h4, .fs-on-dark h5, .fs-on-dark h6,
.fs-on-dark p, .fs-on-dark li, .fs-on-dark strong {
  color: #fff;
}

.fs-on-dark a:not(.wp-element-button) {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .45);
}
.fs-on-dark a:not(.wp-element-button):hover {
  color: var(--wp--preset--color--amber);
}

.fs-on-dark .fs-muted { color: rgba(255, 255, 255, .78); }

.fs-muted { color: var(--wp--preset--color--slate); }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.fs-linklist {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.fs-linklist li { margin: 0; }

.fs-footer .wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; }

.fs-footer__brand {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 .25rem;
}

.fs-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .9rem;
}

/* ------------------------------------------------------------------
   Post / project cards in query loops
   ------------------------------------------------------------------ */

.fs-entry {
  border: 1px solid #E3EDE6;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fs-entry:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--lift); }
.fs-entry .wp-block-post-featured-image { margin: 0; }
.fs-entry .wp-block-post-featured-image img { border-radius: 0; aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.fs-entry .wp-block-post-title a { text-decoration: none; }

/* Category / project-type label above the card title */
.fs-entry .wp-block-post-terms {
  font-size: .875rem;
  font-weight: 600;
  color: var(--wp--preset--color--green-deep);
}
.fs-entry .wp-block-post-terms a {
  text-decoration: none;
  color: inherit;
}
.fs-entry .wp-block-post-terms a:hover { text-decoration: underline; }
.fs-entry .wp-block-post-title a:hover { color: var(--wp--preset--color--green-deep); }
.fs-entry__body { padding: 1.25rem 1.4rem 1.6rem; }

/* Placeholder strip when a project or post has no featured image */
.fs-entry .wp-block-post-featured-image:empty { display: none; }

/* ------------------------------------------------------------------
   Page header band
   ------------------------------------------------------------------ */

.fs-pagehead {
  border-bottom: 1px solid #E3EDE6;
  background: var(--wp--preset--gradient--mist-fade);
}

/* ------------------------------------------------------------------
   Contact details list
   ------------------------------------------------------------------ */

.fs-contact-list { list-style: none; padding: 0; margin: 0; }
.fs-contact-list li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .75rem 0;
  border-bottom: 1px dashed #DCE7DF;
}
.fs-contact-list li:last-child { border-bottom: none; }
/* Fixed basis, not min-width: the longest label would otherwise push its own
   value out of line with every other row. */
.fs-contact-list .fs-contact-list__label {
  flex: 0 0 118px;
  font-weight: 600;
  color: var(--wp--preset--color--slate);
}

@media (max-width: 520px) {
  .fs-contact-list li { flex-direction: column; gap: .2rem; }
  .fs-contact-list .fs-contact-list__label { flex-basis: auto; }
}
.fs-on-dark .fs-contact-list li { border-bottom-color: rgba(255, 255, 255, .16); }
.fs-on-dark .fs-contact-list .fs-contact-list__label { color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------------
   Contact Form 7 — CF7 ships almost no CSS, so the form inherits whatever
   the theme gives it. This is that.
   ------------------------------------------------------------------ */

.wpcf7 .fs-field { display: block; margin-bottom: 1.1rem; }
.wpcf7 .fs-field > span:first-child {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
}
.wpcf7 .fs-field .fs-req { color: #B3261E; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  border: 1px solid #DCE7DF;
  border-radius: 10px;
  padding: .8rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  background: #fff;
  color: var(--wp--preset--color--ink);
}

.wpcf7 textarea { min-height: 8.5rem; resize: vertical; }

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: 2px solid var(--wp--preset--color--green);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--green);
}

.wpcf7 input[type="submit"] {
  background: var(--wp--preset--color--green);
  color: var(--wp--preset--color--ink);
  border: none;
  border-radius: 10px;
  padding: .85rem 1.9rem;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
  background: var(--wp--preset--color--green-dark);
  color: #fff;
}

.wpcf7 .wpcf7-spinner { margin-left: .75rem; }

.wpcf7 form .wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: .9rem 1.1rem;
  border-radius: 10px;
  border-width: 1px;
  font-size: .95rem;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--wp--preset--color--green);
  background: var(--wp--preset--color--mist);
  color: var(--wp--preset--color--ink);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #E5A50A;
  background: #FFF8E5;
  color: #4A3A00;
}
.wpcf7 .wpcf7-not-valid-tip { color: #B3261E; font-size: .9rem; margin-top: .3rem; }

/* ------------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------------ */

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--green-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.fs-on-dark :where(a, button):focus-visible { outline-color: var(--wp--preset--color--amber); }

.skip-link:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 9999;
  background: #fff;
  color: var(--wp--preset--color--ink);
  padding: .7rem 1.1rem;
  border-radius: 8px;
  box-shadow: var(--wp--preset--shadow--lift);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .fs-card:hover, .fs-entry:hover { transform: none; }
}