/* ==========================================================================
   Kakateeya — Elementor bridge

   The page is built from stock Elementor containers and widgets, so every
   element stays selectable, editable and draggable in the editor. This sheet
   sits between Elementor's frontend CSS and the design system in main.css:

   - it resets a container to a plain, spacing-free box, so the design class a
     container carries decides its layout (main.css loads after this file and
     therefore wins for anything it declares);
   - it re-states the design's element styles against the markup Elementor's
     widgets actually print, because a widget's CSS classes land on its
     wrapper rather than on the tag inside it.

   Anything set from the Elementor panel is written with a higher specificity
   than every rule here and simply wins, so layout, spacing, colour and
   background all stay editable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Container reset
   -------------------------------------------------------------------------- */

/* A container starts as a plain block with no gap and no padding. Design
   classes in main.css re-declare display, gap and padding where the layout
   calls for it. */
.e-con{
	display:block;
	--gap:0px;--row-gap:0px;--column-gap:0px;
	--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
}

/* Elementor's full-width containers force 100%; the page gutter needs its own
   width, and this selector outranks both. */
.e-con.container{
	width:min(var(--max),calc(100% - 40px));
	max-width:min(var(--max),calc(100% - 40px));
	margin-inline:auto;
}

/* Photo placeholders ------------------------------------------------------
   The grey fill, the dashed frame and the "photo goes here" caption belong to
   the placeholder, not to the tile. Delete the caption widget in Elementor —
   or drop an Image widget in its place — and the tile becomes a plain photo
   box showing whatever background image is set on it. */
.e-con.photo-box:not(:has(.placeholder)){background:none}
.e-con.photo-box:not(:has(.placeholder)):after{content:none}
.e-con.news-thumb:not(:has(.elementor-widget)){background:none}

/* --------------------------------------------------------------------------
   2. Widgets
   -------------------------------------------------------------------------- */

/* Headings ---------------------------------------------------------------
   Elementor resets every heading to line-height:1, which the design does not
   want, and it does so at a specificity the design's bare-tag rules cannot
   reach — so the design's values are restated here instead. */
.elementor-widget-heading .elementor-heading-title{line-height:1.65}
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title{
	line-height:1.1;letter-spacing:-.035em
}
.values-statement .elementor-widget-heading h2.elementor-heading-title{line-height:.97}

/* In the original markup this label is an inline span, so its line box takes
   the card's line-height rather than its own smaller one. */
.e-con .elementor-widget.news-date{line-height:1.65rem}
.brand .elementor-heading-title{line-height:1.15}

/* Elementor zeroes the block margin of every widget inside a container. These
   design classes sit on a widget wrapper and carry their own spacing, so it is
   handed back at the same specificity. */
.e-con .elementor-widget.card-icon{margin-block-end:23px}
.e-con .elementor-widget.motto{margin-block-start:18px}
.e-con .elementor-widget.academic-tag{margin-block-start:18px}

/* Buttons ---------------------------------------------------------------- */
.kkt-btn .elementor-button-wrapper{display:inline-flex}
.kkt-btn .elementor-button{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	min-height:48px;padding:13px 21px;border-radius:999px;font-weight:850;
	font-size:1rem;line-height:1.65;letter-spacing:normal;
	border:1px solid transparent;transition:.25s;cursor:pointer;
	background-color:transparent;color:inherit;text-shadow:none;box-shadow:none
}
.kkt-btn .elementor-button:hover,
.kkt-btn .elementor-button:focus{transform:translateY(-2px)}
.kkt-btn .elementor-button-content-wrapper{gap:0}

/* A row container tells its widgets to grow; buttons keep their own width. */
.e-con > .elementor-widget.kkt-btn{flex-grow:0;align-self:auto;width:auto}

.kkt-btn-primary .elementor-button{
	background-color:var(--blue);color:#fff;box-shadow:0 9px 25px rgba(8,124,193,.2)
}
.kkt-btn-primary .elementor-button:hover,
.kkt-btn-primary .elementor-button:focus{background-color:var(--blue-dark);color:#fff}

.kkt-btn-green .elementor-button{background-color:var(--green);color:#fff}
.kkt-btn-green .elementor-button:hover,
.kkt-btn-green .elementor-button:focus{background-color:var(--green);color:#fff}

.kkt-btn-light .elementor-button{background-color:#fff;color:var(--blue-dark)}
.kkt-btn-light .elementor-button:hover,
.kkt-btn-light .elementor-button:focus{background-color:#fff;color:var(--blue-dark)}

.kkt-btn-outline .elementor-button{border-color:rgba(255,255,255,.45);color:#fff}
.kkt-btn-outline .elementor-button:hover,
.kkt-btn-outline .elementor-button:focus{background-color:#fff;color:var(--blue-dark)}

/* Mission checklist ------------------------------------------------------- */
.kkt-mission .elementor-icon-list-items{display:grid;gap:10px;margin-top:4px;padding:0}
.kkt-mission .elementor-icon-list-item{
	display:flex;gap:11px;align-items:flex-start;width:100%;padding:0;margin:0;
	color:var(--muted);font-size:.86rem;line-height:1.65
}
.kkt-mission .elementor-icon-list-item:before{
	content:"\2713";width:21px;height:21px;flex:0 0 21px;border-radius:50%;
	background:var(--green-light);color:var(--green);
	display:grid;place-items:center;font-size:.68rem;font-weight:900
}
.kkt-mission .elementor-icon-list-item:hover{color:var(--muted)}
.kkt-mission .elementor-icon-list-icon{display:none}
.kkt-mission .elementor-icon-list-text{
	padding-inline-start:0;color:inherit;font-size:.86rem;line-height:1.65
}

/* Document list ----------------------------------------------------------- */
.e-con.disclosure-item{
	display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;
	border:1px solid var(--line);border-radius:16px;padding:17px 18px;
	color:var(--blue-dark);font-weight:780;transition:.2s;text-decoration:none
}
.e-con.disclosure-item:hover{border-color:#9fcde2;background:var(--sky)}

/* Images ------------------------------------------------------------------ */
.elementor-widget-image img{display:block;max-width:100%;height:auto}

/* --------------------------------------------------------------------------
   3. Editor canvas
   -------------------------------------------------------------------------- */

/* Empty structural containers stay grabbable in the editor. */
body.elementor-editor-active .e-con:empty{min-height:40px}

/* --------------------------------------------------------------------------
   4. Contact Form 7
   -------------------------------------------------------------------------- */

/* CF7 wraps the form in its own div; the design's panel styling lives on the
   form element itself, which the shortcode's html_class puts it on. */
.wpcf7{width:100%}
.wpcf7 .form{margin:0}

/* CF7 wraps every field control in a <span class="wpcf7-form-control-wrap">,
   which would otherwise break the design's full-width inputs. */
.form .wpcf7-form-control-wrap{display:block;width:100%}
.form .wpcf7-form-control-wrap input,
.form .wpcf7-form-control-wrap select,
.form .wpcf7-form-control-wrap textarea{
	display:block;width:100%;padding:12px 13px;border:1px solid #dce3e7;border-radius:11px;
	outline:0;background:#fff
}
.form .wpcf7-form-control-wrap input:focus,
.form .wpcf7-form-control-wrap select:focus,
.form .wpcf7-form-control-wrap textarea:focus{
	border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,124,193,.1)
}
.form .wpcf7-form-control-wrap textarea{min-height:120px;resize:vertical}

/* Validation text, sized to sit under a field without shifting the grid. */
.form .wpcf7-not-valid-tip{
	display:block;margin-top:6px;color:#c0392b;font-size:.72rem;font-weight:700
}
.form .wpcf7-not-valid{border-color:#c0392b}

/* The response line stands where the design's status paragraph did: always in
   the layout, but weightless until Contact Form 7 puts a message in it. */
.wpcf7 form.form .wpcf7-response-output{
	display:block;margin:12px 0 0;padding:0;border:0;background:none;
	font-size:.76rem;line-height:1.65;color:#687983
}
.wpcf7 form.form.sent .wpcf7-response-output{color:#2f6b2c;font-weight:800}
.wpcf7 form.form.invalid .wpcf7-response-output,
.wpcf7 form.form.failed .wpcf7-response-output,
.wpcf7 form.form.aborted .wpcf7-response-output,
.wpcf7 form.form.spam .wpcf7-response-output{color:#a5372a;font-weight:800}

/* The textarea keeps the design's height rather than CF7's row count. */
.form .wpcf7-form-control-wrap textarea{height:120px}

/* Submit button and CF7's inline loading spinner, side by side on one row. */
.form .kkt-submit{display:flex;align-items:center}
.form input.wpcf7-submit{width:auto;display:inline-flex;line-height:1.65;padding:13px 21px}
.form .wpcf7-spinner{margin:0 0 0 12px;flex:0 0 auto}

/* Honeypot stays out of sight but reachable by bots. */
.form .kkt-honeypot{
	position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden
}