/*
Theme Name: Ilagan
Author: dmarkdevin
Description: A quiet, authoritative block theme for Ilagan Reyes Law, a fictional Makati law firm. Limestone pages, deep jade bands, graphite type and one vermilion accent; black-and-white portraits and architecture; large light Source Serif 4 headlines over IBM Plex Sans text, both self-hosted. Practice areas read as a legal index marked with the section sign. Pair with the Ilagan Core plugin for practice areas, lawyer profiles, case notes, legal guides and the consultation form.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ilagan
Tags: full-site-editing, block-patterns, block-styles, one-column, wide-blocks, custom-colors, custom-menu, editor-style, translation-ready
*/

/* Only what theme.json cannot express. Mobile first. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--vermilion); outline-offset: 3px; }
.il-on-jade :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: #f3f2ee; }
.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--jade); color: #fff; }
img { height: auto; }
::selection { background: #cfe0da; color: #0b2e28; }
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }
a { text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* Headings: light serif with display optical sizing at large sizes. */
h1, h2 { font-optical-sizing: auto; }
h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.875rem); }

/* Jade sections: text, headings and links in limestone. */
.il-on-jade { color: #f3f2ee; }
.il-on-jade :is(h1, h2, h3, h4) { color: #f3f2ee; }
.il-on-jade a:not(.wp-element-button) { color: #f3f2ee; }
.il-on-jade .il-intro, .il-on-jade .il-band-lead, .il-on-jade .il-note { color: #bcc9c4; }

/* Header: limestone, sticky, a hairline below. */
.il-header { position: sticky; top: 0; z-index: 50; background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--line); }
.admin-bar .il-header { top: var(--wp-admin--admin-bar--height, 0); }
.il-header > .wp-block-group { padding-inline: var(--wp--style--root--padding-left, 1.25rem); }
.il-header .wp-block-site-logo img { display: block; border-radius: 2px; }
.il-wordmark { gap: 0 !important; }
.il-wordmark .wp-block-site-title { font-size: 1.375rem; line-height: 1.1; }
.il-wordmark__sub { margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .02em; color: var(--wp--preset--color--muted); }
.il-header .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); text-decoration: none; }
.il-header .wp-block-navigation-item__content:hover, .il-header .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; text-underline-offset: .4em; text-decoration-color: var(--wp--preset--color--vermilion); }
.il-header .wp-block-button__link { padding: .8rem 1.3rem; font-size: .875rem; }
.wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--50); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--serif); font-size: 2.25rem; font-weight: 300; }
@media (max-width: 599px) { .il-header .wp-block-site-title { display: none; } }
@media (min-width: 600px) and (max-width: 1100px) {
	.il-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.il-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Hero: split. A regular-weight statement on jade on the left; a black-and-white photo running to
   the edge on the right. */
.wp-block-group.il-hero2 { display: grid; grid-template-columns: 1fr; background: var(--wp--preset--color--jade); color: #f3f2ee; }
@media (min-width: 900px) { .wp-block-group.il-hero2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: min(78vh, 720px); } }
.wp-block-group .il-hero2__text, .il-hero2__text.wp-block-group { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: clamp(3rem, 7vw, 6rem) var(--wp--style--root--padding-left, 1.25rem) clamp(3rem, 7vw, 6rem) max(var(--wp--style--root--padding-left, 1.25rem), calc((100vw - 1280px) / 2)); }
.il-hero2__title { margin: 0; font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4.25rem) !important; font-weight: 400; line-height: 1.06; letter-spacing: -.02em; max-width: 16ch; color: #f3f2ee; }
.il-hero2__lead { margin: 0; max-width: 44ch; font-size: 1.1875rem; color: #d9e2de; }
.wp-block-image.il-hero2__photo { margin: 0; min-height: 320px; }
.wp-block-image.il-hero2__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.il-hero2 .wp-block-buttons { margin-top: .5rem; }
.il-hero2 .wp-block-button__link { padding: 1rem 1.6rem; font-size: 1rem; }

/* Credentials: plain facts on a hairline row under the hero. */
.il-credentials { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--wp--preset--color--line); }
@media (min-width: 900px) { .il-credentials { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.il-credentials li { padding: 1.5rem 1.25rem 1.5rem 0; border-top: 1px solid var(--wp--preset--color--line); }
@media (min-width: 900px) { .il-credentials li { border-top: 0; padding-left: 1.25rem; border-left: 1px solid var(--wp--preset--color--line); } .il-credentials li:first-child { padding-left: 0; border-left: 0; } }
.il-credentials strong { display: block; font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: 1.375rem; line-height: 1.2; color: var(--wp--preset--color--ink); }
.il-credentials span { display: block; margin-top: .25rem; font-size: .875rem; color: var(--wp--preset--color--muted); }

/* Partners band: the founders' portraits beside how the firm works, in their words. */
.il-partners__quote { margin: 0; padding: 0; border: 0; }
.il-partners__quote p { font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.25; letter-spacing: -.015em; color: var(--wp--preset--color--ink); }
.il-partners__quote cite { display: block; margin-top: 1.25rem; font-style: normal; font-size: .9375rem; color: var(--wp--preset--color--muted); }
.il-partners__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.il-partners__people figure { margin: 0; }
.il-partners__people img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(34, 38, 36, .1); }
.il-partners__people figcaption { margin-top: .6rem; font-size: .875rem; color: var(--wp--preset--color--muted); }
.il-partners__people figcaption strong { display: block; font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: 1.25rem; color: var(--wp--preset--color--ink); }

/* Buttons: light (limestone on jade) and outline. */
.wp-block-button.is-style-light > .wp-block-button__link { background: #f3f2ee; color: var(--wp--preset--color--jade); }
.wp-block-button.is-style-light > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--jade-deep); }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1px solid currentColor; background: transparent; color: inherit; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #f3f2ee; color: var(--wp--preset--color--jade); }

/* Section heading rows. */
.il-head-row { gap: 1rem 2rem; margin-bottom: .5rem; }
.il-head-row h2 { margin: 0; }
.il-intro { max-width: 52ch; margin: 0; color: var(--wp--preset--color--muted); font-size: 1.125rem; }
.il-more { font-weight: 500; color: var(--wp--preset--color--jade); text-underline-offset: .35em; }
.il-muted { color: var(--wp--preset--color--muted); }
.il-note { font-size: .875rem; }

/* How a matter works: four steps on hairlines, numbered because they happen in order. */
.il-steps { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .il-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .il-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.il-step { padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--ink); }
.il-step__num { margin: 0; font-family: var(--wp--preset--font-family--serif); font-weight: 300; font-size: 4rem; line-height: 1; color: var(--wp--preset--color--jade); }
.il-step h3 { margin: 0; font-size: 1.5rem; }
.il-step__text { margin: 0; color: var(--wp--preset--color--muted); }

/* Photos in sections. */
.il-photo { margin: 0; }
.il-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.il-photo--tall img { aspect-ratio: 4 / 5; margin-top: 1.5rem; }

/* Consultation band: black-and-white concrete under a jade wash. */
.il-band { background: linear-gradient(rgba(15, 61, 53, .9), rgba(15, 61, 53, .9)), url("assets/images/band-concrete.jpg") center / cover; }
.il-band__inner { text-align: center; }
.il-band__title { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem) !important; }
.il-band .wp-block-buttons { justify-content: center; }

/* Page bands: the jade title band at the top of inner pages. */
.il-page-band h1, .il-page-band .wp-block-post-title { margin: 0; font-weight: 400; line-height: 1.05; max-width: 20ch; }
.il-page-head { display: grid; gap: 1.25rem; }
.il-band-lead { margin: 0; max-width: 46ch; color: #d9e2de; }

/* Long-form text. */
.il-prose { font-size: 1.125rem; line-height: 1.7; }
.il-prose > * { max-width: 68ch; }
.il-prose h2 { font-size: 1.875rem; font-weight: 400; margin-top: 2.75rem; }
.il-prose a { color: var(--wp--preset--color--jade); }
.il-lede > p:first-child { font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.4; }
.il-lead { color: var(--wp--preset--color--muted); }
.il-back { margin: 0 0 2rem; font-size: .9375rem; font-weight: 500; }
.il-back a { color: var(--wp--preset--color--jade); }
.il-lawyer-page .wp-block-post-title { margin-top: 0; font-weight: 400; line-height: 1.05; }
.il-lawyer-page__guides { margin-top: 3rem; font-size: 1.75rem !important; font-weight: 400; }

/* Fee tables: hairline rows, prices aligned right. */
.il-table table { border-collapse: collapse; width: 100%; table-layout: auto; }
.il-table th, .il-table td { padding: .9rem 0; border: 0; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; }
.il-table thead th { font-size: .8125rem; font-weight: 500; color: var(--wp--preset--color--muted); border-bottom-color: var(--wp--preset--color--ink); }
.il-table td:last-child, .il-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.il-table td:last-child { font-family: var(--wp--preset--font-family--serif); font-size: 1.25rem; }
.il-fee-notes { padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--line); }
.il-fee-notes h3 { margin-bottom: 0; }

/* Footer. */
.il-footer a { color: inherit; }
/* Stacked footer links get room to tap. */
.il-footer p:has(> br) { line-height: 2.1; }
.il-footer h2 { color: #bcc9c4; font-family: var(--wp--preset--font-family--sans); font-size: .875rem !important; font-weight: 500; }
.il-footer__name { margin: 0; font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: 2.25rem; line-height: 1.1; }
.il-footer__small { color: #bcc9c4; }
.il-footer__legal { padding-top: 1.5rem; border-top: 1px solid rgba(243, 242, 238, .2); }

/* Search results. */
.il-results .wp-block-post { padding: 1.25rem 0; border-top: 1px solid var(--wp--preset--color--line); }

/* Forms (Fluent Forms). */
.fluentform .ff-el-input--label label { font-family: var(--wp--preset--font-family--sans); font-weight: 500; font-size: .9375rem; color: var(--wp--preset--color--ink); }
.fluentform .ff-el-form-control { border: 1px solid #8a8e8a; border-radius: 2px; background: #fff; font: inherit; padding: .85rem 1rem; color: var(--wp--preset--color--ink); }
.fluentform .ff-el-form-control:focus { border-color: var(--wp--preset--color--jade); box-shadow: 0 0 0 1px var(--wp--preset--color--jade); }
.fluentform .ff-el-is-required.asterisk-right label::after { color: var(--wp--preset--color--vermilion); }
.fluentform .ff-btn-submit { background-color: var(--wp--preset--color--jade) !important; color: #fff !important; border-radius: 2px !important; padding: .95rem 1.6rem !important; font: 500 .9375rem/1.2 var(--wp--preset--font-family--sans) !important; }
.fluentform .ff-btn-submit:hover { background-color: var(--wp--preset--color--jade-deep) !important; opacity: 1 !important; }

/* Elementor headings follow the theme's light serif. */
.elementor .elementor-heading-title { font-optical-sizing: auto; }
.elementor h2.elementor-heading-title { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.875rem) !important; font-weight: 400 !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The credentials list spans the wide width (the band's constrained layout would narrow it). */
.il-credentials-band > .il-credentials { max-width: var(--wp--style--global--wide-size, 1280px) !important; }

/* Phones: the logo stands alone (no wordmark), the header button stays on one line, and the hero
   photo becomes a short landscape strip under the text. */
@media (max-width: 599px) {
	.il-wordmark { display: none; }
	.il-header .wp-block-button__link { padding: .7rem 1rem; white-space: nowrap; }
	.wp-block-image.il-hero2__photo, .wp-block-image.il-hero2__photo img { min-height: 0; aspect-ratio: 16 / 10; }
}