/* ==========================================================================
   OOGLE - WORDPRESS ADJUSTMENT LAYER

   Loaded last, after tokens, styles and art. Its only job is the seam: the
   places where GeneratePress' structure, the block editor's output and
   Gravity Forms' controls meet a design system that was written for markup
   Oogle authored completely.

   Rules for this file:
   1. Nothing here re-states a design decision. Every value is a token from
      tokens.css. A hard-coded colour or size in this file is a bug.
   2. No !important is added to win a specificity argument. Oogle's sheets
      load after GeneratePress, so source order settles equal-specificity ties
      on its own.
   3. Every block says what it is settling and why, because in six months the
      reason is the only thing that makes it safe to delete.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GENERATEPRESS STRUCTURE

   GeneratePress centres and pads .site-content for a conventional document.
   Oogle's sections are full-bleed and centre themselves with .wrap, so the
   outer container has to stop constraining them. .wrap is untouched and still
   owns the measure.
   -------------------------------------------------------------------------- */
.oogle-page .site-content,
.oogle-page .content-area,
.oogle-page .site-main,
.oogle-page .inside-article {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* #page carries GeneratePress' container width, 1200px by default. That is
   the outer boundary, and it was the one that mattered: with it in place the
   design system's own measure could never reach its 1280px, so every panel on
   every page rendered 1085px wide instead of 1280, and the service hero's
   headline came out at 58.9px instead of 66.5px because .phero-copy is
   container-type: inline-size and its h1 is capped at 12.5cqi. One container
   nobody could see was resizing the type.

   .wrap is the single measure for this design system and it is the only thing
   that should own the page's width. Doing this in CSS rather than in the
   Customizer keeps it out of reach of a settings change. */
.oogle-page #page,
.oogle-page > .site.grid-container {
  max-width: none;
  margin: 0;
  padding: 0;
  width: auto;
}

.oogle-page .site-content { display: block; }
.oogle-page .separate-containers .site-main { margin: 0; }

/* --------------------------------------------------------------------------
   2. EDITOR CONTENT

   The content area carries .prose, which is the design system's own editorial
   treatment: the dash marker on unordered lists, the tabular counter on
   ordered ones, underlined links, the heading rhythm. That is what stops the
   global element reset in styles.css stripping bullets and margins out of
   block content, and it does it with the site's own design rather than by
   restoring browser defaults.

   What is left is the handful of block classes .prose has never met.
   -------------------------------------------------------------------------- */
.prose > .wp-block-image { margin-top: var(--s7); }
.prose .wp-block-image img { border-radius: var(--radius-inset); }
.prose figcaption { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-faint); }
.prose .wp-block-quote { padding-left: var(--s5); border-left: 2px solid var(--mark); }
.prose .wp-block-separator { margin-block: var(--s9); border-top: 1px solid var(--line); }
.prose .wp-block-table { display: block; overflow-x: auto; }
.prose .wp-block-table td,
.prose .wp-block-table th { border: 1px solid var(--line); padding: var(--s3) var(--s4); }

/* A core group block inside .prose puts its children in an inner container,
   which makes them grandchildren and stops `.prose > * + *` matching. Oogle's
   own prose block renders one element and does not have this problem; this
   rule is here so a group dropped in by hand still reads correctly. */
.prose > .wp-block-group__inner-container > * + * { margin-top: var(--s5); }
.prose > .wp-block-group__inner-container > h3 { margin-top: var(--s9); }
.prose > .wp-block-group__inner-container > h3:first-child { margin-top: 0; }

/* A wide or full-aligned block inside .wrap has nothing to be wide against.
   Give it the gutter back rather than let it push the page sideways. */
.prose .alignwide,
.prose .alignfull { max-width: 100%; margin-inline: 0; }

/* --------------------------------------------------------------------------
   3. GRAVITY FORMS

   styles.css resets button and list at element level, which is right for
   Oogle markup and wrong for a plugin that ships its own controls. These
   rules hand Gravity Forms back what the reset took, in Oogle's design rather
   than the plugin's: the same border, radius, padding, focus ring and error
   colour that .f already uses on the static build's intake forms.
   -------------------------------------------------------------------------- */
.gform_wrapper ul,
.gform_wrapper ol { padding: 0; list-style: none; }

.gform_wrapper .gform_fields { display: grid; gap: var(--s5); }

.gform_wrapper .gfield_label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  color: var(--ink-2);
}

.gform_wrapper .gfield_required { color: var(--fault); }
.gform_wrapper .gfield_description { font-size: var(--t-xs); color: var(--ink-4); }

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 15px;
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-input);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-body);
  transition: border-color var(--d-state) var(--ease), box-shadow var(--d-state) var(--ease);
}

.gform_wrapper textarea { min-height: 132px; resize: vertical; line-height: 1.55; }

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-film-2);
}

/* V5.14's rule, and the reason for it: a brand glow measures 1.21:1 against
   the page and is not a focus indicator. The glow stays, the ring comes back
   on top of it. */
.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: var(--fault); }

.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors { color: var(--fault); font-size: var(--t-xs); }

/* The submit control is a <button> on Gravity Forms 3, and the element reset
   flattened it to bare text. Both shapes get the Oogle button. */
.gform_wrapper .gform_button,
.gform_wrapper button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--blue);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  cursor: pointer;
  transition: background var(--d-tap) var(--ease);
}

.gform_wrapper .gform_button:hover,
.gform_wrapper button[type="submit"]:hover { background: var(--blue-deep); }

/* Radio and checkbox groups, as the pill controls the intake forms use. The
   border is the control boundary, which is what satisfies 1.4.11. */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox { display: flex; flex-wrap: wrap; gap: var(--s2); }

.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: var(--w-mid);
  cursor: pointer;
  transition: border-color var(--d-tap) var(--ease), background var(--d-tap) var(--ease), color var(--d-tap) var(--ease);
}

.gform_wrapper .gfield_radio label:hover,
.gform_wrapper .gfield_checkbox label:hover { border-color: var(--line-2); background: var(--paper-2); }

/* --------------------------------------------------------------------------
   4. ADMIN BAR

   The header is sticky and the admin bar is fixed chrome above it. Without
   this the two overlap for every logged-in editor.
   -------------------------------------------------------------------------- */
.admin-bar .hdr,
.admin-bar .mnav { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .hdr,
  .admin-bar .mnav { top: 46px; }
}

/* --------------------------------------------------------------------------
   5. THE DARK CALL TO ACTION

   V5.22 wrote these two as inline style attributes on /get-help/ and
   /start-a-project/. Inline styles are the reason the Content-Security-Policy
   carries style-src 'unsafe-inline', and a block cannot carry one anyway
   without handing an editor a style attribute to break. Two named rules.
   -------------------------------------------------------------------------- */
.dark-cta-grid { gap: var(--s7) var(--s8); align-items: center; }
.dark-cta-act { justify-content: flex-end; }

@media (max-width: 900px) {
  .dark-cta-act { justify-content: flex-start; }
}

/* A framed standing image. V5.22 wrote the frame and the fit as inline styles
   on the element; a block cannot carry those without handing an editor a style
   attribute to break, so they are a class. */
.oogle-figure { padding: 0; overflow: hidden; }
.oogle-figure-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   6. MIGRATION SCAFFOLDING

   A contextual link whose destination has not been migrated yet renders as its
   own text rather than as a dead link. It should read as ordinary prose, not
   as a broken control, so it takes the surrounding colour and nothing else.
   On a fully migrated site nothing matches this rule.
   -------------------------------------------------------------------------- */
.oogle-pending-link { color: inherit; text-decoration: none; }